skills.rest
Kamalabot
KamalabotCOMMUNITY
Explore all skills by this author →
GitHub

three

Create frame-accurate Three.js and WebGL renders synced to HyperFrames hf-seek events.

Updated Apr 25, 2026
Search Tags:#video production#webgl#three.js#3d rendering#hyperframes#animation mixer#deterministic renders
One-click install
npx skills add https://github.com/Kamalabot/tt-vid --skill three-kamalabot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: three
Source: https://github.com/Kamalabot/tt-vid/tree/main/man_lady/.agents/skills/three
Command: npx skills add https://github.com/Kamalabot/tt-vid --skill three-kamalabot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates frame timing mismatches and jitter when integrating Three.js or WebGL visuals into HyperFrames video compositions, ensuring every 3D render matches the exact seek position of your timeline.

Core Features & Use Cases

  • Deterministic 3D Rendering: Create Three.js scenes, WebGL canvas layers, and shader-driven visuals that render precise frames on HyperFrames hf-seek events.
  • Animation & Camera Control: Manage AnimationMixer timelines and camera motion tied directly to HyperFrames time instead of unreliable wall-clock time.
  • Use Case: Ideal for product spin videos, animated 3D overlays, and shader effects that need to sync frame-perfect with other HyperFrames composition layers.

Quick Start

Use the three skill to build a frame-accurate rotating 3D icosahedron overlay that syncs perfectly with your HyperFrames video timeline.

Frequently Asked Questions about three

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

FAQPage Schema
How do I sync Three.js 3D rendering with a video timeline?▼

To sync Three.js 3D rendering with a video timeline, bind your animation mixer and camera motion to HyperFrames hf-seek events. This ensures deterministic renders that align precisely with the seek position instead of relying on wall-clock time.

Why does my WebGL canvas overlay jitter during video playback?▼

WebGL canvas overlays jitter when rendering relies on wall-clock time rather than deterministic frame timing. Tying scene initialization and time-driven rendering to exact HyperFrames seek events eliminates fetch delays and frame mismatches.

Can I use AnimationMixer clips for 3D product spins in HyperFrames?▼

Yes, you can use pre-loaded GLTF animation clips to drive 3D product spins. Managing AnimationMixer timelines through HyperFrames time ensures your animated canvas overlays and camera motion stay frame-perfect with the video composition.

What's the best way to pre-load 3D assets for deterministic video rendering?▼

Pre-load GLTF assets and clips before rendering begins to eliminate render-time fetch delays. Synchronous scene initialization guarantees your Three.js visuals render precise frames instantly on HyperFrames hf-seek events without stuttering.

Does this approach support shader-driven visual effects for video production?▼

Yes, this approach supports shader-driven visual effects by applying deterministic Three.js and WebGL renders to HyperFrames layers. Synchronizing shader uniforms with hf-seek events ensures frame-accurate visual effects across your video timeline.

Related Skills

Explore More Software Engineering Skills→
automatedigitalautomatedigital
1

three

Create time-deterministic Three.js and WebGL content synced to HyperFrames seek events.

Official
Intermediate
zengxiaoqizengxiaoqi
1

three

Integrate Three.js scenes with HyperFrames' timeline for frame-synchronized WebGL rendering.

Community
Intermediate
ZardLi1115ZardLi1115
4

hyperframes

Render HTML and GSAP motion graphics into MP4/WebM video via FFmpeg.

Community
Intermediate
hoanghd218hoanghd218
7

three

Render Three.js scenes deterministically in response to HyperFrames hf-seek events.

Community
Intermediate