1
Creative Brief
- Project Overview
This concept reimagines Spotify’s core experience for Apple Vision Pro, focusing on spatial computing and immersive interactions. The project demonstrates how motion can enhance music discovery, navigation, and playback in a 3D environment.
- Goals
- Explore how motion reinforces spatial depth and hierarchy in visionOS.
- Showcase natural, fluid panel transitions that mirror Apple’s design language.
- Create immersive interactions that make music exploration intuitive and delightful.
- Challenges
- Designing motion that feels subtle, not distracting, in a mixed-reality environment.
- Ensuring UI readability while integrating 3D spatial layers.
- Balancing rich ambient visuals with performance-friendly motion.
- Timeline3 weeks – 2025
- Team Size
Solo concept project
- Roles
Solo concept project
- Tools
Figma, ProtoPie, After Effects (for motion refinement), Photoshop
- Outcome
A high-fidelity motion prototype showcasing Spotify’s spatial-first design in Vision Pro, presented as an immersive case study for portfolio and client demonstration.
2
Live Product Simulation
3
Motion Principles
- Spatial Anchoring – Every panel and element maintains its depth in space, reacting to head movement with parallax.
- Smooth Continuity – Motion bridges transitions between library, search, and now playing without abrupt cuts.
- Microinteraction Delight – Hover, pinch, and drag gestures get subtle but meaningful feedback.
- Clarity through Depth – Foreground actions dim or blur background context to focus attention.
Primary
Seconary
Tertiary
Key Motion Components
- Primary Motion
- Panel Transitions: Library, Search, and Now Playing glide in/out with depth scaling. Incoming panels slightly scale up while receding ones scale back and blur.
- Album Art Transitions: Skipping songs shifts album art forward/backward with eased slide + fade.
- Secondary Motion
- Hover States: Playlists and albums subtly scale up (105%) with soft shadows.
- Search Results: Cards animate in with staggered timing, creating a rhythmic cascade.
- Queue Expansion: Expands downward with elastic easing, maintaining spatial awareness.
- Tertiary Motion
- Ambient Pulses: Album covers “breathe” slowly with micro-scaling (1–2%).
- Background Blur Dynamics: Intensity adjusts based on focus (e.g., Search blurs Library).
- Rationale
These motion layers create hierarchy (what’s most important right now), immersion (music feels present in space), and usability (gestures always get visual confirmation).
Easing Curves & Durations
- Primary transitions (panels, album art) → Ease In-Out Cubic, 400–600ms
- Secondary feedback (hover, press, search list) → Ease Out Quint, 150–250ms
- Elastic interactions (queue expansion, panel drag physics) → Spring ease, damping ratio ~0.7
- Ambient animations (album breathing, blur transitions) → Very slow Ease In-Out Sine, 4–6s loops
navigational transitions
Custom Animated components
Infographics
4
Engineering Implentation
Approach
- Z-layer structuring: Panels anchored at distinct depths in 3D space.
- Dynamic blur: Adjustable based on focus state.
- Physics engine integration: For panel drag-and-release inertia.
- Performance considerations: Limit heavy particle effects; optimize for GPU rendering.
Prototype Setup
- Figma for spatial UI layout.
- ProtoPie for interactive motion prototyping (pinch, drag, hover).
- After Effects for refined demo sequences and portfolio showcase.
.jpg)
1
Build Overview
2
Creative Rationale
Goal
- Explore how motion reinforces spatial depth and hierarchy in visionOS.
- Showcase natural, fluid panel transitions that mirror Apple’s design language.
- Create immersive interactions that make music exploration intuitive and delightful.
Process
Key Highlights
Detailed Insights
Deep Dives
Learning Science
- Spatial Anchoring – Every panel and element maintains its depth in space, reacting to head movement with parallax.
- Smooth Continuity – Motion bridges transitions between library, search, and now playing without abrupt cuts.
- Microinteraction Delight – Hover, pinch, and drag gestures get subtle but meaningful feedback.
- Clarity through Depth – Foreground actions dim or blur background context to focus attention.
2
Creative Rationale
Goal
Challenges
Process
Impact and Results
Measurable Outcomes
Takeaways
1
The brief
Goal
- Explore how motion reinforces spatial depth and hierarchy in visionOS.
- Showcase natural, fluid panel transitions that mirror Apple’s design language.
- Create immersive interactions that make music exploration intuitive and delightful.
Challenges
- Designing motion that feels subtle, not distracting, in a mixed-reality environment.
- Ensuring UI readability while integrating 3D spatial layers.
- Balancing rich ambient visuals with performance-friendly motion.
Learning Objectives
A high-fidelity motion prototype showcasing Spotify’s spatial-first design in Vision Pro, presented as an immersive case study for portfolio and client demonstration.
Learning Science
- Spatial Anchoring – Every panel and element maintains its depth in space, reacting to head movement with parallax.
- Smooth Continuity – Motion bridges transitions between library, search, and now playing without abrupt cuts.
- Microinteraction Delight – Hover, pinch, and drag gestures get subtle but meaningful feedback.
- Clarity through Depth – Foreground actions dim or blur background context to focus attention.
Learning Methodolgy
Process
Impact and Results
- Panel Transitions: Library, Search, and Now Playing glide in/out with depth scaling. Incoming panels slightly scale up while receding ones scale back and blur.
- Album Art Transitions: Skipping songs shifts album art forward/backward with eased slide + fade.
Measurable Outcomes
- Hover States: Playlists and albums subtly scale up (105%) with soft shadows.
- Search Results: Cards animate in with staggered timing, creating a rhythmic cascade.
- Queue Expansion: Expands downward with elastic easing, maintaining spatial awareness.
Takeaways
- Ambient Pulses: Album covers “breathe” slowly with micro-scaling (1–2%).
- Background Blur Dynamics: Intensity adjusts based on focus (e.g., Search blurs Library).
Accessibility & inclusion
These motion layers create hierarchy (what’s most important right now), immersion (music feels present in space), and usability (gestures always get visual confirmation).
3
Results
Apple Vision Pro – Spotify UI
No items found.
No items found.
Apple Vision Pro – Spotify UI
No items found.
No items found.
.avif)
.jpg)
.jpg)