alt Hacker NewsLiftKit – UI where "everything derives from the golden ratio"
Comments
Hi everyone, I'm the creator of LiftKit. This project is EXTREMELY early and, as everyone has pointed out, not ready for production use. It's a solo project I work on in my free time. I'm a self-taught, so a lot of the weird choices you're seeing can be attributed to the decisions of someone who had never built something like this before.
LIFTKIT IS FREE AND OPEN SOURCE. The website's just out of date.
https://github.com/Chainlift/liftkit
Most of the feedback folks are providing here was raised about 6 months ago on Reddit and is actively being worked on. You can check it out here: https://www.reddit.com/r/webdev/comments/1m41arx/i_spent_18_...
KNOWN ISSUES INCLUDE: - Docs are a nightmare, screenshots are ridiculous instead of real components - Components are inaccessible spaghetti
CURRENT PRIORITIES: - Rebuilding with radix primitives - Improving docs
TO LEARN MORE: - This youtube video explains the gist of the system (though it's also a little outdated) https://www.youtube.com/watch?v=r1DANFZYJDw
I'll reply to folks as best I can.
Here's a tip: any time you've got before/after screen grabs, don't do this thing where you've got to drag a line to switch between the two, don't have a fade, don't have a sliding transition, or anything like that. Just have it display one, then have a single button that you click to have it immediately display the other. Then when you click the button again, it goes back to displaying the first one again. Click, click, click - and your eyes do all the work for you.
(Not unrelated: answer from Andrei Herasimchuk at https://www.quora.com/Why-does-Adobe-Photoshop-differentiate...)
Also: I can't work out which image is which. Taking the first image as an example: we've got MATERIAL-STYLE on the left, and LIFTKIT on the right. But what's the left? Does this mean that when you drag the line to the right, revealing the left image, you're looking at MATERIAL-STYLE? Or does this mean you see MATERIAL-STYLE when you drag the line to the left?
(This might seem like pointless quibbling, but this thing bills itself as the The UI Framework for Perfectionists.)
I thought this was an unhinged parody of a design site, kinda surprised it's a real thing. Unfortunately the design isn't for me, things look off center and the overall "weight" of components feels off.
With the optical correction none/top thing, is that manually measuring the height of capital letters to correctly space everything, or just relying on the height of the font to be correct and respected in the glyphs? Because having worked with the internals of fonts, a lot of them just make up numbers for stuff and then don't actually respect them. You can see how the glyphs don't have to actually abide by any of the numbers from the h in "Checklist", which extends above the capital letters. It makes the font look better, but it makes them a nightmare to work with
I wouldn't trust a UI framework where all of the components are shown as images instead of instances of the actual UI framework...
One tiny thing I don't see many UI libraries do when loaded with rounded corners: fix nested rounded boxes by adding the size of the gap between the outer and inner boxes to the border radius. Otherwise, you end up with the slightly off-kilter appearance of the snackbar component for example. [0] Chrome recently added this two-up pane layout for tabs, and it has this exact issue as well. [1]
I tried to find pricing for it (the top "contact sales" is a no-starter; too much initial friction. Just tell me how much it costs?! At the footer is a pricing calculator... I asked for pricing for 10 top-level pages and 5 sub-level pages (they explain the difference)... came out to a whopping $16,500 (you're reading that right... SIXTEEN THOUSAND). No thanks.
- put an agent with it and that would make for one hell of a bolt, lovable and v0 competitor that only generates golden ratio UIs
You got some shitty comments in here but you handled them well. While I think there is _some_ valid criticism, I think what you've built is pretty cool. I'd like to be able to test this without next JS. Is a CDN option planned for those wanting a quick start?
There is a great research paper on the topic https://pmc.ncbi.nlm.nih.gov/articles/PMC10792139/#:~:text=T...
> In LiftKit, everything derives from the golden ratio, from margins to font size to border radius and beyond. Everything renders in perfect proportion to everything else, creating a unique sense of harmony you can’t get anywhere else.
Not sure if this is irony or not.
I'd expect the website for a design system to look beautiful (or oddly satisfying, if that's the goal here) but this one doesn't. Tailwind's website looks better.
While the golden ratio thing is a bit of a gimmick, the components look gorgeous and really well laid out
> Confusing. Inscrutible. But groundbreaking if we can pull it off.
You know what gets lift? Correct spelling (inscrutable)! Unless they chose that word specifically to misspell but that's meeting more than halfway.
Looks like the work of modern Pythagoreans
Doesn't look bad but it's not semantic and using utility classes like tailwind
Interesting idea, but I haven't found a compelling reason that phi is inherently superior, aesthetically speaking. Seems more like a marketing spiel.
That said, it still looks good.
Cool stuff, I think I'll never be able to unsee the extra top padding all over the web now haha
I don't even know if the golden ratio itself is that magical, but I do see a lot of value in picking one ratio and sticking to it everywhere.
If the site stutters when I scroll in my browser [1], it's a great endorsement for the underlying library, right?
[1] M3Pro, Firefox. No, I'm not trying in Chrome.
Pepsi would love it. https://www.goldennumber.net/wp-content/uploads/pepsi-arnell...
"golden ratio" my ass, excuse my french, but you should let the design speak for itself, and the design here is just mediocre at best.
What a weird joke of a company is this.
ok npm. so it's a web thing. I had hoped it would be a UI kit for computers
Things I look for in a UI library:
1. Clean, expressive interface, 2. Extensive documentation.
That being said, good on you for shipping! I would like to try it just for the mystery factor.
just want to say the website is VERY good looking imo
This scrolls alright in Chrome but lags horribly when scrolling on Firefox. Especially when the larger animations come into view.
Seems like a good project, too bad it uses next.js
Sorry to pile on, but I also think that changing the background color in the before/after feels like you're purposefully trying to make the before one look worse. Like when in weight loss photos people don't smile and pose nicely in the before photos but they do in the after.
That's pseudoscientific nonsense for people who like to look at pictures with spiral overlays and go "woah, everything is connected!"
Wow AGPL for CSS ui framework!!
Just in time for Steel Ball Run
>In LiftKit, everything derives from the golden ratio,
I don't think the authors realise the extent to which their product, which looks well made and useful, is being completely undermined with this nonsensical pseudoscience.
I don't think their homepage looks good, and for so much attention to detail the padding around text titles and other spacing, specially on mobile, doesn't look good. Not of the elements they showcase but of their own landing page.
The creator of this is a friend of mine and just gonna chime in that he’s a fantastic and talented dude. Nice surprise to see his project listed here! I think he’s working on something new called Liftkit Studio too I’m looking forward to.
He has a cool YouTube channel too. Check out “The Secret Science of Perfect Spacing”
https://youtu.be/9ElrcTtAxzA?si=kbAzQDGQSCCqymTO
Party on
I can't tell which one is supposed to be good, and the design is not intuitive enough for me to know which is the LiftKit (the one I'm supposed to prefer).
I'll stick to LLM design, thank you very much
I really wish they would start with "this is for next.js/react".
I had to dig through the docs and get to the installation instructions just to find out that it's React only.
It looks great, but I'm always confused why design system folks wouldn't base everything off web components, which work with almost any framework.
[dead]
When we designed Chrome, since minimalism was our thing and screens used to be small, A LOT of time was spent on the total vertical space - thin titlebar, slightly bigger tabstrip, and a large toolbar. Lots of discussion, lots of questions
Telling people the height ratios between them followed the golden ratio was a very convenient way to shortcut the bikeshedding and get to "aha, very nice"
The trick was it didn't follow the golden ratio at all because the golden ratio is not some magic number that leads to balance and peace - lighting, rounding, color, and visual strength all dramatically outweigh it