REFERENCE
- Gallery page: https://magpui.com/en/i/private-aviation-scroll-story-9a1071
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/private-aviation-scroll-story-9a1071/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/private-aviation-scroll-story-9a1071/clip.mp4
- Original post: https://aerive-template.modulify.website by Modulify
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Airplane window: Photorealistic view from inside a dark private jet cabin through an oval window, sunset above a sea of clouds, warm amber light on the window frame, cabin very dark, 16:9, the window centered
- Jet from above: Top-down photo of a black private jet on a plain warm cream background, soft shadow, nose pointing up, centered, transparent or plain background, 3:4
BUILD
A full luxury travel landing page told as one continuous scroll story. It opens inside a dark cabin looking through an oval airplane window at a sunset sea of clouds; scrolling pushes the camera through the window into the sky, then the page fades to a warm cream paper where a top-down private jet crosses huge serif headlines. Quiet, slow, expensive.
DESIGN SYSTEM
- 12-column grid, 1440px max, 48px side margins; generous empty space.
- Display: thin high-contrast serif (Cormorant-like), 96-140px, tight leading 0.95; body: small sans 13-15px, wide letter-spacing for the nav (0.2em, 11px uppercase).
- Colors: cabin #0E0B09, sunset #E9B47A to #6E7FA8 sky gradient, clouds #F2EDE6, paper #F3EEE6, ink #151311.
- Nav: centered wordmark with letter-spacing 0.4em, links left, pill button 'Book a flight' right with 1px border #FFFFFF33, radius 999px.
MOTION
- Hero: on scroll the window image scales from 1 to 6 (transform-origin center) over the first 100vh, pinned; the dark cabin frame fades out; headline words 'Precision in motion' slide apart horizontally (left word -40vw, right word +40vw).
- Manifesto: centered serif paragraph over the cloud photo, words fade from 0.2 to 1 opacity one by one as you scroll (scrub).
- Clouds section: a foreground cloud layer rises 30% faster than the background (parallax) and wipes the screen white, then the background crossfades to cream #F3EEE6.
- 'Fly the flagship': two serif words sit apart, the jet photo travels top to bottom between them (translateY -40vh to 60vh, scrub), then becomes a line-drawing blueprint of the cabin at 20% opacity.
- All scrubbed with easing none; entrances elsewhere 900ms cubic-bezier(0.22, 1, 0.36, 1).
SECTIONS
1. Hero: dark cabin, oval window, split serif headline, scroll hint bottom.
2. Manifesto paragraph over clouds.
3. Two-column 'details' copy over the cloud horizon.
4. White cloud wipe into cream.
5. 'Fly the flagship' with the jet crossing, then the cabin blueprint.
6. Fleet cards, advantages list, global routes, booking CTA, footer.
IMPLEMENTATION
- GSAP ScrollTrigger with pin and scrub for the hero zoom, the word reveal and the jet path; Lenis for smooth scroll.
- The window frame is an image with a transparent oval; the sky behind is a separate layer so the zoom stays sharp (use a large source, 2800px).
- prefers-reduced-motion: show every section in its final state, no scroll-driven movement.
- Visible focus rings on every link and button; all nav reachable by keyboard.
- Lazy-load images below the fold, animate only transform and opacity.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders or the generated images listed separately.
SUCCESS CHECK
- Scrolling the first screen zooms through the window and lands on the clouds without a jump.
- The jet crosses between the two headline words while you scroll, and reverses when you scroll up.
- With reduced motion the page reads top to bottom as static sections.
