Title: Scroll Odyssey — Voyage in Five Chapters
Prompt: Tell a five-chapter sea voyage that the reader sails by scrolling, from dawn departure through shallows, abyss and ember isles to homecoming. Each chapter should own a distinct palette and shape language. Let course and cargo choices rewrite the ending ledger.
Design: Five full-height chapters alternating night sea, paper daylight, trench teal, ember brown and dusk violet, with a fixed progress bar, chapter rail dots, sticky header and wildly different visual containers from pill-arch to asymmetric blob.
Visual techniques:
- Scroll-linked progress bar, percentage readout and parallax ship drift
- IntersectionObserver reveal transitions per chapter
- CSS bob, spin, rise and flicker keyframes for ships, rings, bubbles and stars
- Procedural star fields and trench eye that tracks the pointer
- Left-ruled pull quote and chapter numerals with wide tracking
Interaction model: Scrolling drives progress and reveals, side dots and buttons smooth-scroll between chapters, two choice groups set course and cargo and rewrite the ledger, bell/lamp/wind buttons accumulate voyage state, pointer movement swings the trench eye, and copy button exports the generated tale.