The Moth Who Mapped the Moon: Interactive Scroll Storybook. "Turning a six chapter bedtime story into a scroll animated journey from a land to the moon" "The Moth Who Mapped the Moon" is an interactive storybook I built. It is a six chapter bedtime story. Every websites in this modern 2026 era scrolls from top to bottom, but here the scroll moves the camera upper into the sky. The story reader follows a small moth named Etta traveling from land, move past a lighthouse, all the way to the stars and then moon.

Every chapter changes the background as you scroll down. The grass and lighthouse fade away, stars connect with silver lines, and the moon grows larger. A small moon position indicator on the right side of the screen tracks reading progress.

The graphics use vector illustrations and CSS animations, it is connected with a custom JavaScript scrolling. The script calculates Etta's position, wing movements, and background motion based on mouse scrolling. To keep the website responsive and smooth on new and old mobile devices, excessive background details like fireflies, the light from lighthouse, and the owl animate where only necessary.

The main challenge was balancing scroll speed. If the scenery moved too quickly, the text became hard to read. If it moved too slowly, the website felt boring. Placing the typography inside "almost close to" transparent looking cards kept the text readable over the dark sky without feeling gibberish.😊