{/* aurora blob 1 — teal */}

{/* aurora blob 2 — lilac */}

{/* grain */}

); } // ── Eyebrow + Headline ──────────────────────────────────────────────── function V2Headline() { const t = useTime(); // Eyebrow reveals with letter-spacing expand const eyebrowT = Easing.easeOutCubic(clamp((t - 0.1) / 0.7, 0, 1)); // Headline words reveal in sequence, each with a mask wipe. // Two-line beat: "Six stages." / "One confident hire." const words = [ { text: 'Six', breakAfter: false }, { text: 'stages.', breakAfter: true }, { text: 'One', breakAfter: false }, { text: 'confident', breakAfter: false, italic: true }, { text: 'hire.', breakAfter: false }, ]; const wordStart = 0.5; const wordStep = 0.18; // Support line fades in after headline const supportT = Easing.easeOutCubic(clamp((t - 1.8) / 0.9, 0, 1)); // Accent rule underline const ruleT = Easing.easeOutCubic(clamp((t - 2.2) / 0.6, 0, 1)); return (

{/* eyebrow with thin rule */}

How it works

{/* Headline — serif display with mask wipe per word */}

{words.map((w, i) => { const localT = Easing.easeOutCubic(clamp((t - (wordStart + i * wordStep)) / 0.6, 0, 1)); const italic = w.italic; return ( = 1 ? 'none' : `inset(-0.3em -0.3em ${(1 - localT) * 100 - 20}% -0.3em)`, paddingBottom: '0.18em', marginRight: i < words.length - 1 && !w.breakAfter ? '0.32em' : 0, }}> {w.text} {w.breakAfter &&

} ); })}

{/* supporting line */}

From the first prompt to the final dashboard — a workflow that sounds like your brand and scores like your best interviewer.

); } // ── The rail — a single line across, with a traveling light pulse ────── function V2Rail({ y, startX, endX }) { const t = useTime(); const RAIL_START = 3.0; // rail draws after headline const drawT = Easing.easeInOutCubic(clamp((t - RAIL_START) / 1.2, 0, 1)); const width = (endX - startX) * drawT; // Pulse after rail drawn — travels on loop const PULSE_START = RAIL_START + 1.2; const pulsePhase = t < PULSE_START ? -1 : ((t - PULSE_START) % 4) / 4; const pulseX = startX + (endX - startX) * pulsePhase; const pulseActive = t >= PULSE_START; return ( <> {/* Rail line */}

{/* Tick marks behind rail at each stage position */} {pulseActive && ( <> {/* Traveling pulse — glow orb */}

)} ); } // ── Stage ────────────────────────────────────────────────────────────── function V2Stage({ stage, index, cx, railY, activeIndex }) { const t = useTime(); const RAIL_START = 3.0; const start = RAIL_START + 1.2 + index * 0.38; // after rail completes // Node (circle on rail) const nodeT = Easing.easeOutBack(clamp((t - start) / 0.55, 0, 1)); // Icon draw progress (pen plot) const iconProgress = clamp((t - start - 0.2) / 0.9, 0, 1); // Number counts up const numT = clamp((t - start - 0.15) / 0.7, 0, 1); const numValue = Math.floor(interpolate([0, 1], [0, parseInt(stage.num, 10)], Easing.easeOutCubic)(numT)); const numStr = String(numValue).padStart(2, '0'); // Title mask wipe const titleT = Easing.easeOutCubic(clamp((t - start - 0.3) / 0.55, 0, 1)); // Description line stagger const descT = Easing.easeOutCubic(clamp((t - start - 0.45) / 0.7, 0, 1)); // Active spotlight (looped focus) const ALL_IN = RAIL_START + 1.2 + STAGES_V2.length * 0.38 + 0.6; const isActive = activeIndex === index; const activeGlow = isActive ? 1 : 0; const NODE_SIZE = 88; const topY = railY - NODE_SIZE / 2; // circle centered on rail const Icon = stage.Icon; // Active lift const liftY = isActive ? -8 : 0; return (

{/* Halo — active spotlight */}

{/* Node: circle on the rail */}

{/* outer ring */}

{/* inner fill */}

{/* icon */}

{/* Number — serif, large */}

{numStr}

{/* Divider */}

{/* Title with mask wipe */}

{stage.title}

{/* Description */}

{stage.desc}

); } // ── Footer meta (just a timestamp + brand mark for polish) ────────────── function V2FooterMeta() { const t = useTime(); const footerT = Easing.easeOutCubic(clamp((t - 7) / 1.2, 0, 1)); return ( <> {/* bottom-left mark */}

TalentScreen / Workflow

{/* bottom-right stage indicator */}

06 stages

loop 00:14

); } // ── Scene ───────────────────────────────────────────────────────────── function WorkflowSceneV2() { const t = useTime(); // Layout: rail spans across, 6 nodes evenly distributed const RAIL_Y = 680; // vertical position of rail const LEFT_PAD = 220; const RIGHT_PAD = 220; const startX = LEFT_PAD; const endX = 1920 - RIGHT_PAD; const trackW = endX - startX; const stepX = trackW / (STAGES_V2.length - 1); // Active spotlight loop const ALL_IN = 3.0 + 1.2 + STAGES_V2.length * 0.38 + 0.6; const ACTIVE_HOLD = 0.9; // each stage highlighted const activePhase = t < ALL_IN ? -1 : (t - ALL_IN) / ACTIVE_HOLD; const activeIndex = activePhase >= 0 ? Math.floor(activePhase) % STAGES_V2.length : -1; return ( <> {STAGES_V2.map((stage, i) => ( ))} ); } Object.assign(window, { WorkflowSceneV2 });