Product hero

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.

mografy add product-hero-wide projects/my-film

To watch it on its own, point the project's scene to the template: "scene": "scenes/templates/product-hero-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.

import * as productHeroWide from './templates/product-hero-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, productHeroWide, { name: "Northwind" })

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

For your agent Opening of a landing-page loop, Product Hunt or YouTube demo. Name 1–2 words, tagline under ~40 characters, button labels 1–3 words. The window is a stand-in: redraw it in `appUI` or draw a screenshot into the same 1400 × 860 card.

Parameters

• namestringNorthwind
• taglinestringYour whole week in one calm view.
• kickerstringNew · Version 2
• primarystringStart free
• secondarystringWatch the film
• themeenum · night | light | neonlight
• safeGuidebooleanfalse

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