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

13

Category
Runtime

Cursor

Pointer-following, magnetism, hover state, custom cursors.

Blend-Difference Cursor

DOM runtime

A white dot in difference blend mode inverts whatever it crosses, growing 16 to 44 to 150px on hover.

gsap

Cursor Clip-Path Mask

DOM runtime

A disc of a second layer follows the pointer; hovering the trigger grows it until it covers the panel.

gsap

Cursor Repulsion Burst

WebGL runtime

An orbiting particle field the pointer pushes out of the way, and a press detonates into a shock wave with a heat band.

ogl

Dither Trail Image Reveal

WebGL runtime

A dimmed image restored through a trail of Bayer-thresholded blocks that smear in the direction the pointer moved.

three

GSAP Cursor Follower

DOM runtime

A puck that replaces the arrow inside a panel, trailing 0.4s behind and swelling to a label over targets.

gsap

Hover List Image Trail

DOM runtime

Hovering a row stacks a plate into a column that follows the pointer; the oldest is culled past twenty.

gsap

Magnetic Pointer Button

DOM runtime

A button that leans toward the cursor and springs back, with the label leading the box.

gsap

Pointer Palette Sampling

Canvas 2D runtime

Point at the artwork and it names the colour — a clamped pixel read snapped to the nearest palette entry.

No dependencies

Pointer-Variable Gradient

CSS runtime

A soft glow tracks the pointer through two CSS custom properties. No rAF, no tween, no string rebuilding.

No dependencies

Pooled Cursor Image Trail

DOM runtime

Tiles drop behind the cursor from a fixed ring of 22 reused nodes, one every 130px of travel.

gsap

quickTo Cursor Preview

DOM runtime

A preview panel drifts a full second behind the pointer, driven by two reused quickTo tweens.

gsap

Radial Mask Spotlight

DOM runtime

A layer masked to a soft disc follows the pointer, with a flat core that makes it read as a beam.

No dependencies

Tweened Cursor Uniform

WebGL runtime

A shader grid with a lens under the pointer, whose position is tweened into the uniform so it settles instead of chasing.

three · gsap