Lead with three illustrated slides beside a supplied speaker, then pull back to reveal their editor context. Direct page substitutions preserve the deck’s position and avoid overlapping large headings; the final slide stays visible as the main viewport becomes smaller. This 6.8-second scene is an authored presentation sequence, not a working slide editor or an importer for a complete deck.
What you get
A local generator, editable HyperFrames slide/presenter composition and motion/review instructions for a 1920×1080, 30 fps segment. Generate the project and render the shot from your prepared slide content and media.
Three slides with title/body and a workspaceTitle, plus slide-1, slide-2 and slide-3 raster slots with bundled defaults. An optional image key on an individual slide can choose another supplied raster slot; the speaker video remains separate.
A large initial slide and fixed upright speaker window, page handoffs at 1.65 and 3.10 seconds and an editor reveal from 4.25 seconds. The viewport pulls back from 4.35 to 5.25 seconds, leaving the deck/workspace relationship available for the final reading.
Four styles keep the same data and choreography: White & Yellow (white-yellow), Charcoal & Lime (charcoal-lime), Paper & Orange (paper-orange), and Black & White (midnight-ice). Semantic style overrides are supported; check contrast after changing them. Dark canvases use a fine grid. Local fonts include Inter, IBM Plex Mono for measurements and ordinals, Smiley Sans and Noto Sans SC. Chinese text selects Smiley Sans automatically, including accompanying Latin text; --zh-font noto-sans-sc selects Noto Sans SC, while --font takes precedence for a supplied font.
Before you choose
Decide which information belongs in the slide image and which belongs in the editable caption. Keep each page focused enough to read before the handoff, and make the editor reveal explain context rather than distract from the lesson.
Good fit
A creator presenting three concise teaching points while maintaining a visible speaker.
A short passage where the surrounding editor is useful context after viewers have read the slide content.
A series needing consistent slide imagery, editable caption overlays and speaker framing.
Not for
Importing arbitrary PPTX files, generating an entire presentation or providing a functioning slide editor.
Long decks, replacing text baked into raster slide images through title/body fields, or assuming any page count updates the fixed /03 display.
Automatic full-film editing, generation of missing presenter footage or soundtrack, or copying another creator’s identity and slides.
How to use
You say/creatormotion-pip-slides-focus Turn my supplied explanation into a white-yellow B-roll scene using the Slide Focus Presenter effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare three slide objects with concise title/body strings and a workspaceTitle. The implementation uses only the first three slides and displays a fixed /03 counter. Keep the three-page structure unless you deliberately edit the counter and transition logic.
Reuse the three bundled slide images or replace named slots through --images MAP.json. Relative paths resolve beside that map; unspecified defaults remain. Images fill the slide surface beneath editable captions, so titles embedded in a replacement image do not change with JSON copy. Check crop and avoid duplicated headings.
Supply a continuous local presenter take of at least 6.8 seconds through --media. It is muted and tightly cropped/zoomed into an upright window rather than an alpha-matte cutout. Review face framing and overlap with both the large slide and pulled-back workspace; never loop a shorter take.
Prepare Node.js 22+, FFmpeg and HyperFrames CLI 0.8.30. From the extracted package run node scripts/create.mjs --out /absolute/PROJECT --data /absolute/CONTENT.json --style white-yellow --media /absolute/PRESENTER.mp4. Use another documented palette or semantic --overrides as needed. Read the motion specification, DESIGN.md and image policy before adapting materials.
Run the generated project’s lint, validate and inspect checks, then render with the printed command. Inspect actual MP4 frames at entry, every focus change and the final reading hold for seams, clipping, contrast and media overlap. Keep essential text and interface targets readable; compare all four palettes with identical content after module changes. Narration is separate, and a silent preview does not establish audio synchronization. Inspect frames at both page handoffs for doubled or missing text and check the final slide after the pullback. Preserve direct substitution followed by a short positional settle rather than crossfading large headings. Keep the actual caption content readable at both viewport sizes.
Requirements and costs
You bring
slides: provide your own content or retain the illustrative default. · workspaceTitle: provide your own content or retain the illustrative default.
Dependencies
HyperFrames CLI 0.8.30 or compatible — required · Node.js 22 or newer — required · FFmpeg — required
Outside costs
Not collected yet
Tools used
HyperFrames
Publisher testing
v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
FAQ
Yes. slides title/body and workspaceTitle are supplied through JSON, with palettes and semantic overrides. Raster content is replaced separately, and the fixed /03 counter is part of the scene code.
Yes. Supply a continuous local presenter take covering 6.8 seconds. Slide rasters have bundled defaults, but the speaker video is separate. This composition uses a cropped rectangular video window, not an alpha matte.
Yes. Preserve page handoffs, the speaker’s stable window and the later workspace pullback. Render after changes and inspect transition frames as well as the final editor view.
There is no PPTX import in this scene. Prepare three image slots and their caption text, or adapt the implementation deliberately for another source format.
The code takes at most three and keeps /03 fixed. For a different count, revise the counter, input handling and timing together rather than only changing the array.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.