Gavin Bintz

Patterns for using Helios with Vanilla JavaScript/TypeScript. Use when building compositions without a framework, or for simple DOM/Canvas manipulations.

中文简介正在准备中。当前显示原文说明。

Patterns for using Helios with Vue. Use when building compositions in a Vue environment.

中文简介正在准备中。当前显示原文说明。

Guided, brand-aligned marketing videos rendered with Helios — promo or hype, explainer or walkthrough, product demo or feature showcase, testimonial or social proof, launch or release announcement, and vertical social clips (Reels, TikTok, Shorts). Extracts the brand from a repo or URL, locks the format, randomizes structure and staging, and designs an original look from a seed so videos don't look alike. Optional beat-synced music and Internet Archive B-roll.

中文简介正在准备中。当前显示原文说明。

Cartoon shorts drawn in code: a character you design, acted emotions, drawn turnarounds and boiling linework, as one Helios renderAt(t) page. Covers storyboarding by reads, the character rig, the emotion timeline, closed-form acting helpers (jump, take, spring), transitions and the review loop. Use for animated shorts, mascot-style explainers, story-driven cartoons and character loops.

中文简介正在准备中。当前显示原文说明。

Motion design framework for programmatic video. Defines anti-slideshow architecture, depth, one easing personality, choreography, the squint test, transitions, timing to music and voice, and checks a script can run. Stated so it holds in any look; a motion-styles card overrides it where they conflict. Reference this skill from any guided video skill.

中文简介正在准备中。当前显示原文说明。

Lyric and karaoke music videos drawn in code: get word- and syllable-level lyric timings (from a cue file, or by forced alignment on a vocal stem), write a treatment and a storyboard by song section, derive the edit from the lyrics and the beat map, and integrate the words into every scene instead of subtitling them. Renders one Helios renderAt(t) page with the song attached. Use for lyric videos, karaoke videos, visualizers with lyrics, and story-driven music videos.

中文简介正在准备中。当前显示原文说明。

Opt-in recipes for specific code-video genres, each with structure, technique, gotchas and a tested Helios renderAt(t) demo: scale dives (powers of ten), step-by-step process explainers, era timelines, mechanism and proof explainers, kinetic typography, one-shape UI morph loops and pixel-art sprite scenes, plus a video brief template and a gotcha list. Load it only when the user asks for one of these genres by description or name, or asks for genre options or a brief template. Don't load it for general video requests.

中文简介正在准备中。当前显示原文说明。

Find, preview, cut and credit archival B-roll from the Internet Archive (archive.org) for a Helios video — public-domain, CC BY and CC BY-SA film plus Prelinger Archives. Use when a Helios composition needs real footage as a plate, cutaway, masked fill or texture. Not for generating footage or editing the user's own camera video.

中文简介正在准备中。当前显示原文说明。

Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.

中文简介正在准备中。当前显示原文说明。

Workflow for rendering a Helios composition to a video file. Use when you need to automate video production or export a high-quality animation.

中文简介正在准备中。当前显示原文说明。

Workflow for creating data-driven animations. Use when you need to visualize datasets using D3, P5, or other libraries.

中文简介正在准备中。当前显示原文说明。

Make videos drawn with code: motion graphics, launch and explainer videos, animated shorts, animated charts and data, logo reveals, social clips, music visualizers, UI demos and GIF loops. Write one HTML page that draws any frame from its time t, render it frame-exact to MP4 with Helios, check stills and contact sheets, and add a soundtrack. Use when the user asks for one of these as an MP4, GIF or animation file. Not for live-action or AI-generated realistic footage or editing camera video.

中文简介正在准备中。当前显示原文说明。

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

中文简介正在准备中。当前显示原文说明。