17-second example rendered by this skill from examples/orvane-nuit-fauve · 1280×720
Example settingswhat each example above was built from
examples/orvane-nuit-fauvebrief.json
- Product
- Nuit Fauve
- Format
- tall
- Date
- In boutiques 14 February
- Colors
- liquid #a8581a · glass #fff3e2 · cap #c9a25a · ground #0b0907 · field #b88a4c · paper #f3eadb · ink #140f0a · accent #d9b46e · glow #c48740
examples/saelune-petal-serumbrief.json
- Product
- Petal Serum
- Format
- square
- Date
- Launching 3 March
- Colors
- liquid #f0a98e · glass #fff7f4 · cap #f6efe9 · ground #f3e9e2 · field #bba2d6 · paper #fbf7f3 · ink #2b2333 · accent #8f6aa8 · glow #ffffff
What you get
- A 1080×1920 MP4 ad with its own beat-synced music, or 1080×1080 or 1920×1080 with their own layouts
- An original soundtrack with a hit on the colour flip and sounds on every panel move, synthesised on your machine, with nothing to license
- A glass flacon, dropper or decanter drawn in your colours, or your own PNG cut-out under the same light
- Three moving backdrops drawn in code: caustic light, liquid ripple or slow smoke
- Mood plates set in Bodoni Moda or Cormorant Garamond with Jost small caps, and an end card with your wordmark, button and address
- A pasteable PROMPT.md for Claude Code or Codex that uses only the price and date you give
- Open-source licenses for every part it builds on
Good fit
- A beauty or fragrance brand launching a product on Reels, TikTok or paid social.
- A small house that wants an ad that reads like a print campaign, not a template.
- A brand without product photography that still wants its bottle on screen.
Not for
- Photo-real close-ups of a real bottle: use your own cut-out for that
- Products that are not bottles or jars, unless you supply a cut-out
- Long copy: each plate holds a name, three notes and one line
- Vocals or a licensed hit song, since the music is synthesised
About this skill
A luxury product ad cut like a fashion-house print campaign, with its own original soundtrack. The frame is split into two or three panels that slide, swap and resize on the beat: your product (a glass bottle built and lit in three.js, or your own cut-out) on a moving floor of caustic light, ripples or smoke; a mood plate in your colour set in a fashion serif with small caps, carrying three notes or ingredients and one line; and the liquid itself, close up. On the drop the panels flip colours and the price, "New" or launch line straddles the seam; the call to action settles and the house wordmark lands on the final hit.
Example request
Make a split-screen launch ad for our new perfume: the bottle on caustic light, the top, heart and base notes, the line "Worn after dark", the €185 price across the seam and our boutique date, ending on the house name.
How it works
Your agent
- 1
Make the project
- 2
Get the product
Ask for the house (brand) name, the product's name, what it is (
Eau de Parfum,Daily face serum), three notes or ingredients with their labels, one line, the price or "New", the size line, the launch date if there is one, the call to action and the address. - 3
Pick colours
groundandfieldmust each read at 4.5:1 withpaperorink, and differ from each other by 1.6:1 or more, or the flip doesn't show;apply-briefchecks this. - 4
Write the brief
Create
brief.jsonin the project. - 5
Apply the brief
It checks the whole brief and, if anything is wrong, lists every problem at once with the fix: a field over its limit, a colour the copy can't be read on, a field too close to the ground for the flip, a cut-out that isn't in the project, a music setting out of range.
- 6
Check
"ok": truemeans it can render; you will see afilm_silentwarning (the music is muxed in after the render). - 7
Look before you render
Run the
snapshotcommandapply-briefprinted: one frame at the end of each scene. - 8
Render
It runs the layout gate, renders the composition with the pinned HyperFrames, checks the track and its stems with
scripts/music/check.mjs(loudness, sound on every move, timing of each sound against its picture, density, levels, the pre-hit gap, the ring-out), muxes it under the film with a true-peak limiter at -1 dBTP, and checks that the MP4 has sound as long as its picture. - 9
Hand it off
Give the person the MP4 and two stills: the opening and the flip.
- 1
You get
- assets/bottle.png


What you need
- Node.js 22 or newer and FFmpeg (with
ffprobe) on the PATH. - Chrome or Chromium. The layout gate and the bottle bake use it; set
CHROME_PATHif it isn't found. HyperFrames brings its own for the render. - 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. - Network access to
fonts.googleapis.com(Bodoni Moda, Cormorant Garamond, Jost) andcdn.jsdelivr.net(GSAP 3.14.2 and three.js 0.158.0). See Troubleshooting if either is blocked.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
Render hangs, then shows a static frame, or the bake says the page never loaded three.js.
GSAP or three.js didn't load. If your network blocks
cdn.jsdelivr.net, runnpm pack gsap@3.14.2 three@0.158.0in the project, unpack them, copygsap/dist/gsap.min.jsandthree/build/three.min.jstoassets/vendor/, and point the two<script src>lines inindex.htmlatassets/vendor/gsap.min.jsandassets/vendor/three.min.js.apply-briefleaves them alone. (three.js prints a deprecation notice forthree.min.js; it is harmless.)The type is in the wrong font.
fonts.googleapis.comwas unreachable. HyperFrames caches the fonts after one successful fetch.The bake fails or takes minutes.
It needs WebGL; headless Chrome uses SwiftShader when there is no GPU, which is slow but works (20 to 40 s). Set
CHROME_PATHto a recent Chrome.node <skill>/scripts/bake-product.mjs . --forcebakes again.
What’s in the download
- SKILL.md25.4 KB
- examples/
- examples/orvane-nuit-fauve/818 B9:16, dark and gold, an invented perfume house, a flacon on caustic light,
cinematic-riseat 95 bpm, 16.6 s. · 1 file - examples/saelune-petal-serum/810 B1:1, light and pastel, an invented skincare brand, a serum dropper on liquid ripple,
lofi-chillat 84 bpm, 15.7 s. · 1 file - scripts/
- scripts/gate/the layout gate and its small Chrome DevTools client.
- scripts/gate/cdp.mjs5.63 KB
- scripts/gate/gate.mjs19.5 KB
- scripts/music/beatgen 2.1, the music and sound-effects generator, with its checker (
check.mjs), muxer and 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.mjs13.9 KBchecks a brief, lays the film out on the beat grid, generates the track, writes the project and bakes the bottle.
- scripts/bake-product.mjs4.77 KBrenders the bottle once per palette into
assets/product/in headless Chrome. - scripts/beat-grid.mjs13.0 KBreads the
musicblock, asks beatgen for the form and runs it. - scripts/render.mjs7.75 KBruns the gate, renders, checks the track, muxes it in and checks the MP4.
- template/the HyperFrames project.
- template/ad.js41.8 KBlays out the panels and the copy for each scene and builds the timeline.
- template/hyperframes.json318 B
- template/index.html10.4 KBholds the variables, the CSS and the film's clip.
- template/package.json298 B
- template/product.js24.5 KBbuilds and bakes the bottle in three.js and draws the backdrop and macro shaders.
- NOTICE.md1.53 KBthird-party software this skill uses.
- PROMPT.md2.86 KBa prompt for Claude Code or Codex to make an ad with this skill.
- TESTED.json3.31 KB
30 files · 416 KB · installs to ~/.claude/skills/split-screen-ad for Claude Code and ~/.agents/skills/split-screen-ad for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 12–20 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 · 9 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
Can I use a photo of my real bottle?
Yes. Give it a PNG cut-out with a transparent background and it stands on the same lit floor with a reflection and shadow. The bottle drawn in code is for brands without a packshot.
What if there is no price yet?
Give "New" in place of the price and leave the date empty. The ad shows only the price, size and launch date you give.
Which products does it suit?
Anything sold in a bottle or jar, such as perfume, serum, spirits or oils, with the built-in flacon, dropper or decanter. For watches, audio or other products, supply a cut-out.
Which agents is Split Screen Ad 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 bottle models, backdrop shaders and music generator; it renders with HyperFrames (Apache-2.0), GSAP (Standard License) and three.js (MIT), sets type in Bodoni Moda, Cormorant Garamond and Jost (SIL Open Font License 1.1), and the houses and products in its examples are invented.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.