要点
GPU-accelerated canvas compositions with TypeGPU and WebGPU, synchronized to HyperFrames timeline events.
- Listens for
hf-seekevents to render at exact HyperFrames time; register GSAP tweens synchronously before any async WebGPU initialization - Supports full-screen fragment shaders, compute pipelines, video-backed textures, particle systems, and frosted glass effects via downsample passes
- Provides WGSL patterns for full-screen triangles and rounded-rect SDFs; use
alphaMode: 'opaque'for GPU-rendered full frames or'premultiplied'for transparent overlays - Requires deterministic rendering: no
Math.random(),requestAnimationFrame, orperformance.now(); callawait device.queue.onSubmittedWorkDone()after GPU work for video render capture
SKILL.md
TypeGPU / WebGPU for HyperFrames
HyperFrames supports TypeGPU and raw WebGPU through its typegpu runtime adapter. The adapter does not own your pipeline. It publishes HyperFrames time and dispatches a seek event so your composition can render the exact GPU frame.
Contract
- Initialize WebGPU asynchronously (
await navigator.gpu.requestAdapter()), but register all GSAP tweens synchronously — before anyawait. The HyperFrames player reads the timeline immediately at page load. - Render from HyperFrames time, not
performance.now(). - Listen for the
hf-seekevent and re-render at exactly that time. - Guard against environments where WebGPU is unavailable — the adapter does not check for you.
- For video renders, call
await device.queue.onSubmittedWorkDone()after submitting GPU work to ensure the canvas is flushed before the frame is captured.
The adapter sets window.__hfTypegpuTime and dispatches new CustomEvent("hf-seek", { detail: { time } }) on each seek.