Website
Build a cinematic desert-to-city website with one prompt—featuring smooth GSAP scroll effects, realistic imagery, alternating story text, and responsive layouts.
Turn an empty desert into a glowing city with **Horizon**, a one-shot prompt for building a cinematic, scroll-driven storytelling website.
The experience follows eight visual stages—from quiet desert darkness through dawn construction, growing infrastructure, daylight development, sunset and an illuminated skyline. Realistic architectural imagery, gradual crossfades and subtle parallax create a continuous journey, while seven story messages alternate between the left and right sides of the screen.
Built around Next.js, TypeScript and GSAP ScrollTrigger, the prompt includes implementation code, responsive styling, animation timing and publicly hosted image URLs. It gives your coding assistant a detailed reconstruction specification—not just a visual concept.
### What’s included
- Eight visual stages with seven narrative chapters.
- A pinned, full-screen scrolling experience with reversible transitions.
- Realistic desert, construction, city, sunset and night imagery.
- Alternating editorial text and numbered chapter navigation.
- An “Explore the city” button that guides visitors slowly through the story.
- An interactive finale with daylight and nighttime views.
- Responsive desktop and mobile layouts.
- Reduced-motion support and an accessible story transcript.
### What you receive
One self-contained `.txt` prompt containing the design specification, implementation files, configuration and hosted asset links. Use it with a coding assistant to recreate the public-facing website.
The prompt-extracted reconstruction has passed TypeScript checking, a production build, and Chrome tests covering desktop, mobile, reverse scrolling, finale controls and reduced motion.
Please note: This product recreates the public storytelling website, not the private CMS or visual editor. Images require an internet connection and continued availability of the hosted assets. The city transformation uses photographic transitions and parallax—not individually animated 3D buildings.
Creating a cinematic scrolling website usually requires complex animation code, coordinated visuals and extensive responsive tuning. Horizon brings these elements together in one implementation-ready prompt, helping you build a cohesive desert-to-city story without starting from scratch.