Motion laboratory
Three triggers.
Three responses.
Each element uses a different interaction common to modern websites. Try each demonstration, then read how the motion was created.
01
Scroll-triggered animation
Desert sunrise
The scene uses an Intersection Observer to detect when it enters the viewport. Once visible, CSS transitions fade in the mountains and move the sun upward with changing opacity and scale.
02
Hover and focus animation
Moonlit cactus
The panel responds to the CSS :hover and :focus-visible states. Transforms tilt and lift the scene while the moon, stars, and cactus shift at different speeds to create depth.
03
Click-triggered animation
Comet launch
A click changes the component’s interactive state. That state adds a CSS class that launches the comet with keyframe animation, expands two light rings, and makes the star field pulse.
Reflection
Motion with a purpose
This exercise showed me that animation works best when it responds naturally to a visitor’s actions. Scroll animation can guide attention, hover animation provides immediate feedback, and click animation rewards direct interaction. Keeping the movements brief and consistent makes the page feel more engaging without distracting from the content.