Custom shader with React Three Fiber + Three.js to create a day night animation Code & demo → codesandbox.io/p/github/paulj…

With the experimental CSS scroll() function we can create native-like experiences in a browser. This pure CSS demo's weight is just 6kb 🤯 Try in responsive mode or device. Code + demo via CodePen.IO cdpn.io/pen/debug/oNJG… Chrome 117+, sorry no Safari (yet)

With Firefox 🔥 adding support for the :has() selector 🥳 here's a pure CSS demo of an interactive quiz using :has() in combo with form state and CSS animations Code + demo via CodePen.IO cdpn.io/pen/WNPLmBg

Pure CSS (zero JS) demo of scroll() with 3D transforms running at 60fps on Chrome Android (Pixel 6). When🤞 Safari iOS adds support for scroll() it will unlock a whole range of new possibilities for mobile experiences in a browser. Demo via CodePen.IO codepen.io/paulnoble/pen/…

Didier Catz Nice! 👏 If anyone's curious about *possible* ways to implement, here's a similar demo of a CSS-only draggable segment control w/ keyboard support. Code + demo via CodePen.IO codepen.io/paulnoble/pen/… Uses scroll timeline, snap scrolling and custom styled scrollbars.

Pure CSS implementation of Suno homepage feature using scroll() function and snap scrolling. Code + demo via CodePen.IO codepen.io/paulnoble/pen/…

CSS scroll-timeline animation of text rotating on a 3D arc. Text styled using CSS 3D transforms using a custom element < arc-text> Code and demo via CodePen.IO codepen.io/paulnoble/pen/…

Zero JS implementation of Apple Music's Top 100 Albums using CSS scroll-timeline, scroll-snap and counter. Code + demo via CodePen.IO codepen.io/paulnoble/pen/…

An (almost) pure CSS photo editing UI using scroll-timeline with keyframes interpolating custom properties in a filter() Code + demo via CodePen.IO codepen.io/paulnoble/pen/…

Prototyped a world 🌐 timezones UI w/ React, D3, Framer Motion, use-gesture. Demo → daynight-path.vercel.app Code → github.com/pauljnoble/day…

Another iOS 26 🤝 CSS demo — WebKit catching up to the modern web. → Scroll-driven animations keeping everything in sync with gesture → 3D card transforms with view() → Live background tinting → Progressive blur overlays …and zero JS Code and demo cdpn.io/pen/debug/Kwdz…

Tapered circle paths with svg codepen.io/paulnoble/pen/…

CSS clock (Braun BC17 × Paul Smith)