Risemi
Storyboard of the 20-second Ledgerly launch film: 8 scenes, timecodes, beat map
Storyboard of the 20-second Ledgerly launch film: 8 scenes, timecodes, beat map
You say
use html-to-video-motion-graphics to make a 20-second launch video for Ledgerly from the README and public/landing.html; show me the storylines first
Skillv1.0.0

HTML-to-Video Motion Graphics

Your agent writes launch films, explainers and social clips as HTML, CSS and GSAP scenes, checks them, and renders identical MP4s.

No ratings yet0 installs0 savesupdated 7 nov

Install in your agent

Read https://risemi.io/p/html-to-video-motion-graphics/install.md and follow it to install the "html-to-video-motion-graphics" skill into this agent.

Paste this into Claude Code, Cursor, Codex or any agent that can read a URL.

Full guide for your agent: https://risemi.io/p/html-to-video-motion-graphics/install.md

What you get

  • A main skill with the 12-rule render contract, the work loop (storylines, SPEC.md, build, check, snapshot, review) and playbooks for 7 video types
  • 16 references on story, storyboards, motion, captions, overlays, sound and format, plus 13 frame presets with caption skins
  • A companion CLI skill that maps every command to its job: scaffold, check, snapshot, timeline edits, preview, local or cloud render
  • Editable output: one HTML file per scene, copy and brand colours as variables
  • NOTICE.md with the upstream commit and every change, including the removed telemetry step

Good fit

  • Founders and marketers who need launch, feature or changelog videos without a motion designer
  • Developers who prefer video as code they can diff and re-render
  • Social clips and captions in several aspect ratios from one source

Not for

  • Editing camera footage end to end (cutting, colour grading interviews); use a video editor
  • Machines without Node.js 22+ and FFmpeg

About this skill

HTML-to-Video Motion Graphics

Your coding agent can already write HTML, CSS and GSAP. This skill turns that into video: launch films, feature explainers, changelog clips, stat reels, title cards, captions and vertical social ads, rendered to MP4 frame by frame so every render comes out identical. The agent works in files you can read and edit: one root composition, one HTML file per scene, copy and brand colours as variables.

How it works. Ask for a video the way you would brief a motion designer. For anything over about 15 seconds that tells a story, the agent first reads the playbook for that kind of video (launch, explainer, data, vertical, music, 3D, character), proposes three storylines in words, and writes a SPEC.md where every adjective becomes a number. Then it builds the scenes, runs npx hyperframes check against a 12-rule render contract (no Date.now(), no unseeded randomness, no tweening display, safe areas, asset paths), takes snapshots, reviews them, and stops at a preview for your approval before the final render.

What you get. The main skill (render contract, work loop, what each video type needs), 16 reference files plus 7 video-type playbooks on story, storyboards, motion, captions, overlays, sound, format and review, 13 frame presets with caption skins and showcase pages, and a companion CLI skill that maps every command to the job it does: scaffold, check, snapshot, edit the timeline, preview, render locally or in the cloud.

Runtime. The skills drive the open-source HyperFrames CLI (Apache-2.0, by HeyGen) through npx hyperframes; it is not bundled here. You need Node.js 22+ and FFmpeg. Local rendering is free; cloud rendering and the optional desktop app are the runtime publisher's services and are offered, never required.

Based on the hyperframes and hyperframes-cli skills by HeyGen, Inc. (Apache-2.0): https://github.com/heygen-com/hyperframes

What we changed

  • Renamed the skills to html-to-video-motion-graphics and html-to-video-motion-graphics-cli, added a note that maps upstream's /hyperframes names to them, and fixed the links between the two skills (each changed file is marked).
  • Removed the "usage beacon" step, which had the agent send a telemetry event every time the skill started. The CLI's own telemetry and its opt-out are unchanged.
  • Left out the six binary font files of one preset (code-editorial; free on Google Fonts), upstream tests, and the other upstream skills (registry, media, slideshow and others). NOTICE.md lists the upstream commit and every change.

Checked against

Claude Code 2.1.317 (desktop app, Claude Opus 5.5), 2026-11-07. Installed under .claude/skills/html-to-video-motion-graphics/, loaded from SKILL.md and run end to end on a 20-second launch video brief: SKILL.md routed to the launch playbook, proposed three storylines and wrote SPEC.md. Not run: npx hyperframes itself (no network install in that environment), so no scaffold, check, preview or render; the package name, CLI name and Node 22+ requirement were verified against the npm registry (hyperframes 0.9.20). One broken link, automatic feedback reports and a telemetry flag were fixed (NOTICE.md). The example output on this page is from that run, shortened. Not yet checked: automatic triggering from the skill description in a fresh session (the run started from an explicit request), and Codex, Cursor, GitHub Copilot and Gemini CLI, which read the same SKILL.md format but have not been run.

How to install

The package holds two skills. Copy the contents of files/ (without the html-to-video-motion-graphics-cli/ folder) to .agents/skills/html-to-video-motion-graphics/ and copy files/html-to-video-motion-graphics-cli/ to .agents/skills/html-to-video-motion-graphics-cli/, so the two sit side by side. Do the same under .claude/skills/ for Claude Code, or download the zip and unpack it there. If your agent uses its own folder (.cursor/skills/, .github/skills/, .gemini/skills/), copy both there too. Check node --version (22+) and ffmpeg -version, then ask: "use html-to-video-motion-graphics to make a 20-second launch video for …".

The CLI may report that upstream's own skills are missing or out of date; that refers to the upstream copies, not this package. Running npx hyperframes skills update installs upstream's versions next to these; keep one set to avoid duplicate triggers.

Not affiliated with HeyGen, Inc.

Similar products

Use case: Product teaser (template 1)

| Element | Value |
|---|---|
| Subject | A matte black ceramic pour-over coffee dripper with a thin polished copper rim, sitting on a clear glass carafe |
| Action | 1) A thin stream of dark coffee trickles from the dripper into the carafe while soft steam curls up from the rim; 2) the dripper and carafe turn a slow quarter turn; 3) the final second holds still on the dripper's front, copper rim catching the light |
| Scene | A walnut kitchen counter by a window, early morning just after sunrise, a faint haze of steam in the air, uncluttered background |
| Angle / Move | Vertical close-up at counter height, slightly above eye level / slow dolly in |
| Lens | 85mm-style telephoto feel, shallow depth of field, kitchen background in soft bokeh |
| Light / Palette / Mood | Soft low-angle morning sunlight from a window on the left with gentle fill and a warm rim on the copper / matte black, warm copper, honey-brown walnut, soft cream highlights / calm, quiet, unhurried |
| Style / Time | Premium commercial look, photorealistic / real-time pace, steady trickle throughout, still hold in the last second |
| Audio | Close, clear coffee trickling into glass, a faint soft drip, quiet low morning room tone, no music |
| Negative | text, logos, letters, labels, hands, people, clutter, reflections of people, plastic look |

Final prompt (paste into Veo / Gemini / Flow):

Premium commercial look, photorealistic, vertical close-up at counter height of a matte black ceramic pour-over coffee dripper with a thin polished copper rim, sitting on a clear glass carafe on a walnut kitchen counter by a window in the early morning just after sunrise. A thin stream of dark coffee trickles from the dripper into the carafe while soft steam curls up from the rim, and the dripper and carafe turn a slow quarter turn. Slow dolly in, 85mm-style telephoto feel, shallow depth of field with the kitchen background in soft bokeh. Soft low-angle morning sunlight from a window on the left with gentle fill and a warm rim light catching the copper, palette of matte black, warm copper, honey-brown walnut and soft cream highlights, calm and quiet mood. Real-time pace; the final second holds still on the dripper's front.
Audio: close, clear sound of coffee trickling into a glass carafe, a faint soft drip, quiet low morning room tone, no music.
Negative prompt: text, logos, letters, labels, hands, people, clutter, reflections of people, plastic look

Settings: 9:16, 8 seconds, audio on.
SkillTextPro
  • ChatGPT
  • Claude
  • Gemini
  • +1
Marketing

Prompt Anatomy for Veo

Use it to turn a rough video idea into a structured Veo prompt with a filled anatomy table, camera, lens, light, audio and a negative prompt.

0 installs
$7.99
Beat sheet

| Beat | Purpose | What the viewer must get | Seconds |
|---|---|---|---|
| 1 | Hook | A reporter in the rain, recording a source who is trusting him with something | 4 |
| 2 | Problem / stakes | The recording is precious and private; the small device in his wet hand is what holds it | 4 |
| 3 | Reveal | Later that night, at home, he sets Fieldnote down and starts it working | 4 |
| 4 | Proof | The words appear on its own e-ink screen: transcribed on the device, no laptop, no cloud | 8 |
| 5 | Payoff + CTA | He has every word, privately; music enters; end line | 4 |

Storyboard table (shots 1–3 of 6)

| # | Sec (gen → use) | Framing | Camera move | Subject action | Dialogue / on-screen text | Audio / ambience | Continuity notes |
|---|---|---|---|---|---|---|---|
| 1 | 4 → 4 | Medium shot, eye level, over the source's shoulder (her back soft in frame-left foreground); he stands under the awning facing screen left | Slow handheld push-in | Holds Fieldnote out toward her at chest height; listens; gives one small nod | Source (on camera, from behind): "They said it would stay between us." | Location A bed; her voice close; rain on the awning | Location A. Faces screen left. Recorder in his right hand, red light on. Jacket zipped halfway, wet shoulders. |
| 2 | 4 → 4 | Extreme close-up on his right hand holding Fieldnote, the source's coat a soft blur beyond | Static | Rain beads on the graphite body; the red light glows steadily; his thumb shifts once on the edge | VO: "What they tell me stays with me." | Location A bed, close rain ticks on the device | Location A. Recorder points screen left. Screen pale grey and blank. Ends with recorder centred, for a match cut. |
| 3 | 4 → 4 | Medium close-up on the kitchen table under the pendant lamp | Static | His right hand enters from frame right and sets Fieldnote down, centred; his thumb presses the round button; hand withdraws | none | Location B bed; soft tap of the recorder on wood; one button click | Location and lighting change (B). Match cut from shot 2 on recorder position. Device dry now, red light off. |

[The full answer continues with shots 4–6 and a coverage alternate, the ten-line continuity block pasted word for word into all seven shot prompts, each prompt's first and last frame, and the stitch plan with voice-over script, caption placement and export settings.]
SkillTextPro
  • ChatGPT
  • Claude
  • Kling
  • +2
Video

Storyboard to Shot Prompts for Sora

Use it to turn a script or one-paragraph brief into a beat sheet, storyboard table, matching per-shot Sora 2 prompts and a stitch plan.

0 installs
$7.99
Settings: model `sora-2` · size `1280x720` · seconds `8` · characters: none

Before

A cool cinematic shot of a woman drinking coffee in a nice cafe, make it 10 seconds.

After

Style: Contemporary 35 mm film look, natural and understated, soft contrast, fine grain, warm-neutral grade.

A small neighbourhood cafe on a quiet weekday morning. A woman in her early 30s with shoulder-length dark hair tied loosely back, wearing an oatmeal knit sweater, sits alone at a round marble table by a large street-facing window. In front of her: a white ceramic cup of black coffee on a matching saucer and a folded paper napkin. Behind her, out of focus, a wooden counter with an espresso machine and a barista moving between shelves of cups. Thin steam rises from the cup and catches the window light.

Cinematography:
Camera: medium close-up, eye level, from across the table at a slight angle; slow dolly-in
Lens: 50 mm feel; shallow depth of field, sharp on her face and the cup, background soft
Lighting: soft morning daylight through the window from camera left as key; warm tungsten pendant glow from the counter as background fill
Palette anchors: cream, warm walnut brown, soft white, muted sage, coffee black
Mood: calm, quiet, unhurried

Actions:
- She wraps both hands around the cup and lifts it slowly (first two seconds).
- She blows lightly across the surface, then takes one small sip.
- She lowers the cup to the saucer and looks out the window with a faint, relaxed smile (final two seconds).

Background Sound:
Low hiss of the espresso machine, soft clink of cups at the counter, muffled murmur of a few voices; no score.

What changed and why

- Removed "make it 10 seconds". Duration is an API parameter, not prose, and 10 is not a supported value (4, 8, 12, 16, 20). Set `seconds: 8` in the call; the prompt now fits 8 seconds of action.
- "Cool cinematic shot" became a named style. A specific aesthetic instead of a vague adjective, set first so it frames everything else.
- "Drinking coffee" became three timed beats. Lift, blow and sip, lower and look out. Beats with timing cues are far more reliable than a single vague verb.

[five more changes in the full answer: subject anchors, concrete nouns, one camera move, named light sources, background sound]
SkillVideoPro
  • ChatGPT
  • Sora
Marketing

Prompting Playbook for Sora 2

Use it to write or rewrite Sora 2 prompts with the right settings, camera, timed action beats, light, dialogue and sound.

0 installs
$7.99
Pack: `references/pack-product-shots.md`.

Three options

1. PS-09 Strawberry Milkshake Product and Infographic. A ready-made premium cold-drink hero shot: seamless pastel backdrop, realistic condensation droplets and "premium café advertisement" styling, which is exactly the look a chilled cold-brew can needs.
Prompt by @Strength04_X (𝐌), source: https://x.com/Strength04_X/status/2090665058980462697, via awesome-nano-banana-pro-prompts, CC-BY-4.0.

2. PS-02 Luxury Chocolate Ad Still Life. The only prompt in the pack that is a full ad layout with on-image copy, but you would have to delete its placeholder copy and invented logos and rebuild most of the props.
Prompt by @AiwithLucas_ (Lucas AI), source: https://x.com/AiwithLucas_/status/2089231817916420518, via awesome-nano-banana-pro-prompts, CC-BY-4.0.

3. PS-01 Premium Beverage Advertising Photography. Written for a beverage-brand hero ad and works from your attached references, but the prompt is only one line long, so lighting and composition would come from what you attach.
Prompt by @exywuu (Exywuu), source: https://x.com/exywuu/status/2092222318084788564, via awesome-nano-banana-pro-prompts, CC-BY-4.0.

Pick: PS-09

What to attach. Image 1: a clear, front-on photo of your real Northbound can, logo facing the camera.

Adapted prompt (4:5 Instagram ad)

Image 1: product photo of the Northbound cold-brew coffee can. Use this exact can.

A vertical 4:5 Instagram feed ad. A high-quality professional product photograph of a premium cold-brew coffee can, the 330 ml matte navy aluminium can from Image 1 with its white logo, standing upright and centered against a soft pastel pink seamless studio background. Preserve the can's exact shape, proportions, matte navy finish, white logo and label from Image 1; do not redesign it, recolour it or add any new graphics to it. The can sits on the same seamless surface with a few clear ice cubes and a small scatter of dark roasted coffee beans at its base. Realistic condensation droplets cover the can with soft reflections from the studio lights. Elegant soft lighting creates subtle natural shadows beneath the can. The can fills about 55% of the frame height in the lower two thirds of the image, logo facing the camera.

Text: the headline "Cold. Bold. Northbound." across the top third of the image, centered, in a bold clean white sans-serif with generous letter spacing, large enough to read on a phone. Render this headline exactly once, spelled exactly as written. Apart from the can's own logo from Image 1, no other text, no prices, no taglines, no extra logos, no watermark.

Ultra-sharp focus, DSLR macro beverage photography, premium café advertisement style, hyper realistic, clean commercial composition, 8K.

Tool settings: aspect ratio 4:5; in AI Studio or the API also set the output resolution to 2K so the headline stays sharp.

Prompt by @Strength04_X (𝐌), source: https://x.com/Strength04_X/status/2090665058980462697, via awesome-nano-banana-pro-prompts, CC-BY-4.0. Adapted: subject swapped from a strawberry milkshake in a glass to the Northbound can, Image 1 reference and preserve-the-product line added, 4:5 aspect ratio and headline added, the original's second (infographic) paragraph removed.

[The full answer ends with a one-fix-per-turn table for headline contrast, product drift, garbled text and framing.]
SkillImagesPro
  • Gemini
  • Nano Banana
Design

Curated Prompt Library for Nano Banana Pro

Use it to pick a provenance-checked Nano Banana Pro prompt and adapt it to your product, portrait or poster in one pass.

0 installs
$9.99

Questions about this skill

How do I install it?

Pick the tab that suits you above. The easiest way is to paste the one-line prompt into your agent: it reads the install guide, signs you in once with a code from your email and writes the skill into the right folder. You can also run the CLI command or unzip the ZIP by hand.

Which agents does it run in?

It was tested on Claude Code, Codex, Copilot, Cursor, Gemini CLI, Hyperframes. Any agent that reads SKILL.md folders can load it; the Manual tab lists the folder each one uses.

What if it doesn't work?

Write to hello@risemi.io within 7 days of buying and we refund you. Tell us which agent you used and we will fix the skill for everyone.