skills.rest
hugotown
hugotownCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

typegpu

Implements TypeGPU and raw WebGPU rendering patterns for HyperFrames compositions.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building GPU-rendered compositions inside HyperFrames requires precise coordination between WebGPU pipelines and the HyperFrames timeline, and common mistakes like registering GSAP tweens after awaits or rendering from performance.now() break seek-driven playback and video frame capture. ## Core Features & Use Cases - WebGPU Adapter Contract: Initialize WebGPU asynchronously while registering GSAP tweens synchronously, render from HyperFrames time, and respond to hf-seek events for exact frame rendering. - Video-Backed GPU Effects: Use video elements as GPU input textures for liquid glass and distortion effects, with a two-pass downsample approach for frosted blur and WGSL shaders for full-screen triangles and rounded-rect SDFs. - Deterministic Rendering: Enforce seeded PRNGs, seek-driven render loops, and onSubmittedWorkDone flushing so headless video renders capture correct frames. - Use Case: Create a liquid glass caption overlay where a frosted pill shape refracts the video behind it, with GSAP-driven captions synced to the HyperFrames timeline and deterministic GPU output for final video export. ## Quick Start Use the typegpu skill to build a HyperFrames composition with a WebGPU liquid glass effect over my video layer.

Frequently Asked Questions about typegpu

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

FAQPage Schema
How do I use WebGPU with HyperFrames compositions?▼

Initialize WebGPU asynchronously with navigator.gpu.requestAdapter(), but register all GSAP tweens synchronously before any await. Render from HyperFrames time and listen for the hf-seek event to re-render at the exact requested time.

How do I create a liquid glass effect with WebGPU shaders?▼

Use a two-pass approach: downsample the video texture to 1/6 resolution, then sample the small texture for the frosted interior and the full-res texture for sharp areas. Define the glass shape with a rounded-rect SDF in WGSL.

Why does copyExternalImageToTexture fail in headless Chrome renders?▼

Headless Chrome may fail copyExternalImageToTexture for video elements during render mode. Pre-extract key frames with FFmpeg as PNGs and load them as image textures instead for production renders.

Should I use opaque or premultiplied alphaMode for a WebGPU canvas?▼

Use alphaMode opaque when the GPU pipeline renders the full frame including video. Use premultiplied when the canvas is an overlay, such as particles on top of a regular video element, so transparent regions let HTML below show through.

Why is my WebGPU animation out of sync with the HyperFrames timeline?▼

Rendering from performance.now() or requestAnimationFrame breaks synchronization. Render only in response to hf-seek events using e.detail.time or window.__hfTypegpuTime, and avoid Math.random() in favor of a seeded PRNG.

Related Skills

Explore More Software Engineering Skills→
KaiserWhoLearnsKaiserWhoLearns

ffmpeg-keyframe-extraction

Extract I-frames from MP4, MKV, AVI, and MOV videos as PNG or JPEG sequences.

Community
Intermediate
47thtechcorner47thtechcorner
21

hyperframes

Render HTML, CSS, and GSAP compositions into video files.

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