Motion
Motion and Material
Use motion, glass, depth, and light only when they clarify the experience.
Choose an intent
Motion must explain continuity, hierarchy, feedback, narrative, or orientation. If it does none of these, remove it.
Keep one signature idea
An expressive page should use one memorable motion concept and a small family of supporting behaviors. Avoid generic section fade-ups, floating cards, cursor followers, typewriter headlines, spinning marks, and perpetual decorative motion.
Timing
Compact feedback usually takes 90 to 160 milliseconds. Hover refinement takes 150 to 220 milliseconds. Panel continuity takes 220 to 360 milliseconds. Major spatial movement takes 300 to 500 milliseconds.
Hover
Use at most two cues, such as a quiet border change and a two-pixel lift. Restrict hover behavior to fine pointers and provide an equivalent focus treatment.
Glass and light
Use glass for a genuinely floating layer with visible context behind it. Use a light sweep once on an important action or featured surface. Neither treatment belongs on every card.
Reduced motion
Remove parallax, large transforms, sweeps, and staggered reveals when reduced motion is requested. Keep content and state changes understandable without animation.