/* ========================================================================== CaseStudyChart.jsx — @role Home-page animated case-study line chart (scroll-triggered stroke-dashoffset draw + endpoint ping + staggered pills). Pure CSS keyframes gated by IntersectionObserver class. ========================================================================== */ // ============================================================ // CaseStudyChart — the "12-month journey" predictability chart // (committed vs. delivered) supplied for the Case Study in Focus box. // // The SVG + CSS are lifted from the uploaded standalone file; the // timeline is driven by a `play` prop (so the surrounding card can // start it — and slide its "What we did" bullets in — off the same // in-view signal). A Replay button re-runs the sequence. // // CSS is scoped under .psl-case-chart and keyframes are renamed to // avoid clashing with other components on the page. // ============================================================ const CASE_CHART_CSS = ` .psl-case-chart { font-family: "Mona Sans", -apple-system, sans-serif; } .psl-case-chart .chart-card { background: #fff; border: 1px solid rgba(13,0,66,0.06); border-radius: 12px; padding: 18px 16px 8px; position: relative; overflow: hidden; width: 100%; } .psl-case-chart .chart-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; padding: 0 8px; } .psl-case-chart .chart-head .l, .psl-case-chart .chart-head .r { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #4644B9; text-transform: uppercase; } .psl-case-chart .chart-head .r { text-align: right; } .psl-case-chart .chart-head .r .sub { font-style: italic; font-weight: 500; font-size: 10px; letter-spacing: 0.04em; color: #6B7280; text-transform: none; margin-top: 2px; } .psl-case-chart .chart-svg { width: 100%; height: auto; display: block; } .psl-case-chart .replay-row { display: flex; justify-content: flex-end; padding: 4px 6px 0; } .psl-case-chart .replay-btn { background: transparent; border: 1px solid #E5E7EB; padding: 5px 12px; border-radius: 6px; font-family: inherit; color: #4644B9; cursor: pointer; font-size: 11px; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; } .psl-case-chart .replay-btn:hover { background: #4644B9; color: #fff; border-color: #4644B9; } .psl-case-chart .line-before { fill: none; stroke: #D4537E; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 2.2s linear; } .psl-case-chart .line-before.draw { stroke-dashoffset: 0; } .psl-case-chart .line-after { fill: none; stroke: url(#grad-after); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 2.6s linear; } .psl-case-chart .line-after.draw { stroke-dashoffset: 0; } .psl-case-chart .committed-line { stroke: #0D0042; stroke-width: 1; stroke-dasharray: 4 4; opacity: 0; transition: opacity 0.6s; } .psl-case-chart .committed-line.show { opacity: 0.4; } .psl-case-chart .committed-label { opacity: 0; transition: opacity 0.6s; } .psl-case-chart .committed-label.show { opacity: 1; } .psl-case-chart .corridor-before, .psl-case-chart .corridor-after { opacity: 0; transition: opacity 0.9s ease-out; } .psl-case-chart .corridor-before.show, .psl-case-chart .corridor-after.show { opacity: 1; } .psl-case-chart .miss-mark { opacity: 0; transform: scale(0.4); transform-origin: center; transform-box: fill-box; transition: opacity 0.35s, transform 0.35s; } .psl-case-chart .miss-mark.show { opacity: 1; transform: scale(1); } .psl-case-chart .psl-marker .card-anim { opacity: 0; transform: translateY(-55px); transition: opacity 0.7s ease-out, transform 0.85s cubic-bezier(0.34, 1.3, 0.64, 1); } .psl-case-chart .psl-marker.show .card-anim { opacity: 1; transform: translateY(0); } .psl-case-chart .psl-marker .dot-wrap { opacity: 0; transition: opacity 0.5s ease-out; } .psl-case-chart .psl-marker.show .dot-wrap { opacity: 1; transition-delay: 0.7s; } .psl-case-chart .psl-marker .pulse { transform-origin: center; transform-box: fill-box; animation: pslCasePulse 2.4s ease-out infinite; } @keyframes pslCasePulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(4); opacity: 0; } } .psl-case-chart .end-dot { opacity: 0; transition: opacity 0.5s; } .psl-case-chart .end-dot.show { opacity: 1; } .psl-case-chart .end-dot .breathe { transform-origin: center; transform-box: fill-box; animation: pslCaseBreathe 2s ease-in-out infinite; } @keyframes pslCaseBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } @media (prefers-reduced-motion: reduce) { .psl-case-chart .line-before, .psl-case-chart .line-after { stroke-dashoffset: 0 !important; transition: none !important; } .psl-case-chart .committed-line { opacity: 0.4 !important; } .psl-case-chart .committed-label, .psl-case-chart .corridor-before, .psl-case-chart .corridor-after, .psl-case-chart .miss-mark, .psl-case-chart .end-dot { opacity: 1 !important; transition: none !important; transform: none !important; } .psl-case-chart .psl-marker .card-anim { opacity: 1 !important; transform: none !important; } .psl-case-chart .psl-marker .dot-wrap { opacity: 1 !important; } } `; const CASE_CHART_SVG = `
The 12-month journey
Predictability
(committed vs. delivered)
COMMITTED · TARGET WHERE WE CAME IN −6 −4 −2 0 +2 +4 +6 6 MONTHS BEFORE 6 MONTHS AFTER PREDICTABILITY ↑
`; function ensureCaseChartStyles() { if (typeof document === 'undefined') return; if (document.getElementById('__psl-case-chart-style')) return; const s = document.createElement('style'); s.id = '__psl-case-chart-style'; s.textContent = CASE_CHART_CSS; document.head.appendChild(s); } const CaseStudyChart = ({ play = false, onStart }) => { const rootRef = React.useRef(null); const onStartRef = React.useRef(onStart); onStartRef.current = onStart; const runRef = React.useRef(null); const hasRun = React.useRef(false); ensureCaseChartStyles(); React.useEffect(() => { const root = rootRef.current; if (!root) return; let timers = []; function run() { timers.forEach(clearTimeout); timers = []; root.querySelectorAll('.show').forEach((e) => e.classList.remove('show')); root.querySelectorAll('.draw').forEach((e) => e.classList.remove('draw')); const vl = root.querySelector('.psl-vline'); if (vl) vl.setAttribute('y2', '40'); if (onStartRef.current) onStartRef.current(); const T_BEFORE_START = 700; const T_BEFORE_DURATION = 2200; const T_HANDOFF = T_BEFORE_START + T_BEFORE_DURATION; const T_PSL_START = T_HANDOFF - 1500; timers.push(setTimeout(() => { root.querySelector('.committed-line').classList.add('show'); root.querySelector('.committed-label').classList.add('show'); }, 300)); timers.push(setTimeout(() => root.querySelector('.corridor-before').classList.add('show'), 500)); timers.push(setTimeout(() => root.querySelector('.line-before').classList.add('draw'), T_BEFORE_START)); root.querySelectorAll('.miss-mark').forEach((m) => { const d = parseInt(m.dataset.delay, 10) || 0; timers.push(setTimeout(() => m.classList.add('show'), T_BEFORE_START + d)); }); timers.push(setTimeout(() => { root.querySelector('.psl-marker').classList.add('show'); const vline = root.querySelector('.psl-vline'); if (vline) { const start = performance.now(); const dur = 850; const tick = (t) => { const p = Math.min((t - start) / dur, 1); const eased = 1 - Math.pow(1 - p, 3); vline.setAttribute('y2', String(40 + (320 - 40) * eased)); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); } }, T_PSL_START)); timers.push(setTimeout(() => root.querySelector('.corridor-after').classList.add('show'), T_HANDOFF + 100)); timers.push(setTimeout(() => root.querySelector('.line-after').classList.add('draw'), T_HANDOFF)); timers.push(setTimeout(() => root.querySelector('.end-dot').classList.add('show'), T_HANDOFF + 2600)); } runRef.current = run; const btn = root.querySelector('.replay-btn'); const onReplay = (ev) => { ev.preventDefault(); ev.stopPropagation(); run(); }; if (btn) btn.addEventListener('click', onReplay); return () => { timers.forEach(clearTimeout); if (btn) btn.removeEventListener('click', onReplay); }; }, []); React.useEffect(() => { if (play && !hasRun.current && runRef.current) { hasRun.current = true; runRef.current(); } }, [play]); return (
); }; Object.assign(window, { CaseStudyChart });