typegpu

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

<canvas id="gpu-layer"></canvas>
<script

Timeline Registration

GSAP tweens that drive text, captions, or HTML elements must be registered synchronously — before any await:

Video-Backed Effects (Liquid Glass, Distortion)

To use a <video> as the GPU input texture:

Render-mode caveat: headless Chrome may fail copyExternalImageToTexture for video elements. For production renders, pre-extract key frames via FFmpeg as PNGs and load them as image textures instead.

Frosted Blur via Downsample Pass

A single-pass Gaussian kernel is too weak for glass-like frosted blur. Use a two-pass approach:

1. Pass 1 — Downsample: render the full-res texture to a small texture (1/6 resolution). Bilinear filtering during the downsample naturally averages pixels.
2. Pass 2 — Glass composite: sample the small texture for the frosted interior (bilinear upscale = heavy smooth blur) and the full-res texture for sharp areas and chromatic refraction.

This matches TypeGPU's textureSampleBias mip-level approach without generating mipmaps.

Transparent vs Opaque Canvas

• alphaMode: 'opaque' — the GPU canvas renders the full frame (video + effect). Use when the GPU pipeline handles all visual content.
• alphaMode: 'premultiplied' — the GPU canvas is transparent where alpha = 0, letting HTML elements below show through. Use for overlays (particles, path animations) on top of a regular <video> element.

WGSL Full-Screen Triangle

The standard vertex shader for full-screen effects (no vertex buffer needed):

Draw with pass.draw(3) — one triangle that covers the viewport.

Rounded-Rect SDF (Liquid Glass Pill)

Use this to define inside/ring/outside zones for glass effects. Negative values are inside the shape.

Deterministic Rendering

• No Math.random() — use a seeded PRNG.
• No requestAnimationFrame for the render loop — render only in response to hf-seek.
• No performance.now() for animation time — read window.__hfTypegpuTime or e.detail.time.
• After GPU submit, call await device.queue.onSubmittedWorkDone() for render-mode frame capture.