Skip to content

Build

Velocity X Components Pro 400+ React and Astro components you copy and own. Website Design Design and build, done for you.

Use

TradePilot Trade journalling and position research. PS5 MIDI Bridge Turn a controller into a MIDI device. Aus Trails Australian trails, maps and trip planning. Blog Build notes and short technical pieces.

Shaders & Backgrounds

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.

Preview onlyA demo of what Velocity builds. This one is not currently installable on its own.
AstroReactWebGLSVGNew

Shader Backgrounds (drop-in)

Shader Backgrounds (drop-in)

Live preview of the Shader Backgrounds (drop-in) component

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 $1,250 See all packages →

Using the Shader Backgrounds (drop-in) component

These are the productised backgrounds — the ones built to sit behind real content rather than be admired on their own. They span WebGL, canvas, SVG and CSS, and each fills the element you mount it in, so moving one from a hero to a card is a matter of wrapping it differently rather than re-tuning it.

Read the component docs All 589 components

More Shaders & Backgrounds components

Browse all →

Maze Growth (SVG)

A fast "growth" that draws itself through a geometric truchet maze — pure SVG with a stroke-dashoffset reveal (pathLength=1), so you can swap the maze for your own SVG paths and it grows the same way. Rows staggered so it spreads in lots.

Flow Lines

Stripe-style ribbon of thin lines that twists in pseudo-3D — additive blending lights up a glowing fold where the lines bunch.

Brand Shader

Shader Park WebGL blob driven by scroll, with light/dark palette and pan/zoom/tint controls.

Grid Tracer

Perspective SVG grid with eight glowing traces that draw along the lines on staggered loops, plus pulsing junction nodes. Pure SVG, no canvas or WebGL.

Footer Globes

Fixed corner badges pairing four spinning SVG globe variants — wireframe, minimal, crosshair and lat-long grid — with two lines of technical micro-copy.