typegpu

SKILL.md

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

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.

The adapter sets window.__hfTypegpuTime and dispatches new CustomEvent("hf-seek", { detail: { time } }) on each seek.

Basic Pattern