16-second example rendered by this skill from examples/halfstep-weekend · 1280×720
Example settingswhat each example above was built from
examples/halfstep-weekendbrief.json
- Brand
- Halfstep
- Format
- tall
- Colors
- p1Color #ece4d4 · p1Field #cdbfa6 · p2Color #d6ff3c · p2Field #1d2638 · p3Color #1a1b1e · p3Field #b4482b · p4Color #f1ede4 · p4Field #2c3a2f · ground #0d0d0f · paper #f3efe6 · ink #0d0d0f · accent #e4ff3a · tag #efe9dd
examples/saltmoss-firesidebrief.json
- Brand
- Saltmoss
- Format
- square
- Colors
- p1Color #5a3620 · p1Field #d8c4a8 · p2Color #33452f · p2Field #b8c1a3 · p3Color #ece5d8 · p3Field #e2b89c · ground #f0e8db · paper #f8f3ea · ink #2a231e · accent #9e3f26 · tag #f8f3ea
What you get
- A 1080×1920 MP4 promo with its own beat-synced music, or 1080×1080 or 1920×1080 with their own layouts
- An original soundtrack with an impact on the offer, a whoosh per card and ticks on every price, synthesised on your machine, with nothing to license
- 2 to 4 product cards with 3D products in six shapes, labelled with your brand, or your own cut-out photos in the same light
- Hang tags that strike the old price and flip the new one in, using only the prices you give
- A tear-off promo-code ticket stamped with your end date, and an end card with your shop address and button
- A brief checker that refuses an old price without a new one or one that is not higher, and a pasteable PROMPT.md for Claude Code or Codex
- Open-source licenses for every part it builds on
Good fit
- A shop announcing a weekend sale, a seasonal drop or intro prices on Reels, TikTok or Shorts.
- A brand pushing a promo code with a clear end date.
- A small store without packshots that still wants products on screen, or one with cut-out photos.
Not for
- More than 4 products: make a second short
- Product photos of your own without a cut-out PNG: the 3D shapes stand in
- Prices worked out for you: it shows only the prices you give
- Vocals or a licensed hit song, since the music is synthesised
About this skill
A promo short for a sale, a product drop or a promo code, with its own original soundtrack. The event opens as a poster, the offer smashes in as a giant rubber-stamped slab, then 2 to 4 product cards fly in on the beat, each with its product modelled and lit in 3D (a bottle, jar, candle, tin, mug or sneaker box) or your own cut-out photo, and a hang tag that strikes the old price and flips the new one in on a split-flap board. A promo-code ticket tears off its stub and the end date is stamped on, and the brand lands on the music's final hit over a stepped shop display of every product.
Example request
Make a sale promo short for our weekend sale: 30% off, four products with their old and new prices, our member code, ending Sunday, with the shop link at the end.
How it works
Your agent
- 1
Make the project
- 2
Get the offer and the products
The labels are printed with the brand, the product name and its variant line in the short's type.
- 3
Pick the look
Every surface must read at 4.5:1 with
paperorink;apply-briefchecks this. - 4
Write the brief
Create
brief.json. - 5
Apply the brief
It lists every problem at once with the fix (a price that isn't a price, an old price without a new one, a missing image, a colour the text can't be read on, a music setting out of range) and writes nothing until the brief is right.
- 6
Check
"ok": truemeans it can render. - 7
Look before you render
Run the
snapshotcommandapply-briefprinted: one frame per scene when it is settled. - 8
Render
It runs the layout gate, renders with the pinned HyperFrames, checks the track and its stems with
scripts/music/check.mjs(A1 to A11), muxes the music in with a true-peak limiter at -1 dBTP, and checks the MP4. - 9
Hand it off
Give the person the MP4 and two stills: the slab and a product card.
- 1
You get
- assets/court-low.png


What you need
- Node.js 22 or newer and FFmpeg (with
ffprobe) on the PATH. - HyperFrames through
npx, pinned:npx --yes hyperframes@0.8.192. The first render downloads a headless Chrome. Ifrendersays Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensureonce. - WebGL in that Chrome. HyperFrames falls back to its software GPU (SwiftShader) when there is no graphics card, which works; it is slower (see Render times).
- Network access to
fonts.googleapis.com(Inter Tight, JetBrains Mono) andcdn.jsdelivr.net(GSAP). three.js, Archivo and Fraunces ship intemplate/assets/.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The products are missing (empty cards).
WebGL failed to start. Run
npx --yes hyperframes@0.8.192 browser ensure, and check the render log forWebGL unavailablewithout the software fallback. The rest of the film still renders.Render hangs or shows a static frame.
GSAP didn't load. If
cdn.jsdelivr.netis blocked, runnpm i gsap@3.14.2, copynode_modules/gsap/dist/gsap.min.jstoassets/vendor/, and point the GSAP<script src>inindex.htmlat it.A price overflows its tag.
Very long prices (8 to 9 characters) make the tag as wide as the card allows; drop the decimals if the shop does.
What’s in the download
- SKILL.md19.4 KB
- examples/
- examples/halfstep-weekend/1.16 KBa 9:16 dark weekend sale for an invented sneaker store: 30% off, two sneaker boxes, a bottle and a mug, a member code,
tech-minimalat 128 bpm, 16.4 s. · 1 file - examples/saltmoss-fireside/1.03 KBa 1:1 light drop for an invented home-fragrance brand: three new scents at intro prices (a jar, a room spray, a lit candle), a free-shipping code,
warm-houseat 120 bpm, 15.5 s. · 1 file - scripts/
- scripts/gate/the layout gate and its Chrome DevTools client.
- scripts/gate/cdp.mjs5.63 KB
- scripts/gate/gate.mjs19.5 KB
- scripts/music/beatgen 2, the music and sound-effects generator, with
check.mjs,mux.mjsand its README. - scripts/music/examples/
- scripts/music/examples/events.example.json555 B
- scripts/music/samples/
- scripts/music/samples/manifest.json371 B
- scripts/music/beatgen.mjs11.8 KB
- scripts/music/check.mjs50.0 KB
- scripts/music/dsp.mjs20.0 KB
- scripts/music/engine.mjs51.7 KB
- scripts/music/mux.mjs2.36 KB
- scripts/music/presets.mjs36.8 KB
- scripts/music/README.md23.7 KB
- scripts/music/samples.mjs4.90 KB
- scripts/music/sfx.mjs17.1 KB
- scripts/music/theory.mjs3.34 KB
- scripts/music/voices.mjs16.9 KB
- scripts/apply-brief.mjs16.5 KBchecks a brief, lays the short out on the beat grid, generates the track, writes the clips.
- scripts/beat-grid.mjs13.0 KBthe music block, the predicted bars and drop, beatgen runs.
- scripts/render.mjs8.29 KBgate, render, music check, mux, MP4 check.
- template/the HyperFrames project.
index.htmlholds the variables, the CSS and the clips;sale.jsbuilds every scene and the timeline;products.jsmodels and lights the products;assets/vendor/three/is three.js r170 (MIT);assets/fonts/are Archivo and Fraunces (OFL). - template/assets/
- template/assets/vendor/
- template/assets/vendor/three/
- template/assets/vendor/three/LICENSE1.06 KB
- template/assets/vendor/three/RoomEnvironment.js3.54 KB
- template/assets/vendor/three/three.module.min.js675 KB
- template/hyperframes.json318 B
- template/index.html19.0 KB
- template/package.json298 B
- template/products.js21.2 KB
- template/sale.js54.6 KB
- NOTICE.md1.94 KB
- PROMPT.md2.68 KB
- TESTED.json4.20 KB
32 files · 1.08 MB · installs to ~/.claude/skills/sale-drop-short for Claude Code and ~/.agents/skills/sale-drop-short for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 12–19 s · 1080×1920, 1080×1080 or 1920×1080
- Needs
- Node.js 22+, FFmpeg on the PATH and Chrome with WebGL (HyperFrames downloads its own headless Chrome on first render); network access to fonts.googleapis.com and cdn.jsdelivr.net.
- Series
- Social Shorts · 6 skills
- Updated
- Nov 2, 2026
- Checked
- Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
Will it work out my sale prices?
No. Every old price, new price, discount, code and date comes from you as you write it. The brief checker refuses an old price without a new one, or an old price that is not higher than the new one.
Can I use my own product photos?
Yes. Cut each product out to a PNG with a transparent background and name it in the brief; it stands in the same studio light with a real shadow and replaces the 3D model.
How long does it take to render?
The short runs 12 to 19 s. The 3D products need WebGL, so a render is quick with a graphics card and much slower on a machine that falls back to software rendering.
Which agents is Sale Drop Short written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.
Credits and licensesBuilt on heygen-com/hyperframes
What Lookbk adds on top of heygen-com/hyperframes (Apache-2.0): Lookbk wrote this package, its 3D product models and its music generator; it renders with HyperFrames (Apache-2.0), GSAP (Standard License) and three.js (MIT), sets type in Archivo and Fraunces (SIL Open Font License 1.1), and the brands, products and prices in its examples are invented.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.