Add the template
Run this in your Mografy folder. The template, the shared modules and its fonts are copied into the project; files you changed are kept. A folder that is not a project yet becomes one, with a scene that plays the template.
Terminal
mografy add three-steps projects/my-filmTo watch it on its own, point the project's scene to the template: "scene": "scenes/templates/three-steps.ts"
Use it in a film
Play the template on your film's timeline and override its parameters. Pass backdrop: false to draw an overlay template over your own picture.
scenes/main.ts
import * as threeSteps from './templates/three-steps.js'
import { play } from './templates/kit.js'
// inside renderFrame(ctx, time): play it from 2 s, with your own copy
play(ctx, time, 2, threeSteps, { kicker: "How it works" })Or describe the film to Claude or Codex: the Mografy Skill knows every template and picks the ones that fit.
For your agent Explain a 3-step flow. Step titles 2–4 words, details one short line. The window shows a stand-in screen: put assets/step-1.jpg … step-3.jpg in the project (or redraw `screen`) to show the real product.
Parameters
- kickerstringHow it works
- step1stringPaste a link
- step2stringPick a style
- step3stringExport the film
- detailsstringDrop in your product page. ⏎ Choose the look and the pace. ⏎ MP4, ready to post.
- hintstringSwipe for the next step
- themeenum · light | darklight
- accentcolor#D4643A
- safeGuidebooleanfalse
Timing and layout live in the template file itself: edit them there, then check and review the frames.