GoodCase.aiAI News · Radar↗AI Map↗Course · LearnPrompt↗
ProjectsGoodCase.aiAI News Radar ↗AI Map ↗LearnPrompt ↗
GoodCase.aiGoodCase.aiAI Prompt Case Collection
GoodCase.ai
RankingsCasesSkillsFavoritesSubmitDailyJoin us
中文EN
Agent Access →

Projects

AI News · Radar ↗AI Map ↗Course · LearnPrompt ↗
GoodCase.aiGoodCase.aiAI Prompt Case Collection
RankingsCasesSkillsFavoritesSubmitDailyJoin us
中文EN
Agent Access →

Loading…

GoodCase.ai · AI Prompt Case Collection
DSH PluginsChangelogFeedback
← All Skills

GoodCase Official Skill · Shared method across creators

Code-rendered explainer video

Have an AI write recordable HTML, Three.js, or SVG animation for explainers, data motion, and product demos.

7 Cases · 7 Creators · AI Video · Latest example 09/30/2026

Portland Transit Service Map Animation
Room to Quarks Zoom Animation
What Is Transformer Explainer

Verified installable Agent Skill

SKILL.md + .skill

Install into your agent.

npx skills add LearnPrompt/goodcase-lite --skill code-rendered-explainer-video --global --copy --yes --full-depth
Download .skill ↓Inspect source ↗

Installation contract

  • ✓ Standard SKILL.md frontmatter
  • ✓ Inputs, workflow, output, verification, safety
  • ✓ Bundled Case evidence and attribution
  • ✓ Validated and packaged by skill-creator
  • ✓ Installed via `npx skills add` and verified on 2026-10-04

Method skeleton

  1. 01Write the storyboard and timing before choosing the rendering stack
  2. 02Turn text, data, and visual elements into controllable parameters
  3. 03Ask for a single file that can be screen-recorded as is

Why it exists

7 published cases from 7 creators share the same explicit result pattern.

Creator practice

Creator versions

Creator practices derived from this shared method, including versions not yet listed in the catalog.

No creator versions yet.

Creator evidence

Methods stay attached to their makers.

1 Casesalex_prompterView creator →1 CasesdoteyView creator →1 Caseseverestchris6View creator →1 CasesKisalay_View creator →1 Casesmilos_gisView creator →1 CasestechhallaView creator →1 CasesVictorTaelinView creator →

Case evidence

Judge the Skill through finished work.

7 Cases
High-End Motion Videos Coded with GSAP and Three.js
AI VideoXAdded 10/03/2026

High-End Motion Videos Coded with GSAP and Three.js

A comprehensive system prompt for generating premium motion videos with GSAP and Three.js, covering setup, reference research, and motion principles.

Skill · Code-rendered explainer video

Prompt

<role> you design and build motion videos entirely in code, with gsap for the animation and three.js for any 3d. every decision is judged against the best work in the references, a

Source heat · X
81
Stability
View case →
30-Second Business Explainer Animation in One HTML Page
AI VideoXAdded 10/03/2026

30-Second Business Explainer Animation in One HTML Page

A structured prompt designed for Claude Opus 5.5 to generate an HTML-based 30-second animated commercial explainer video.

Skill · Code-rendered explainer video

Prompt

Adopt the role of an expert motion designer. Build a 30-second animated explainer for my business as a single HTML page. 5 scenes. The customer's problem, what I do, how it works i

Source heat · X
48
Stability
View case →
Room to Quarks Zoom Animation
AI VideoXAdded 10/03/2026

Room to Quarks Zoom Animation

An updated zoom animation built by Opus 5.5 with HTML and Three.js, showing the transition from a room to a MacBook, an Apple M4 chip, an atom and then a quark.

Skill · Code-rendered explainer video

Prompt

Create an animated sequence that starts in a room, zooms into a MacBook, then into an Apple M4 chip, followed by atoms, and finally quarks. Use HTML and Three.js for rendering.

Source heat · X
90
Stability
View case →
Portland Transit Service Map Animation
AI VideoXAdded 09/29/2026

Portland Transit Service Map Animation

Uses GTFS data and Three.js/Forge3d to build a 3D map animation of Portland transit routes, showing vehicles moving between neighborhoods on an ordinary Tuesday, in a light theme.

Skill · Code-rendered explainer video

Prompt

Create a video of Portland, OR's bus service on a random Tuesday! Showcase Portland's different neighborhoods at a high level and then zoom in on specific routes in each quadrant (

Source heat · X
100
Stability
View case →
What Is Transformer Explainer
AI VideoXAdded 09/27/2026

What Is Transformer Explainer

A prompt for creating a JS-based video that explains the technical details of the Transformer architecture in a way a high school student can follow.

Skill · Code-rendered explainer video

Prompt

帮我用js制作一个视频,主题是:什么是 Transformer 要深入浅出,让高中生也能看得懂,不仅high level说的清楚,也要有细节,包括注意力机制,甚至一些数学概念 你可以用任何工具或者安装工具,可以联网检索 请给我惊喜

Source heat · X
88
Stability
View case →
Kinetic Spoken-Word Poetry Film Prompt
AI VideoXAdded 09/27/2026

Kinetic Spoken-Word Poetry Film Prompt

A highly detailed prompt for a 20-second kinetic spoken-word poetry film titled BUILD THE FLOOR, specifying art direction, the speech, visual rules, shot script, and engineering constraints.

Skill · Code-rendered explainer video

Prompt

Create a 20.00-second kinetic spoken-word film titled “BUILD THE FLOOR.” Treat this as an original miniature speech staged entirely through typography. Every line changes the archi

Source heat · X
50
Stability
View case →
SpaceX Mars Landing Page Animation
AI VideoXAdded 08/19/2026

SpaceX Mars Landing Page Animation

A premium landing page design showing a SpaceX Starship landing on Mars at dusk, in soft champagne tones with cinematic depth suited to video motion.

Skill · Code-rendered explainer video

Prompt

Landing page hero section design for SpaceX Starship landing on Mars at dusk, soft warm off-white and pale stone canvas, oversized clean photographic imagery with gentle natural li

Source heat · X
10
Stability
73
View case →

A Skill is a derived reading layer. Every claim must trace back to published Cases.