Motion Direction

Great animated sites are mostly calm with a few moments that land hard. Motion supports the content; it never replaces it or blocks reading.

1. Plan the rhythm before coding

Write a motion plan per section, as a table, and show it to the user for anything bigger than a single component:

Section	Role	Motion level	Effect	Tool
Hero	first impression	🔥 signature	split-text reveal + 3D object reacting to cursor	GSAP SplitText, R3F
Logos	proof	💤 still	none (or slow marquee)	CSS
Features	explain	🌊 light	fade-up + stagger on enter	Motion / GSAP
Showcase	wow #2	🔥 signature	pinned horizontal scroll	GSAP ScrollTrigger
Pricing / form	convert	💤 still	only micro-interactions	CSS
Footer	close	🌊 light	big type parallax	GSAP