// hero-doctor.jsx — the "by physicians" signing scene.
//
// A rigged cartoon doctor (white coat, scrubs, stethoscope) walks onto the
// hero stage, stops center, looks at the viewer and waves, then walks up to
// the "by physicians" scrawl and writes it out — the scrawl's clip-path
// reveal + pen-light + lift-off flare are held until his pen touches down
// (via the `doc-write` class on the hero section).
//
// Pure CSS/SVG rig: every limb is a group with a viewBox-unit transform
// origin; poses are classes on the actor. Transform/opacity only.
// Desktop + prefers-reduced-motion: no-preference only — otherwise the
// component removes itself and the scrawl auto-draws on its original timing.
const DOC_SPEED = 0.34; // px per ms — brisk cartoon walk
const DOC_CSS = `
.doc-actor { will-change: transform; }
.doc-actor svg { overflow: visible; display: block; }
/* limbs return smoothly whenever a pose class drops */
.doc-arm-l, .doc-arm-r, .doc-leg-l, .doc-leg-r, .doc-head, .doc-torso-lean {
transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.doc-pen { opacity: 0; transition: opacity .2s ease; }
.doc-shadow { transform-origin: 60px 143px; }
/* —— walk cycle —— */
.doc-walking .doc-leg-l { animation: docLegL .5s linear infinite; }
.doc-walking .doc-leg-r { animation: docLegR .5s linear infinite; }
.doc-walking .doc-arm-l { animation: docArmL .5s linear infinite; }
.doc-walking .doc-arm-r { animation: docArmR .5s linear infinite; }
.doc-walking .doc-bob { animation: docBob .25s ease-in-out infinite alternate; }
.doc-walking .doc-shadow { animation: docShadow .25s ease-in-out infinite alternate; }
@keyframes docLegL { 0% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } 100% { transform: rotate(18deg); } }
@keyframes docLegR { 0% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } 100% { transform: rotate(-18deg); } }
@keyframes docArmL { 0% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } 100% { transform: rotate(-14deg); } }
@keyframes docArmR { 0% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } 100% { transform: rotate(14deg); } }
@keyframes docBob { from { transform: translateY(0); } to { transform: translateY(-2.6px); } }
@keyframes docShadow { from { transform: scaleX(1); opacity: .35; } to { transform: scaleX(.92); opacity: .28; } }
/* —— wave: arm swings high, two friendly wiggles; brows lift —— */
.doc-waving .doc-arm-r { animation: docWave 1.55s cubic-bezier(.34,1.3,.5,1) forwards; }
.doc-waving .doc-head { transform: rotate(-4deg); }
.doc-waving .doc-brows { transform: translateY(-1.6px); }
.doc-waving .doc-bob { animation: docBob 1.1s ease-in-out infinite alternate; }
@keyframes docWave {
0% { transform: rotate(0); }
30% { transform: rotate(-152deg); }
45% { transform: rotate(-128deg); }
60% { transform: rotate(-156deg); }
75% { transform: rotate(-128deg); }
100% { transform: rotate(-146deg); }
}
/* —— writing: lean in, pen up at chest-forward, quick scribble —— */
.doc-writing .doc-torso-lean { transform: rotate(4deg); }
.doc-writing .doc-head { transform: rotate(-5deg); }
.doc-writing .doc-arm-r { animation: docScribble .22s ease-in-out infinite alternate; }
.doc-writing .doc-arm-l { transform: rotate(-8deg); }
.doc-writing .doc-pen { opacity: 1; }
@keyframes docScribble {
from { transform: rotate(-88deg); }
to { transform: rotate(-101deg); }
}
/* —— ta-da: little hop, both arms up —— */
.doc-tada .doc-bob { animation: docHop .75s cubic-bezier(.34,1.56,.64,1); }
.doc-tada .doc-arm-r { transform: rotate(-150deg); }
.doc-tada .doc-arm-l { transform: rotate(150deg); }
.doc-tada .doc-brows { transform: translateY(-1.6px); }
@keyframes docHop {
0% { transform: translateY(0); }
40% { transform: translateY(-9px); }
70% { transform: translateY(0); }
85% { transform: translateY(-3px); }
100% { transform: translateY(0); }
}
/* front/back views: he turns his back to the audience while writing */
.doc-view-back { display: none; }
.doc-writing .doc-view-back { display: block; }
.doc-writing .doc-view-front { display: none; }
/* idle blink, always on */
.doc-eyes { animation: docBlink 4.2s linear infinite; transform-origin: 60px 26px; }
@keyframes docBlink {
0%, 91.5%, 95.5%, 100% { transform: scaleY(1); }
93.5% { transform: scaleY(0.12); }
}
`;
function HeroDoctorSvg() {
return (
);
}
function HeroDoctor() {
const holderRef = React.useRef(null);
const [scene, setScene] = React.useState(null);
const [pose, setPose] = React.useState('idle');
const [move, setMove] = React.useState({ x: 0, dur: 0 });
const [gone, setGone] = React.useState(false);
React.useEffect(() => {
const holder = holderRef.current;
if (!holder) return;
const section = holder.closest('section');
const okMotion = window.matchMedia &&
window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
if (!section) { setGone(true); return; }
// Same choreography at every width; reduced-motion gets the auto-draw.
if (!okMotion) { setGone(true); return; }
const scrawl = section.querySelector('.hero-script-glow');
if (!scrawl) { setGone(true); return; }
// Hold the scrawl's auto-draw NOW — before its 1.35s default timing —
// so it can't fire while we wait for the artwork image to load.
section.classList.add('doc-mode');
const timers = [];
const at = (t, fn) => timers.push(setTimeout(fn, t));
let began = false;
const bail = () => {
section.classList.remove('doc-mode', 'doc-write');
setGone(true);
};
const begin = () => {
if (began) return;
began = true;
const sRect = section.getBoundingClientRect();
const gRect = scrawl.getBoundingClientRect();
if (!gRect.width || !gRect.height) { bail(); return; }
// Scale the actor to the artwork. He stands LOWER than the headline so
// his raised pen hand — not his head — meets the scrawl. With the writing
// arm at ~-94°, the pen tip sits at ≈ (0.97w, 0.29h) of the actor box, so
// we align that point with the scrawl's left edge / vertical center.
const h = Math.max(104, Math.min(138, gRect.height * 1.85));
const w = h * (120 / 150);
const gLeft = gRect.left - sRect.left;
const gCenterY = (gRect.top - sRect.top) + gRect.height / 2;
const top = gCenterY - h * 0.29;
const xEnter = sRect.width + 70; // walks IN from the right
const xWrite = gLeft - w * 0.97; // pen tip on the first stroke
const xWave = Math.min((gRect.right - sRect.left) + 24, sRect.width - w - 16); // waves just right of "physicians,"
const slide = gRect.width * 0.95; // pen tracks the reveal edge
const xExit = -w - 90; // exits stage left
setScene({ w, h, top });
setMove({ x: xEnter, dur: 0 });
const d1 = Math.round(Math.abs(xWave - xEnter) / DOC_SPEED);
const d2 = Math.round(Math.abs(xWrite - xWave) / DOC_SPEED);
const d3 = Math.round(Math.abs((xWrite + slide) - xExit) / DOC_SPEED);
let t = 120;
at(t, () => { setPose('walking'); setMove({ x: xWave, dur: d1 }); });
t += d1;
at(t, () => setPose('waving')); // stop, face the viewer, wave
t += 1650;
at(t, () => { setPose('walking'); setMove({ x: xWrite, dur: d2 }); });
t += d2;
at(t, () => { // pen down — scrawl draws now
setPose('writing');
// Drive the reveal imperatively with WAAPI — a CSS animation attached
// via ancestor-class swap can fail to start its clock; animate() always
// runs and takes precedence in composite order.
const drawEase = 'cubic-bezier(.45,.05,.35,1)';
const reveal = scrawl.querySelector('.hero-script-reveal');
const pen = scrawl.querySelector('.hero-script-pen');
const flare = scrawl.querySelector('.hero-script-flare');
if (reveal && reveal.animate) {
reveal.animate(
[{ clipPath: 'inset(0 100% 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],
{ duration: 1700, easing: drawEase, fill: 'forwards' });
}
if (pen && pen.animate) {
pen.animate([
{ left: '0%', opacity: 0 },
{ opacity: 1, offset: 0.06 },
{ opacity: 1, offset: 0.88 },
{ left: '100%', opacity: 0 }
], { duration: 1700, easing: drawEase, fill: 'forwards' });
}
if (flare && flare.animate) {
flare.animate([
{ opacity: 0, transform: 'scale(0.3)' },
{ opacity: 0.95, transform: 'scale(1.25)', offset: 0.35 },
{ opacity: 0, transform: 'scale(1.65)' }
], { duration: 750, delay: 1570, easing: 'cubic-bezier(.2,.7,.3,1)', fill: 'both' });
}
setMove({ x: xWrite + slide, dur: 1700 });
});
t += 1700 + 420; // draw + flare beat
at(t, () => setPose('tada'));
t += 950;
at(t, () => { setPose('walking'); setMove({ x: xExit, dur: d3 }); });
t += d3 + 100;
at(t, () => setGone(true));
};
// The scrawl artwork is an ![]()
; its width is 0 until the PNG loads.
// Start only once it has real geometry (with a safety timeout).
const img = scrawl.querySelector('img');
if (img && !img.complete) {
img.addEventListener('load', begin, { once: true });
img.addEventListener('error', bail, { once: true });
timers.push(setTimeout(() => { if (!began) begin(); }, 3500));
} else {
begin();
}
return () => {
timers.forEach(clearTimeout);
if (!began) section.classList.remove('doc-mode', 'doc-write');
};
}, []);
return (
);
}
Object.assign(window, { HeroDoctor });