Animated Splash Screen

Status: Decided (2026-06-04) — building toward MVP. Working POC at apps/playground/lottie-splash/.

Idea

A shared animated logo/splash for all client apps (PWA, iOS, Android, plus the dashboard/marketing surfaces). Author once, play on each platform — fitting the T.REX ARMS brand, where almost nothing is static.

Decision

Lottie. Author once in After Effects, export to a small JSON, play it everywhere via the mature native players.

Why Lottie over Rive:

• The goal is “alive” = moving, not reactive. Rive’s headline advantage is interactive state machines, which a splash doesn’t use.
• Isaac already authors in After Effects — Lottie’s native authoring tool. Rive means learning a new editor.
• Tiny asset, resolution-independent, runtime color overrides for dark/light, and the pipeline is one most motion designers already know.

Rive stays the deferred option if we later want interactive/reactive 2D (UI that responds to touch/scroll); it has a first-party Rust runtime. See Tech Stack → Animation & Graphics for how this fits the broader stack (Lottie 2D-plays / Bevy 3D / Rive deferred).

Players per surface

• iOS: lottie-ios (SwiftUI wrapper)
• Android: lottie-compose
• PWA / dashboard: lottie-web
• Marketing: honor the no-JS-runtime ethos — prefer animated SVG/CSS or a baked fallback over pulling in lottie-web just for the logo

Authoring & handoff (Isaac)

• Author in After Effects with the Bodymovin or LottieFiles plugin; export to .json.
• Use shape layers (not imported rasters) so it scales crisp. Masks, trim paths, transforms, parenting and basic gradients export cleanly.
• Silently break on export: most AE effects (glow/blur/distort), expressions, some blend modes, 3D layers, particle systems. Design within the LottieFiles supported-features matrix.
• Handoff spec (starting defaults): square comp, 60 fps, ~2.5 s of action, one-shot (no loop), transparent background, deliver .json (not .lottie). Keep plate/mark on solid fills so colors can be overridden at runtime for dark/light, or deliver both variants.
• The POC page doubles as an export-preview harness — drop an AE .json export onto it to validate fidelity in the real lottie-web player before handoff.

Prototype

apps/playground/lottie-splash/ — a pipeline proof, not the final asset: the real T.REX ARMS skull SVG (pulled from trex-arms.com) converted to Lottie and animated as plate springs in → skull draws itself on → fill resolves → light sweep. Self-contained page (replay / speed / loop, a Dark/Light background toggle, and a Flat/Glint/Off sheen selector), generated reproducibly by generate_lottie.py. The production asset comes from Isaac in AE and replaces the generated data.json. Hosted via the playground.

Resolved questions

• Lottie vs Rive → Lottie (above).
• Who authors → Isaac, in After Effects.
• Light / dark → single asset with runtime color overrides where possible; deliver both variants if needed.
• Reuse for other UI micro-animations (loaders, transitions) → yes, same Lottie pipeline.

Open questions

• Play on every launch, or only cold starts / first launch?
• Confirm canonical comp size / fps / duration with Isaac (the handoff-spec defaults above are a starting point).
• Final home for the production asset in the repo (a shared assets dir; the POC keeps it beside the demo for now).