{
  "id": "hyperframes-html-in-canvas-magnetic",
  "surface": "video",
  "title": "HyperFrames HTML-in-Canvas: Magnetic Field Visualisation",
  "summary": "A 15-second magnetic-field particle visualisation reacting to a live DOM heatmap or chart — particles trace field lines that bend around the captured HTML, ideal for ML/data products. Built on the vfx-magnetic catalog block.",
  "category": "VFX / HTML-in-Canvas",
  "tags": ["hyperframes", "html-in-canvas", "magnetic", "particles", "data"],
  "model": "hyperframes-html",
  "aspect": "16:9",
  "prompt": "Build a 15-second HyperFrames composition (1920×1080, 30fps) titled \"magnetic-field-data\". Pull the catalog block first: `npx hyperframes add vfx-magnetic`.\n\nVisual identity: graphite canvas #0a0c11, single primary particle color #ff6a00 with a cool secondary #38e6ff for opposing-pole particles, off-white text #eef2f7. Display face: \"PP Neue Machina\" 124px Plain Ultrabold; body \"PP Mondwest\" Regular 24px; mono \"Berkeley Mono\" 18px on labels. Tabular-nums on every numeral.\n\nLayer A — `field-source`: a `<canvas layoutsubtree width=\"1920\" height=\"1080\">` containing real DOM that drives the magnetic field — a centered chart card (760×520px) with a live SVG line chart (12 data points, animated path), two KPI labels above (\"signal strength\" 0.84 and \"coverage\" 92%), and a small mono caption beneath (\"polling 412 nodes · realtime\"). The chart card acts as the magnetic source — particles repel from its bounds, attract toward dipole anchors at the chart's two endpoints.\n\nLayer B — `theater`: WebGL canvas running the vfx-magnetic shader. Particle count 1800, deterministic spawn seeded mulberry32(91347), spawn distribution rim-biased so the field lines read clearly. Two opposing dipoles at the chart's first and last data points sample the captured DOM bounds every frame so the field re-flows when the chart line animates.\n\nTimeline (paused: true, window.__timelines.main, data-duration=15):\n\n0.0–2.4s ENTRY — particles spawn invisible, opacity ramps 0 → 0.85 over 2.0s ease expo.out. Field strength 0 → 1.0 ease power3.out 1.6s. Chart card fades in at 0.4s (`gsap.from('.chart-card', { y: 60, opacity: 0, scale: 0.96, duration: 0.9, ease: 'power3.out' })`). KPI labels stagger in at 0.9s and 1.2s (200ms apart, y:30 → 0).\n\n2.4–10.0s FLOW — particles trace field lines. Chart line animates over 6.0s (`gsap.from('.chart-line', { strokeDashoffset: pathLength, duration: 6.0, ease: 'sine.inOut' })`); the captured-DOM resampling means particles bend around the moving chart line in real time. KPI numerals tick: signal strength 0.84 → 0.91, coverage 92% → 96%, both ease none. At 6.0s, brief field-strength pulse from 1.0 → 1.4 → 1.0 over 0.5s; particles speed up correspondingly.\n\n10.0–13.5s STATEMENT — headline appears (\"see the field, not the dots\") with marker-sweep highlight from `references/css-patterns.md` at 10.4s. Particles dim slightly (opacity 0.85 → 0.55) so the headline reads cleanly above them.\n\n13.5–15.0s SETTLE — field strength tapers 1.0 → 0.6, particle speed halves, ambient drift only. Final 0.6s holds the hero frame. No opacity-to-0 exits.\n\nFeature detection: if `drawElementImage` is unavailable, render the chart card DOM directly on a flat #0a0c11 background without the particle field. Studio preview must never go black.\n\nNon-negotiables: deterministic seeds, finite repeats only, no Math.random / Date.now, no `<br>` in headline (let it wrap with `max-width`). Particle position update runs inside the same window.__timelines.main timeline ticker — don't spin off requestAnimationFrame outside the framework's clock. Run `npx hyperframes lint` and `npx hyperframes inspect --samples 12 --at 1,2.5,4,6,8,11,13.5` before render. Output: `magnetic-field-data.mp4`.",
  "previewImageUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png",
  "previewVideoUrl": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.mp4",
  "source": {
    "repo": "heygen-com/hyperframes",
    "license": "Apache-2.0",
    "author": "HeyGen",
    "url": "https://hyperframes.heygen.com/catalog/blocks/vfx-magnetic"
  }
}