Shaders & Backgrounds

Velocity ships a Shader Lab: 88 self-contained, brand-aware animated shaders you can browse, cherry-pick, drop behind any section, or export to TouchDesigner.

79 WebGL fragment shaders (zero dependencies — WebGL is native, no Three.js)
6 ASCII text-mode effects
3 brand shader-park effects

Browse them live at /components under Shader Lab — one page per shader with its variants, e.g. /components/shader-pc-vortex-arms-0/.

Using a shader as a background

ShaderBackground.astro is the drop-in: it wraps any content in a live shader with a theme-aware legibility scrim so text stays readable over the motion.

---
import ShaderBackground from '../components/brand/ShaderBackground.astro';
---
<ShaderBackground shader="pc-vortex-arms" preset="hero">
  <h1>Code meets design.</h1>
  <a href="/get-started/" class="btn btn-primary">Start a project</a>
</ShaderBackground>

Presets

Each preset bundles sensible opacity / palette / speed / scrim for a placement. Override any individually via props.

Preset	Opacity	Scrim	Use for
`hero`	0.9	bottom	Full-bleed hero backdrop (100svh)
`section`	0.4	veil	Ambient texture behind body copy
`card`	0.85	none	Decorative card surface (dark palette)
`subtle`	0.22	none	Barely-there motion behind flat content

Shader keys

Pack shaders use a prefixed key; base shaders are bare:

<ShaderBackground shader="pc-vortex-arms" preset="section" />   <!-- pack: prefixed -->
<ShaderBackground shader="mesh-gradient" preset="subtle" />     <!-- base: bare -->

The key is the slug segment on each Shader-Lab page — /components/shader-<key>-0/. Wrong key → the component renders nothing and warns in the console.

Performance

The underlying ShaderBg engine creates its WebGL context only when the element nears the viewport and destroys it when it scrolls away (via WEBGL_lose_context), so a page can host several without exhausting the browser’s context cap. It clamps DPR, caps total pixels, renders a single static frame under prefers-reduced-motion, and falls back to a soft brand gradient if WebGL or shader compilation fails — a background never renders blank-broken.

Exporting to TouchDesigner

Every WebGL shader can leave the web and become a TouchDesigner node.

One shader — `.frag` (in the browser)

On any Shader-Lab page, the “.tox / TD” button (top-right of the canvas) downloads aidxn-<key>.frag: the shader converted to GLSL TOP conventions (out fragColor + TDOutputSwizzle, u_resolution → uTDOutputInfo, u_time/u_mouse/u_dark as uniforms) with paste-and-go notes in the header. Drop it into a GLSL TOP, add the listed uniforms, save the COMP as .tox.

All shaders — real `.tox` (in TouchDesigner)

A genuine binary .tox can only be written by TouchDesigner itself, so Velocity emits a Python script instead. Fetch it from the running site:

curl -s http://localhost:4321/tox-kit.py > generate_tox.py

Run it inside TouchDesigner (Text DAT → Run Script, or the Textport). For each of the 79 shaders it builds a Base COMP — Text DAT + GLSL TOP + In/Out TOPs

a Controls parameter page (Zoom / Intensity / Hue / Dark / Speed) bound to the uniforms — i.e. a simple in/out connectable node with adjustments inside, and COMP.save()s each as a genuine aidxn-<key>.tox. Full notes ship in tox-export/README.md.

The custom shader engine: src/components/brand/ShaderBg.tsx
Shader definitions: src/lib/shaderLibrary.ts + src/lib/shaderPack*.ts
The component gallery: /components