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.

PalateKit Pick

PalateKit Motion, the library v1.0.0

Use this resource to Create a launch film or a reel in your brand colors

New

  • 338 downloads
  • 198 likes
  • 249 saves

Members only

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install palatekit-motion

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

Your agent reads your website or brief, writes the story in beats (hook, demo, proof, call to action), picks one scene per beat among 31, fills it with your real copy, logo and screenshots, then assembles an MP4 film in your brand color. Eight families: product UI, numbers, calls to action, galleries, flows and agents, reveals, prompts, kinetic type. Every scene is checked before rendering; nothing is invented: what you do not provide is hidden.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • Node.js 22 or newer
  • FFmpeg
  • Internet access (headless Chrome on first run, GSAP on each render)

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
  • PRO

    Video

    Button press

    • 474474 downloads
    • 238238 likes
    • 198198 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames

What you get

  • 31 HyperFrames scenes in 16:9, 9:16 and 1:1, in 3 themes and your brand color
  • A guide for your agent: from website to film, beat by beat
  • The scripts to fill, check, render and assemble the scenes, with optional music

Good fit for

  • Founders and marketing teams preparing a launch or an announcement
  • Series of reels that must keep one identity
  • Agents assembling a film from a website or a brief

Not for

  • Editing long filmed footage
  • Generating voiceover or AI footage

Tags

  • motion-design
  • hyperframes
  • video

About

You say

Make a 30-second launch film for our product from our website, in 16:9 and 9:16.

Animated preview of the PalateKit Motion library with the sample brand Orvale.

Library designed and maintained by PalateKit, rendered with HyperFrames (Apache-2.0).

Show more

Prerequisites

You bring
Your website or launch brief, Your logo, screenshots and brand color, and A music track you own the rights to (optional)
Dependencies
Node.js 22 or newer, FFmpeg, and Internet access (headless Chrome on first run, GSAP on each render)

How to use it

  1. Install the resource, then run `npm install` once in its folder.
  2. Give your agent your website or brief, your color and the formats you need.
  3. The agent writes the beats, picks and fills the scenes, checks them, then assembles the film.

Content preview

Files

  • catalog.json64.7 KB
  • fonts/BricolageGrotesque-OFL.txt4.3 KB
  • fonts/BricolageGrotesque.ttf398.9 KB
  • fonts/InstrumentSerif-Italic.ttf69.9 KB
  • fonts/InstrumentSerif-OFL.txt4.3 KB
  • fonts/InstrumentSerif-Regular.ttf68.4 KB
  • fonts/JetBrainsMono-OFL.txt4.3 KB
  • fonts/JetBrainsMono.ttf182.8 KB
  • LICENSE0.8 KB
  • NOTICE-PALATEKIT.md0.2 KB
  • NOTICE.md0.3 KB
  • package.json0.2 KB
  • scenes/app-window-zoom/assets/screenshot.svg2.9 KB
  • scenes/app-window-zoom/index.html7.4 KB
  • scenes/app-window-zoom/scene.json1.5 KB
  • scenes/bar-compare/index.html9.4 KB
  • scenes/bar-compare/scene.json1.8 KB
  • scenes/before-after-wipe/assets/after.svg3 KB
  • scenes/before-after-wipe/assets/before.svg3.6 KB
  • scenes/before-after-wipe/index.html8.4 KB
  • scenes/before-after-wipe/scene.json1.3 KB
  • scenes/big-number/index.html9.4 KB
  • scenes/big-number/scene.json1.2 KB
  • scenes/carousel-three/assets/img1.svg0.5 KB
  • scenes/carousel-three/assets/img2.svg0.8 KB
  • scenes/carousel-three/assets/img3.svg1 KB
  • scenes/carousel-three/index.html8.5 KB
  • scenes/carousel-three/scene.json1.4 KB
  • scenes/chat-exchange/index.html7.8 KB
  • scenes/chat-exchange/scene.json1.5 KB
  • scenes/checklist-done/index.html9.9 KB
  • scenes/checklist-done/scene.json1.6 KB
  • scenes/cta-button-press/index.html8.7 KB
  • scenes/cta-button-press/scene.json1.1 KB
  • scenes/cta-launch-date/index.html7.1 KB
  • scenes/cta-launch-date/scene.json1.3 KB
  • scenes/cta-signoff/assets/logo.svg0.4 KB
  • scenes/cta-signoff/index.html5.6 KB
  • scenes/cta-signoff/scene.json0.9 KB
  • scenes/cta-url-bar/index.html9.5 KB
  • scenes/cta-url-bar/scene.json1.1 KB
  • scenes/cursor-tour/assets/shot.svg3 KB
  • scenes/cursor-tour/index.html10.6 KB
  • scenes/cursor-tour/scene.json1.4 KB
  • scenes/feature-toggles/index.html11.1 KB
  • scenes/feature-toggles/scene.json2.1 KB
  • scenes/headline-stack/index.html5.6 KB
  • scenes/headline-stack/scene.json1.1 KB
  • scenes/image-mosaic/assets/img1.svg1 KB
  • scenes/image-mosaic/assets/img2.svg1 KB
  • scenes/image-mosaic/assets/img3.svg1.2 KB
  • scenes/image-mosaic/assets/img4.svg2.5 KB
  • scenes/image-mosaic/assets/img5.svg1 KB
  • scenes/image-mosaic/assets/img6.svg1.3 KB
  • scenes/image-mosaic/index.html8.4 KB
  • scenes/image-mosaic/scene.json1.1 KB
  • scenes/kpi-dashboard/index.html10.7 KB
  • scenes/kpi-dashboard/scene.json2.3 KB
  • scenes/logo-iris-reveal/assets/logo.svg0.3 KB
  • scenes/logo-iris-reveal/index.html6.7 KB
  • scenes/logo-iris-reveal/scene.json0.9 KB
  • scenes/milestone-timeline/index.html9.1 KB
  • scenes/milestone-timeline/scene.json2.1 KB
  • scenes/notification-stack/index.html8.3 KB
  • scenes/notification-stack/scene.json2 KB
  • scenes/phone-scroll/assets/screen.svg3.3 KB
  • scenes/phone-scroll/index.html8.4 KB
  • scenes/phone-scroll/scene.json1.3 KB
  • scenes/pipeline-steps/index.html9.9 KB
  • scenes/pipeline-steps/scene.json1.3 KB
  • scenes/polaroid-scatter/assets/img1.svg0.7 KB
  • scenes/polaroid-scatter/assets/img2.svg3 KB
  • scenes/polaroid-scatter/assets/img3.svg0.7 KB
  • scenes/polaroid-scatter/assets/img4.svg1.7 KB
  • scenes/polaroid-scatter/index.html7.2 KB
  • scenes/polaroid-scatter/scene.json1.5 KB
  • scenes/product-spotlight/assets/shot.svg2.7 KB
  • scenes/product-spotlight/index.html7.7 KB
  • scenes/product-spotlight/scene.json1 KB
  • scenes/progress-ring/index.html10 KB
  • scenes/progress-ring/scene.json1.4 KB
  • scenes/prompt-answer/index.html10.4 KB
  • scenes/prompt-answer/scene.json1.7 KB
  • scenes/prompt-to-cards/index.html9.1 KB
  • scenes/prompt-to-cards/scene.json1.2 KB
  • scenes/search-to-result/index.html11.3 KB
  • scenes/search-to-result/scene.json2.5 KB
  • scenes/section-divider/index.html7 KB
  • scenes/section-divider/scene.json1.2 KB
  • scenes/stat-grid/index.html9 KB
  • scenes/stat-grid/scene.json2 KB
  • scenes/task-router/index.html12 KB
  • scenes/task-router/scene.json1.4 KB
  • scenes/word-swap-ticker/index.html7.7 KB
  • scenes/word-swap-ticker/scene.json1.3 KB
  • scripts/assemble.mjs6.6 KB
  • scripts/check.mjs6.2 KB
  • scripts/create.mjs7 KB
  • scripts/lib/catalog.mjs3.3 KB
  • scripts/lib/cli.mjs0.6 KB
  • scripts/lib/run.mjs1.8 KB
  • scripts/lib/slots.mjs1.6 KB
  • scripts/lib/theme.mjs2.3 KB
  • SKILL.md5.7 KB
  • themes.json0.4 KB

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.