/* Phasor — page sections */ const { useState, useEffect, useRef, useMemo } = React; // ---- Reveal: stagger upward fade on scroll ---- const Reveal = ({ children, delay = 0, className = "", as = "div" }) => { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; // Initial visibility check via bounding rect (so things already in viewport reveal even if IO never fires) const checkNow = () => { const r = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; if (r.top < vh * 0.95 && r.bottom > 0) { setSeen(true); return true; } return false; }; if (checkNow()) return; let scrollHandler = null; let io = null; try { io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io && io.disconnect(); window.removeEventListener('scroll', scrollHandler); } }, { threshold: 0.05, rootMargin: '0px 0px -8% 0px' }); io.observe(el); } catch (_) {} // Belt-and-suspenders: also watch scroll, since IO can be flaky in some iframe contexts scrollHandler = () => { if (checkNow()) { window.removeEventListener('scroll', scrollHandler); io && io.disconnect(); } }; window.addEventListener('scroll', scrollHandler, { passive: true }); // Final fallback: reveal after a beat regardless const fallback = setTimeout(() => setSeen(true), 1200); return () => { io && io.disconnect(); window.removeEventListener('scroll', scrollHandler); clearTimeout(fallback); }; }, []); const Cmp = as; return ( {children} ); }; // ---- Line-art icons (drawn here, no Heroicons) ---- const I = { Plug: (p) => ( ), Grid: (p) => ( ), Wave: (p) => ( ), Arrow: (p) => ( ), Cross: (p) => ( ), Code: (p) => ( ), }; // ---- HEADER / NAV ---- const Header = () => { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return (

phasor

GitHub Open in browser

); }; const PhasorMark = ({ size = 16 }) => ( ); // ---- HERO ---- const Hero = () => { const [bpm, setBpm] = useState(124); const [tick, setTick] = useState(0); // pulse the BPM chip in time useEffect(() => { const beatMs = 60000 / 124; let id = setInterval(() => setTick(t => (t+1) % 4), beatMs); return () => clearInterval(id); }, []); return (

{/* darkening overlay for legibility */}

{/* bpm chip top-right */}

BPM 124 4/4 PORT_01 · LAUNCHKEY 3.4 ms

{/* corner crosshair marks */} {/* foreground */}

v0.4 — open beta

Your MIDI.

Your code.

Your visuals.

A browser-based realtime MIDI visualizer for live performers, modular nerds and ambient sets — built around a GPU shader pipeline you can extend in pure TypeScript.

Open in browser Read the spec requires webmidi · chrome / edge

{/* footer ticker */}

scroll · 06 sections webgl2 · half-float · 60fps ↓

); }; const CornerMark = ({ cls = "", rotate = 0 }) => (

); // ---- SECTION HEADER ---- const SectionHeader = ({ index, kicker, title, subtitle }) => (

{index} {kicker}

{title}

{subtitle && (

{subtitle}

)}

); // ---- 2: LIVE GRID ---- const VIZ_TILES = [ { id: 'particle-field', label: 'particle-field', sub: 'attractor · 240 pts', Cmp: window.MiniViz.ParticleField }, { id: 'oscilloscope', label: 'oscilloscope', sub: 'lissajous · x/y', Cmp: window.MiniViz.Oscilloscope }, { id: 'hex-floor', label: 'hex-floor', sub: 'wireframe · sequenced', Cmp: window.MiniViz.HexFloor }, { id: 'chladni', label: 'chladni', sub: 'plate · m=4 n=5', Cmp: window.MiniViz.Chladni }, { id: 'plasma-sphere', label: 'plasma-sphere', sub: 'raymarch · glsl', Cmp: window.MiniViz.PlasmaSphere }, { id: 'marbled', label: 'marbled', sub: 'fbm warp · 5 oct', Cmp: window.MiniViz.Marbled }, ]; const LiveGrid = () => { const [hover, setHover] = useState(null); return (

Every tile is rendering. Live. Pick one and ship the set.} subtitle="Procedural visualizers shipped in the box. WebGL2 + Canvas2D. Pause when offscreen." />

{VIZ_TILES.map((t, i) => { const dimmed = hover !== null && hover !== i; const Active = t.Cmp; return (

setHover(i)} onMouseLeave={() => setHover(null)} style={{ transition: 'opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1)', opacity: dimmed ? 0.32 : 1, transform: hover === i ? 'scale(1.02)' : 'scale(1.0)', zIndex: hover === i ? 5 : 1, }} >

{/* corner ticks */}

{t.label} {t.sub}

{String(i+1).padStart(2,'0')} / 06

); })}

); }; const CornerTick = ({ cls = "", rotate = 0 }) => (

); // ---- 3: HOW IT WORKS ---- const StepDiagramConnect = () => { // animated pulse traveling from device to laptop const [t, setT] = useState(0); useEffect(() => { let id = 0; let s = performance.now(); const loop = () => { setT((performance.now() - s) / 1000); id = requestAnimationFrame(loop); }; loop(); return () => cancelAnimationFrame(id); }, []); const pulses = [0.0, 0.33, 0.66]; return ( ); }; const StepDiagramPick = () => { const [hover, setHover] = useState(2); useEffect(() => { const id = setInterval(() => setHover(h => (h+1) % 6), 1100); return () => clearInterval(id); }, []); return ( ); }; const StepDiagramPerform = () => { // sequencer grid pulsing notes const [t, setT] = useState(0); useEffect(() => { let id = 0; const s = performance.now(); const loop = () => { setT((performance.now() - s) / 1000); id = requestAnimationFrame(loop); }; loop(); return () => cancelAnimationFrame(id); }, []); const cols = 16, rows = 4; return ( ); }; const HowItWorks = () => { const steps = [ { n: '01', icon: , title: 'Connect MIDI', body: 'Plug a controller, modular bridge, or DAW. Phasor speaks Web MIDI directly — no driver, no install. Sysex too, if your gear is weird.', diagram: }, { n: '02', icon: , title: 'Pick a visualizer', body: 'Six built-ins, plus anything you or someone else has dropped into the registry. Switch mid-set. Map a CC to do it for you.', diagram: }, { n: '03', icon: , title: 'Perform', body: 'Map any control to any uniform. Velocity to bloom, mod-wheel to chroma, channel pressure to chaos. Hot-swap shaders without losing the set.', diagram: }, ]; return (

Open the URL. Plug in. Play the room.} />

{steps.map((s, i) => (

{s.n} {s.icon}

{s.title}

{s.body}

{s.diagram}

))}

); }; window.SectionsA = { Header, Hero, LiveGrid, HowItWorks, Reveal, SectionHeader, I, PhasorMark };