Shaders & Backgrounds
Brand Shader
Shader Park WebGL blob driven by scroll, with light/dark palette and pan/zoom/tint controls.
Brand Shader
Live preview of the Brand Shader component
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 Brand Shader 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.
More Shaders & Backgrounds components
Browse all →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.
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.
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.