typegpu

Integrate TypeGPU and raw WebGPU into HyperFrames for time-synchronized GPU rendering.

248|32|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/boraoztunc/skills --skill typegpu-boraoztunc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typegpu
Source: https://github.com/boraoztunc/skills/tree/main/typegpu
Command: npx skills add https://github.com/boraoztunc/skills --skill typegpu-boraoztunc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

HyperFrames users need a reusable pattern to integrate TypeGPU and raw WebGPU into GPU-driven compositions while keeping timeline-driven rendering synchronized with hf-seek events.

Core Features & Use Cases

  • TypeGPU adapter pattern enabling deterministic GPU rendering within HyperFrames scenes.
  • WebGPU initialization and render-flow guidance for syncing GPU frames to HyperFrames time.
  • Timeline-driven rendering compatible with both interactive demos and video renders.

Quick Start

Boot a HyperFrames scene that uses the typegpu adapter and render on hf-seek events to drive GPU-frame updates.

Frequently Asked Questions about typegpu

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I synchronize WebGPU rendering with HyperFrames timeline events?▼

You can synchronize WebGPU rendering with HyperFrames by using the TypeGPU adapter pattern to drive GPU frame updates on hf-seek events. This ensures deterministic, time-synchronized rendering across canvas layers.

What is the best way to integrate TypeGPU with WebGPU for canvas rendering?▼

Integrating TypeGPU with WebGPU involves using a specific adapter pattern within HyperFrames to handle asynchronous initialization and manage WGSL shaders. This enables timeline-driven GPU rendering across interactive demos and video renders.

Can I use WebGPU shaders in HyperFrames if my environment lacks GPU support?▼

You cannot use WebGPU shaders without a WebGPU-capable environment. The TypeGPU integration requires safe handling and fallback logic for asynchronous adapter initialization when WebGPU is unavailable.

How does hf-seek drive frame updates in a WebGPU composition?▼

The hf-seek event drives frame updates by triggering the TypeGPU render flow to process WGSL shaders at the correct timeline position. This maintains time-synchronized GPU rendering across multiple canvas layers.

Do I need asynchronous adapter initialization for TypeGPU WebGPU rendering?▼

Yes, asynchronous adapter initialization is required to establish a WebGPU device before rendering. This setup is necessary to safely handle GPU rendering within HyperFrames and manage potential unavailability.

Why does my WebGPU canvas layer lose synchronization during video renders?▼

Canvas layers lose synchronization if GPU frame updates are not bound to hf-seek events. Using the TypeGPU adapter pattern ensures deterministic rendering that stays aligned with the HyperFrames timeline.