SHOWCASE

A WebGL fragment shader composited over real, selectable HTML. Move over it to bend light through the shader.

Fallback: without WebGL the DOM shows unshaded. The canvas uses pointer-events:none, so the HTML stays fully interactive.

animation-timeline: scroll() and view() drive animations off the compositor, with zero JS. Scroll inside the box.

Fallback: browsers without animation-timeline fall back to an IntersectionObserver that toggles a class.

Click a tile and it morphs into a detail view. The page tabs above also switch with startViewTransition.

Fallback: without the View Transitions API the swap happens instantly with a CSS fade.

An SVG displacement map fed into backdrop-filter bends whatever is behind the lens. Drag the lens around.

Fallback: browsers without backdrop-filter:url() (Safari, Firefox) get a blur-and-saturate frosted lens instead.

Each letter's weight and width follow your cursor distance, and an idle wave runs through the word.

Fallback: system variable fonts interpolate smoothly; static fonts step between weights 100 and 900.

A raymarched scene (glossy spheres orbiting a torus, with soft shadows) rendered in WGSL on WebGPU. Drag to orbit.

Fallback: when navigator.gpu is missing, the same scene renders in a GLSL WebGL fragment shader.

Depth layers use translateZ parallax while the CTA magnetically follows the cursor.

Fallback: on touch devices with no hover, the effects stay static and the tap still works.

The graphic stays pinned with position:sticky while the story steps scroll past and drive its state.

Fallback: sticky positioning is supported everywhere. With reduced motion the state changes without tweening.

Asymmetric bento tiles cascade in with spring easing and index-based delays. Hit replay to run it again.

Fallback: under reduced motion the tiles appear instantly.

A lerped dot-and-ring cursor that morphs over targets, plus small interactions: like, toggle, copy and check.

Fallback: on touch or coarse pointers the native cursor stays and the micro-interactions still work.

Tooltips are tethered to their trigger with anchor-name and position-anchor, and flip automatically with position-try-fallbacks.

Fallback: without anchor positioning (Firefox and Safari before 26), a small script positions each tooltip from getBoundingClientRect().

Dialogs and popovers animate in and out of display:none using @starting-style and transition-behavior: allow-discrete.

Fallback: browsers without @starting-style open and close the dialog instantly, with no animation.

A native snap carousel whose dots and arrows come from ::scroll-marker and ::scroll-button, with no JavaScript in supporting browsers.

Fallback: browsers without ::scroll-marker get dot and arrow buttons built in JavaScript; snapping stays native CSS.

Balanced headlines with no orphaned last word, plus animated gradient text through background-clip: text.

Fallback: text-wrap is a progressive enhancement, so browsers without it use normal greedy wrapping.

Registered custom properties let the browser interpolate gradient stop positions and colors, so the mesh moves with no JS.

Fallback: without @property the values jump instead of interpolating, and the gradient stays static.

A stroke-dashoffset line draw, then the path morphs between matching shapes by interpolating its coordinates.

Fallback: interpolation runs in JS, so it works everywhere. Reduced motion jumps straight to the final shape.

Your noise dissolve + RGB split eats through a static plate and reveals a live particle field — the same attractor sim as Approvals card 30 (WebGPU compute, with a 2D fallback).

Fallback: without WebGL, a CSS fade into the particle canvas. Without WebGPU the particles still run in 2D (same look as card 30’s fallback).

Blurred drifting color fields with an SVG feTurbulence grain overlay that jitters with steps().

Fallback: under reduced motion the mesh and grain freeze but still render.

The card adapts to its container, not the viewport. Drag the handle to resize; it changes layout at 300px and 460px.

Fallback: @container is Baseline. Older browsers keep the stacked mobile layout.

Seamless looping rows in opposite directions, with mask-image edge fades and pause on hover or focus.

Fallback: under reduced motion the ticker stops and becomes a horizontally scrollable row.

A badge travels a closed Bézier with offset-path and offset-distance. No JS keyframes — the browser owns the motion.

Fallback: without offset-path the badge sits centered; reduced motion freezes it mid-orbit.

Details panels animate height:auto with interpolate-size: allow-keywords — no measured pixel heights, no max-height hacks.

Fallback: without interpolate-size the panels open instantly at full height.

A polygon clip-path morphs between two shapes on hover and focus. Pure CSS, no SVG path interpolation.

Fallback: under reduced motion the shape snaps with no tween.

A progress bar is bound to a horizontal scroller with animation-timeline: scroll(nearest inline). Swipe the gallery.

Fallback: without animation-timeline a scroll listener sets --p on the bar.

One hue drives a ladder of related colors through oklch(from …). Drag the slider and every swatch recalculates in CSS.

Fallback: without relative color syntax the swatches use plain oklch() stops.

Cards sit in a preserve-3d stage and rotateY away from the active index. Arrow keys and buttons step through the stack.

Fallback: under reduced motion the active card swaps without the rotate tween.

A radial mask expands from the pointer so the hero reveals through a soft circular wipe. Move across the card.

Fallback: without mask-image the reveal fades in with opacity.

A 2D canvas leaves glowing trails that bloom toward the pointer. No WebGL — just requestAnimationFrame and soft brushes.

Fallback: under reduced motion a static constellation is drawn once.

Two cards share markup but keep separate light and dark themes with @scope, so styles never leak across the island.

Fallback: without @scope the themes are applied with plain class selectors.

A dark circle follows the pointer with mix-blend-mode: difference, inverting whatever it covers. Move across the type.

Fallback: on touch / coarse pointers the spotlight parks in the corner and still inverts.

Tap a card and its thumbnail morphs into the detail hero through a shared view-transition-name. The demo is same-document; the code box shows the cross-document version.

Fallback: without document.startViewTransition (Firefox before 144), or with reduced motion, the views swap instantly.

Shimmering placeholders hold the layout, then the real cards enter from display:none with @starting-style and an index-based stagger. No keyframes for the entrance.

Fallback: browsers without @starting-style show the content instantly when loading finishes.

The bar is bound to the scroller with animation-timeline: scroll(), and each section fades up with view(). Scroll inside the box.

Fallback: a passive scroll listener drives the bar and an IntersectionObserver adds the reveal class. Reduced motion keeps the bar and drops the reveal.

A slim bar trickles across the top while the next route loads, then completes and fades. Click a route in the mini browser.

Fallback: none needed. With reduced motion the bar jumps to full and fades with no trickle.

A leaf hinged on its left edge flips in 3D with backface-visibility, while a shadow sweeps across the page underneath. Hover the dog-ear for a peek.

Fallback: with reduced motion the flip is an instant swap with no shading.

Every row enters with an index-based delay, blur-to-sharp and a spring easing where linear() is available. Replay to watch it again.

Fallback: without linear() the cubic-bezier overshoot easing is used. With reduced motion the rows are simply there.

The page is cloned into a grid of clipped shards that fall away with gravity and spin, revealing the next page underneath.

Fallback: with reduced motion the old page cross-fades to the next one with no shards.

Four layers move at different rates from one scroll() timeline, so depth comes from the scroll position alone. Scroll inside the box.

Fallback: a passive scroll listener writes a CSS variable that the same layers read. With reduced motion the hero stays still.

A 16 pixel placeholder is shown blurred and scaled while the full image loads, then the sharp image fades and de-blurs over it.

Gallery↻ Reload

Fallback: with reduced motion the sharp image replaces the placeholder with no blur transition.

Each toast is a popover="manual" element in the top layer, so it never fights z-index. They stack at the bottom right of the screen, slide in with @starting-style, and re-flow when one leaves.

Fallback: without the Popover API the toasts are position:fixed elements with the same stacking and a class-driven entrance.

Icons scale with a gaussian falloff from the pointer and push their neighbours apart, like the macOS dock. Slide across it with a mouse, finger or the Tab key.

Fallback: without JS the icons scale on :hover and :focus-visible only. With reduced motion there is no scaling, just a highlight.

One white pill glides between items. With View Transitions the browser morphs the named indicator; without them a left/width transition does the same job.

Fallback: browsers without document.startViewTransition animate the indicator with a CSS transition on left and width.

Tapping a tab bounces its icon and fires a short navigator.vibrate pulse where available. New messages make the badge pop.

Fallback: devices without navigator.vibrate (desktop, iOS Safari) get the visual bounce only. With reduced motion the bounce and pop are removed.

The action bar slides away while you scroll down and returns the moment you scroll up. Scroll inside the feed.

Fallback: when scroll-state(scrolled) is unavailable (checked by a live probe), a passive scroll listener plus an IntersectionObserver on a top sentinel drive the same hidden state.

The header starts clear and gains blur, saturation, tint and a shadow over the first 90 pixels of scroll, driven by animation-timeline: scroll().

Fallback: an IntersectionObserver on a top sentinel toggles a .stuck class that applies the same end state. With reduced motion the state is applied without animation.

A search pill that shows the right shortcut for your platform and lights up the keys when you hold the modifier. Click it, or press the shortcut while this card is on screen.

Fallback: the hint shows Ctrl on non-Apple platforms. Keyboard use is the same everywhere: arrows, Enter, Escape.

The floating button fans its actions along a quarter arc with a staggered spring. Escape or an outside tap closes it, and focus returns to the button.

Fallback: with reduced motion the items appear in place instantly with no stagger.

Each caret opens a popover menu tethered to its crumb with anchor-name and position-anchor. Choosing a sibling rewrites the trail.

Fallback: without anchor positioning (Firefox and Safari before 26) a script places each menu from getBoundingClientRect(). Without the Popover API the menus toggle in place.

A slim icon rail expands over the content on hover and focus, or after a 450 ms long-press on touch. It overlays, so the page never shifts.

Fallback: keyboard and switch users get the » toggle, and focus inside the rail expands it. Labels stay in the accessibility tree while collapsed.

A phone-style status bar with a ticking clock, signal and battery, and a row of notification dots that pop in. The battery reads the real level when the browser allows it.

Fallback: browsers without the Battery API show a fixed 86%. With reduced motion the dots appear without the pop and the colon does not blink.