1. Purpose-first animation strategy
Every animation must have a clear purpose: explain, reassure, guide, or reward. For /start, animations primarily explain steps (how setup works), reassure users about security (visual metaphors for safety), and guide attention (progress, where to click next). Avoid decorative motion that distracts from task completion. Use animation to reduce cognitive load: show state changes, confirm success, and highlight required actions.
2. Recommended animation types
Hero illustration (looping, subtle) — a friendly, abstract animation that communicates "secure custody" without showing sensitive details. Think vector shapes forming a shield and a hardware device silhouette. Keep loops short (6–10s) and non-intrusive.
Step-by-step micro-animations — short (200–600ms) transitions between onboarding steps: card slides, checkmark reveals, and progress bar fills. These should be snappy to communicate completion and orientation.
Micro-interactions — button hover, copy-to-clipboard success, QR-scan confirmation. Use brief, tactile motion and a visual confirmation (icon + tick).
3. Storyboard examples (content-ready)
Provide short scripts for the animation team and developers to implement. Example storyboard snippets:
- Welcome screen hero: device silhouette fades up (400ms), three dots orbit and resolve into a shield emblem (1.2s), slow breathing loop (8s) so it feels alive but calm.
- Connect device step: animated cable slides in from the right (350ms), connector magnetically snaps, device screen lights up with a soft pulse (repeat once).
- Create PIN: numeric pad appears with keys popping in (staggered 40ms delay), when user enters digits show a short lock closing animation (250ms) and subtle haptic-like pulse.
- Recovery phrase reveal: use gentle card flip animation to reveal each word, pause 900ms for users to read; include an explicit “Next” that animates into view after the pause.
- Success confirmation: confetti (vector shapes) that fades within 1s, then a persistent checkmark with accessibility-friendly text announcing completion.
4. Accessibility & inclusive motion
Respect prefers-reduced-motion. Detect this media query and replace non-essential motion with instant transitions or subtle opacity shifts. Provide text alternatives and ARIA live regions for dynamic state changes (e.g., "Step 3 of 5 — Create PIN"). Avoid flashing or high-contrast flicker. Ensure animations do not mask important content; users must be able to pause or skip animations if they want.
5. Technical implementation options
SVG + CSS animations — ideal for logos, hero shapes, and simple motion. Small file sizes and crisp at any resolution. Use SMIL sparingly; prefer CSS transforms and keyframes for better control.
Lottie (JSON animation) — great for complex, multi-layered vector animation exported from After Effects with Bodymovin. Lottie gives consistent playback and fine control (seek, play, pause) from JS. Provide a lightweight fallback (static SVG) for browsers or reduced-motion users.
Canvas / WebGL — only for advanced interactive visuals or when physics are required. Keep fallback and be mindful of battery/CPU on low-power devices.
6. Performance & bundle strategy
Lazy-load animation assets below the fold and only load the hero Lottie or SVG after the critical interactive elements render. Compress Lottie files and strip unused layers. Prefer vector over raster to keep sizes small. Measure RUM metrics (LCP, TTI) before and after animation to ensure no regressions. Use requestIdleCallback or IntersectionObserver to start non-critical animations once the browser is idle.
7. Content & copy pairing
Animation must be paired with concise copy. Example micro-copy to use with animations:
- Hero line: "Set up your Ledger in minutes — safe, private, and yours."
- Progress hint: "Step 2 of 4 — Create your PIN."
- Success state: "All set — your device is ready."
8. Testing & analytics
A/B test subtle vs. static hero on conversion and completion time. Track micro-interaction events (play, pause, skip) and onboarding completion rate. Use session replay and lab usability testing to confirm animations help rather than hinder comprehension.
9. Implementation snippet (example: CSS + SVG placeholder)
<svg width="240" height="160" viewBox="0 0 240 160" aria-hidden="true">
<defs><linearGradient id="g" x1="0" x2="1"><stop offset="0" /><stop offset="1" /></linearGradient></defs>
<rect width="240" height="160" rx="12" fill="#eef6ff"></rect>
<g transform="translate(50,30)" class="device">
<rect width="140" height="90" rx="8" fill="#ffffff" stroke="#dbeafe" />
<circle cx="20" cy="22" r="6" class="dot" />
</g>
</svg>
<style>
@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }
.device { transform-origin: 120px 77px; animation: pulse 8s infinite ease-in-out; }
@media (prefers-reduced-motion: reduce) { .device { animation: none } }
</style>
10. Governance & content ownership
Keep animation source files in a shared repository (After Effects + Bodymovin config for Lottie, or optimized SVG source). Version animations with design tokens (colors, spacing) to ensure brand consistency and make it easy to localize text overlays or adjust timing for translated content.
Closing guidance: Prioritize clarity and trust over flashiness. Animations on /start should make users feel guided and secure — not rushed. Deliver animations as accessible, performant assets with clear fallbacks and analytics to prove value.