01 · shield ping
concentric frames radiating outward from a solid central mark — reads as privacy-shield-active. used on /#extension.
/ whitelabel · motion
motion library
fourteen CSS-only on-brand animations used across whitelabel.dev. black + white, GPU-accelerated, zero JS. each one tells a different visual story about the product — and is prefers-reduced-motion-aware for accessibility.
02 · tile cascade
3×3 grid of mini frame marks, each phase-shifted with subtle outer tilt — reads as workspace assembling itself. used on /#browser.
03 · ecosystem orbit
three satellite marks orbiting a central core on a dashed ring + pulsing aura. used on /#app.
04 · constellation glitch
64-dot field twinkling on a phase pattern, the brand mark glitches in with skew transforms, scanline sweeps top-to-bottom. used on /#ai.
05 · lissajous loop
SVG figure-eight traced by stroke-dashoffset in a perpetual draw-and-retrace cycle.
06 · terminal rain
eight columns of falling hairline streams at staggered delays. monochrome terminal cliché, minimized.
07 · spectrogram
twelve vertical bars oscillating at twelve different periods — desync'd until they coincidentally align.
08 · wireframe sphere
eight rotated rings stacked in CSS 3D space, container rotates a slow 14-second axis sweep.
09 · displacement glitch
three layered frame copies, two of them sub-pixel-shifted on a step keyframe — CRT artifact aesthetic, mono.
10 · sigil trace
three nested-frame rectangles drawn sequentially via stroke-dashoffset — the whitelabel mark assembling itself in real-time.
11 · pendulum
single hairline arm with a frame-mark bob, swinging on a 2.4-second period. physical metaphor for steady cadence.
12 · frequency wave
sine wave dashed-stroke sliding left perpetually. signal flow, signal carrier, signal alive.
13 · light tunnel
ten frame outlines zooming and rotating outward from center on staggered delays — vanishing-point time-warp.
14 · bauhaus shuffle
circle, square, triangle — the three primitive shapes Kandinsky associated with the primary colors — oscillating in counterpoint.
/ how it works
every animation lives in /hero-anim.css and /animations.css. zero JS. all transform and opacity so the browser stays on the compositor thread. each panel is self-contained — drop a <div class="hero-anim hero-anim-X"> anywhere and it renders.