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

); } // ─── Corner chrome with the real logo ─────────────────────────────────── function MCornerChrome() { const time = useTime(); const pulse = 0.5 + 0.5 * Math.sin(time * Math.PI * 1.2); return ( <> {/* Top-left wordmark = real logo @ 45% opacity */}

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

§ 03 · mobile platforms

{/* Top-right edition line */}

vol. 01 — mobile craft · ed. mmxxvi

{/* Bottom-left folio */}

fig. 03·i — one team, four platforms

); } // ─── Editorial rules ──────────────────────────────────────────────────── function MEditorialFrame() { return ( <>

); } // ─── Section title ────────────────────────────────────────────────────── function MSectionTitle() { const time = useTime(); // fade during phone-settle/launch beat (7–13s) let opacity = 1; if (time >= 6.8 && time <= 13.0) { opacity = 1 - mSmooth(Math.min(1, (time - 6.8) / 0.8)) * 0.7; } if (time > 13.0) { opacity = 0.3 + mSmooth(Math.min(1, (time - 13.0) / 1.2)) * 0.7; } return (

platforms ⸺ one team · four stacks · ship once

Native, cross-platform, everywhere.

); } // ─── Platform chip (glass pill) ───────────────────────────────────────── function PlatformChip({ x, y, start, name, stack, mark }) { const time = useTime(); const localT = time - start; const t = mSmooth(Math.min(1, Math.max(0, localT / 0.7))); // Fade out during phone settle + reverse loop let exit = 0; if (time > 7.8) exit = mSmooth(Math.min(1, (time - 7.8) / 1.4)); // Reverse fade-in for loop if (time > 13.5) exit = Math.max(0, exit - mSmooth(Math.min(1, (time - 13.5) / 1.2))); // Subtle drift while alive const drift = Math.sin((time + x * 0.01) * 0.6) * 2; const tx = mMix(-40, 0, t); const opacity = t * (1 - exit); return (

{/* circular mark */}

{mark}

{name}

{stack}

); } // ─── Data stream (curve + traveling label) ────────────────────────────── function MDataStream({ fromX, fromY, toX, toY, start, end, label, delay = 0 }) { const time = useTime(); if (time < start || time > end) return null; const localT = time - start; const appear = mSmooth(Math.min(1, localT / 0.6)); const exit = mSmooth(Math.min(1, Math.max(0, (time - (end - 0.8)) / 0.8))); const opacity = appear * (1 - exit); const midX = (fromX + toX) / 2 + 30; const midY = (fromY + toY) / 2 - 30; const d = `M ${fromX} ${fromY} Q ${midX} ${midY} ${toX} ${toY}`; const dashOffset = -(time * 120); 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, }; }; const lp = ((localT + delay) * 0.3) % 1; const pos = bezierAt(lp); const labelFade = Math.sin(lp * Math.PI); return ( <>

{label}

); } // ─── Morphing liquid-drop hub ─────────────────────────────────────────── function MLiquidHub({ cx, cy, start, morphStart, morphEnd }) { const time = useTime(); const localT = time - start; if (localT < 0) return null; const appear = mSmooth(Math.min(1, localT / 1.0)); // Hub exists 1.5–7s, then morphs into phones const fadeOut = mSmooth(Math.min(1, Math.max(0, (time - morphStart) / (morphEnd - morphStart)))); // Re-appears in reverse at 13.5s+ let reappear = 0; if (time > 13.5) reappear = mSmooth(Math.min(1, (time - 13.5) / 1.2)); const visible = Math.max((1 - fadeOut), reappear); if (visible < 0.01) return null; 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 = mMix(60, 210, appear); return (

); } // ─── Abstract phone silhouette (organic moss liquid-drop, tall pill) ──── // Not device chrome — a soft rounded rectangle that pulses subtly. function PhonePod({ x, y, start, amber = false, label, caption }) { const time = useTime(); const localT = time - start; if (localT < 0) return null; // Rise from hub: start compressed, rise up and settle const rise = mSmooth(Math.min(1, localT / 1.6)); // Exit during reset loop let exit = 0; if (time > 13.5) exit = mSmooth(Math.min(1, (time - 13.5) / 1.2)); // Breathing pulse const breathe = 1 + Math.sin(time * 1.4) * 0.008; // Amber launch glow (right pod only, starts at 11s) const amberT = amber ? mSmooth(Math.min(1, Math.max(0, (time - 10.8) / 1.2))) : 0; // Fade amber on loop const amberFade = amber ? (1 - exit) : 0; const amberOpacity = amberT * amberFade; const ty = mMix(120, 0, rise); const opacity = rise * (1 - exit); const scale = mMix(0.7, 1, rise) * breathe; const width = 200; const height = 400; return (

{/* Amber aura behind (right pod only) */} {amber && (

)} {/* The pod — organic tall drop */}

{/* speaker-like line at top */}

{/* soft highlight */}

{/* inner serif italic mark */}

{label}

{/* home indicator bar */}

{/* Caption below */} {caption && (

{caption}

)}

); } // ─── Abstract store badge (NOT real App Store / Play logos) ───────────── function StoreBadge({ x, y, start, eyebrow, label }) { const time = useTime(); const localT = time - start; if (localT < 0) return null; const appear = mSmooth(Math.min(1, localT / 0.8)); let exit = 0; if (time > 13.6) exit = mSmooth(Math.min(1, (time - 13.6) / 1.1)); const opacity = appear * (1 - exit); const ty = mMix(16, 0, appear); return (

{/* corner ticks */}

{eyebrow}

{label}

); } // ─── Running captions ─────────────────────────────────────────────────── function MCaption({ start, end, eyebrow, text }) { const time = useTime(); if (time < start || time > end) return null; const localT = time - start; const dur = end - start; const opacity = mEnv(localT, dur, 0.35, 0.45); return (

— {eyebrow} —

{text}

); } // ─── Ready-for-store italic caption ───────────────────────────────────── function ReadyCaption({ x, y, start }) { const time = useTime(); const localT = time - start; if (localT < 0) return null; const appear = mSmooth(Math.min(1, localT / 0.8)); let exit = 0; if (time > 13.6) exit = mSmooth(Math.min(1, (time - 13.6) / 1.0)); const opacity = appear * (1 - exit); return (

§ ready for store

); } // ─── Main scene ───────────────────────────────────────────────────────── function MobilePlatformsScene() { const time = useTime(); const hubX = 1250; const hubY = 560; const platforms = [ { name: 'iOS', stack: 'Swift + SwiftUI', mark: 'S' }, { name: 'Android', stack: 'Kotlin + Compose', mark: 'K' }, { name: 'React Native', stack: '0.77+', mark: 'R' }, { name: 'Flutter', stack: '3.x', mark: 'F' }, ]; const chipX = 220; const chipY0 = 280; const chipGap = 110; const chipCenters = platforms.map((_, i) => ({ x: chipX + 360, y: chipY0 + i * chipGap + 44, })); const streams = [ { from: 0, delay: 0.0, label: 'design system' }, { from: 0, delay: 0.5, label: 'auth' }, { from: 1, delay: 0.1, label: 'offline' }, { from: 1, delay: 0.6, label: 'push' }, { from: 2, delay: 0.2, label: 'payments' }, { from: 2, delay: 0.7, label: 'analytics' }, { from: 3, delay: 0.3, label: 'ci/cd' }, ]; // Phone beats const phoneStart = 7.0; const phoneLeftX = hubX - 150; const phoneRightX = hubX + 150; const phoneY = hubY; // Store badges const badgeStart = 11.2; const badgeY = hubY + 260; const badgeLeftX = hubX - 150; const badgeRightX = hubX + 150; // Source column header const colOpacity = mEnv(time - 0.2, 8.0, 0.6, 1.2); return ( <> {/* Source column header */}

◍ platforms (4)

{/* Platform chips: stagger 0.4s */} {platforms.map((p, i) => ( ))} {/* Hub label */}

◍ one team

{/* Data streams 3–7s */} {streams.map((s, i) => ( ))} {/* Liquid hub (1.5–7s main) */} {/* Two phone pods rise 7–11s and settle */} {/* Store badges (11–14s) */} {/* Ready-for-store caption */} {/* Running captions */} ); } Object.assign(window, { MobilePlatformsScene, M_PALETTE, M_FONTS, PlatformChip, MDataStream, MLiquidHub, MCornerChrome, MSectionTitle, MEditorialFrame, PhonePod, StoreBadge, MCaption, ReadyCaption, MFilmGrain, MVignette, });