# stagger

Featured Animations⚛ TSX Live preview

Stagger Timeline Grid

A 12-cell grid that springs in with an 80ms waterfall delay — the anime.js stagger() pattern in vanilla JS.

HTMLCSSJavaScriptAdvanced

8k44.6k7.8kOpen

Animations⚛ TSX Live preview

Bouncy Letter Wave

The word MOTIONVAULT splits into per-letter spans that ride a looping spring wave and pop on hover.

HTMLCSSJavaScriptAdvanced

5.5k30.7k5.6kOpen

UI Elements⚛ TSX Live preview

Staggered Bounce Dots

Five gradient dots bouncing in a wave with glow at peak, each delayed 150ms.

HTMLCSSReactAdvanced

3k24.1k5.2kOpen

Scroll stagger reveal cards

Cards fade and rise in with per-index delay when they enter the viewport — IntersectionObserver pattern.

36700Open

Letter Rise Title · Ultra Violet

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Ultra Violet palette.

83400Open

Letter Rise Title · Cyber Lime

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Cyber Lime palette.

65100Open

Letter Rise Title · Sunset Amber

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Sunset Amber palette.

34600Open

Letter Rise Title · Rose Gold

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Rose Gold palette.

83200Open

Letter Rise Title · Ocean Sky

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Ocean Sky palette.

50000Open

Letter Rise Title · Mint Breeze

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Mint Breeze palette.

45600Open

Letter Rise Title · Candy Pink

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Candy Pink palette.

74000Open

Letter Rise Title · Royal Gold

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Royal Gold palette.

40800Open

Staggered List Entry

List items entering with staggered fade/rise choreography.