Animation content for ledger.com/start

Purpose: convert first-time visitors into confident Ledger users by using a short, trust-building, accessible animation that explains steps, reassures about security, and drives visitors to start onboarding. Length: one hero animation (18–28s) + 3 progressive micro-animations for interactive steps.

Overview (one-sentence summary)

Show a clear, human-centered onboarding journey in one smooth hero animation: introduce Ledger as the secure home for crypto, demonstrate the simple step-by-step setup, show protection features (seed, device security), and end with a confident CTA — “Get started” — while using friendly motion, concise copy, and accessible cues.

Tone & visual language

Calm, professional, reassuring. Motion should be smooth, minimal, purposeful. Use soft easing (cubic-bezier(0.2, 0.9, 0.2, 1)) and subtle parallax layers to add depth. Colors align with Ledger brand: dark navy contexts, gentle blue highlights, and white space to emphasize clarity.

Hero Animation — 20 seconds (Script & storyboard)

Micro-animations for interactive steps (in-page, ledger.com/start)

1. Connect micro-animation — when user clicks “Connect”, animate a cable drawing itself to the device (600ms) and then show a green check micro-affirmation for 600ms.
2. PIN input micro-interaction — each number press gives a 40ms tactile scale (0.98 → 1), then a soft glow on success.
3. Recovery phrase reveal — when revealing the 24 words, use a staggered fade-in from left to right (24 × 45ms) with the ability to pause/stop for accessibility.

On-screen copy (concise, for animation overlays)

Hero headline: “Your crypto, secured.”
Subhead lines used in scenes: “Not all wallets protect you the same way.” / “Connect your Ledger” / “Create a PIN” / “Back up your recovery phrase” / “Bank-level security for your assets.” CTA: “Get started”

Voiceover script (optional) — 20s friendly VO

Ledger secures your crypto. (pause 0.25s)
Not all wallets protect you the same way. (pause 0.3s)
Connect your Ledger, set a PIN, back up your recovery phrase — it’s that simple. (pause 0.4s)
Bank-level security for your assets. Start securing your crypto with Ledger.
    

Timing & motion specs

• Frame rate target: 60fps for web canvas animations (use requestAnimationFrame or CSS transforms).
• Easings: primary — cubic-bezier(0.2, 0.9, 0.2, 1); micro bounces — cubic-bezier(0.22, 1.2, 0.27, 1.02).
• Total hero length: 18–22s. Break into segments so users can skip to the CTA.
• Animation-friendly assets: export vector SVGs and Lottie JSON for compact, crisp playback across resolutions.

Accessibility & performance

Do not autoplay with sound. Respect “prefers-reduced-motion” — if enabled, switch to static illustrations with clear, readable copy and make interactive steps fully keyboard accessible.

• Provide text alternatives: transcript of voiceover and on-screen copy in DOM for screen readers.
• Keyboard focus states: ensure CTA and step controls receive visible focus outlines.
• Lazy-load Lottie/SVG only when in viewport to save bandwidth.

Assets & delivery

Recommended deliverables for engineering/design handoff:

• Hero Lottie file (JSON) + fallback animated SVG sprite
• Icon SVGs for feature row (optimized)
• Voiceover wav/mp3 + transcript (if using VO)
• Timing & animation tokens in a JSON file (delays, durations, easings)
• Example CSS + tiny JS snippet to trigger micro-animations on click/hover

Implementation example (snippets)

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-animation,
  .micro-animation{ animation: none !important; transform: none !important; }
}

/* CTA pulse */
.cta { animation: ctaPulse 1800ms infinite ease-in-out; }
@keyframes ctaPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
    

Localization & copy variants

Keep overlay copy short so translations fit UI. Provide alternate VO scripts and test animation timing for longer languages (German, French, Spanish). Always render on-screen text into DOM elements (not baked into video) so it is translatable and accessible.

Conversion & A/B test ideas

• Variant A: Full hero animation (18–22s) + CTA
• Variant B: Static hero image + short micro-animations on hover (for faster conversion)
• Measure: Click-through-to-onboarding, time-to-complete setup, bounce for users with reduced motion

Closing guidance

Design motion to reassure: avoid alarmist effects, keep micro-animations optimistic and educational. Prioritize performance and accessibility—use Lottie for crisp vector motion, provide text alternatives, and allow users to proceed without waiting on longer animations. The hero should build trust fast and get users to the “Get started” flow with confidence.

— End of animation brief and content for ledger.com/start. If you want, I can convert specific scenes to Lottie-ready JSON-friendly descriptions or provide example SVG assets and exact timing JSON for engineering handoff.