skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

typegpu

Implements WebGPU and TypeGPU rendering patterns for HyperFrames seek-driven compositions.

Updated Mar 4, 2026
Search Tags:#shaders#gsap#webgpu#wgsl#gpu rendering#hyperframes#typegpu
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill typegpu-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typegpu
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/typegpu
Command: npx skills add https://github.com/gmolike/Claude-Template --skill typegpu-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building GPU-rendered visuals inside HyperFrames compositions requires precise coordination between WebGPU pipelines and the player's seek timeline; this Skill provides the adapter contract, code patterns, and WGSL snippets needed to render exact frames on every hf-seek event. ## Core Features & Use Cases - Seek-Driven GPU Rendering: Initialize WebGPU, register GSAP tweens synchronously, and re-render from HyperFrames time on each hf-seek event. - Video-Backed Effects: Use video elements as GPU input textures for liquid glass, distortion, and frosted blur effects via a two-pass downsample pipeline. - WGSL Shader Snippets: Ready-made full-screen triangle vertex shader and rounded-rect SDF for glass pill effects. - Use Case: Create a liquid glass caption overlay on a video composition where the GPU canvas renders frosted blur over the footage and HTML captions animate via GSAP, all frame-accurate during video export. ## Quick Start Ask the AI to create a HyperFrames composition with a WebGPU liquid glass effect over a video layer that renders deterministically on seek events.

Frequently Asked Questions about typegpu

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

FAQPage Schema
How do I render WebGPU frames on HyperFrames seek events?▼

Listen for the hf-seek CustomEvent and call your render function with e.detail.time, or read window.__hfTypegpuTime. Never use requestAnimationFrame or performance.now(), since the adapter publishes the exact composition time for deterministic rendering.

How to use a video element as a WebGPU texture?▼

Wait for the video's loadedmetadata event, create a texture at the video's native resolution, then call device.queue.copyExternalImageToTexture each frame. For headless renders, pre-extract frames with FFmpeg as PNGs since copyExternalImageToTexture may fail on video elements.

Why must GSAP tweens be registered synchronously in HyperFrames?▼

The HyperFrames player reads the timeline immediately at page load, before any asynchronous WebGPU initialization completes. Register all tweens for HTML elements before any await; only GPU-dependent tweens may be added inside the async block.

Does WebGPU canvas support transparency over HTML video?▼

Yes, configure the canvas context with alphaMode: 'premultiplied' so transparent regions let underlying HTML elements show through. Use alphaMode: 'opaque' when the GPU pipeline renders the entire frame including video content.

Why is my frosted glass blur too weak in a single shader pass?▼

A single-pass Gaussian kernel cannot produce strong glass-like blur. Use a two-pass approach: downsample the texture to one-sixth resolution, then sample the small texture with bilinear filtering for the frosted interior while using the full-resolution texture for sharp areas.

Related Skills

Explore More Software Engineering Skills→
storyclaw-officialstoryclaw-official

video-frames

Extract single frames or short clips from video files using ffmpeg.

Official
Basic
hugotownhugotown

typegpu

Implements TypeGPU and raw WebGPU rendering patterns for HyperFrames compositions.

Community
Advanced
openaiopenai
5.3k

hyperframes

Create HTML-based video compositions with GSAP animations, captions, and scene transitions.

Official
Advanced
freshtechbrofreshtechbro
682

pixijs-2d

Render 2D graphics with sprites, particles, and filters using WebGL/WebGPU.

Community
Intermediate