Motion

Motion communicates idea → reality and growth. It supports the content rather than being required to understand or access it.

The current website has a sticky fullscreen hero. With motion enabled, its scroll section spans 250svh on desktop or 220svh on mobile; the stage remains 100svh. The muted video loops independently of scrolling. Scroll changes headline opacity, position, and the media scale; chapter progress follows video playback.

Lower content reveals use 0.85s opacity and upward-position transitions from 30px, with easing cubic-bezier(0.2, 0.7, 0.2, 1) for position. Arrow controls transition in 0.2–0.25s. The study image scales to 1.04 on hover over 1s.

Preserve the existing behavior when adapting motion:

• Offer a labeled pause/play control. Pause freezes the current video frame and scroll-driven artwork.
• Respect reduced-motion preferences: show the poster and readable static content, and do not request video until motion is explicitly enabled.
• Pause media offscreen and when the browser tab is hidden.
• Keep content available without JavaScript and when media fails.
• Reduce decorative density on mobile; load the appropriate mobile media rather than downloading both sizes.
• Disable CSS transitions and smooth scrolling for reduced motion.

Long scroll sequences are a marketing-page pattern. Use brief feedback and static content in task-focused product interfaces.