Creative Components

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.

Configurable particle systems with connection lines, cursor reactivity, and six built-in presets. A lightweight alternative to tsParticles.

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.

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.