Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Product demo video rendered from code v1.0.0

Use this resource to make a demo or launch video for a software product

New

  • 573 downloads
  • 170 likes
  • 126 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install product-demo-video-from-code

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent asks for one brief, writes the script and beat sheet, then builds an animated HTML page that renders any frame from a time value. It renders the page to MP4 with motion blur and a synthesised soundtrack. The style is calm and airy: one line of text at a time, a camera that pushes in, and the product interface shown up close while it is used.

Mostly picked by

Updated November 2, 2026

Frame from a product demo: a short centred line of text on a light canvas, then the product interface in close-up.

Details

Works in
Install guides
Generates with
HTML animé rendu avec Playwright et ffmpeg
Uses
  • Node.js
  • Playwright (Chromium)
  • ffmpeg
Licence
MIT

Similar resources

View all
  • Free

    Video

    App window with zoom

    • 365365 downloads
    • 125125 likes
    • 188188 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • Free

    Video

    One big number

    • 463463 downloads
    • 223223 likes
    • 100100 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Three bars head to head

    • 348348 downloads
    • 133133 likes
    • 182182 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Before / after slider

    • 322322 downloads
    • 248248 likes
    • 238238 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Three-card carousel

    • 418418 downloads
    • 157157 likes
    • 101101 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Chat exchange

    • 564564 downloads
    • 127127 likes
    • 161161 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Checklist ticking off

    • 442442 downloads
    • 233233 likes
    • 160160 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames

What you get

  • SKILL.md: brief, scene structure, style rules, page contract and soundtrack
  • Animation helper functions (spring, keyframes, seeded randomness)
  • The render.mjs script (Playwright and ffmpeg), included in the skill text
  • A check step: contact sheet of stills, draft render, then final render

Good fit for

  • A demo for the homepage of an app or SaaS
  • A launch or "how it works" video in 16:9 or vertical
  • Showing 3 to 5 features with the product's real interface

Not for

  • Filmed footage or editing raw clips
  • Very high-energy clips of a few seconds (this style is calm)
  • A demo that needs statistics or testimonials you cannot back up

Tags

  • demo
  • video
  • product
  • launch
  • motion design

About

You say

"Make a 60-second demo of my tool, here is the website; the one thing to remember is that you type an idea and get an app."

Frame from a product demo: a short centred line of text on a light canvas, then the product interface in close-up.

Skill published by barty-bart under the MIT license.

Show more

Prerequisites

You bring
The website address or a product description and Your logo and colors if you want it on brand
Dependencies
Node.js, Playwright (Chromium), and ffmpeg

How to use it

  1. Give the website address or a product description, and the message to remember.
  2. Review the check stills, then the draft the agent sends you.
  3. Ask for changes, then run the final render with motion blur.

Content preview

Files

  • LICENSE1.3 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • SKILL.md21.5 KB

Origin and licence

Modified by PalateKit

Author
barty-bart
Source
github.com/barty-bart/motion-graphics/tree/3d83d987d658601d8a1269eb691622bdcd427335/skills/explainer-default
Licence
MIT

Notice

Version modifiée de « explainer-default » (barty-bart, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

What do I need to install?

Node.js, Playwright with Chromium (npm i playwright) and ffmpeg on the PATH. The agent saves the render script from the skill as render.mjs.

How long does the final render take?

Motion blur multiplies render time: a 60-second final can take 20 to 60 minutes on a laptop. The draft render is fast.