What you get

  • A ready HyperFrames project and render command for a 1080p, 30 fps, 7-second MP4
  • Ticks timed to your recording's real action times
  • Four palettes with identical layout and timing
  • A bundled illustrative phone screen for drafts
  • Optional PopNow step voiceover, music bed and draft screen image

Good for

  • App tutorials and onboarding steps
  • Three-step how-to segments in creator videos
  • Short product demos where each step should visibly get done

Not for

  • More than four steps
  • Long screen walkthroughs; media runs up to 6.8 seconds
  • Desktop-only screens that do not fit a phone frame

How to use it

In Claude or ChatGPT

Use the PopNow skill "Animated Checklist Product Demo" (animated-checklist-demo) for this: Checklist video for our onboarding: 'Create a notebook' at 1.2s, 'Add a tag' at 2.9s, 'Invite a teammate' at 4.6s, screen ./onboarding.mp4.

In a coding agent

/popnow-animated-checklist-demo Checklist video for our onboarding: 'Create a notebook' at 1.2s, 'Add a tag' at 2.9s, 'Invite a teammate' at 4.6s, screen ./onboarding.mp4.

Then try

Render the charcoal and lime style too so I can compare.

Add a short voice line for each step. Quote it first.

What to have ready

  • Up to four short task labels
  • A screen recording or screenshot and the second each step happens
  • Node.js 22+ and FFmpeg; optional PopNow API key

Similar skills

View all →

Questions

How are the ticks synced to my screen recording?

Each task has an at value in seconds. Set it to the moment the action happens in your recording; the tick stroke and the box fill start on that exact frame.

Can I use a screenshot instead of a recording?

Yes. A still works, but then the ticks show demonstration timing only, and the skill says so instead of implying a real recorded interaction.

What is the default phone screen?

An illustrative generated notes-app screen bundled with the package, so drafts render with no assets. Replace it with your own product's screen for a real demo.

Can I add narration?

Yes. PopNow can voice one short line per step, placed just before each tick, with a quiet bed ducked underneath. You see the credit price before anything is generated.