Build
Effects
Modern atmosphere without losing the warm, spacious foundation. These fields support a hero, chapter, or identity mark; they never compete with the message.
Backdrops
ProceduralBackdrop emits stable decorative markup for four levels of visual intensity. The same semantic palette keeps the set recognizably one brand.
Atmosphere
Low-chroma depth for a generous hero or chapter opening.
Grid
Quiet structure behind technical or spatial content.
Ripple
A restrained focal contour around one important idea.
Composite
The complete vocabulary, reserved for signature moments.
Particle halo
ParticleHalo wraps ordinary semantic children. The identity remains selectable, readable, and present even when every particle is hidden.
Made to gather around
Warm identity, with just enough electric detail.
Interactive liquid
Liquid turns pointer movement into a soft palette trail. Use it over a generous decorative field, never as the only way a surface communicates.
Move to stir
Warm signal, electric response
Seed, variation, and palette
Brand identity is configuration, not a fresh composition on every render.
- Name a stable seed.Use a durable brand or campaign key. Never use time, browser state, or runtime randomness.
- Vary with an integer.Keep the seed and palette fixed, then use a stored safe integer when a sibling composition needs different geometry.
- Own one brand palette.Map key, support, highlight, and shadow to shared semantic tokens. Reuse that mapping across the brand instead of choosing colors per page.
- Preserve the base surface.Effects stay low contrast over the semantic background, leaving type scale, spacing, and content hierarchy in charge.
Rendering contract
The effect is progressive decoration: content and the semantic surface do not depend on it.
SSR first
A typed, serializable recipe produces deterministic HTML and CSS before hydration. The output does not capture or replace the page beneath it.
Preference safe
Reduced motion stops decorative animation. Forced colors removes the generated field while the semantic children and background remain intact.
Progressive WebGL
Liquid refracts its decorative field where HTML-in-canvas is available and renders a fluid overlay elsewhere. Its output stays pointer-transparent, hidden from assistive technology, and disposable without losing the composition.