Description
Act as a world-class front-end engineer, motion designer, and UI/UX director. Design and develop a cinematic, scroll-driven landing page for a global automotive manufacturer specializing in wheel hub bearings.
The result must feel like a high-end product film controlled by scroll, not a traditional website.
Core Development Requirements
Use:
HTML5 (semantic)
CSS3 (Grid + Flexbox)
Vanilla JavaScript
Animation libraries:
GSAP + ScrollTrigger (REQUIRED)
Lenis (or equivalent) for smooth scrolling
Code must be:
Modular and production-ready
Performance-optimized
Clean and well-structured
Cinematic Experience Definition (Critical)
The page must implement scroll-as-timeline behavior:
Scrolling = controlling animation progress
Sections behave like video scenes
Use pinning, scrubbing, and timeline sequencing
No basic “fade-in” or template animations
Mandatory Techniques:
ScrollTrigger scrubbed timelines
Pinned sections (extended scroll duration)
Layered depth animation
Mask/reveal transitions
Cinematic pacing (slow, controlled motion)
Visual Direction
Theme: Luxury industrial / precision engineering
Color palette:
Light theme
White / off-white / light grey / metallic
Optional subtle gold accents
❌ NO blue tones
Typography:
Clean, modern, high-end hierarchy
Layout:
Generous whitespace
Grid precision
Minimal but powerful visuals
Full Cinematic Page Architecture
Scene 1 — Hero Cinematic Intro (Pinned)
Goal: Immediate “film-like” impact
Fullscreen section (pinned)
Background:
Layered product visuals OR image sequence
Effects:
Slow zoom
Depth parallax (multi-layer)
Text fade + scale
Scroll behavior:
Section pinned for 1500–2500px scroll distance
Animation tied to scroll (scrub)
Optional (High-End):
Frame-by-frame image sequence (simulated video)
Scene 2 — Brand Story Reveal (Pinned Transition)
Goal: Transition from emotion → information
Masked reveal (wipe or clip-path)
Text emerges progressively
Image fades in with slight motion
Effects:
Clip-path reveal
Opacity + translate combo
Background transition (light shift)
Scene 3 — About Us (Split Layout Cinematic)
2-column layout:
Left: text
Right: image placeholder
Scroll effects:
Text lines animate sequentially
Image slightly parallax shifts
Subtle pin (short duration)
Scene 4 — Product Categories (Grid Reveal System)
Grid: 4 columns
Cards initially hidden
Scroll animation:
Staggered reveal (not basic fade)
Slight upward motion + scale-in
Depth shadow increase
Hover:
Elevation + highlight border glow
Scene 5 — Featured Products (Cinematic Grid Showcase)
Layout: 4 × 2 grid
Scroll behavior:
Each row reveals in sequence
Products scale from 0.95 → 1
Subtle lighting sweep effect across items
Optional:
Micro parallax inside cards
Scene 6 — Why Choose Us (Pinned Story Blocks)
Structure:
4 repeating blocks
Each block:
Left: text content
Right: image
Cinematic behavior:
Each block is individually pinned
Transition between blocks:
Slide + fade overlap
Text animates line-by-line
Image moves slightly (depth illusion)
Scene 7 — Product Engineering Highlight (Advanced Cinematic Section)
High-impact section (IMPORTANT)
Options:
Exploded view simulation (layered images)
OR rotating product illusion (scroll-controlled)
Effects:
Parts move subtly
Lighting shifts
Focus transitions
Scene 8 — Image Showcase Carousel (Smooth Cinematic Rail)
Horizontal scroll illusion
Auto + manual control
Scroll-linked behavior:
Slight horizontal drift tied to vertical scroll
Scale and opacity variation
Scene 9 — News / Insights Section
Clean card layout
Animation:
Stagger reveal
Minimal motion (calm after heavy scenes)
Scene 10 — Contact Form (Premium Interaction Zone)
Structured multi-field form:
Name, Email, Company, Phone, Message
Interactions:
Floating labels
Focus glow
Smooth validation (JS)
Scroll effect:
Gentle reveal (no heavy animation)
Scene 11 — Footer (Elegant Exit)
Multi-column layout
Minimal motion
Clean typography
Global Motion System Rules
Use scrub: true for key animations
Prefer ease: "none" for scroll-controlled motion
Avoid:
Bounce effects
Overly fast transitions
Repetitive animations
Performance Requirements (Strict)
Lazy load all images
Use optimized assets
Avoid layout thrashing
Limit heavy JS calculations
Ensure smooth FPS during scroll
Code Output Requirements
Deliver:
Full HTML structure
CSS (organized, scalable)
JavaScript (GSAP timelines clearly structured)
Clearly comment:
Each scene
Animation logic
Use placeholders for:
Images
Product content
Experience Benchmark
The final result must feel comparable to:
Apple product pages
High-end automotive OEM suppliers
Final Directive
Do NOT build a typical website.
Build a scroll-controlled cinematic experience where:
the user feels like they are watching a precision-engineered product film, driven entirely by their scrolling.