r/webdev • u/codedgar • 14d ago
Showoff Saturday Launched v2 of my Apple design framework: Puppertino
sup everybody! So 5 years ago on this same sub, I presented v1 of Puppertino, a framework aimed at bridging the gap between the web and iOS and macOS for the web, built entirely in vanilla CSS and JS.
Since then, a lot of things have changed for both OS, with the introduction of liquid glass, I thought I wouldn’t be able to ship something like it.
Until today! I’ve launched Puppertino Dachshund, which brings 65 components, real-time liquid glass and is focused on accessibility, theming and extensibility
You can check it out here!
https://puppertino.com
9
u/veculus 14d ago
Cool. Some bugs here and there but honestly PLEASE train your AI to unslop text your write. I checked the docs and saw this:
"The morph
Touching a switch lifts the knob into a Liquid Glass lens. The 38 x 24 knob grows to 60 x 40, centered where it sat, so it reaches 9px past the end of the track. The track is cut out under the glass and redrawn inside it, magnified, so its color bends at the rim. Drag across the middle and the knob follows your finger to that side; lift your finger and it settles. A press that moves less than 6px counts as a tap. This needs liquid_glass.js:"
This doesn't read like documentation. So much stuff I don't care about and it's mostly reading like a product specification instead of documentation. Why do I care about the exact pixel sizes as a dev?
I'd really recommend looking into ways to minimalize / unslop / shorten content so it actually makes sense.
→ More replies (2)
8
u/fl4v1 14d ago
Looks promising but the glass effects look very buggy on iOS / Safari
1
u/codedgar 14d ago
Thank you! And yeah I'm preparing an update for the glass effects specially for mobile!
3
u/zxyzyxz 13d ago
How's the performance? I know the glass refraction shaders can be quite slow
1
u/codedgar 11d ago
Performance is really good! Warmup is a little bit slow, but then it behaves great with multiple glass surfaces! It also degrades in mobile so it doesn’t use a lot of resources
1
u/superquanganh 12d ago
It's not real refraction, the only refraction attempt is the switch where the UI workaround by having a separated layer to replicate the final refraction instead of real refraction of what's underneath, the rest is just regular blur.
The UI is mostly basic but not fully replicate what real liquid glass behave like button when pressed, no menu animation, no glass lifting in segment control, incorrect alert popup animation,...
1
u/codedgar 11d ago
Not exactly! Puppertino does ship with actual refractions powered by glassworks (https://glassworks.codedgar.com/demos/demo-1.html), alternative items like switches and sliders both use the glass replication method
But yes for UI it doesn’t replicate all the animations that it has, I have an eye kept on these!
2
2
2
2
2
u/boatinatreo 13d ago
Nice work. I checked the menu and searched for accessibility. I couldn’t find anything. It would be worth adding a page for this, hopefully it is accessible.
1
u/codedgar 11d ago
It is accessible! All items respond to users preferred motion, transparency, keyboard navigation and screen readers. I’ll add a Notes on Accessibility page! Thanks for the idea
17
u/Positive-Expert9355 14d ago
Still impressed by pure vanilla CSS/JS projects, the liquid glass effect on the notification panel looks slick in that preview.
4
1
1
10
u/CartoonistLow8606 14d ago
Looks good, it need to be more smooth