Motion,
mechanical.
Durations motion-01
Four tokens cover everything.
Easings motion-02
Standard + stepped for industrial flavour.
STANDARD .2,0,0,1
LINEAR —
STEPS-6 CRT
BREAK overshoot
Reveal · stagger motion-03
Each item offsets by 150 ms.
Shuffle text motion-04
Characters scramble through random chars before settling · 45ms steps · 55ms stagger per character · as used on homepage CTAs.
Hover to trigger · chars: ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#@!
Teletype motion-05
steps(40) over 2 s · used for boot sequences. Click to replay.
Glitch image motion-06
Stacked image copies with clip-path slices · 3.5s cycle · as used in the footer banner.
4 offset copies · each a different clip-path slice · hero moments only
Glitch text motion-07
Layered copies clipped with clip-path · as used in the footer banner.
Multi-layer offset · 3.5s cycle · hero moments only
CRT image hover motion-08
Scanline overlay + colour-grade filter on hover · as used on team portraits.
On hover:
Scanline grid appears
RGB fringe overlay
sepia + hue-rotate filter
opacity flicker at 0.15s
CRT sweep motion-09
Scanline overlay via repeating-linear-gradient · vignette via radial-gradient · sweep is a translucent bar animated top→bottom · used subtly on team portraits on hover.
Motion is a reward, not a garnish.
If a screen moves, something changed. No idle animation. No decorative drift.
Mechanical, not bouncy.
Default to the standard curve. Steps for teletype. Overshoot is reserved for one place per product.
Fast enough to feel decisive.
Most transitions sit at 120 or 240 ms. If it needs longer, it needs content to justify it.
Everything collapses gracefully.
Respect prefers-reduced-motion. Glitch, sweep and stagger disable; state changes remain instant.