Selected ComponentTracing Beam
Showcase Mode
zComponents Field Notes

Build the surface, ship the product

A short tour of what's inside the library. Scroll to trace the beam.

Motion

Choreographed primitives, ready to drop in

zComponents ships dozens of motion-first React primitives — typewriters, letter cascades, scrub inputs, hover-expand panels and split-flap displays — each one wired with framer-motion or a tuned CSS animation out of the box. No timeline rewrites, no half-finished spring curves to fix.

Every component carries a Showcase entry so you can preview the motion, copy the source, and read the rich metadata block (props, dependencies, use cases) without leaving the editor.

Backgrounds & FX

Canvas and WebGL backdrops, performance-first

The Backgrounds family — Vortex, Background Beams, Iso BG Boxes, Dotted Glow, Canvas Reveal — uses Canvas2D, simplex noise, or hand- rolled GLSL shaders rather than DOM tricks. Each one is DPR-aware, ResizeObserver-driven, and tuned to run cool on a MacBook.

Drop a single component behind any hero, CTA, or pricing surface and get cinematic motion without a video tag or a 5MB Lottie file.

Heroes & CTAs

Brand-ready surfaces, not screenshots

The hero collection (Hero Dithering, Hero Heatmap, Hero Liquid Metal, Hero Static Gradient, Hero Color Panel) gives you a fully composed surface — typography, action layout, and ambient motion — that you can re-skin with your own copy in minutes.

Pair them with the badge, button-group and morphing-button primitives for a complete landing-page slot, or strip them down to the canvas and bring your own layout.