BRAND Duolingo 2026 · Recipe: duo-cta-scrub

HEADER brand: Duolingo; design_date: 2026-10; kind: scene; used_in: Page: home S7 (final CTA), triggered also from S1 and S2 buttons evidence: measured from the splash module of the app bundle (final CTA component, spring hook, hover state), its CSS module and the Lottie files lottie/splash/98fa4e2f... (Duo, 1920x1060, 46 frames + loop) and 9b9c41cb... (scene, 1920x1060, 110 frames), plus live screenshots on https://www.duolingo.com/ 2026-10-01 unless marked LOOK At the bottom of the page a green landscape with a white valley holds an upright phone outline. As you scroll down to it, Duo the owl rises out of the phone; scrolling up sinks him back. Around the phone, gold coins, a treasure chest, gems, a heart, a flame and a dumbbell float in a loop. Whenever you hover any GET STARTED button on the page (top bar, hero or this one), Duo starts a short excited flap loop; leaving the button lets him settle. STRUCTURE section (flex, align end) -> left green block (#58cc02, flex 1, height 416px) + center column (max 1440px, overflow hidden) + right green block -> center column: text block (H1 + button, padding 40px 15px 0, gap 48px, margin-bottom -10.36% of the width at >=1080, -8.76% at 768-1079) -> scene box (aspect 1448:708, min-width 696px, relative): static SVG placeholder, scene Lottie (loop), Duo Lottie (scrub + hover loop; margin-top -16.99%), green bottom strip (aspect 1448:80, #58cc02), invisible probe strip (bottom 30.5%, height 3%) KEY PARAMETERS scene Lottie: 1920x1060, 30fps, 110 frames, loops while it is the scene nearest the viewport center Duo Lottie: 1920x1060, 30fps; frames 0-45 = rising out of the phone; frames 46-62 = flap loop scroll: frame = clamp(map(probeTop, viewportBottom -> viewportBottom - probeHeight, 0 -> 45), 0, 45); since the probe is only 3% of the scene tall, Duo rises quickly as that strip crosses the bottom edge of the viewport; smoothed by a spring (stiffness 170, damping 26, mass 1, clamped) and shown as segment [frame, frame+1] hover: any GET STARTED mouseenter sets "hovering"; after a 100ms delay the Duo Lottie switches to loop segment [46, 62] (0.53s per loop) until mouseleave, then returns to the scroll frame H1: Feather 64px -0.02em lowercase #58cc02 centered (48px tablet, 36px mobile); button: owl juicy 330x50 MOTION at probe below the viewport: Duo frame 0 (hidden in the phone) probe crossing the viewport bottom: frames 0 -> 45, spring-smoothed (Duo pops up, arms out) hover GET STARTED (+100ms): loop 46-62 (wing flap); mouse leave: back to the scroll frame scroll back: rewinds through the spring SCENE renderer: lottie-web SVG objects: white-screen phone with a 6px green outline and green base, Duo the owl (green, big round eyes, orange feet), gold coins with light stripes, wooden treasure chest, blue hexagon gems, red heart, orange flame, blue dumbbell, teal check badge disc, light-green squares background: white sky; green #58cc02 hills forming a deep U-shaped valley under the phone, continuing into the green footer post effects: none mobile: same, the 696px minimum width crops the sides at 390 STATES reduced motion: placeholder only (Duo not animated, hover has no effect) touch: no hover loop; scroll scrub only loading: placeholder until the first frame HOW TO BUILD Put a scene illustration in a box with a fixed aspect ratio and min width, flanked by flat green blocks so the hills continue to the edges. Drive a character animation's frame from the scroll position of a thin probe near the bottom of the scene through a spring; on hover of any primary CTA (with a 100ms delay) switch the character to a short looping segment. Fallback: a CSS translateY of a static Duo-like character tied to scroll (animation-timeline: view()) and a small CSS wiggle keyframe on CTA hover. PITFALLS the green must run seamlessly from the hills into the footer (same #58cc02, no divider); the character is scrubbed, not autoplayed; the hover reaction is triggered by every GET STARTED on the page, not only this one; keep the H1 lowercase Feather in green SCREENSHOTS - file: duolingo_2026_final-cta_d1440_entering.jpg shows: section entering from the bottom: H1, GET STARTED, the phone still empty (Duo frame ~0), coins and chest looping - file: duolingo_2026_final-cta_d1440_settled.jpg shows: section scrolled up: Duo risen out of the phone, green valley and footer start - file: duolingo_2026_final-cta_d1440_hover.jpg shows: GET STARTED hovered (brightness 1.1) and Duo in the flap loop