Effects
Hover, scroll reveals, overlays, typography, video — patterns by tier.
The five effect categories the Motion system covers. Each has reference implementations across the appropriate tier — css/animations.css (Lightweight), css/premium-effects.css (Premium CSS), or js/premium-scroll.js (Premium JS).
Hover
Lift, scale, glow, dim, animated underline. CSS-only micro-interactions. Magnetic + cursor-spotlight variants require Premium JS.
Scroll Reveals
Clip-path reveals, fade/slide entrances, stagger patterns, parallax. CSS + IntersectionObserver.
Overlays
Atmosphere effects — film grain, glassmorphism. ::after pseudo-elements, no extra DOM nodes.
Typography
Gradient fill, stroke, glow, animated highlight. Heading-level only — never on body or labels.
Video
Full-bleed video backgrounds with overlay variants. Scroll-scrubbed video lives in Premium.
Tier mapping
| Effect category | Default tier | Escalates to |
|---|---|---|
| Hover | Lightweight | Magnetic cursor, cursor spotlight (Premium) |
| Scroll Reveals | Lightweight (fade/slide/stagger) | Clip-path reveals (Premium CSS); scroll-scrubbed + parallax (GSAP) |
| Overlays | Premium | (entire category — premium-effects.css) |
| Typography | Premium (.text-* in premium-effects.css) | Letter-by-letter SplitText (GSAP) |
| Video | Premium | Scroll-scrubbed video (Premium JS) |
Related
- Tiers Overview — when to escalate
- Motion Overview — the three-tier philosophy
- Atmospheres — Premium overlays compose into atmospheres
Premium
Atmosphere effects — grain, glass, magnetic cursor, hero sequences, scroll-scrubbed video. The qualitative texture that separates a premium site from a well-styled one.
Hover
Micro-interactions for buttons, cards, and links. CSS hover classes are Lightweight. Magnetic cursor and cursor spotlight require Premium JS.