AirPods
Max
Exploring Apple-style product storytelling through scroll-mapped 3D object states.
What I explored
• Mapping scroll position to object scale & rotation
• Maintaining product continuity across sections
• Using spatial movement instead of hard cuts
• Full-viewport takeover as narrative climax
Reflection
This experiment helped me understand scroll as a timeline rather than a trigger.
A future iteration would replace the 2D human image with a 3D head model to allow true Z-axis placement of the product.
Scroll States — AirPods Max Experiment
Section 1
Hero / Establishment
Intent
Introduce object as hero
Technique:
Real-time 3D object
Scroll Range
Visual State
Motion Logic
0–10%
AirPods appear large, centered
Scale up, subtle rotation
10–20%
Product settles
Ease-out scale, stabilize
Intent
Show real-world use
Technique:
Object repositioning (not new asset)
Section 2
Context introduction (Human)
Scroll Range
Visual State
Motion Logic
20–35%
Side-profile human appears
Product aligns to ear
35–45%
AirPods rotate into position
Rotation + positional offset
Section 3
Pairing / Feature moment
Intent
Familiar Apple interaction
Technique:
Scroll-mapped rotation + scale
Scroll Range
Visual State
Motion Logic
45–60%
iPhone pairing UI appears
Product rotates & shifts
60–70%
Product expands left of phone
Scale + lateral movement
Intent
Emotional payoff
Technique:
Full spatial takeover
Section 4
Narrative climax / Takeover
Scroll Range
Visual State
Motion Logic
70–90%
Product grows dominant
Aggressive scale-up
90–100%
Full viewport takeover
Center lock + max scale
Why this interaction matters
This experiment explores scroll as a continuous narrative device rather than discrete triggers, reinforcing product continuity and emotional buildup.
Dhanyawad
ッ
Design isn't about Aesthetics, it's about Storytelling, evoking emotions and driving actions