AI Electron splash screen — design-to-code handoff

One splash design, two themes, two platforms (Jul 6, 2026). Justin designed the motion in Figma, then used Claude to produce the engineering package: native SwiftUI and Android 12+ AnimatedVectorDrawable code, plus a single cross-platform Lottie file per theme as an alternative route, with a token table, motion spec, platform-parity notes and a QA checklist.

Showcase rebuilt from the original handoff package. The animation frames below are rendered live from the original splash-light.json / splash-dark.json Lottie files; specs are quoted from the package README.

Motion, frame by frame — light

0 ms · hold
200 ms · entrance
400 ms · spinning in
600 ms · overshoot
750 ms · peak 1.06×
1000 ms · settled
1200 ms · wordmark in
1480 ms · final

Motion, frame by frame — dark

0 ms · hold
200 ms · entrance
400 ms · spinning in
600 ms · overshoot
750 ms · peak 1.06×
1000 ms · settled
1200 ms · wordmark in
1480 ms · final

Play it

Motion spec

PhaseTimeLayerChangeEasing
Hold0–150 ms—background only—
Entrance150–750 msmarkopacity 0→1, scale 0.80→1.06, rotation −40°→0°ease-out
Settle750–1000 msmarkscale 1.06→1.00ease-out
Hold1000–1050 ms———
Wordmark1050–1400 mswordmarkopacity 0→1ease-in-out

Hand-off to app content ≈200 ms after the wordmark lands. On Android 12+ the entrance is compressed to 600 ms to fit the OS's hard 1,000 ms system-splash budget — intentional, documented for QA.

Tokens

RoleTokenLightDark
Backgroundcolor/surface/default#F5F5F5#1F2126
Mark + wordmark tintcolor/surface/on-surface-var#666666#E5E5E5

Contrast 5.7:1 (light) and 10.4:1 (dark): both pass WCAG AA for graphical objects. Assets are template images, tinted by token rather than baked-in fills.

What engineering received

splash-screen-handoff/
├── README.md            spec + rationale
├── assets/              logo-mark.svg, logo-wordmark.svg
├── ios/
│   ├── SplashView.swift          SwiftUI animated splash
│   ├── LaunchScreen.storyboard   static first frame
│   └── Assets.xcassets/          light/dark colorsets
├── android/
│   ├── MainActivity.kt           splash install + wordmark fade
│   └── res/  themes (API 21+, 31+), colors (+night),
│             ic_splash_logo.xml, avd_splash_logo.xml
└── lottie/              alternative route
    ├── LOTTIE-HANDOFF.md
    ├── splash-light.json / splash-dark.json
    └── preview.html

Platform parity, written for QA

  • iOS: static launch screen, then the app animates from the first frame.
  • Android 12+: the mark animates inside the system splash itself (circle-masked by the OS; mark sits in the safe zone).
  • Android <12: static mark, no crash.
  • Reduce Motion shows the static final state on both platforms.
  • Light/dark follows the OS appearance only — no in-app theme logic.