AURA
Motion Spec · 6 screens · 60 seconds

Every reveal,
timed to the millisecond.

A frame-accurate motion specification for AURA's six-screen journey. Engineered timings, easing curves, staggers, haptics, and exit transitions — every beat earns its place in the 60-second budget.

60-second master budgetdemo target
01 · Onboarding0–6,000 ms
02 · AI Skin Analysis6,000–14,000 ms
03 · Virtual Try-On14,000–28,000 ms
04 · AI Stylist28,000–42,000 ms
05 · Generative Visualization42,000–52,000 ms
06 · Shoppable Results52,000–60,000 ms

Global motion language

Easing curves

  • brand cubic-bezier(0.22, 1, 0.36, 1) — soft luxury out
  • spring cubic-bezier(0.2, 0.8, 0.2, 1) — magnetic settle
  • back cubic-bezier(0.34, 1.56, 0.64, 1) — gentle overshoot
  • inOut cubic-bezier(0.65, 0, 0.35, 1) — breathing loops

Duration scale

  • x-fast 120 ms — press / haptic feedback
  • fast 220 ms — chip / tab swap
  • base 320–420 ms — bubble / drawer
  • slow 600–800 ms — match-bar / type-on
  • signature 7,400 ms — generative develop

Stagger rules

  • Chip groups: 60–90 ms
  • Trait chips (scan): 200 ms — slow on purpose
  • SKU cards: 100 ms
  • Pose dots: 40 ms — rapid lock

Haptic palette

  • soft — card press / drag
  • light — chip select, bubble settle
  • medium — add-to-look, CTA
  • heavy thump — save look to genome

Reduced-motion fallback: all fade-up, scale-in, and blur-develop beats collapse to a 120 ms opacity fade. The signature generative develop becomes a single cross-fade. Loops (corona, particle bloom, CTA glow) are paused. Haptics remain.

Screen 01 · 0–6,000 ms

Onboarding

Disappear as fast as possible. The product is the demo — every motion pulls the user toward the camera.

0 → 6.0s reveal
Local timeline · 0 → 6.0sReveal complete @ 6.0s
Aurora gradient
Logo lockup
H1 (3 lines)
Vibe chips (×4)
Begin CTA
Sign-in link

Reveal beats

tdurElementPropertyChangeEase
0 ms1200 msAurora gradientbackground-position + hue-rotate(0 → 12°)static → drifting
↳ Loops forever at 40s; first sweep visible immediately.
linear
80 ms520 msLogo lockupopacity 0 → 1, translateY 8 → 0fade-upcb(0.22, 1, 0.36, 1)
220 ms620 msH1 (3 lines)opacity 0 → 1, translateY 16 → 0stagger fade-up per line
↳ Stagger 90 ms between lines.
cb(0.22, 1, 0.36, 1)
600 ms480 msVibe chips (×4)opacity 0 → 1, scale 0.92 → 1scale-in
↳ Stagger 70 ms.
cb(0.34, 1.56, 0.64, 1)
980 ms420 msBegin CTAopacity 0 → 1, translateY 20 → 0fade-upcb(0.22, 1, 0.36, 1)
1400 ms—Sign-in linkopacity 0 → 0.6ambient fade
↳ Demoted: 10pt, no animation flourish.
linear

Micro-interactions

Tap vibe chip

scale 1 → 1.04, amber glow ring expands 0 → 12px

180 mscb(0.34, 1.56, 0.64, 1)haptic · Light selection

Press Begin

Button morphs: border-radius 16 → 999, width 100% → 64px, then scales to fullscreen viewfinder

260 ms morph + 420 ms expandcb(0.22, 1, 0.36, 1)haptic · Medium impact at expansion start

Hold Begin

Inner gradient slides 100% → -100% (loading shimmer)

900 ms looplinear

Exit transition → Screen 02

Begin button expands radially to become the camera viewfinder (420 ms, EASE.brand). Direct match-cut to Screen 02; no fade.

Screen 02 · 6,000–14,000 ms

AI Skin Analysis · The wow moment

Make the camera feel alive, not clinical. The user must feel read, not measured. Three named traits = the wow.

0 → 8.0s reveal
Local timeline · 0 → 8.0sReveal complete @ 8.0s
Camera feed
Corona ring (outer)
Corona ring (inner)
Scan line (1px + 20px magenta glow)
Trait chip · WARM OLIVE
Trait chip · LUMINOUS
Trait chip · SUNSET PALETTE
Corona
Trait dock card

Reveal beats

tdurElementPropertyChangeEase
0 ms600 msCamera feedblur(8px) → blur(0), brightness 0.6 → 1wakecb(0.22, 1, 0.36, 1)
400 ms4000 msCorona ring (outer)scale 1 → 1.06 → 1, opacity 0.5 → 0.8 → 0.5breathe
↳ Loops every 4s.
cb(0.65, 0, 0.35, 1)
1400 ms4000 msCorona ring (inner)scale 1 → 1.04 → 1breathe (offset 1s)
↳ 1s phase offset from outer for parallax.
cb(0.65, 0, 0.35, 1)
800 ms4000 msScan line (1px + 20px magenta glow)translateY -100% → 100%single vertical sweep
↳ Exactly 4s — sets the rhythm of the whole moment.
cb(0.65, 0, 0.35, 1)
4900 ms360 msTrait chip · WARM OLIVEopacity 0 → 1, translateY 12 → 0, blur(6px) → 0materializecb(0.22, 1, 0.36, 1)
5100 ms360 msTrait chip · LUMINOUSopacity 0 → 1, translateY 12 → 0, blur(6px) → 0materialize
↳ 200 ms stagger from previous.
cb(0.22, 1, 0.36, 1)
5300 ms360 msTrait chip · SUNSET PALETTEopacity 0 → 1, translateY 12 → 0, blur(6px) → 0materialize
↳ 200 ms stagger.
cb(0.22, 1, 0.36, 1)
6200 ms480 msCoronascale 1 → 0.92, opacity 0.6 → 0contract & exhalecb(0.22, 1, 0.36, 1)
6400 ms520 msTrait dock cardtranslateY 100% → 0dock to bottomcb(0.2, 0.8, 0.2, 1)

Micro-interactions

Each trait detected

Soft particle bloom behind the chip (12px → 0 over 600ms)

600 mscb(0.22, 1, 0.36, 1)haptic · Subtle tick per chip

Tap trait chip

Chip flips on Y axis to reveal 1-line definition

320 mscb(0.22, 1, 0.36, 1)

Exit transition → Screen 03

Auto-advance after 8s. Dock card slides up to become the try-on drawer in Screen 03.

Screen 03 · 14,000–28,000 ms

Virtual Try-On

Single canvas, three modalities. Never break the mirror. Every interaction settles in under 300 ms.

0 → 1.2s reveal
Local timeline · 0 → 1.4sReveal complete @ 1.2s
Top tab bar
Pose-tracking dots (×6)
Pose-tracking dots
Product drawer
Backdrop behind drawer
Look bubble (top-right)

Reveal beats

tdurElementPropertyChangeEase
0 ms240 msTop tab baropacity 0 → 1, translateY -8 → 0slide-downcb(0.22, 1, 0.36, 1)
120 ms320 msPose-tracking dots (×6)scale 0 → 1, opacity 0 → 0.8scale-in stagger
↳ Stagger 40 ms — feels like keypoints locking on.
cb(0.34, 1.56, 0.64, 1)
800 ms600 msPose-tracking dotsopacity 0.8 → 0fade once tracking is lockedlinear
480 ms380 msProduct drawertranslateY 100% → 0slide-upcb(0.2, 0.8, 0.2, 1)
480 ms380 msBackdrop behind drawerbackdrop-filter blur(0) → blur(16px)blur-incb(0.22, 1, 0.36, 1)
700 ms320 msLook bubble (top-right)opacity 0 → 1, scale 0.8 → 1scale-incb(0.34, 1.56, 0.64, 1)

Micro-interactions

Switch tab (Fashion / Accessory / Beauty)

Active pill morphs along magnetic track

300 mscb(0.34, 1.56, 0.64, 1)haptic · Light

Tap product in drawer

Thumbnail flies in arc to Look bubble; bubble counter ticks +1 with 1.15× pop

520 mscb(0.22, 1, 0.36, 1)haptic · Medium

Drag drawer up/down

Rubber-band at extents (resistance 0.4)

Livecb(0.2, 0.8, 0.2, 1)

Press product card

scale 1 → 0.97, brightness 1 → 1.06

120 mscb(0.22, 1, 0.36, 1)haptic · Soft

Exit transition → Screen 04

Look bubble pulses once and expands to fullscreen as transition into Screen 04. 480 ms, EASE.brand.

Screen 04 · 28,000–42,000 ms

AI Stylist · Conversational

Voice-first, words-as-fabric. AURA's bubbles must feel translucent and slow; user input must feel quick and confident.

0 → 0.9s reveal
Local timeline · 0 → 0.9sReveal complete @ 0.9s
Header (status pill)
AURA opening bubble
Suggestion chips (×4)
Push-to-talk orb

Reveal beats

tdurElementPropertyChangeEase
0 ms320 msHeader (status pill)opacity 0 → 1, translateY -6 → 0fade-downcb(0.22, 1, 0.36, 1)
120 ms360 msAURA opening bubbleopacity 0 → 1, translateY 8 → 0fade-upcb(0.22, 1, 0.36, 1)
380 ms420 msSuggestion chips (×4)opacity 0 → 1, scale 0.94 → 1scale-in stagger
↳ Stagger 60 ms.
cb(0.34, 1.56, 0.64, 1)
600 ms320 msPush-to-talk orbscale 0 → 1, glow 0 → 18pxbloomcb(0.34, 1.56, 0.64, 1)

Micro-interactions

Press-and-hold orb

Orb scale 1 → 1 + (rms × 0.18); halo glow modulates 8 → 32px in real time; waveform bars react to FFT

Live (80 ms transition smoothing)cb(0.22, 1, 0.36, 1)haptic · Continuous on press, release tick

Bubble appears (AURA)

fade-up 8px, 280 ms

280 mscb(0.22, 1, 0.36, 1)

Bubble appears (user)

fade-up 8px + 1.02× pop on settle

220 mscb(0.34, 1.56, 0.64, 1)

Typing indicator

Three dots: opacity 0.3 → 1 → 0.3, 600 ms loop, offset 180 ms each

600 ms loopcb(0.65, 0, 0.35, 1)

Tap suggestion chip

Chip scales 0.96, dispatches and fades; reply re-streams live

200 mscb(0.22, 1, 0.36, 1)haptic · Light

Exit transition → Screen 05

When user accepts a recommendation, the latest AURA bubble blooms outward to fill the screen and cross-fades into the generative canvas. 520 ms, EASE.brand.

Screen 05 · 42,000–52,000 ms

Generative Visualization

The 'future you' moment. The image must feel like it's being developed, not loaded. Hold the room's silence.

0 → 7.4s reveal
Local timeline · 0 → 7.5sReveal complete @ 7.4s
Hero image
Hero image
Film grain overlay
Particle bloom (chrome highlight ×2)
Look name (display serif)
CTA glass card

Reveal beats

tdurElementPropertyChangeEase
0 ms7400 msHero imageblur(20px) → blur(0)develop
↳ The signature beat. 7.4s exactly — not 7, not 8.
cb(0.22, 1, 0.36, 1)
0 ms7400 msHero imagesaturation 1.25 → 1.0, brightness 1.15 → 1.0color settlecb(0.22, 1, 0.36, 1)
0 ms7400 msFilm grain overlayopacity 0.18 → 0.04grain settleslinear
800 ms1600 msParticle bloom (chrome highlight ×2)scale 0.6 → 1.4, opacity 0.6 → 0radial pulse
↳ Loops every 1.6s during develop.
cb(0.22, 1, 0.36, 1)
5800 ms1200 msLook name (display serif)characters reveal type-on (per-char opacity 0 → 1)typewrite
↳ Stagger 32 ms per character.
linear
7000 ms480 msCTA glass cardtranslateY 60 → 0, opacity 0 → 1ascend
↳ Magenta glow blooms 0 → 24px on settle.
cb(0.2, 0.8, 0.2, 1)

Micro-interactions

CTA hover/press

Glow 24 → 36px, scale 1 → 1.02

240 mscb(0.22, 1, 0.36, 1)haptic · Medium on tap

Long-press hero

Look stamps into style genome — 1.04× pulse + radial flash + 'thump' haptic

320 mscb(0.34, 1.56, 0.64, 1)haptic · Heavy thump

Swipe up on hero

Image lifts to top quarter; SKU cards rise from below in stagger

560 mscb(0.22, 1, 0.36, 1)

Exit transition → Screen 06

CTA tap or swipe-up: hero compresses to 28vh, transitions seamlessly into Screen 06's hero. No cut, no fade — physical continuity.

Screen 06 · 52,000–60,000 ms

Shoppable Results

Trust object: the match bar. Every motion here is a receipt. Three SKUs, one CTA, zero filtering.

0 → 1.4s reveal
Local timeline · 0 → 1.5sReveal complete @ 1.4s
Hero image (compressed)
Look title bar
SKU card · #1
SKU card · #2
SKU card · #3
Match bar (per card)
Buy CTA

Reveal beats

tdurElementPropertyChangeEase
0 ms420 msHero image (compressed)translateY 0 → 0 (carried over from Screen 05)settle
↳ Inherits position from generative exit.
cb(0.22, 1, 0.36, 1)
200 ms360 msLook title baropacity 0 → 1, translateY 8 → 0fade-upcb(0.22, 1, 0.36, 1)
380 ms360 msSKU card · #1opacity 0 → 1, translateY 16 → 0fade-upcb(0.22, 1, 0.36, 1)
480 ms360 msSKU card · #2opacity 0 → 1, translateY 16 → 0fade-up
↳ 100 ms stagger.
cb(0.22, 1, 0.36, 1)
580 ms360 msSKU card · #3opacity 0 → 1, translateY 16 → 0fade-up
↳ 100 ms stagger.
cb(0.22, 1, 0.36, 1)
760 ms600 msMatch bar (per card)width 0% → score%fill L→R
↳ Triggered when card enters viewport.
cb(0.22, 1, 0.36, 1)
1100 ms380 msBuy CTAtranslateY 24 → 0, opacity 0 → 1risecb(0.2, 0.8, 0.2, 1)

Micro-interactions

Press SKU card

scale 1 → 0.97, shadow soft → tight

120 mscb(0.22, 1, 0.36, 1)haptic · Soft

Toggle item in cart

Match-bar pulse, total animates with tabular numerals (count-up 280ms)

280 mscb(0.22, 1, 0.36, 1)haptic · Light tick

Buy CTA idle

Glow pulses 18 → 28 → 18px every 6s

6s loopcb(0.65, 0, 0.35, 1)

Long-press hero

Stamps look into genome (radial flash + thump)

320 mscb(0.34, 1.56, 0.64, 1)haptic · Heavy

Successful purchase

Confetti of color-palette tokens (8 chips fall + fade) over the look

1400 mscb(0.22, 1, 0.36, 1)

Exit transition → Screen 07

Confirmation overlay slides up from bottom (420 ms, spring) with order summary. Journey complete at 60s.

The principle

Motion is a promise.
Every millisecond is a contract.

No flourish without function. No wait without anticipation. Every animation in AURA serves the reveal — or it doesn't ship.

See the journey