36.5-second example rendered by this skill from examples/gyre · 1280×720
Example settingswhat each example above was built from
examples/gyrebrief.json
- Brand
- Gyre
- Name
- gyre
- Kicker
- Gyre · growth model
- Headline
- The product-led growth flywheel
examples/levainbrief.json
- Brand
- Levain Lane
- Name
- levain
- Kicker
- Levain Lane · the bakehouse loop
- Headline
- One starter, every loaf
What you get
- A 35–40 s MP4 at 1080p for 4 to 7 stages
- 24 icons built from geometric primitives on the beat, from magnet and bolt to jar, loaf and sprout
- A 3D camera that orbits and tilts the dial through four set-ups, so no two neighbouring stages look alike
- A motion-blurred flywheel beside a metric that compounds turn by turn, with a cycle counter
- A labelled overview of the whole loop, then an end card with your brand, line and address
- Your own three colours and Google Fonts, an original soundtrack written by code, and two made-up example films
- Open-source licenses for every part it builds on
Good fit
- SaaS and product teams can show their growth loop as one turning flywheel, beside the metric it compounds.
- Bakeries, kitchens and makers can explain a recipe or a daily cycle in calm serif type on cream paper.
- Founders and strategy teams get a flywheel for a pitch or an all-hands where every stage reads at a glance.
Not for
- Fewer than 4 or more than 7 stages
- Steps that do not loop back (see Isometric Explainer Film or Sketch Explainer Film)
- Vertical or square social cuts (16:9 only)
About this skill
A loop or flywheel explained as a precise Swiss instrument dial. Four to seven stages sit on a rotor under a fixed bezel and index mark, drawn on canvas through a real 3D camera that orbits and tilts the dial through four set-ups. Each stage turns under the index mark while its segment fills, its icon builds from geometric primitives on the beat and a connector draws round to the next stage, beside a big title and numeral. Then the loop closes with a flash, the dial spins up into a motion-blurred flywheel beside a compounding metric, settles into an overview with every stage labelled and ends on your brand card, with an original clockwork soundtrack locked to the picture.
Example request
Make a Radial Cycle Film of our product-led growth flywheel for https://gyre.example: five stages from Attract to Advocate, with weekly active teams growing from 2,832 to 38,400.
How it works
Your agent
- 1
Ask the user for the loop
Numbers must be real or labelled.
- 2
Write the brief
Start from
<skill>/examples/gyre/brief.json(dark charcoal and orange, Geist) or<skill>/examples/levain/brief.json(cream and red, Instrument Serif). - 3
Make the film
It copies the template into
my-film/, writescues.jsonandstoryboard.jsfrom the brief, writesassets/soundtrack.wavon the same beat sheet and rendersmy-film/renders/<name>-1080p.mp4. - 4
Check before you hand it over
Look at the sheet: every stage title readable, no label cut at the frame edge, the metric landing on its final figure, the end card held.
- 1
You get


What you need
- Node.js 22 or newer and FFmpeg on the PATH.
- HyperFrames through
npx, pinned:npx --yes hyperframes@0.8.192. The first render downloads its own headless Chrome (npx --yes hyperframes@0.8.192 browser ensureif it says Chrome is missing). - Network access to
fonts.googleapis.comandcdn.jsdelivr.net(GSAP) while rendering. If jsDelivr is blocked, setGSAP_FILEto a localgsap.min.js(3.14.2) andmake-film.mjsputs that copy in the project. - A loop to explain: 4 to 7 stages, each with a short name and one plain sentence.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The console prints
[radial-cycle] text too long.That text did not fit even at its smallest size. Shorten the stage title or line;
apply-brief.mjsalready rejects text over the character limits.The render stops with "Chrome is missing".
Run
npx --yes hyperframes@0.8.192 browser ensureonce, then render again.The film renders in a fallback font or stops before the first frame.
The render could not reach
fonts.googleapis.comorcdn.jsdelivr.net. Allow them, or setGSAP_FILEfor GSAP.
What’s in the download
- SKILL.md10.4 KB
- examples/
- examples/gyre/1.25 KB1 file
- examples/levain/1.38 KB1 file
- scripts/
- scripts/apply-brief.mjs14.1 KBchecks the brief, works out the beat sheet, colours and fonts, writes
cues.jsonandstoryboard.js - scripts/color.mjs1.40 KBcolour mixing and contrast helpers
- scripts/icons.mjs6.58 KBthe 24 built-in icons as lists of geometric primitives
- scripts/make-film.mjs4.66 KBone command from brief to MP4 (template, brief, music, render,
GSAP_FILE) - scripts/music.mjs21.1 KBwrites the original clockwork minimal-techno soundtrack with every sound effect on the beat sheet
- template/
- template/film.css4.34 KBtype and layout of the titles, numerals, metric and end card
- template/film.js54.2 KBthe dial, the 3D camera, the motion blur and the whole timeline
- template/hyperframes.json298 B
- template/index.html1.55 KBthe HyperFrames composition
- template/package.json196 B
- template/storyboard.js118 B
- NOTICE.md1.09 KB
- TESTED.json1.14 KB
16 files · 124 KB · installs to ~/.claude/skills/radial-cycle-film for Claude Code and ~/.agents/skills/radial-cycle-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 35–40 s · 1080p · with music
- Needs
- Node.js 22+, FFmpeg and Chrome
- Series
- Explainers · 5 skills
- Updated
- Nov 2, 2026
- Checked
- Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
How many stages can the loop have?
Four to seven, each with a name of up to 18 characters, one line of up to 72 and one of 24 built-in icons. The film runs 35 to 40 s whatever the count.
What does the metric do?
It grows geometrically over 3 to 16 turns of the flywheel, from your start value to your end value, with a cycle counter beside it. Leave it out when there is no honest number, and a line is shown instead.
Can I use my own colours and fonts?
Yes. Give a background, an ink and one accent, and any Google Fonts for titles, text and numbers. The ink must reach 7:1 on the background and the accent 2.2:1, and everything else is mixed from those three.
Which agents is Radial Cycle Film written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.
Credits and licensesBuilt on heygen-com/hyperframes
What Lookbk adds on top of heygen-com/hyperframes (Apache-2.0): Lookbk wrote this package from scratch on HyperFrames: the dial and 3D camera, the motion blur, the 24 icons, the brief checks and the soundtrack generator.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.