Typegpu
Wire TypeGPU or raw WebGPU canvas layers into HyperFrames so GPU shaders, particles, and liquid-glass effects render on the exact timeline frame—not wall-clock time.
Overview
typegpu is an agent skill for the Build phase that teaches TypeGPU and raw WebGPU patterns for HyperFrames canvas layers synced via hf-seek events.
Install
npx skills add https://github.com/heygen-com/hyperframes --skill typegpuWhat is this skill?
- Documents the HyperFrames typegpu adapter contract: hf-seek CustomEvent and window.__hfTypegpuTime for frame-accurate re
- Requires synchronous GSAP tween registration before any await—player reads timeline at page load
- Flush frames for video export with device.queue.onSubmittedWorkDone() after GPU submits
- Covers compute pipelines, liquid glass, particle systems, and navigator.gpu guard patterns
- Explicitly forbids driving animation from performance.now() instead of HyperFrames seek time
Adoption & trust: 43.5k installs on skills.sh; 25.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You can render WebGPU effects on a canvas, but HyperFrames capture and playback need every GPU frame keyed to composition time—not performance.now() or free-running loops.
Who is it for?
Indie creators shipping HyperFrames projects with custom WGSL shaders, TypeGPU pipelines, or particle layers that must scrub and export frame-accurately.
Skip if: Teams not using HyperFrames, static sites without WebGPU, or effects that do not need timeline-locked canvas rendering.
When should I use this skill?
Creating GPU-rendered compositions with TypeGPU, raw WebGPU, WGSL fragment shaders, compute pipelines, liquid glass, particle systems, or canvas layers driven by navigator.gpu that respond to HyperFrames hf-seek events.
What do I get? / Deliverables
Your adapter listens for hf-seek, sets timeline state, submits GPU work, and optionally flushes the queue so exported video frames match the HyperFrames player.
- hf-seek listener that re-renders at composition time
- Synchronously registered GSAP tweens before WebGPU init awaits
- Optional onSubmittedWorkDone flush path for video frame capture
Recommended Skills
Journey fit
HyperFrames compositions are built in the product phase; GPU canvas layers are frontend/runtime integration work. WebGPU, WGSL fragment shaders, and canvas rendering are core frontend graphics concerns tied to the player surface.
How it compares
HyperFrames-specific GPU integration guidance—not a generic Three.js or CSS animation skill.
Common Questions / FAQ
Who is typegpu for?
Solo and indie builders authoring HyperFrames compositions who want GPU-rendered canvas layers driven by the official typegpu adapter and hf-seek contract.
When should I use typegpu?
Use it during Build when adding TypeGPU, raw WebGPU, WGSL fragment shaders, compute pipelines, liquid glass, or particle systems to a HyperFrames layer that must respond to timeline seeks and video renders.
Is typegpu safe to install?
It is procedural documentation for client-side WebGPU patterns; review the Security Audits panel on this Prism page before trusting any third-party skill source.
SKILL.md
READMESKILL.md - 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 ```html <canvas id="gpu-layer"></canvas> <script> (async () => { if (!navigator.gpu) return; const adapter = await navigator.gpu.requestAdapter(); if (!adapter) return; const device = await adapter.requestDevice(); const canvas = document.getElementById("gpu-layer"); canvas.width = 1920; canvas.height = 1080; const ctx = canvas.getContext("webgpu"); const fmt = navigator.gpu.getPreferredCanvasFormat(); ctx.configure({ device, format: fmt, alphaMode: "opaque" }); // Build your pipeline, buffers, bind groups... const timeUniform = new Float32Array([0]); const timeBuf = device.createBuffer({ size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, }); function render(t) { timeUniform[0] = t; device.queue.writeBuffer(timeBuf, 0, timeUniform); const enc = device.createCommandEncoder(); const pass = enc.beginRenderPass({ colorAttachments: [ { view: ctx.getCurrentTexture().createView(), loadOp: "clear", clearValue: { r: 0, g: 0, b: 0, a: 1 }, storeOp: "store", }, ], }); pass.setPipeline(pipeline); pass.setBindGroup(0, bindGroup); pass.draw(3); pass.end(); device.queue.submit([enc.finish()]); } render(0); window.addEventListener("hf-seek", (e) => render(e.detail.time)); })(); </script> ``` ## Timeline Registration GSAP tweens that drive text, captions, or HTML elements must be registered **synchronously** — before any `await`: ```js const tl = gsap.timeline({ paused: true }); // Caption tweens: synchronous, added before WebGPU init gsap.set(".cap", { opacity: 0 }); tl.to("#cap-1", { opacity: 1, duration: 0.3 }, 1.0); tl.to("#cap-1", { opacity: 0, duration: 0.2 }, 3.5); window.__timelines["my-comp"] = tl; // GPU-dependent tweens can go inside the async IIFE (async () => { // ... WebGPU init ... const proxy = { value: 0 }; tl.to(proxy, { value: 1, duration: 2, onUpdate: render }, 0.5); })(); ``` ## Video-Backed Effects (Liquid Glass, Distortion) To use a `<video>` as the GPU input texture: ```js const videoEl = document.getElementById("aroll"); // Wait for video metadata before creating the texture await new Promise((r) => { if (videoEl.readyState >= 1) r(); else videoEl.addEventListener("loadedmetadata", r, { once: true }); }); // Create texture at the video's NATIVE resolution const vw = videoEl.videoWidth, vh = videoEl.videoHeight; const bgTex = device.createTexture({ size: [vw, vh], format: "rgba8unorm", usage: GPUTextureUsage.COPY_DST