Effect catalog
Effects A–K
Every animated element in every module pulls from this fixed vocabulary. Hover a card to play its effect — H plays as you scroll inside its own box, I plays on hover already.
Fade Up
Fades in while rising 24px on page load. Default for headings, cards, and CTAs.
hover to play
Fade In
Slow, plain opacity fade with no movement. Best for large hero titles that shouldn't feel busy.
hover to play
Slide From Left
Enters from the left with a fade. Good for alternating content-split sections.
hover to play
Slide From Right
Enters from the right with a fade. Pair with Slide From Left on the opposite section.
hover to play
Scale In
Scales up from 92% while fading in. Good for images, logos, badges, icons.
hover to play
Stagger Group
Applied to a container (e.g. a grid); each direct child plays Effect A in sequence, ~120ms apart.
hover to play
Scroll Reveal
Same motion as Fade Up, but triggers the moment the element scrolls into view instead of on page load. Plays once.
hover to play
Scroll Parallax
The element (usually an image) drifts at a different speed than the page as you scroll past it.
scroll inside this box
Hover Lift
Micro-interaction: lifts 4px and scales to 102% on hover/tap. Use on cards and buttons, not on entrance.
hover or tap
Gradient Shimmer
An animated gradient sweeps across the text on load. Reserve for one hero title per page — it's a lot if overused.
hover to play
Text Reveal (Split)
Splits a heading into words that stagger in on load, each rising and fading. The 'expensive text reveal' look, built on Effect F's stagger rather than a separate text-splitting library. Use on at most one headline per page, same restraint as Effect J.
hover to play