324 lines
14 KiB
TypeScript
324 lines
14 KiB
TypeScript
"use client";
|
||
|
||
/**
|
||
* PROCESS — "The Feedback Loop" as pinned scroll storytelling.
|
||
* - GSAP ScrollTrigger pins the panel while the user scrolls through 4 steps.
|
||
* - The LEFT column is a dark "stage card" (matching the work-cards' visual
|
||
* language) that floats over the cream paper. Inside it a single SVG glyph
|
||
* MORPHS between 4 shapes (MorphSVGPlugin) AND a per-step VISUAL PANEL swaps:
|
||
* Audit -> a "revenue leak" line chart
|
||
* Plan -> a channel x objective mini-matrix
|
||
* Execute -> rising animated bars
|
||
* Report -> a metric card
|
||
* This kills the empty cream void and gives the section weight.
|
||
* - A progress rail + numbered steps light up in sync (scrub).
|
||
* - prefers-reduced-motion: no pin, no morph; panels render statically (all
|
||
* visible, no blur) and steps render as a legible static list.
|
||
*/
|
||
import { useEffect, useRef } from "react";
|
||
// Side-effect import registers ScrollTrigger + MorphSVGPlugin; gsap exposes both.
|
||
import { gsap } from "./gsap";
|
||
import { processSteps } from "../content";
|
||
|
||
/* Four MEANINGFUL, recognizable icon paths for the morph (100x100 canvas).
|
||
Drawn as filled silhouettes with similar complexity so MorphSVG tweens
|
||
cleanly between them — never to nonsense:
|
||
Audit -> magnifying glass
|
||
Plan -> target (concentric rings + center)
|
||
Execute -> rocket (rising)
|
||
Report -> line chart trending up with plotted nodes */
|
||
const SHAPES = [
|
||
// Audit — magnifying glass (lens ring + handle)
|
||
"M46 16a26 26 0 1 0 16 46.6l16.7 16.7a5 5 0 0 0 7-7L69 71.6A26 26 0 0 0 46 16Zm0 12a14 14 0 1 1 0 28 14 14 0 0 1 0-28Z",
|
||
// Plan — target / bullseye (outer ring + mid ring + center dot)
|
||
"M50 14a36 36 0 1 0 0 72 36 36 0 0 0 0-72Zm0 12a24 24 0 1 1 0 48 24 24 0 0 1 0-48Zm0 12a12 12 0 1 0 0 24 12 12 0 0 0 0-24Z",
|
||
// Execute — rocket (nose, body, fins) rising
|
||
"M50 12c12 8 18 22 18 38l-6 14H38l-6-14c0-16 6-30 18-38Zm0 20a6 6 0 1 0 0 12 6 6 0 0 0 0-12ZM34 66l-8 16 14-6Zm32 0 8 16-14-6Z",
|
||
// Report — line chart trending up (axes + plotted line + nodes)
|
||
"M22 18v54a6 6 0 0 0 6 6h54v-10H30V18ZM40 60l12-14 10 8 18-22 7 6-23 28-10-8-9 11Z",
|
||
];
|
||
|
||
const ACCENTS = ["#3b82f6", "#8b5cf6", "#10b981", "#7c3aed"];
|
||
|
||
export default function ProcessLoop() {
|
||
const root = useRef<HTMLElement>(null);
|
||
|
||
useEffect(() => {
|
||
const el = root.current;
|
||
if (!el) return;
|
||
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||
if (reduce) return;
|
||
|
||
const ctx = gsap.context(() => {
|
||
const morph = el.querySelector<SVGPathElement>(".loop-glyph__path");
|
||
const morphGlow = el.querySelector<SVGPathElement>(".loop-glyph__glow");
|
||
if (!morph) return;
|
||
const steps = gsap.utils.toArray<HTMLElement>(".loop-step");
|
||
const panels = gsap.utils.toArray<HTMLElement>(".loop-panel");
|
||
const total = SHAPES.length;
|
||
|
||
const setActive = (idx: number) => {
|
||
steps.forEach((s, j) => s.classList.toggle("is-active", j === idx));
|
||
panels.forEach((p, j) => p.classList.toggle("is-active", j === idx));
|
||
el.style.setProperty("--loop-accent", ACCENTS[idx] ?? ACCENTS[0]);
|
||
};
|
||
|
||
// One pinned, scrubbed timeline drives the morph + rotation + rail fill.
|
||
// Trimmed end length (was innerHeight*(total-0.2)) so the pin is shorter
|
||
// and the section no longer amplifies the emptiness.
|
||
const tl = gsap.timeline({
|
||
scrollTrigger: {
|
||
trigger: ".loop-pin",
|
||
start: "top top",
|
||
end: () => `+=${window.innerHeight * (total - 1.85)}`,
|
||
pin: true,
|
||
scrub: 0.6,
|
||
anticipatePin: 1,
|
||
onUpdate: (self) => {
|
||
const idx = Math.min(
|
||
total - 1,
|
||
Math.floor(self.progress * total + 0.0001)
|
||
);
|
||
setActive(idx);
|
||
},
|
||
},
|
||
});
|
||
|
||
setActive(0);
|
||
const counter = el.querySelector<HTMLElement>(".loop__count-cur");
|
||
const node = el.querySelector<HTMLElement>(".loop-rail__node");
|
||
|
||
SHAPES.forEach((shape, i) => {
|
||
if (i === 0) return; // start shape already in markup
|
||
const at = i - 1;
|
||
// morph the glyph (+ its glow clone in sync) + a gentle counter-rotation
|
||
// so it tumbles as it transforms, and grow the rail fill.
|
||
tl.to(morph, { morphSVG: shape, duration: 1, ease: "power2.inOut" }, at);
|
||
if (morphGlow)
|
||
tl.to(morphGlow, { morphSVG: shape, duration: 1, ease: "power2.inOut" }, at);
|
||
tl.to(".loop-glyph", { rotate: i * 5, duration: 1, ease: "power2.inOut" }, at)
|
||
.to(
|
||
".loop-rail__fill",
|
||
{ scaleY: i / (total - 1), duration: 1, ease: "none" },
|
||
at
|
||
)
|
||
.to(
|
||
node,
|
||
{ top: `${(i / (total - 1)) * 100}%`, duration: 1, ease: "none" },
|
||
at
|
||
);
|
||
});
|
||
|
||
// separate light update so the counter is robust at every scroll position
|
||
tl.eventCallback("onUpdate", () => {
|
||
const idx = Math.min(total, Math.floor(tl.progress() * total) + 1);
|
||
if (counter) counter.textContent = String(idx).padStart(2, "0");
|
||
});
|
||
}, el);
|
||
|
||
return () => ctx.revert();
|
||
}, []);
|
||
|
||
return (
|
||
<section ref={root} id="process" className="loop frame" data-invert aria-labelledby="loop-h">
|
||
<div className="loop-pin">
|
||
<div className="wrap loop__inner">
|
||
<header className="sec-head loop__head">
|
||
<div>
|
||
<p className="kicker">
|
||
<span className="kicker__dot" />
|
||
The Feedback Loop
|
||
</p>
|
||
<h2 id="loop-h" className="display sec-head__title">
|
||
How it works
|
||
</h2>
|
||
</div>
|
||
<p className="loop__count" aria-hidden="true">
|
||
<span className="loop__count-cur">01</span>
|
||
<span className="loop__count-sep">/</span>
|
||
<span className="loop__count-tot">0{processSteps.length}</span>
|
||
</p>
|
||
</header>
|
||
|
||
<div className="loop__stage">
|
||
{/* dark stage card — floats the glyph + per-step visual over the
|
||
cream paper (mirrors how the work-cards float over the dark) */}
|
||
<div className="loop-card" aria-hidden="true">
|
||
<div className="loop-card__glow" />
|
||
|
||
{/* morphing glyph — dimensional: a blurred glow clone sits behind
|
||
the crisp gradient-filled + gradient-stroked face */}
|
||
<div className="loop-glyph">
|
||
<svg viewBox="0 0 100 100">
|
||
<defs>
|
||
<linearGradient id="loopGrad" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stopColor="#60a5fa" />
|
||
<stop offset="50%" stopColor="#a78bfa" />
|
||
<stop offset="100%" stopColor="#34d399" />
|
||
</linearGradient>
|
||
<linearGradient id="loopStroke" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stopColor="#dbeafe" />
|
||
<stop offset="100%" stopColor="#a7f3d0" />
|
||
</linearGradient>
|
||
<filter id="loopGlow" x="-40%" y="-40%" width="180%" height="180%">
|
||
<feGaussianBlur stdDeviation="4" />
|
||
</filter>
|
||
</defs>
|
||
{/* soft glow clone (kept in sync with the face via MorphSVG) */}
|
||
<path
|
||
className="loop-glyph__glow"
|
||
d={SHAPES[0]}
|
||
fill="url(#loopGrad)"
|
||
filter="url(#loopGlow)"
|
||
opacity="0.6"
|
||
/>
|
||
{/* crisp face — gradient fill + light gradient stroke for dimension */}
|
||
<path
|
||
className="loop-glyph__path"
|
||
d={SHAPES[0]}
|
||
fill="url(#loopGrad)"
|
||
stroke="url(#loopStroke)"
|
||
strokeWidth="1.2"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
|
||
{/* per-step visual panels — only the active one is shown */}
|
||
<div className="loop-panels">
|
||
{/* 01 AUDIT — "revenue leak" line chart (drops off) */}
|
||
<figure className="loop-panel is-active" data-step="audit">
|
||
<figcaption className="loop-panel__cap">
|
||
<span className="loop-panel__dot" />
|
||
Revenue leak — detected
|
||
</figcaption>
|
||
<svg className="loop-panel__svg" viewBox="0 0 240 96" preserveAspectRatio="none">
|
||
<defs>
|
||
<linearGradient id="leakFill" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stopColor="#3b82f6" stopOpacity="0.32" />
|
||
<stop offset="100%" stopColor="#3b82f6" stopOpacity="0" />
|
||
</linearGradient>
|
||
</defs>
|
||
<path
|
||
d="M0,40 L48,32 L96,38 L120,26 L144,58 L192,74 L240,82 L240,96 L0,96 Z"
|
||
fill="url(#leakFill)"
|
||
/>
|
||
<polyline
|
||
points="0,40 48,32 96,38 120,26 144,58 192,74 240,82"
|
||
fill="none"
|
||
stroke="#3b82f6"
|
||
strokeWidth="2.5"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
{/* leak marker */}
|
||
<circle cx="120" cy="26" r="3.5" fill="#10b981" />
|
||
<circle cx="144" cy="58" r="4.5" fill="none" stroke="#ef6a6a" strokeWidth="2" />
|
||
</svg>
|
||
<p className="loop-panel__note">
|
||
<span className="loop-panel__lab">−$14k/mo</span> wasted spend
|
||
</p>
|
||
</figure>
|
||
|
||
{/* 02 PLAN — channel x objective mini-matrix */}
|
||
<figure className="loop-panel" data-step="plan">
|
||
<figcaption className="loop-panel__cap">
|
||
<span className="loop-panel__dot" />
|
||
Channel × objective mix
|
||
</figcaption>
|
||
<div className="loop-matrix">
|
||
<span className="loop-matrix__h" />
|
||
<span className="loop-matrix__h">Reach</span>
|
||
<span className="loop-matrix__h">Leads</span>
|
||
<span className="loop-matrix__h">Sales</span>
|
||
{(
|
||
[
|
||
["Paid", 1, 2, 3],
|
||
["SEO", 2, 3, 2],
|
||
["Content", 3, 2, 1],
|
||
] as const
|
||
).flatMap((row) => [
|
||
<span className="loop-matrix__r" key={`${row[0]}-l`}>
|
||
{row[0]}
|
||
</span>,
|
||
...[row[1], row[2], row[3]].map((lvl, ci) => (
|
||
<span
|
||
className="loop-matrix__c"
|
||
data-lvl={lvl}
|
||
key={`${row[0]}-${ci}`}
|
||
/>
|
||
)),
|
||
])}
|
||
</div>
|
||
</figure>
|
||
|
||
{/* 03 EXECUTE — rising animated bars */}
|
||
<figure className="loop-panel" data-step="execute">
|
||
<figcaption className="loop-panel__cap">
|
||
<span className="loop-panel__dot" />
|
||
Live optimization
|
||
</figcaption>
|
||
<div className="loop-bars">
|
||
{[34, 52, 46, 70, 84, 96].map((h, i) => (
|
||
<span
|
||
className="loop-bar"
|
||
style={{ ["--h" as string]: `${h}%`, ["--i" as string]: i }}
|
||
key={i}
|
||
/>
|
||
))}
|
||
</div>
|
||
<p className="loop-panel__note">
|
||
<span className="loop-panel__lab">+38%</span> ROAS, week over week
|
||
</p>
|
||
</figure>
|
||
|
||
{/* 04 REPORT — metric card */}
|
||
<figure className="loop-panel" data-step="report">
|
||
<figcaption className="loop-panel__cap">
|
||
<span className="loop-panel__dot" />
|
||
Monthly report
|
||
</figcaption>
|
||
<div className="loop-metric">
|
||
<span className="loop-metric__num display">+183%</span>
|
||
<span className="loop-metric__lab">revenue vs. last quarter</span>
|
||
<span className="loop-metric__trend">
|
||
<svg viewBox="0 0 80 24" preserveAspectRatio="none">
|
||
<polyline
|
||
points="0,20 16,18 32,12 48,13 64,6 80,2"
|
||
fill="none"
|
||
stroke="#10b981"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
/>
|
||
</svg>
|
||
<em>tied to pipeline</em>
|
||
</span>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
|
||
{/* steps + progress rail */}
|
||
<div className="loop__steps">
|
||
<div className="loop-rail" aria-hidden="true">
|
||
<span className="loop-rail__fill" />
|
||
<span className="loop-rail__node" />
|
||
</div>
|
||
<ol>
|
||
{processSteps.map((p) => (
|
||
<li className="loop-step" key={p.n}>
|
||
<span className="loop-step__n">{p.n}</span>
|
||
<div>
|
||
<h3 className="loop-step__name">{p.name}</h3>
|
||
<p className="loop-step__desc">{p.desc}</p>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|