Edit scenes, adjust timings, preview and render Whispever Remotion videos. Use when the user wants to modify a scene, change timing, add overlays, preview a section, or render the final video.
Use this skill when the user asks to:
npm run dev
Opens Remotion Studio in the browser at localhost:3000.
npx remotion still WhispeverVideo --frame=<N> --props='{"slug":"<slug>"}'
Example:
npx remotion still WhispeverVideo --frame=900 --props='{"slug":"001-parler-mort-famille"}'npx remotion render WhispeverVideo --props='{"slug":"<slug>"}' --codec=h264
npx remotion render WhispeverVideo --props='{"slug":"<slug>"}' --frames=<start>-<end>
npx remotion render WhispeverVideo --props='{"slug":"<slug>"}' --codec=h264 --output=out/<slug>.mp4
All edits happen in public/<slug>/video-manifest.json. After editing, preview with npm run dev.
Find the section, then the shot within it. Change startFrame and endFrame:
{
"id": "shot-5",
"startFrame": 0,
"endFrame": 300,
...
}
Ensure shots don't gap or overlap unintentionally. Shots within a section use relative frames.
Modify the shot's kenBurns object. Available presets:
| Effect | startScale | endScale | startX | startY | endX | endY |
|---|---|---|---|---|---|---|
| Zoom in center | 1.0 | 1.15 | 0.5 | 0.5 | 0.5 | 0.5 |
| Zoom in left | 1.0 | 1.15 | 0.4 | 0.5 | 0.35 | 0.45 |
| Zoom in right | 1.0 | 1.15 | 0.6 | 0.5 | 0.65 | 0.45 |
| Zoom out | 1.2 | 1.0 | 0.5 | 0.5 | 0.5 | 0.5 |
| Pan left | 1.08 | 1.08 | 0.6 | 0.5 | 0.4 | 0.5 |
| Pan right | 1.08 | 1.08 | 0.4 | 0.5 | 0.6 | 0.5 |
Easing options: "linear", "easeInOut", "easeIn", "easeOut"
Add to the section's overlays array:
Text overlay (quote style):
{
"type": "text",
"startFrame": 60,
"durationInFrames": 150,
"content": { "text": "Your text here", "style": "quote" }
}
Lower third (character intro — shows name only):
{
"type": "lower-third",
"startFrame": 30,
"durationInFrames": 120,
"content": { "name": "Monique", "description": "" }
}
Statistic:
{
"type": "statistic",
"startFrame": 90,
"durationInFrames": 120,
"content": { "value": "82%", "label": "des familles françaises" }
}
CTA card:
{
"type": "cta",
"startFrame": 0,
"durationInFrames": 150,
"content": { "type": "whispever", "text": "Centraliser vos volontés", "url": "whispever.com" }
}
Text style options: "quote" (centered card), "law" (dark banner), "emphasis" (large bold)
CTA type options: "share", "subscribe", "whispever"
Modify the transition object on a section or shot:
{
"transition": {
"type": "fade",
"durationInFrames": 20
}
}
Types: "fade", "slide", "wipe", "cut"
For slide: add "direction": "from-left" (or from-right, from-top, from-bottom)
npx tsx scripts/generate-manifest.ts <slug>)