[HN Gopher] Show HN: FlakeUI
___________________________________________________________________
Show HN: FlakeUI
Author : tearflake
Score : 132 points
Date : 2025-03-03 05:29 UTC (1 days ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| alwa wrote:
| It reminds me of the glory days when "hypertext" was a term
| uttered with a straight face to great stroking of beards--
| HyperCard, exercises in nonlinear narrative, VRML-based
| "navigation," Apple eWorld [0] and the like.
|
| > _Would you like to bring a touch of adventurous spirit to your
| contents?_
|
| I personally would not, but I'm really glad people more
| adventurous than I are still exploring the periphery of UI
| design!
|
| [0] https://www.macworld.com/article/223467/remembering-
| eworld-a...
| freeamz wrote:
| Or that Apple space based file system back in the 80's.
|
| Try this a bit, it would be nice to be able to go directly to
| the grand-child, instead having to bring up the parent before
| going the child. Other wise can be a much better file naviation
| system then what we have. Especially on touch screen I would
| image.
| drops wrote:
| a brilliant idea in the correct direction of naturally-organic
| UI, but the example site is rather slow in Chrome on an M3 Air
| freeamz wrote:
| Runs pretty ok on Chromium (degoogled) on Linux with 8GB ram
| spec.
| anorak27 wrote:
| Reminds me of prezi[0]. It would be great if there is an open
| source version of prezi similar to reveal js.
|
| [0] https://prezi.com/p/p6evz0gdy5dr/ux-design-tips-for-
| product-...
| panglesd wrote:
| Maybe you are interested in slipshow:
| https://github.com/panglesd/slipshow/
| unalarmed wrote:
| I'd like to suggest adding support for clicking and tapping for
| navigation. Having to drag feels unintuitive.
| chipaca wrote:
| Thank you for the comment. I would not have understood "can be
| navigated using mouse" to mean "dragging".
|
| Also I hate that I can't select text on this. Probably because
| "dragging".
| miningape wrote:
| Exactly, clicking should be the default so the drag handler
| doesn't prevent users from highlighting text - I literally
| cannot read anymore without frantically double-
| clicking/dragging on the words in the text
| paxcoder wrote:
| I think it would be pretty nice to be able to use the keyboard
| to navigate the UI (left/right arrow keys to "orbit the
| content", up/down to "zoom").
|
| Using a pointer, I'd prefer to just be able to click on the
| oval to zoom into, maybe double-click to zoom back out a level,
| use the back button to go to the place I came from.
| mindcrime wrote:
| I really like this. And conveniently, I am just now working on
| creating a new personal website[1] + blog, and I could very well
| see using this for at least part of the site I'm building.
|
| The only nit that I really have is that my intuition was that I'd
| be able to select new "sections" (or "bubbles" or whatever
| they're called) by clicking or double clicking. Having to grab
| and drag isn't _bad_ but it violated the "principle of least
| surprise" for me a little bit. But not exactly a big deal.
|
| [1]: https://www.philliprhodes.name
| TechDebtDevin wrote:
| Nice!
| threekindwords wrote:
| are you aware of this prior implementation [0]? it's now defunct,
| but may give you some ideas!
|
| [0] http://www.spicynodes.org
| cdaringe wrote:
| fun, but annoying to use. clearly not made for mobile!
| remon wrote:
| There's a significant performance issue. There's no good reason
| for a few ovals and texts to stutter on my system. May be worth
| investigating.
| tearflake wrote:
| May I ask, what machine you are running it on? On my Celeron
| (4GB RAM), things are OK-ish.
| recursive wrote:
| Intel Core i7, 48 GB, Firefox.
|
| Decidedly not "OK".
| tearflake wrote:
| I'm sorry, I really wouldn't know what's happening there.
| On my Linux, Chromium works the best, Firefox can pass,
| Opera is a bit slower, and Epiphany (is that the name?)
| chokes a fair bit.
|
| On i3, Windows things seem fine - I tried Edge, Chrome, and
| Firefox.
|
| On Mac, I somehow managed to get it working based on Lambda
| Test web interface feedback, but I wouldn't know the real
| use performance.
| tracker1 wrote:
| i7 is meaningless... it could be a 4c/8t processor from
| over a decade ago that's slower then buttered toast today,
| or something much faster with big/little cores more
| recently.
| mvdtnz wrote:
| I don't think it's very likely that his 48gb machine is
| over a decade old.
| tracker1 wrote:
| Looks like it's an 8th Gen with mixed ram running single
| channel mode. The point stands though, the brand segment
| is meaningless over time.
|
| It's 5-6yo just before Ryzen got competitive with Intel.
| A current option should be noticeably faster.
| recursive wrote:
| I'm going to be honest. I don't understand Intel
| processor names, like at all. I thought i7 would give
| performance to a first order, but if that's not the case,
| I don't know how to tell what's in this machine.
| spartanatreyu wrote:
| Saying i7 is basically the same as saying you've got a
| car with 4 wheel drive.
|
| It doesn't say if the car is from the 60s or from a few
| years ago.
|
| You don't want to know if it's i3/i5/i7/i9, that's
| essentially useless.
|
| What you want to know is which generation it is.
|
| For example:
|
| Looking at a 1st gen i7:
|
| - The i7-920 released in 2008 which only has 4 cpu cores
| and runs at 2.66ghz
|
| Compared to a 14th gen i7:
|
| - The i7-14700k from 2023 which has 20 cpu cores, 12 of
| which can run at 4.3ghz and 8 of which can run at 5.6ghz.
|
| --------
|
| Basically the way the intel naming scheme has been is:
|
| "<i-number>-<gen-number><inter-gen-number><optional-
| letter>"
|
| - i-number (i.e. i3, i5, i7, i9) means rough idea of
| which features are included. For example: i3 is basic
| functionality, i7 will mean hyperthreading (although
| competition from AMD meant that this feature started
| become standard on all cpus)
|
| - gen-number: (i.e. 1st gen through to 14th gen) means
| basically what version the chip is. Kind of like an
| iPhone 1 vs an iPhone 14, big difference at the start
| then only incremental differences about 2/3rds of the way
| through.
|
| - inter-gen-number: (e.g. 400, 770, 900, etc...) means
| basically how good the chip in this generation is
| compared to other chips in this generation. Kind of like
| iPhone vs iPhone Pro, vs iPhone Pro Max.
|
| - optional letter: (e.g. nothing, K, F, etc...) means
| basically any other info you should know about this chip.
| For example: "K" means the chip can be overclockable
| (runs hotter and requires more electricity for better
| performance), or "F" means the integrated graphics on
| this chip doesn't work so it's getting sold for cheaper
| and you'll need an external graphics card to see things,
| etc...
|
| So the i7-14700k would be:
|
| - i-number = i7
|
| - gen-number = 14
|
| - inter-gen-number = 700
|
| - optional letter = k
|
| A 14th-gen i7, which will be more powerful than an
| i5-14600, and a "K" on the end meaning it can be
| overclocked so we'll charge a little more on this chip.
| recursive wrote:
| Alrighty. Well, I've got an i7-8850H @ 2.60GHz. I know
| it's at least a few years old.
| einpoklum wrote:
| In the author's defense - this is probably a prototype, hacked
| together without trying to optimize performance. You should not
| judge the idea by its realization's performance at this point
| in time.
| tearflake wrote:
| It is true that I plan a custom renderer with scripting
| support, to replace the HTML version. From the tests I
| performed by now, it can be smoother and faster than the
| current version. But it is yet to be seen how well would a
| substitution to HTML catch up with the current state of art
| CSS+HTML+JS.
| tearflake wrote:
| At some moment I had a version with cached bitmaps that
| simply flew fast and smooth. But, since HTML has some
| serious issues with rendering to bitmap from js, I had to
| pick the slower version with native real time HTML
| rendering.
| edu wrote:
| Agree, it's slugish on my M1 Pro/16GB on both Safari and
| Chrome.
| kstrauser wrote:
| Make it themeable like Gabocorp[0] and the world will beat a path
| to your door.
|
| [0]https://www.webdesignmuseum.org/gallery/gabocorp-1997
| QRe wrote:
| Kudos for building something new, fresh & exploring,
| experimenting.
|
| I don't see a scenario where this would be useful. It reminds me
| of exploded-view drawing but I don't see this being useful for
| textual content. Do you have an explicit use case? The example
| page, to me, looks very cluttered, overwhelming and IMO
| aesthetically unpleasing when reading on a mobile device.
| tearflake wrote:
| Maybe a note keeping app?
| runoisenze wrote:
| Nice work. I wonder how the experience would be in VR.
| settsu wrote:
| This reminds me of the time a few years ago when mind mapping
| sites and apps exploded into popularity among the... "technorati"
| and sort of slightly seep into the wider online awareness but
| then seemingly, just as quickly, disappear into the background
| noise of the internet (I'm terminally online to a degree,
| especially when it comes to tech news--and have a pretty decent
| general awareness of pop culture trends--and can't recall having
| seen the topic referenced since the trend faded. But perhaps I'm
| just not in the right circles?)
| fellowniusmonk wrote:
| People mistake a helpful "view" for a useful UI.
|
| None of these mind map, zoom first interfaces actually help
| with creating a global understanding.
|
| People take an occasionally helpful "view" for navigating items
| and then mistakenly believe it should be turned into an active
| interface for creation and editing.
|
| Graph/Mindmap views should only ever be a view and maybe a
| linking layer for nested text lists, actively operating in
| these interfaces is worse for global understanding and systems
| thinking.
|
| I suspect this is because mind maps don't actually map to how
| our brain stores information.
|
| Visual programming and even tools like KNIME work for stepwise
| workflow creation but they are not a good UI for new thinking,
| it's too much UI for novel idea generation and brainstorming,
| these interfaces are also useful for quickly understanding a DB
| structure.
|
| That's why they never take off and remain a niche tool for the
| small number of people who have brain structures that find them
| useful or are willing to bend themselves to an arbitrary
| interface.
| lacoolj wrote:
| Seems to be a navigational flaw here - you can't get to any of
| the intermediate "sections" without manually going back one by
| one (other than "Home" to get to the absolute top)
|
| Otherwise, this is pretty cool and would be great for one-way
| traversing (maybe a quiz/test would do well here)
| einpoklum wrote:
| I tried the example site. The way this notion is implemented
| right now, I don't see a benefit. One can barely see anything in
| the nodes other than the main one; nor can one distinguish them.
| TBH, even a tree of notes with titles, with collapse/expand
| controls, would probably have been more useful in emphasizing
| what FlakeUI offers.
|
| Verdict: thumb down.
|
| But - perhaps the example is only partial and perhaps this will
| develop into something more meaningful.
| chris_pie wrote:
| This is very similar to the idea of Zooming User Interfaces (ZUI)
| https://en.m.wikipedia.org/wiki/Zooming_user_interface
| waingake wrote:
| Have you seen / did you create this series on youtube? The final
| video lands on something very similar to this.
| https://youtube.com/playlist?list=PLsfH1Ahi4SzE-QmrsrtyZubGm...
| jamesrom wrote:
| Kind of cool for a presentation deck. Sorely needs keyboard
| navigation support though.
| humanfromearth9 wrote:
| New feature request: support for nix flakes...
| com2kid wrote:
| Super fun, but not being able to scroll text within an oval using
| the scroll wheel kinda sucks on desktop.
|
| The mobile UI is really slick though!
|
| I feel like this UI would be good for some sort of narrative
| game, where each oval is a room and things keep changing in each
| room.
| monkeydust wrote:
| Liked this more than expected. Here's my possible use case.
|
| In a work setting I am constantly juggling between
| excel,PowerPoint,word and bunch of online wiki style tools
|
| When I have to craft something that requires information from
| these tools, like many, I end up creating a PowerPoint
| presentation.
|
| Gets the job done but never feels ideal given the one way
| directional nature of it, yes you can hyperlink but gets messy
| for audience.
|
| This style of navigation could help especially where you are
| layering the information across multiple themes (each theme say
| is a node). As audience you might go deep into one node quickly
| then zoom back out to understand how that node interacts with
| another.
| thih9 wrote:
| In practice surprisingly similar to switching between apps and
| tabs on modern ios + mobile Safari.
| jeffhuys wrote:
| Makes me think of arguman[1] and kialo[2]. I discovered arguman
| maybe 10 years ago and have been thinking about it ever since.
| It's non-functional now but the source code is available. Maybe
| it's just my wishful thinking, but if we could map out every
| detail of an argument, maybe we could make progress faster, as a
| species. If this were incentivized well (like for instance
| polymarket), maybe with crypto rewards or something, this *
| _could*_ take off.
|
| [1] https://github.com/arguman/arguman.org - the website exists
| but is non-functional now
|
| [2] https://www.kialo.com - feels like a dumbed-down version of
| arguman
| bflesch wrote:
| interesting. I've been thinking about building something like
| this to provide a structured framework for social media
| discussions and argument chains.
| keyserj wrote:
| I think if we could improve our ability to easily & precisely
| communicate arguments, that would be huge for humanity's
| ability to deal with problems. I'm building a tool[1] that I'm
| hoping can help with this, maybe be a successor (in some ways)
| to something like Kialo.
|
| It's critically missing suggestions/approvals[2], and perhaps a
| simpler interface[3], but I think that, for arguments about
| problems/solutions, the idea of grounding arguments within a
| cause/effect diagram is really powerful both for getting on the
| same page and for making concrete progress towards improving a
| situation (rather than arguing for argument's sake).
|
| I'd be happy to get your thoughts on it if you have any (I'll
| be making a HN post about it sometime soon^TM).
|
| [1] https://ameliorate.app/
|
| [2] https://github.com/amelioro/ameliorate/issues/11
|
| [3] https://github.com/amelioro/ameliorate/discussions/541
| dvngnt_ wrote:
| Maybe the arrow keys could have a different color if you can
| actually navigate in that direction.
| ramesh31 wrote:
| Shades of ZigZag
| sebastianmestre wrote:
| Runs slow as hell on my phone. Around 10fps.
|
| My phone is not great but drawing some circles and some text
| should not take 100ms. On any device.
___________________________________________________________________
(page generated 2025-03-04 23:02 UTC)