Mografy
Browse documentation

Mografy Templates · Explainers

Before and after

Twelve crooked manual steps fill the left half, a comet draws the split, and one checked result lands on the right.

16:95 sFree · MIT
Also designed for 9:16before-after

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 before-after-wide projects/my-film

To watch it on its own, point the project's scene to the template: "scene": "scenes/templates/before-after-wide.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 beforeAfterWide from './templates/before-after-wide.js'
import { play } from './templates/kit.js'

// inside renderFrame(ctx, time): play it from 2 s, with your own copy
play(ctx, time, 2, beforeAfterWide, { before: "Before: 12 manual steps" })

Or describe the film to Claude or Codex: the Mografy Skill knows every template and picks the ones that fit.

For your agent Contrast the old way with the product in a landscape film. Write each label as "Kicker: Headline" (headline 1–3 words, under ~16 characters; [brackets] take the spectrum). The twelve steps and the result line are STEPS and the Result param; a full-frame explainer, not an overlay.

Parameters

  • beforestringBefore: 12 manual steps
  • afterstringAfter: [One click.]
  • resultstringReport sent to the team
  • themeenum · night | light | neonnight
  • safeGuidebooleanfalse

Timing and layout live in the template file itself: edit them there, then check and review the frames.