Communitygithub.com

Launch Day Video: paste a URL, get a 25s brand teaser

Turns any website URL into a ~25 second 1920x1080 motion-graphics launch or promo video that copies the site's own design: background, colours, fonts, logo, UI style and real copy, with royalty-free procedural music in a new style every run and whooshes on scene changes. Renders with code in the Higgsfield sandbox, so it uses no video or audio generation credits; vertical 9:16 on request.

What is Launch Day Video: paste a URL, get a 25s brand teaser?

Launch Day Video recipe, step 3 (the instant teaser), from amitkushh/website-launch-video-skill. Needs Claude Code, the Higgsfield connector (free account is enough) and a browser tool. The agent reads the site (innerText, colours, fonts, logo), builds scenes from a motion-graphics template, generates background music procedurally (6 styles, random key per run), and outputs <brand>_launch.mp4 at 30fps H.264 + AAC. Supports coupon codes, music style choice and vertical output, and reminds you to add #ad for paid promotions.

Works with✓Claude Code~Codex CLI~Cursor
npx skills add amitkushh/website-launch-video-skill

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Website launch video

Reply in the user's language. Video copy in English unless asked otherwise. Output: <brand>_launch.mp4 in the working directory (1920x1080, 30fps, H.264 + AAC). Cost: no generation credits. Never call generate_video / generate_audio for this workflow - everything is rendered with code in the Higgsfield sandbox.

Requirements

  • Higgsfield MCP connector (provides sandbox_exec, media_upload, media_confirm, get_workflow_instructions).
  • A browser tool (built-in browser or Claude in Chrome) to read the site.

Inputs to get (ask only if missing)

  • Website URL (required).
  • Optional: coupon / discount, whether it's the user's own product or a paid promotion (promotion → remind them to add #ad when posting), music style, vertical 9:16 instead.

Step 1 - Read the site

  • Navigate to the URL, then run JS document.body.innerText (wait ~2s for SPAs). Collect: H1, subheadline, 4-6 feature headings, pricing, offer/coupon text, guarantee/trust line, CTA label.
  • Screenshot and scroll 2-3 times to see the visual style (cards, pills, eyebrows, buttons, accent word colours).
  • Grab computed styles: body/h1/h2/button fontFamily, color, backgroundColor, letterSpacing, fontWeight, plus a frequency count of all background and text colours.
  • If the page renders unstyled (CSS blocked), pull the CSS in the sandbox instead: curl -sL -A "Mozilla/5.0" URL -o index.html; grep -o '/_next/static/[^"]*\.css' index.html (or any <link rel=stylesheet>), curl them into all.css, then grep -oE -- '--(background|foreground|brand|primary|accent|muted|border|card|surface|ink)[a-z-]*:[^;}]*' all.css | sort -u and grep -o 'font-family:[^;}]*' all.css | sort -u.
  • Logo: header <img> (e.g. /logo.png) or /android-chrome-512x512.png / /apple-touch-icon.png. Partner logos as SVG → convert -background none -density 1200 x.svg -resize 400x400 x.png.

Step 2 - Design tokens

Map the site to the template tokens: BG, INK (headline), MUTED (body grey), BRAND (accent), BRAND_SOFT (accent tint for chips), PANEL (grey card bed), WHITE (card). Dark site → dark BG, light INK, no soft shadow. Mirror the site's patterns: two-line headlines with the accent on line 2 if the site does that, eyebrow/label chips, pill buttons with an arrow, grey panel with white cards.

Step 3 - Fonts

Static TTF per weight from fontsource (any Google font): curl -sf -o font-800.ttf https://cdn.jsdelivr.net/fontsource/fonts/<font-slug>@latest/latin-800-normal.ttf (slug = lowercase, spaces→dashes, e.g. bricolage-grotesque, urbanist). Use via typography={{fontAssetId: handle.id}} after await p.add("font-800.ttf"). The latin subset has no → ✓ ★ glyphs - use icon("arrow-right") etc. Built-in families (Inter, DM Sans, Montserrat…) can use higgsedit fonts add . Inter:400 Inter:700 + fontFamily.

Step 4 - Script the video

Load the Higgsfield video-editing workflow once per session (get_workflow_instructions {workflow:"video-editing"}) before Higgsedit work. Start from reference/template.jsx. Default structure, ~25s:

#SceneTimeContent
1Hook0-3.3the pain in 2 lines, eyebrow "For "
2Meet3.3-7logo + brand, site H1, subheadline, CTA button pop
3-6Features~3.7s eacheyebrow = site section label, headline = the site's own feature heading, one native UI mock (stat cards with counters, rows with tags, heatmap grid, queue list, review card, day pills…)
7CTAlast ~4.3slogo + domain, price/offer card, coupon pill + button, guarantee line

Rules:

  • Use the site's real copy and real example numbers. Tell the user which demo values are illustrative. Never invent user counts or testimonials.
  • Recreate UI natively (frames/text/icons). Don't use low-res site screenshots or AI-generated UI.
  • Keep the scene start times - the music needs them (cuts = start of scenes 2..7).

Step 5 - Sandbox build & preview

Sandbox facts: files vanish when it resets (re-download assets if cd fails); one command ≤ 16,000 chars (write upload URLs to files in a separate call from the long cat > edit.jsx heredoc); long renders → background:true then poll.

  1. media_upload the outputs up front (a preview sheet.png and the final .mp4) and save each upload_url into a .txt in the sandbox. Presigned URLs are single-use: a second PUT returns 412 - request a fresh one.
  2. Build + contact sheet + upload in one call: higgsedit build edit.jsx 2>&1 | grep -iE "error|missing"; higgsedit sheet . --times <mid-point of each scene + CTA end> --cols 3 --out renders/sheet.png; curl -s -o /dev/null -w "%{http_code}" -X PUT -H "Content-Type: image/png" --upload-file renders/sheet.png "$(cat sheet_url.txt)"
  3. media_confirm, download the returned public URL locally and look at it. Fix layout issues before the final render.

Higgsedit gotchas:

  • padding is a number or {left,right,top,bottom}, never an array.
  • Token motion={{by:"word"|"character"}} on centred text reflows (text jumps from the left). Use animate={pop} for centred text; token motion only for left-aligned "typing" text.
  • A timeline target must be an immediate named child frame, not self - animate self with animate keyframes (delayPop).
  • Counters: fixed-size layout="none" frame with one static text; no thousands separators.
  • animate is always an array; frame motion is an object.

Step 6 - Render

higgsedit render . --out renders/promo.mp4 --quality final (≈1 min for 25s).

Step 7 - Music (different every time)

scripts/music.py = numpy procedural music, royalty-free. Styles: pop (120bpm bright), lofi (82bpm chill jazzy), synthwave (105bpm retro), house (124bpm offbeat), cinematic (90bpm epic), marimba (110bpm friendly). Every track: a whoosh before each cut, an impact on the CTA, 1.6s fade-out.

Pick the style - never repeat the last two:

  1. Read music-history.log in this skill folder (create it if missing).
  2. Match the vibe: dev/AI/tech → synthwave or house; creator/writing/productivity → lofi or marimba; big/premium launch → cinematic; consumer/fun → pop. Skip styles used in the last 2 entries unless the user asks for one.
  3. Random --seed → random key and progression, so even the same style sounds different.
  4. Append YYYY-MM-DD <site> <style> seed=<n> to music-history.log.

Getting music.py into the sandbox (first run): media_upload with filename music.py → from the local machine curl -X PUT -H "Content-Type: application/octet-stream" --data-binary @scripts/music.py '<upload_url>' → media_confirm type:file → save the returned public URL to music_url.txt in this skill folder. Later runs: curl -sf -o music.py "$(cat music_url.txt)" inside the sandbox (re-upload if it 404s or music.py changed).

Mux:

python3 music.py --style <style> --duration <video secs> --cuts <c2,c3,...,c7> --seed <n> --out music.wav
ffmpeg -y -v error -i renders/promo.mp4 -i music.wav -filter:a "loudnorm=I=-15:TP=-1.5:LRA=11" -c:v copy -c:a aac -b:a 192k -map 0:v -map 1:a -shortest final.mp4

Duration: ffprobe -v error -show_entries format=duration -of csv=p=0 renders/promo.mp4.

Step 8 - Deliver

Upload final.mp4 (fresh URL) → media_confirm type:video → download it locally as <brand>_launch.mp4 → hand the file to the user. Report: what matches the site (bg/colours/font/logo), the scene list, the music style, which values are illustrative. Offer a 9:16 version or a different music style.

9:16 variant

size: "1080x1920", W=1080 / H=1920, stack rows vertically (cards in a column), headline sizes ×0.75, same timings and music.

Related Skills