Case Study
Landing Page for Moonlight Bay and the Land of Seven Suns (book)
Scope of Work
Creative direction, custom HTML/CSS/JavaScript website, GSAP scroll animation, responsive design
Overview
Moonlight Bay and the Land of Seven Suns is a fantasy adventure by Jonathan Reule, following eleven-year-old Scott into an unfamiliar world of floating islands, strange creatures and hidden dangers. Along the way, he finds friendship and learns to help others even when he’s afraid.
I’d wanted to create an immersive motion website for a while, but I hadn’t found a project where that much movement made sense. The landing page for Jon’s book gave me a reason to try it.
The opening of the story gave me the concept: an antique cabinet, a mysterious toy train and a single touch that takes Scott somewhere he never expected to go. I wanted visitors to experience a little of that moment before they read about the book.
Process & Result
I built the page in HTML, CSS and JavaScript, using GSAP and ScrollTrigger to connect the opening sequence to the visitor’s scroll. The cabinet opens to reveal the train, the view moves closer, and a flash of light carries the visitor into Moonlight Bay. Short lines of story appear along the way, timed to the action.
Getting that sequence right took several rounds of adjustments. The cabinet needed to open wide enough, the train needed to feel close, and the transition had to give visitors time to follow what was happening. I used AI-generated imagery for the scene layers and book mockup, working from the cover art and checking the locations and characters against the story.
Beyond the opening, I introduced Scott through an illustration of him working on his models, then used a coverflow to introduce the seven companions. Scrolling moves through the characters, while arrows and horizontal swiping give visitors other ways to explore them.
I adjusted the layouts and spacing for smaller screens, compressed the images and included reduced-motion support. The book has a gentle scroll-driven turn, and smaller details, including the light around Scott’s desk, add movement without needing another full sequence.
Visitors can also read the first chapter on a separate page or follow labelled links to the Kindle edition and Amazon US listing.
The finished page gave me room to develop the kind of motion work I’d wanted to try, with a story that gave each interaction a purpose.
Visitors can open the cabinet, meet Scott’s companions and read the opening chapter before deciding whether to pick up the book.