Painting Wheel | Playground A specialized painting carousel that rotates like a wheel.

Play with it here:

oluwasefunmi.com/playground/painting-wheel

Carousel Painting Wheel, made with CSS transforms only.

Yayyy first PR merged

Seeing how far I can push retend's universal JSX renderer, ala opentui

Terminal UIs are really really cool, I can see why people like them.

I wish I was here more often.

Dropping the model less than 10 minutes after Anthropic announced 4.6 was objectively funny

Claude Code is like a genie that literally interprets your wishes until you regret it. Claude + Git is like a genie with an undo button

And that is why agentic coding is the first agentic thing that works

Lol I use this for transition speeds

--fast
--faster
--fastest
--bit-faster
--much-faster
--slow
--slower
--slowest

Niceee!

Many such cases

CSS Keyboard | Playground A 3D keyboard implementation using pure CSS transformations.

Play with it here: oluwasefunmi.com/playground/c...

Safari/WebKit has performance issues for reasons I don't even understand. I'll try to fix it tomorrow.

Mechanical Keyboard, made entirely with CSS transforms

Oh? Congratulations!

It's not DOM based

You can subscribe to @ryansolid.bsky.social on YouTube, the creator of Solid, he does really detailed 6 hr streams on everything related to web performance and framework API design

Idk, I am going to call that into question. I don't think diffing is slower. Recreating DOM nodes is VERY expensive.

But this is very impressive ngl, especially the SSR support. I'll try it out the second I get the chance.

I'm thinking he got hacked? Seems a bit bizarre

I have bad news

Interesting.

I wonder though, if there is no diffing and every update reruns the return function ( like in Remix), does this mean the DOM nodes are destroyed and recreated on every update?

Oh come on! 😑

I spent a whole month recreating the overscroll stretch effect on Androids because it didn't trigger on nested divs

Should have just waited.

3D Marquee | Playground Interactive, 3D marquee, made with pure CSS

Play with it here (doesnt work on Firefox yet): oluwasefunmi.com/playground/t...

Halo Marquee in CSS, using offset-path and backface-visibility

Okay boss

A screenshot of the Chrome DevTools Animations panel showing two purple "moveAlongPath" animation tracks. Red triangle warnings appear on the corners of the first track, indicating performance issues.

Thanks for the reply

For some properties, I get the error on the first animation, but its gone when it replays. Is this expected behavior?

So clip-path, for example, is hardware accelerated, but not always?

This is useful and I will be using it immediately

I'm only animating accelerated properties (opacity, clip-path, transform, offset-path, etc) in css

But I get "Composing failed, unsupported property" for most of them in Chrome devtools. Is there an error in my understanding

cc: @bram.us @kevinpowell.co @chriscoyier.net @nerdy.dev

You know that annoying experience on mobile websites where you need to find the little close button and can't swipe a menu closed?

The solution is simpler than you think.

With basic CSS scroll APIs, you can get built-in interruptible swipe gestures 🥳

I did this! 🤠

If you make the content sticky, use grid-area to do some ::after tricks and add scroll-timeline animations, it looks even cooler, with zero JS required.

Excited to see where the web is going.

It's actually pretty bullet proof!

The holdout is Firefox, because its scroll snapping is a bit too slow but it works nonetheless

Product Transition | Playground A product transition animation playground.

Try the interaction out here! I want to write a blog post on this later on.

Demo:

oluwasefunmi.com/playground/p...