Component library

Velocity components

Every swappable piece of the Velocity template — preview it live, grab the code.

Shader Backgrounds (drop-in)

Productized Shader-Lab backgrounds: <ShaderBackground shader="…" preset="hero|section|card|subtle"> drops any of the 88 shaders behind real content with a theme-aware legibility scrim. GL context self-manages (near-screen create / off-screen destroy), reduced-motion + WebGL-fallback safe.

preset="hero"

Code meets design.

Any shader, full-bleed behind a hero — bottom scrim keeps the headline readable.

Start a project

preset="section"

A living backdrop for long copy

Dialed to ~40% with a full veil, the shader reads as ambient texture rather than noise. Drop it behind any section and the body text stays perfectly legible in light or dark mode.

preset="card"

Ink Marbling

Decorative card backdrop — no scrim, dark palette.

preset="card"

Aurora Ribbons

Swap the shader key — same drop-in.

preset="subtle"

Ambient, ~22% opacity

For when you want motion you almost don't notice — a faint living wash behind otherwise flat content.

The code ships with Velocity.

Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.

Get Velocity X — from $4,995 See all packages →