Animate OTA launch flow on homepage How It Works

Closed
RI
19d ago
+18623-9287

Summary

Restores the original How It Works card 3 artwork and makes the motion teach the feature without captions:

  1. App is open — My App chrome + icon stable (~0.7s)
  2. Download in background — progress bar fills + localized “Updating in background…” while the running UI stays fully visible (~2.0s)
  3. Next launch — app exits, brief dark launch screen, same app returns with update applied (~1.4s)

Removed per review: replay button, white flash, ripple flourish, badge pop, generic phone, version stickers.

prefers-reduced-motion: reduce → static post-launch end state, no controls.

GSAP labeled timeline on the restored SVG (~4.1s total, plays once on scroll into view).

Captured from local preview at HEAD 0786f2f (includes beat-C timing fix).

Before / after

Beat A — app open and usable:

OTA card 3 beat A: app open and usable

Beat B — background download (progress bar + status, app stays up):

OTA card 3 beat B: download progress while app stays open

Beat C — relaunch (dark launch blank):

OTA card 3 beat C: app exits for next launch

Beat D — update applied (no progress/status):

OTA card 3 beat D: app returned after update applied

Recording

Full ~4.4s illustration sequence (A 0.7s → B 2.0s → C 0.55s → D 1.15s), captured from live preview stills at storyboard timings. Plays once on scroll into view. No replay control.

Files

  • apps/web/src/components/landing/OtaLaunchIllustration.astro — restored SVG + progress bar + launch blank hooks
  • apps/web/src/components/landing/ota-launch-animation.client.ts — labeled GSAP timeline (beats A/B/C)

Timeline

LabelDurationWhat happens
beatA0.7sHold stable running app
beatB2.0sProgress bar 0→100%, status fades in, staged bundle behind UI
beatC1.4sApp UI exits, launch blank, bundle absorbed, app returns
Open in Web Open in Cursor 

View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.

Summary by CodeRabbit

  • New Features
    • Added an interactive OTA update illustration to the “How It Works” section.
    • Visualizes bundle downloads, staged updates, background progress, and app update status.
    • Includes animated progress indicators and status messaging.
    • Animations begin when the illustration enters view and respect reduced-motion preferences.
    • Added accessible labels and descriptions to explain the update process for assistive technologies.