typegpu

Installation

Summary

GPU-accelerated canvas compositions with TypeGPU and WebGPU, synchronized to HyperFrames timeline events.

Listens for hf-seek events 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, or performance.now(); call await 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 any await. The HyperFrames player reads the timeline immediately at page load.
Render from HyperFrames time, not performance.now().
Listen for the hf-seek event 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.