AlanECE/liquid-glass-motion-intro

---

name: liquid-glass-motion-intro description: Apply this premium "liquid glass" motion-design STYLE to any talking-head video, VSL or YouTube intro — white glow typography, alternating Montserrat ExtraBold + Playfair Display italic, frosted glass cards, animated counters, kinetic subtitles, smooth black gradient veils, blur/fade transitions, B-roll cut-aways. Use whenever the user wants this exact look (the glow, the font alternation, the glass, the effects) on a talking-head recording — faceless or not, intro or full video. Covers the full pipeline: optional ElevenLabs transcription + silence cutting, a GSAP HTML composition rendered to transparent PNG frames via Puppeteer, real frosted-glass region blur, and the ffmpeg composite to mp4.

Liquid Glass Motion Design — talking-head / VSL / intro

A reusable visual style, not a one-off. Turn any talking-head .mp4/.mov into a finished, motion-designed mp4: animated counters, frosted liquid glass cards, kinetic subtitles, B-roll cut-aways, white glow typography and fullscreen number takeovers — all in Montserrat ExtraBold + Playfair Display italic with smooth black gradients. The point is the look and the effects (glow, the Montserrat/Playfair alternation, the glass, the blur/fade transitions); apply it to faceless videos, tutorials, sales videos, intros — anything with a talking head.

The look this reproduces: clean Apple-keynote-meets-frosted-glass. White text with a soft glow, translucent frosted cards over the footage, accent words in Playfair italic, and the speaker's face dimmed by a smooth radial veil during big fullscreen moments.

When to use this skill

• The user wants this style on a talking-head video: liquid glass, the Montserrat/Playfair font alternation, white glow, animated numbers, kinetic subtitles, blur/fade transitions.
• They say "the same style/effects as before", "the glow look", "the glass cards", etc.
• Any format with a talking head: VSL, YouTube intro, tutorial, sales video, faceless content. Faceless is one use case, not a requirement.

The 3-phase pipeline

raw.mp4
  → Phase 1  EDIT      ElevenLabs Scribe transcription → cut silences/fillers → intro_edited.mp4
  → Phase 2  MOTION    composition.html (GSAP) → transparent PNG frames (Puppeteer) → words_output map
  → Phase 3  COMPOSITE B-roll cut-aways + region-blur glass + PNG overlay (ffmpeg) → intro_final.mp4

Read these in order — each is a file in this repo:

1. references/pipeline.md — every command, phase by phase (transcribe, cut/EDL, render frames, region-blur, composite). Start here to run end-to-end.
2. references/design-system.md — fonts, colors, glow values, the liquid-glass CSS, the black gradients (fade-down mask + radial scrim). Copy-paste tokens.
3. references/effects.md — every animation explained with code: blur in / blur out, fade in / fade out, speed variations, the opacity gradient behind the speaker (scrim), counters, kinetic subtitles, accent-line draw.

And the working code, in assets/:

• composition.template.html — the full GSAP composition (the heart). Defines window.__init / __seek / __totalFrames / __fps, all the cards, accents, subtitles, scrim and counters. Edit the slot times + texts to your script.
• render.js — Puppeteer: scrubs the composition frame-by-frame and screenshots transparent PNGs (omitBackground). Supports --ranges "a-b,c-d" for partial re-renders (critical: re-render only changed windows, ~1.5 s/frame).
• get_rects.js — dumps each glass card's exact bounding box → card_rects.json, consumed by the composite for region blur. Re-run whenever a card's size changes.
• phase3_composite.py — the ffmpeg composite (B-roll cut-aways + region-blur frost
  • PNG overlay). Edit the CONFIG block.

Non-negotiable rules (learned the hard way)

1. Keep the real voice. ElevenLabs is used ONLY to transcribe (Scribe, word-level timestamps) so you can cut silences and sync animations. Never TTS over a talking head (lip-sync breaks).
2. Liquid glass needs a post-blur. The PNG overlay is transparent — CSS backdrop-filter has nothing to blur. The real frosted effect comes from an ffmpeg region blur behind each card in Phase 3 (get_rects.js → card_rects.json → phase3_composite.py). The PNG provides the translucent fill, border, highlights and text on top.
3. Cut only on word boundaries from the transcript; pad 50–250 ms; 30 ms audio fade at every segment edge (prevents pops). The video-use render.py bakes these in.
4. Face-safe zones. The speaker is centred (~x 40–60%, y 20–55%). Put cards on the sides / lower third / top band. Big centred accents (faceless, game changer) and fullscreen numbers are fine only with the smooth scrim dimming the face.
5. Iterate cheaply. A full render is ~2500 frames × ~1.5 s ≈ 60 min. After feedback, change the composition and re-render only the affected frame ranges (render.js --ranges), then re-run the composite (~3 min). Never re-render everything for a small tweak.
6. Validate on composited still frames before any full render: render a handful of key frames, overlay them on the real footage, and eyeball placement/readability.

Quick start

# 0. deps (once)
cd assets && npm install && npx puppeteer browsers install chrome

# 1. EDIT  — transcribe + cut (see references/pipeline.md for the video-use helpers)
#    produces intro_edited.mp4 + edit/words_output.json

# 2. MOTION
node render.js                 # full render → frames/f_00000.png …
node get_rects.js              # → card_rects.json (card bounding boxes)

# 3. COMPOSITE
python phase3_composite.py     # → intro_final.mp4

Design system in one breath

• Fonts: Montserrat 800/900 (body, numbers), Playfair Display italic 600–700 (accent words). Loaded from Google Fonts in the composition <head>.
• Glow: white text-shadow 0 0 30px rgba(255,255,255,.5) + a dark drop for legibility.
• Liquid glass card: translucent white gradient fill, 1.5px white border, inset white highlights, soft outer shadow, 30px radius — plus the Phase-3 region blur.
• Black gradients: (a) fade-down = CSS mask-image so the bottom of the text fades; (b) scrim = full-frame radial gradient veil that fades in smoothly to dim the face during fullscreen moments (never an abrupt flat darken).
• Motion: GSAP, always cubic easing (never linear). appear() = fade + blur-in + slide + scale; exit = fade + blur-out + slide-up. Speed variation via different eases (power3.out, power4.out) and subtitle word stagger.

See references/effects.md for the exact code of each effect.

Provide your own assets (not shipped here)

Logos are brand marks — supply your own in assets/: claude.png, higgsfield.png, fern.jpg, etc. (referenced by composition.template.html). Round their corners with the CSS border-radius on .logos img. Keep API keys in a local .env (never commit them).