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!
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.
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
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.
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.
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).
> 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've been thinking the same thing, and also started working on it in the past. Whenever I voiced this (like here) others came to me saying they also thought of it as at LEAST a part of "the solution". You seem to actually have something going here!
I'll take a look at your three links, a first look at [1] gives me goosebumps, you have no idea how happy I am that I'm not the only one that still has this top-of-mind, especially nowadays, no matter what side you lean towards.
I can't really find the words to convey my elation here, so you'll have to do with a simple "wow, thank you!".
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?)
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.
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.
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.
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.
- 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.
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.
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.
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.
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.
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.
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)
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.
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.
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...
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.
I'd like to suggest adding support for clicking and tapping for navigation. Having to drag feels unintuitive.
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".
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
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.
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
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
> 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've been thinking the same thing, and also started working on it in the past. Whenever I voiced this (like here) others came to me saying they also thought of it as at LEAST a part of "the solution". You seem to actually have something going here!
I'll take a look at your three links, a first look at [1] gives me goosebumps, you have no idea how happy I am that I'm not the only one that still has this top-of-mind, especially nowadays, no matter what side you lean towards.
I can't really find the words to convey my elation here, so you'll have to do with a simple "wow, thank you!".
That's awesome to hear :). I also appreciate knowing that I'm not the only one thinking about it.
interesting. I've been thinking about building something like this to provide a structured framework for social media discussions and argument chains.
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?)
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.
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-...
Maybe you are interested in slipshow: https://github.com/panglesd/slipshow/
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.
May I ask, what machine you are running it on? On my Celeron (4GB RAM), things are OK-ish.
Intel Core i7, 48 GB, Firefox.
Decidedly not "OK".
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.
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.
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.
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.
Alrighty. Well, I've got an i7-8850H @ 2.60GHz. I know it's at least a few years old.
I don't think it's very likely that his 48gb machine is over a decade old.
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.
I have a 64GB i7-3930K from 2012 next to me. It still worked in late 2024, and was faster than many modern computers.
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.
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.
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.
Agree, it's slugish on my M1 Pro/16GB on both Safari and Chrome.
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.
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.
Maybe a note keeping app?
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)
Make it themeable like Gabocorp[0] and the world will beat a path to your door.
[0]https://www.webdesignmuseum.org/gallery/gabocorp-1997
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.
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
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.
New feature request: support for nix flakes...
a brilliant idea in the correct direction of naturally-organic UI, but the example site is rather slow in Chrome on an M3 Air
Runs pretty ok on Chromium (degoogled) on Linux with 8GB ram spec.
This is very similar to the idea of Zooming User Interfaces (ZUI) https://en.m.wikipedia.org/wiki/Zooming_user_interface
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.
Maybe the arrow keys could have a different color if you can actually navigate in that direction.
In practice surprisingly similar to switching between apps and tabs on modern ios + mobile Safari.
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...
Kind of cool for a presentation deck. Sorely needs keyboard navigation support though.
are you aware of this prior implementation [0]? it's now defunct, but may give you some ideas!
[0] http://www.spicynodes.org
fun, but annoying to use. clearly not made for mobile!
Nice work. I wonder how the experience would be in VR.
Shades of ZigZag
[dead]
Nice!