Tabb Labs
Every feature, named for
what it is.
39 web techniques we build, each with its real parameters wired to real controls. The name tells you what it is. The line under it tells you what it is like. Open one and turn the knobs until you can feel the difference.
Scroll-driven
Scroll position is the input to a state machine, not a trigger for a fade.Pinned scroll-scrubbed section
Winding a film reel by hand. The scene does not move; time inside it does.
Scroll-pinned horizontal gallery
A train window. You move forward, the landscape moves across.
Scroll-velocity-reactive motion
Wind resistance. The faster you move, the more the world leans.
Native CSS scroll-driven animation
The scrollbar is the playhead, wired straight into the compositor.
Scroll-scrubbed frame sequence
A flipbook you thumb at your own speed.
Layered zoom
A telescope racking focus while you fall toward the subject.
Scroll-mapped 3D ring
A Rolodex, or a ferris wheel you turn with the scrollbar.
Scroll-assembled composition
Watching a blueprint draw itself, part by part, in the order an engineer would explain it.
Arrival from depth
Headlights emerging from fog. Small and soft, then suddenly on top of you.
Cursor / pointer
The pointer stops being an arrow and starts being an instrument.Sticky cursor with lag
A dog on a slightly slack lead, which snaps to heel at every lamppost.
Blend-mode invert cursor
A hole punched in the page, showing the negative of itself.
Gooey cursor
Lava-lamp wax chasing your finger across the glass.
3D and WebGL
One fullscreen quad. The fragment shader decides everything.Sinusoidal ripple warp
Gradients that flow like water. Drop a stone, watch ripples spread.
Rotational twist warp
Rotational distortion like wrung fabric. A towel twisted at both ends.
Radial bulge and pinch
Gradients that push toward you. A fish-eye lens; the bulge of an old TV.
Procedural gradient field
Flowing bands like the Northern Lights. Arms that wind outward, not wedges that spin. Faceted planes of colour, cut like gemstones. Layered ribbons of colour with depth.
Motion echo
Motion that leaves echoes of itself. Long-exposure photography of a moving light.
Typography / text
Type that assembles, decodes, breathes, or lights up.Split-text stagger reveal
A departure board flipping into place.
Text scramble and decode
A combination lock spinning to its number.
Variable-font axis animation
Type breathing, or flexing.
Scroll-linked per-word illumination
A sentence read aloud by a spotlight.
Image / media
Four ways to take an image apart and put it back together wrong.Displacement image hover
Two photographs melting into each other through frosted glass.
Real-time ASCII conversion
Your gradient, rendered in terminal characters.
Halftone rasterization
Halftone patterns from print media. A newspaper photo under a magnifier.
Error-diffusion dithering
A Game Boy screenshot, or a 1-bit Mac.
Threshold-map wipe
Frost melting off a window from the inside out.
Layout
Structure that never stops moving.
Micro-interaction
The small feedback that separates expensive from cheap.
Texture / atmosphere
The grain and polish that kill the sterile CGI look.Film grain overlay
Pushed 35mm film.
feTurbulence grainy gradient
Risograph print; a dusty sunset.
Material-shaded gradient
The polish that makes colour feel expensive. Soft, fabric-like depth with inner glow. Colour that shifts as you move. Prismatic shimmer from the trading cards you collected.
Physics / simulation
Motion that obeys a rule instead of a keyframe.
Data-viz / scrollytelling
A number you can watch happen.Sticky-graphic scrollytelling
A museum exhibit where the placard moves and the artifact stays.
Scroll-filled funnel
Pouring liquid into a measuring jug as you scroll.
Scroll-driven self-drawing chart line
A seismograph running in real time.
Odometer rolling-digit counter
A car odometer, or a split-flap board.
Section-connecting animated path
A thread tying the argument together.
Item-reactive background gradient
A bias light behind a TV, changing with the scene.
The floor
Turn motion off. Nothing breaks.
The initial-hidden state is gated on html.anim, added by a head script only when motion is allowed. JS off or prefers-reduced-motion: reduce means .anim never lands: every element is visible, every effect renders complete and static, and the script no-ops. Reduced motion means snap, not freeze.
Across roughly 3.3MB of production code from
three Awwwards Sites of the Year, and across all of motherduck.com while 18 Lottie animations run,
prefers-reduced-motion appears exactly 0 times. Awwwards weights usability at 30% and
awards Site of the Year anyway. There is no award-site precedent to copy here, which is what makes this
floor a cheap differentiator rather than a debt. Use the switch in the header to test it.