← Home
Interaction

Homepage scrolling and animation

How parallax, responsive layouts, and reduced-motion settings work.

The window, cat, and foreground objects are separate image layers. During scrolling, the background moves less than the foreground to create depth.

The site uses normal browser scrolling. On desktop, the scene stays in view while the heading moves out and the project section enters. On mobile, the layout stacks vertically and each layer moves a shorter distance.

The site follows the system’s reduced-motion setting. The cat animation pauses when the scene is outside the viewport or the browser tab is in the background.

← All notes