// Onboarding Loading Animation — RedGone hero
// New mechanic: a single solid red flood (deepest red on RIGHT, lighter on LEFT)
// is REVEALED as white from the left as the angel "pushes" rightward.
// We achieve this by overlaying var(--white-pure) clipped to the white-side
// of the boundary on top of the full-bleed red. The boundary moves; the white
// reveals; the numeral's color flips at the boundary line per glyph.
const OnboardingFrame = ({ percent = 0, label = "Scanning your communication history.", live = false }) => {
const W = 1200, H = 760;
const numeralStr = `${Math.round(percent)}%`;
const numeralFontSize = 220;
const ease = "clip-path 220ms cubic-bezier(0.16,1,0.3,1), left 220ms cubic-bezier(0.16,1,0.3,1)";
return (
{/* Full-bleed red flood: lighter/transparent-pink on left, dense red on right */}
{/* Subtle grain over the red */}
{/* WHITE REVEAL — covers the left portion (pushed-clean side) */}
{/* Soft "vapor" wisp at the boundary, on the white side, like the red is being purified */}
{percent > 1 && percent < 100 && (
)}
{/* Boundary hairline — barely there */}
{/* Numeral — split at the boundary line.
Numeral lives in a full-bleed layer; clip is taken from the same
% of full container width so the split aligns with the white reveal. */}
{/* Midnight numeral, clipped to white side, sits ABOVE the white reveal */}
{/* Sub label */}
{percent < 100 ? (
{label}
) : (
Your inbox is clear.
)}
{/* Angel — sits at boundary, side profile, leaning right, pushing */}
{/* CTA at 100% */}
{percent >= 100 && (
See your compliance score →
)}
{/* Wordmark + counter */}
RedGone
{percent < 100 ? `SCAN · ${Math.round(percent).toString().padStart(3, "0")}%` : "SCAN · COMPLETE"}
{ setPct(0); setRunning(true); }}
className="neu-chip"
style={{ position: "absolute", bottom: 16, right: 16, fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}
>Replay
);
};
window.OnboardingFrame = OnboardingFrame;
window.OnboardingLive = OnboardingLive;
// ──────────────────────────────────────────────────────────────────────
// OnboardingHero — full-viewport, manual-start, smooth motion.
// Used by /onboarding route. Original OnboardingFrame/Live preserved
// above for /canvas compatibility.
// ──────────────────────────────────────────────────────────────────────
// Mascot motion keyframes live in tokens.css (rg-float-soft, rg-bounce-push).
const OnboardingHero = () => {
const route = (typeof useRoute === "function") ? useRoute() : null;
const navigate = route ? route.navigate : (p) => { window.location.href = p; };
const [state, setState] = React.useState("idle"); // idle | scanning | done
const [pct, setPct] = React.useState(0);
const rafRef = React.useRef(null);
const startScan = () => {
if (state !== "idle") return;
setState("scanning");
const segments = [
{ from: 0, to: 22, dur: 1400 },
{ from: 22, to: 24, dur: 600 },
{ from: 24, to: 58, dur: 2100 },
{ from: 58, to: 62, dur: 700 },
{ from: 62, to: 88, dur: 1900 },
{ from: 88, to: 91, dur: 500 },
{ from: 91, to: 100, dur: 1300 },
];
const total = segments.reduce((s, x) => s + x.dur, 0);
const t0 = performance.now();
const tick = () => {
const e = performance.now() - t0;
let acc = 0; let v = 100;
for (const seg of segments) {
if (e < acc + seg.dur) {
const k = (e - acc) / seg.dur;
const ease = 1 - Math.pow(1 - k, 3);
v = seg.from + (seg.to - seg.from) * ease;
break;
}
acc += seg.dur;
}
if (e >= total) v = 100;
setPct(v);
if (e < total) {
rafRef.current = requestAnimationFrame(tick);
} else {
rafRef.current = null;
setTimeout(() => setState("done"), 450);
}
};
rafRef.current = requestAnimationFrame(tick);
};
const reset = () => {
if (rafRef.current) cancelAnimationFrame(rafRef.current);
rafRef.current = null;
setState("idle");
setPct(0);
};
React.useEffect(() => () => {
if (rafRef.current) cancelAnimationFrame(rafRef.current);
}, []);
// Mascot positioning. Layout strategy:
// - idle: not rendered — page is fully red, the angel only appears
// once scanning begins to push the red back
// - scanning: tracks the boundary at pct% with a leftward offset, push-bounce
// - done: glides to upper-right of the big numeral, flips left-facing
const mascotSize = 160;
const mascotBox = Math.round(mascotSize * 1.35);
const mascotOffsetLeft = mascotBox + 56; // distance from boundary
let mascotLeft, mascotTop, mascotView, mascotAnim, mascotTransform;
if (state === "scanning") {
// Always ride the boundary. At pct=0 the mascot's left edge is at
// -mascotOffsetLeft (off-screen left); as pct climbs the mascot slides
// in behind the red→white line, pushing it. No anchor/jump in the
// middle of the run.
mascotLeft = `calc(${pct}% - ${mascotOffsetLeft}px)`;
mascotTop = "50%";
mascotView = "side";
mascotAnim = "rg-bounce-push 620ms ease-in-out infinite";
mascotTransform = "translateY(-50%)";
} else if (state === "done") {
// Upper-right of the big percentage. Sit clearly past the numeral's
// right edge with breathing room, and noticeably above its top edge.
mascotLeft = "calc(50% + min(22vw, 320px))";
mascotTop = "calc(50% - min(14vw, 200px))";
mascotView = "front";
mascotAnim = "rg-float-soft 2.6s ease-in-out infinite";
mascotTransform = "translate(-50%, -50%)";
}
// Mascot transition: only animate the `done` glide. During scanning, rAF
// drives `left` directly and CSS transitions fight that.
const mascotTransition =
state === "done" ? "left 900ms cubic-bezier(0.16,1,0.3,1), top 900ms cubic-bezier(0.16,1,0.3,1)"
: "none";
// Numeral text: show 0% at idle, current pct during scanning, 100% at done
const numeralStr = `${Math.round(pct)}%`;
// Color states:
const onRed = state === "idle" || (state === "scanning" && pct < 50);
return (
{/* Red flood */}
{/* Grain overlay */}
{/* White reveal — clip-path tracks pct. Transition only on done settle. */}
{/* Vapor wisp at boundary while scanning */}
{state === "scanning" && pct > 1 && pct < 100 && (
)}
{/* Boundary hairline */}
{state === "scanning" && (
)}
{/* Numeral — white version, full bleed (visible on red side) */}
{/* Numeral — midnight version, clipped to white side */}
{/* Sub-label */}
{state === "idle"
? "Ready when you are."
: state === "scanning"
? "Scanning your communication history."
: "Compliance scan complete."}
{/* Mascot — hidden at idle (no angel until scanning pushes the red) */}
{state !== "idle" && (
)}
{/* Idle CTA */}
{state === "idle" && (
Begin scan
→
)}
{/* Done CTA */}
{state === "done" && (
navigate("/dashboard")} className="neu-btn neu-btn-primary" style={{
padding: "16px 26px", fontSize: 14,
display: "inline-flex", alignItems: "center", gap: 10,
}}>
See your compliance score
→
)}
{/* Wordmark */}
RedGone
{/* Counter */}
{state === "idle"
? "READY"
: state === "scanning"
? `SCAN · ${Math.round(pct).toString().padStart(3, "0")}%`
: "SCAN · COMPLETE"}
{/* Skip */}
{state !== "done" && (
Skip →
)}
{/* Replay (done) */}
{state === "done" && (
Replay
)}