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

27

Category
Runtime

WebGL

Shader and GPU work — fields, planes, particles, distortion.

Anti-Aliased Point Discs

WebGL runtime

A phyllotaxis field of dots that stay the same weight at every pixel ratio, with no MSAA and no texture.

three

Bayer-Quantised Plasma

WebGL runtime

An iterated domain-warped plasma crushed to eleven grey levels, so the hero reads as a dot-matrix proof.

No dependencies

Bit-Math Bayer8 Dither

WebGL runtime

A smooth gradient crushed to five levels through an 8x8 ordered matrix derived from six integer ops.

No dependencies

Cursor-Reactive Shader Glow

WebGL runtime

A warped-noise atmosphere with a light that trails the cursor, held under a hard luminance ceiling so copy stays readable.

three

Dot-Cloud Score Cylinder

WebGL runtime

Two counter-rotating cylinders of dots — rings, bar lines, notes — drawn from one buffer with no depth buffer.

three

Cylinder Gallery Drum

WebGL runtime

Nineteen planes wrapped around a drum in the vertex shader, spun by wheel or scroll, focus falling off from centre.

three · gsap · lenis

Depth Fade And Travelling Pulse

WebGL runtime

A dot lattice on an arc: z drives alpha and point size together, and a per-column phase sweeps the pulse across the field.

three

Domain-Warped FBM Fog

WebGL runtime

Slow, low-contrast fog that flows rather than fades, with a faint light that trails the cursor.

No dependencies

Dual-Canvas Depth Split

WebGL runtime

One particle field rendered twice with the depth sign flipped, so the text sits inside the field rather than on top of it.

ogl

Fractional Render Scale

WebGL runtime

A field rendered into a backing store 0.6x its box — 36% of the fragments — with a grid measured in texels so the upscale never shows.

three

Fullscreen Triangle Pass

WebGL runtime

One 3-vertex triangle covers the viewport and runs your fragment shader. No three, no ogl, no seam.

No dependencies

GPU Cubic-Bezier Burst

WebGL runtime

Rings of dots that burst on click, every particle solving its own cubic-bezier easing in the vertex shader.

three

Instanced Quad Particles

WebGL runtime

Up to 1800 drifting particles in one draw call — quads rather than point sprites, so each one has its own size, spin and shape.

ogl

Multipass Offscreen Composite

WebGL runtime

Four passes into two render targets — ramp, additive fills, half-size bloom — and one composite that writes the canvas once.

three

In-Shader Mouse Bulge

WebGL runtime

A soft lens that follows the cursor, measured by projecting every vertex to screen space instead of raycasting.

three

Single-Draw Orbit Rings

WebGL runtime

Concentric rings of dots, one bright marker travelling each ring, all of it in a single draw call.

three

Radial Ripple Dot Cloud

WebGL runtime

A dot field with a travelling wave running out of one off-centre point, its density drawn by hand as a B-spline.

three

Realtime Cube EnvMap

WebGL runtime

A metal knot reflecting panels that are actually orbiting it, captured six faces at a time every other frame.

three

Scroll Deformation Wave

WebGL runtime

An image that ripples with scroll speed and bends the other way on the way back, from two sine terms.

three

Spring Lattice Field

WebGL runtime

A CPU damped-spring lattice uploaded as a texture each frame, displacing a procedural grid the cursor can push around.

No dependencies

Stepped Film Grain

WebGL runtime

A transparent grain overlay whose pattern jumps twelve times a second instead of every frame, so it reads as film.

three

Superellipse Text Avoidance

WebGL runtime

A particle field that flows around the headline, held off by a 6-norm superellipse fitted to the measured text box.

ogl

Area-Weighted Surface Particles

WebGL runtime

Any mesh becomes a particle shell of even density, assembling bottom-up, with orbit rings measured off the sampled silhouette.

three

Text-Target Particle Glyphs

WebGL runtime

A particle cloud gathers into a word rasterised from a font already on the page, written left to right, then lets it go.

three

Cover-Fit UV Maths

WebGL runtime

object-fit: cover for a textured quad, solved in UV space so the crop follows a frame that reshapes every frame.

three

Velocity Afterimage Pass

WebGL runtime

Marks that smear into a tail when the pointer moves fast and stay crisp when it slows, from two targets swapping roles.

three

Vertex Shader Cylinder Bend

WebGL runtime

A flat plane wrapped around a cylinder on the GPU, with the curvature living in a uniform you can animate.

three