Skip to content
Kinetic

Catalogue

Every technique in the library, running.

119 techniques across 7 categories. Each tile is the component itself rather than a recording of it, which is why they take turns: the grid runs to a GPU budget, and a tile holds its poster until a slot is worth spending on it. Scroll to one, or hover it, and it takes the next slot.

Components
119
Categories
7
Runtime tiers
4
Zero-dependency
49

21

Category
Runtime

Primitives

The hooks and math everything else is built from.

Analytic Disc Picking

WebGL runtime

Hit-test camera-facing discs by intersecting the pointer ray with their plane. Exact, allocation-free, and correct for shader billboards.

three

Browser Chrome Frame

CSS runtime

A macOS window frame with hover-revealed traffic lights and an address pill whose check draws itself on copy.

No dependencies

Chord-Synced Particle Burst

DOM runtime

Fires an arpeggio and its visual flares off one schedule, so each flash lands on its own note.

No dependencies

Capture-Phase Click Swallow

DOM runtime

Cancels the single click a finished drag would fire, in the capture phase, without eating the next real click or keyboard activation.

No dependencies

Compound Group Hover Card

CSS runtime

One hover drives four changes on three elements, each with its own duration and curve. Keyboard gets all four.

No dependencies

Conic @property Border

CSS runtime

A gradient ring that rotates around a rounded box. Two highlights chase each other; no JavaScript runs.

No dependencies

Raycaster-Free Hover Picking

DOM runtime

Run the GPU's transform again on the CPU and hit-test the result. No raycaster, no rect reads.

No dependencies

Dotted Notepad Surface

CSS runtime

A tiled dot grid that dissolves at the panel edges, with a hard-stopped folded corner.

No dependencies

Drag with a Dead Zone and Pointer Capture

DOM runtime

Captures the pointer on press but only commits to a drag past a distance threshold, so a shaky click stays a click.

No dependencies

Drifting Smoke Layers

CSS runtime

Slow volumetric fog built from blurred radial gradients on three coprime cycles. No texture, no canvas.

No dependencies

Looping Scroll Cue

CSS runtime

The hairline that dives down a hero. One keyframe pair, a hard ease, and a seamless loop.

No dependencies

Lottie Ratio Poster

DOM runtime

Reserves the box, holds a drawn poster, fetches the JSON only in view, then corrects the ratio from the animation's own w and h.

No dependencies

Nav Dot Wave

CSS runtime

Nav dots that lift in sequence. The index is an inline custom property; CSS derives the delay.

No dependencies

Pause, Don't Unmount

WebGL runtime

React 19's Activity hides a WebGL scene without losing its state. Effects still tear down, so the GL context is genuinely released.

three

Relaxed Seeded Scatter

DOM runtime

Seeded angles around a ring, pushed apart until nothing collides. Ghost ticks mark where they started.

No dependencies

Self-Parking RAF

DOM runtime

An epsilon snap lets a damped value reach its target exactly, so the frame loop hits its exit test and dies.

No dependencies

Slow Idle Float

CSS runtime

A 14px rise and fall over 5 seconds, on the independent translate property so hover transforms still work.

No dependencies

Spring To CSS linear()

CSS runtime

Solves a spring once, samples it into a CSS linear() string, and runs the whole bounce on the compositor.

No dependencies

Web Audio Scheduling Kit

DOM runtime

A lookahead sequencer: a coarse timer queues beats onto the sample-accurate audio clock, so tempo never drifts.

No dependencies

Wheel Accumulator Stepper

DOM runtime

Wheel input normalised by deltaMode and accumulated to a threshold, so one flick of any device moves exactly one step.

No dependencies

Shortest Signed Ring Offset

DOM runtime

Ten dots on a ring, each showing its wrapped offset and the raw index difference it replaces.

No dependencies