")`, backgroundSize: '200px 200px', }} /> ); } // Subtle vignette function Vignette() { return (

); } // ─── Corner chrome (persistent) ────────────────────────────────────────── function CornerChrome() { const time = useTime(); const pulse = 0.5 + 0.5 * Math.sin(time * Math.PI * 1.2); return ( <> {/* Top-left wordmark */}

digital.HEROES.

{/* Bottom-right caption + pulse */}

§ 06 · plus migration

{/* Top-right edition line */}

vol. 01 — shopify plus · ed. mmxxvi

{/* Bottom-left folio */}

fig. 06·ii — the pipeline

); } // ─── Source platform tile ──────────────────────────────────────────────── // Editorial card showing a source platform wordmark on the left side. function SourceTile({ x, y, label, caption, start, appearDur = 0.6 }) { const time = useTime(); const localT = time - start; const t = smooth(Math.min(1, Math.max(0, localT / appearDur))); // Fade out during launch moment (10–13s window) const fadeOutStart = 10; const fadeOutDur = 2.5; let exitOpacity = 1; if (time > fadeOutStart) { exitOpacity = 1 - smooth(Math.min(1, (time - fadeOutStart) / fadeOutDur)); } // Fade back in during reset 13–15s if (time > 13) { exitOpacity = smooth(Math.min(1, (time - 13) / 1.8)); } // Gentle drift while alive const drift = Math.sin((time + x * 0.01) * 0.5) * 3; const opacity = t * exitOpacity; const ty = mix(14, 0, t) + drift; return (

{/* tiny corner marks */}

source · {caption}

{label}

); } // ─── Data stream (flowing dashed lines with labels) ────────────────────── // Draws an SVG path from source to hub with animated dash offset, plus // floating data-word labels that drift along the path. function DataStream({ fromX, fromY, toX, toY, start, end, label, delay = 0 }) { const time = useTime(); const active = time >= start && time <= end; if (!active) return null; const localT = time - start; const appear = smooth(Math.min(1, localT / 0.6)); const duration = end - start; const exit = smooth(Math.min(1, Math.max(0, (time - (end - 0.8)) / 0.8))); const opacity = appear * (1 - exit); // Path: gentle bezier curve from source to hub const midX = (fromX + toX) / 2; const midY = (fromY + toY) / 2 - 40; const d = `M ${fromX} ${fromY} Q ${midX} ${midY} ${toX} ${toY}`; // Animated dash offset const dashOffset = -(time * 120); // Label position along path (approx at t=0.4 on curve) const bezierAt = (t) => { const mt = 1 - t; return { x: mt * mt * fromX + 2 * mt * t * midX + t * t * toX, y: mt * mt * fromY + 2 * mt * t * midY + t * t * toY, }; }; // Label flies along the path const labelProgress = ((localT + delay) * 0.35) % 1; const labelPos = bezierAt(labelProgress); const labelFade = Math.sin(labelProgress * Math.PI); // fade at ends return ( <> {/* Traveling label */}

{label}

); } // ─── Liquid drop hub (organic morphing blob) ───────────────────────────── function LiquidHub({ cx, cy, start, launchAt }) { const time = useTime(); const localT = time - start; const appear = smooth(Math.min(1, localT / 1.2)); // Launch glow intensity const launchT = Math.max(0, time - launchAt); const launchGlow = smooth(Math.min(1, launchT / 1.2)); // Reverse fade at end const resetT = Math.max(0, time - 13); const resetFade = 1 - smooth(Math.min(1, resetT / 1.6)); // Morphing border radius — smooth organic const w = 3; const r1 = 50 + Math.sin(time * w * 0.7) * 14; const r2 = 50 + Math.cos(time * w * 0.6 + 1) * 16; const r3 = 50 + Math.sin(time * w * 0.9 + 2) * 12; const r4 = 50 + Math.cos(time * w * 0.5 + 3) * 18; const size = mix(60, 220, appear) * resetFade + (1 - resetFade) * 60; const scaleBoost = 1 + launchGlow * 0.12; // Text morph: hub text appears only after launchAt const textOpacity = smooth(Math.min(1, (time - launchAt) / 0.8)) * resetFade; return (

{/* Amber glow aura — only active at launch */}

{/* The blob */}

{/* Highlight */}

{/* Center label (appears at launch) */} {textOpacity > 0.01 && (

Shopify Plus

)}

); } // ─── Orbit feature card (8 Plus features that assemble around hub) ─────── function OrbitFeature({ cx, cy, index, total, radius, start, end, label, italicize = false }) { const time = useTime(); const localT = time - start; if (localT < 0 || time > end) return null; const appear = smooth(Math.min(1, localT / 0.5)); const exit = smooth(Math.min(1, Math.max(0, (time - (end - 0.9)) / 0.9))); const opacity = appear * (1 - exit); // Base angle (evenly distributed). Small slow rotation. const rotSpeed = 0.08; const baseAngle = (index / total) * Math.PI * 2 - Math.PI / 2; const angle = baseAngle + time * rotSpeed; // Radius ramps in const r = mix(radius * 0.6, radius, appear); const x = cx + Math.cos(angle) * r; const y = cy + Math.sin(angle) * r; return (

{label} {/* tick */}

); } // ─── Caption bar (bottom-center running caption that describes what's happening) ─── function Caption({ start, end, eyebrow, text }) { const time = useTime(); if (time < start || time > end) return null; const localT = time - start; const dur = end - start; const opacity = envelope(localT, dur, 0.35, 0.45); return (

— {eyebrow} —

{text}

); } // ─── Launch burst (amber ring that expands at launch moment) ───────────── function LaunchBurst({ cx, cy, start }) { const time = useTime(); const localT = time - start; if (localT < 0 || localT > 3) return null; const t = smooth(Math.min(1, localT / 2.4)); const size = mix(280, 900, t); const opacity = (1 - t) * 0.55; return (

); } // ─── Rules / editorial frame ───────────────────────────────────────────── function EditorialFrame() { return ( <> {/* top rule */}

{/* bottom rule */}

); } // ─── Static section title (top of frame during sequence) ──────────────── function SectionTitle() { const time = useTime(); // Always visible; fades during launch moment for cleanliness const launchFade = 1 - smooth(Math.min(1, Math.max(0, (time - 10.2) / 1.0))) * 0.6; const resetFade = smooth(Math.min(1, Math.max(0, (time - 13.2) / 1.2))); const opacity = Math.max(launchFade, resetFade); return (

the pipeline ⸺ sources · hub · launch

Migrate anything to Plus.

); } // ───────────────────────────────────────────────────────────────────────── // Main scene composition // ───────────────────────────────────────────────────────────────────────── function PlusMigrationScene() { const time = useTime(); // Hub at right-center of frame (sources on left) const hubX = 1280; const hubY = 560; // Source tiles on the left const sources = [ { label: 'Magento', caption: 'adobe · legacy', y: 290 }, { label: 'BigCommerce', caption: 'saas', y: 480 }, { label: 'Salesforce\nCommerce Cloud', caption: 'enterprise', y: 670 }, ]; // 8 features orbiting hub const features = [ { label: 'Checkout Extensions', italicize: false }, { label: 'Functions', italicize: true }, { label: 'Flow', italicize: true }, { label: 'Launchpad', italicize: false }, { label: 'B2B', italicize: true }, { label: 'Markets', italicize: false }, { label: 'Hydrogen', italicize: true }, { label: 'OS 2.0', italicize: false }, ]; // Stream data-words const streams = [ { from: 0, to: 0, delay: 0.0, label: 'products' }, { from: 0, to: 0, delay: 0.4, label: 'metafields' }, { from: 1, to: 0, delay: 0.1, label: 'customers' }, { from: 1, to: 0, delay: 0.6, label: 'orders' }, { from: 2, to: 0, delay: 0.2, label: 'metaobjects' }, { from: 2, to: 0, delay: 0.7, label: 'redirects' }, ]; const sourceCenters = sources.map((_, i) => ({ x: 260 + 260, // tile left x + width y: 290 + i * 190 + 60, // tile y + half height })); // Feature appearance: each appears at 5 + i*0.6 s, exits at 13s const featureStart = 5.0; const featureStagger = 0.55; const featureEnd = 13.2; // Streams: live 2–10s const streamStart = 2.0; const streamEnd = 10.2; return ( <> {/* Source tiles (2–10s active, then fade) */} {sources.map((s, i) => ( ))} {/* Flow labels (source-side column header) */}

◍ sources (3)

{/* Data streams (curves + traveling labels) */} {streams.map((st, i) => ( ))} {/* Hub label (top of hub area) */}

◍ the hub

{/* Launch burst (behind hub) */} {/* Liquid hub */} {/* 8 orbiting feature cards (5–13s) */} {features.map((f, i) => ( ))} {/* Running captions synced to the arc */} ); } Object.assign(window, { PlusMigrationScene, PALETTE, FONTS, SourceTile, DataStream, LiquidHub, OrbitFeature, CornerChrome, LaunchBurst, FilmGrain, Vignette, EditorialFrame, SectionTitle, Caption, smooth, mix, envelope, });