// v5 — Method as a flywheel (5 stages: Signal to System)
// Adapted from v2's flywheel.jsx — auto-cycling, click to pause, with a detail panel.
const METHOD_STAGES = [
{
id: "sense",
label: "Sense",
tagline: "Gather live signals before deciding what the answer should be.",
body: "Audience language, market behavior, cultural tension, competitor patterns, product constraints, founder intuition, and research artifacts. The point is not to collect everything. The point is to hear the right frequency.",
outputs: ["Signal scan", "Audience language", "Category tension", "Research brief", "Creative territory map"]
},
{
id: "frame",
label: "Frame",
tagline: "Turn scattered inputs into a thesis.",
body: "What the idea is. Who it is for. What problem of meaning it solves. What people need to understand before they can care. Framing is the work that decides whether everything downstream compounds or gets wasted.",
outputs: ["Category thesis", "Positioning frame", "Experience principles", "Narrative architecture"]
},
{
id: "multiply",
label: "Multiply",
tagline: "Use AI to generate range fast.",
body: "AI-native workflows expand the field: concept directions, visual systems, interface patterns, product stories, motion ideas, content models, and prototype variants. The goal is not more options for their own sake. It is more range before judgment.",
outputs: ["Concept range", "Prompt systems", "Visual studies", "Prototype directions", "Scenario set"]
},
{
id: "reduce",
label: "Reduce",
tagline: "Judgment chooses the direction.",
body: "Narrow the range through taste, strategy, feasibility, audience trust, regulatory sensitivity, and the ability to teach the idea back to the team. This is where most of the value lives.",
outputs: ["Selected direction", "Design rationale", "Messaging system", "Prototype priorities", "Validation criteria"]
},
{
id: "systemize",
label: "Systemize",
tagline: "Make the direction reusable.",
body: "Turn the chosen direction into something the team can run: a website, brand system, product architecture, packaging system, campaign toolkit, curriculum, AI workflow, or operating playbook.",
outputs: ["Design system", "Content system", "Product / brand guide", "Prototype", "Implementation roadmap"]
}];
const V5Flywheel = ({ size = 540 }) => {
const [active, setActive] = useState(0);
const [paused, setPaused] = useState(false);
const wheelRef = useRef(null);
useEffect(() => {
if (paused) return;
const id = setInterval(() => setActive((a) => (a + 1) % METHOD_STAGES.length), 4800);
return () => clearInterval(id);
}, [paused]);
useEffect(() => {
const el = wheelRef.current;if (!el) return;
const io = new IntersectionObserver(([e]) => {
if (!e.isIntersecting) setPaused(true);
}, { threshold: 0.05 });
io.observe(el);
return () => io.disconnect();
}, []);
const pick = (i) => {setPaused(true);setActive(i);};
const r = size / 2;
const ringR = r - 70;
const nodeR = 50;
const cx = r,cy = r;
// Position nodes evenly around — start at top (12 o'clock), go clockwise
const positions = METHOD_STAGES.map((_, i) => {
const angle = (-90 + i * (360 / METHOD_STAGES.length)) * Math.PI / 180;
return { x: cx + ringR * Math.cos(angle), y: cy + ringR * Math.sin(angle), angle };
});
const activeStage = METHOD_STAGES[active];
return (
);
};
const DISCIPLINES = [
{ n: "01", k: "Experience Strategy", d: "Decision architecture, journeys, service design, and research-led structure.", t: "Makes the idea legible." },
{ n: "02", k: "Interface Systems", d: "Interfaces with hierarchy, restraint, confident type, and system-level usability.", t: "Makes the product usable." },
{ n: "03", k: "Brand & Narrative", d: "Positioning, identity, naming, voice, and category language built as operating logic.", t: "Makes the story repeatable." },
{ n: "04", k: "Product & Packaging", d: "From early concept to shipped surface, CPG systems, hardware, software, and launch-ready market experiences.", t: "Makes the offer tangible." },
{ n: "05", k: "Motion & Behavior", d: "Kinetic prototypes, interaction motion, demos, and build animations that show how the system behaves.", t: "Makes the work feel alive." },
{ n: "06", k: "Design Engineering", d: "Runnable prototypes, AI-assisted builds, component systems, and browser-based proof of concept work.", t: "Makes the concept testable." }];
const V5Disciplines = () => {
const rowRef = useRef(null);
useEffect(() => {
const el = rowRef.current;if (!el) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) {
el.querySelectorAll(".v4-cap-cell").forEach((c, i) => {
c.style.setProperty("--d", `${i * 90}ms`);
c.classList.add("is-in");
});
io.disconnect();
}
}, { threshold: 0.2 });
io.observe(el);
return () => io.disconnect();
}, []);
return (
02bDisciplines · the practice, in six parts
Six ways to move an idea from signal to system, with AI accelerating the range, rhythm, and build cycle.
{DISCIPLINES.map((c) =>
{c.n}{c.k}{c.d}
{c.t && {c.t}}
)}
);
};
const V5Method = () => {
return (
{/* Section starter — methodology, not AI-specific */}
02Method · how the work moves
Less a process than a working instrument. The cycle starts with live signals, turns them into a thesis, uses AI to create range, applies judgment to reduce the field, then builds a system the team can actually run. Signal becomes system. Range becomes direction. Direction becomes something usable.
{/* Flywheel — the cycle */}
{/* Disciplines — the hands */}