Creative Components

A GPU chart engine that looks designed — a million data points at 60fps, art-directable strokes & fills (gradient / glow / grain, OKLCH palettes), and real ergonomics: nice / log / time axes, crosshair, tooltip, brush, zoom & pan, with an accessible data-table fallback.

Scroll-driven 3D as a declarative keyframe timeline — the Apple-product-page effect as a config object. Loads a GLB, drives a quaternion-correct camera (orbit / dolly / flythrough / turntable / reveal), pins on mobile by measured ratio, and projects HTML captions onto 3D anchors.

An audio-to-visual engine — musically-correct DSP (A-weighted bands, spectral-flux onsets, autocorrelation BPM, perceptual loudness) and a mapping graph that drives CSS variables, a canvas visualizer, AND any other Caustics engine's update(). One buy makes your whole catalog audio-reactive.

A live, deterministic, on-brand material runtime — eleven procedural surfaces (terrazzo, marble, riso, woven, field, concrete, hammered metal, plaster, wood, tile, leather) that recolor from your design tokens, render live and NON-REPEATING at zero per-frame cost, carry story-layer wear, bake to seamless PNGs, and export a verified per-engine PBR set (Unity/Unreal/Godot/three.js), wired glTF, MaterialX, and KTX2.

A GPU particle-advection engine — hundreds of thousands of particles steered by a noise, image-gradient, or SDF-text field, rendered as points, trails, dye, or lines, with film grain, pointer force, and an audio-reactive field. The generative background the field-image and SDF-text moat makes hard to copy.

A WebGL image-transition engine — 21 hand-tuned GLSL transitions, an autoplay slider, and a draggable before/after compare mode. The agency carousel, as a drop-in component.

Animated mesh gradient backgrounds rendered via WebGL fragment shaders. Configurable colors, speed, grain, and blur. The effect used on this site's hero.

Hover effects with physical weight. Cursor-attracted UI elements driven by lerp, spring, magnetic, orbital, or jitter physics. Eleven curated presets, group coordination, per-axis locks, deterministic return tween, and a CSS custom-property bridge for driving any CSS from cursor proximity. Zero-markup activation via data attributes.

The living technical drawing — crisp ink marks, tethered constellations, flocks, emitters and seeded currents on Canvas 2D. Nine presets, OKLab colour, full export.

Real-time WebGL Navier-Stokes fluid simulation. Twenty presets across six aesthetic personalities, four interaction modes including multi-touch, image-as-dye seeding, obstacle masks, built-in recording. The full physics engine, not a configured recipe.

Typography animation engine. Variable-font axes, scroll velocity, scramble, jello drag, elastic propagation. Six animation families and twenty curated presets — all sharing one accessibility-first API.

Performant reveal animations triggered as elements enter the viewport. IntersectionObserver-based, fully accessible, supports stagger on grids and lists.

WebGL displacement effects on image hover. The portfolio staple agencies charge $5K+ to implement, available as a drop-in component.

Real-time Gray-Scott reaction-diffusion in WebGL. Seventeen Pearson pattern classes, four visualization styles, nine interaction modes, twenty curated presets. Turing patterns as a configurable component.

Animated film grain and noise texture overlays. Adds depth and the analog aesthetic to flat designs. Three rendering modes: CSS, Canvas, and WebGL.

Liquid morphing organic blob backgrounds. The lava lamp effect every SaaS landing page wants, as a drop-in component.

Character, word, and line-level text entrance animations. Scroll-triggered or on-mount. Stagger, easing, direction, and order fully configurable. Dependency-free and ARIA-safe.

3D card tilt effects with depth layering. CSS perspective + mouse position. Optional gyroscope support for mobile. Zero dependencies.

Northern lights backgrounds rendered via WebGL fragment shader. Vertical color banding with horizontal wave distortion. Natural and configurable presets.

Custom cursors, magnetic buttons, glow trails. Replace the browser cursor with precision-crafted alternatives that respond to interactive elements.