Check items off as they ship. Progress is saved in your browser. Sprint 1 (items 1–5) is complete; sprint 2 (terminal) is done. Items 11–22 track parity with Fluid — shaders, distortion, and distribution — without changing core studio behaviour until each ships.
Multiple shell tabs, spawn/kill, and a clear “PTY server offline” banner with reconnect. One command: npm run studio (Vite + PTY together).
Sidebar list of all text elements: duplicate, reorder, lock, hide. Snap to center and rule-of-thirds guides.
Per-text entrance presets (fade, slide, scale, typewriter) keyed to u_phase — seamless by default.
Pin presets, recent list, fuzzy palette in command palette. Randomize palette-only / sliders-only / locked sliders.
Position, scale, rotation for uploaded images. Optional luminance-driven shader modulation.
Fluid ships embeds, an MCP server, and a no-auth REST API on top of the same client-side renderer. We already have share URLs and self-contained HTML export — these close the gap for agents and third-party sites.
npm i lumen-bg + React <LumenBg/>. Copy-paste snippets: responsive iframe, full-bleed fixed background (pointer-events:none), and static CSS from exported PNG. Hash carries full state — canvas-only, no hosting.
HTTP MCP: create_piece, list_looks, decode_link. Plain JSON /api/piece — same params as share URLs, no key. “Code for Claude” panel copies a ready-made prompt + embed block.
Curated looks (named starting points via API). Gallery page: pieces rendered live in-browser, filter by engine preset and vibe. Tap to open in studio and remix.
Persist saved pieces locally (IndexedDB): thumbnail, name, timestamp. Quick reload without losing the current session. Complements auto-save in Phase 1.
Fluid’s Field step has 12 engines; our u_distort slider modulates presets but we lack several engines and a dedicated surface post-pass. Source images “melt” via liquify + luminance-driven shape.
Port Fluid engines we lack: cellular, gyroid, smoke, crystal, honeycomb, grid. Revisit interfere / golden as optional phyllotaxis mode. All loop-safe via u_phase + loopOff().
GPU-only image ingest (file + camera). Liquify warps the field; photo blend mixes luminance into shape while palette owns colour. Built-in melt textures, flip, freeze, center. Extends item 10.
Second-pass screen treatment after the field: pixelate, dot size, threshold. Screen modes: square, hex, ASCII, dither, halftone — toggles on top of any preset, not baked per-mode.
Split warp (domain displacement strength, Fluid 0–9) from distort (preset modulation). Add symmetry slider — bilateral / radial mirror of the field. Pair with zoom alias for scale.
Glyphs filled with the animated shader (mask / clip), not flat colour. Dark or light letter background. Banner-friendly wide aspect presets.
Canvas chrome: Live / Still toggle (pause loop without hiding UI). Before / after split or wipe comparing params snapshot vs current — useful for randomize and melt tweaks.
Optional pointer-driven distortion: move cursor over canvas to ripple the field (Fluid’s “random pattern — move your cursor”). Phase-looped fallback when idle; disable for export.
Four-stop dark→light gradient UI (Fluid Custom palette). Named palette presets stay; custom stops sync to share URL and API. One-click Record clip beside PNG export.
The gallery ships as a ~1 MB monolith: 65 pre-rendered cards, 400 KB inline JSON, and (formerly) 65 Google Font requests. Items 23–26 are quick wins; 27–34 are the structural fixes.
Load only Inter + JetBrains Mono on the gallery index. Theme fonts load on individual theme pages — not 65 <link> tags on first paint.
Cache-Control on /assets/** (immutable), /chromaverse/** (1 h + stale-while-revalidate), and theme HTML (5 min).
Skip layout/paint for off-screen theme cards. contain-intrinsic-size preserves scroll height without mounting 65 dual-preview panels at once.
Start the banner WebGL loop only when the hero enters the viewport (IntersectionObserver + 120px root margin). Saves GPU on studio-first visits.
Move ALL_THEMES_DATA (~400 KB) out of inline HTML into a cacheable JSON file fetched on demand.
Generate the 65-card grid from JSON instead of shipping ~355 KB of duplicated pre-rendered HTML in the page.
Inject per-theme Google Font <link> tags only for cards entering the viewport — live Aa previews without eager loading all families.
Lazy-load the ~72 KB builder <template> and its JS until the user opens Theme Builder Studio.
Mount/unmount card DOM nodes based on scroll position — pairs with item 28 for large theme counts.
If eager loading returns, merge families into 1–2 combined css2 URLs instead of dozens of separate <link> tags.
Bundle Inter + JetBrains Mono as local WOFF2 — drop Google DNS/TLS from the critical path.
Extract gallery styles to chromaverse/gallery.css — cache separately from HTML, smaller repeat-visit payload.
Milestone: self-contained creative sandbox that feels like a native app.
webgl.ts coreexamples/Milestone: compose generative shaders over video with animated text — a real motion tool.
Milestone: compositing expressiveness rivaling Fusion/Cavalry with layer approachability.
Milestone: open-source motion design platform — create, collaborate, distribute.