A 4-second liquid-glass motion graphic synced to audio/voice.wav
(«Для опису, ключових слів, назви я також використовував у ChatGPT»).
| Time (s) | Voice | Animation |
|---|---|---|
| 0.00–0.76 | «Для опису» | "Опис" glass card drops in, description lines are written |
| 0.80–1.72 | «ключових слів» | "Ключові слова" card, hashtag chips pop in |
| 1.77–2.40 | «назви» | "Назва" card, title is typed |
| 2.43–3.30 | «я також використовував» | the three cards flow together into one liquid drop |
| 3.33–3.97 | «ChatGPT» | the drop pops into a glass app icon with the ChatGPT logo, light sweep |
A glass caption pill at the bottom shows the words as they are spoken, and the cards and background react to the voice loudness.
out/liquid-glass-1920x1080.mp4— 16:9, 60 fps, H.264 + AACout/liquid-glass-1080x1920.mp4— 9:16 (Reels / Shorts / TikTok)
src/main.js— the whole animation. Glass shapes are rounded boxes combined with a smooth-min of signed distances in a WebGL2 shader, so they merge like liquid; a circular bevel refracts the procedural background (with chromatic aberration, frost, specular rims and a shadow). Text, chips and the logo are drawn to a 2D canvas and embossed on the glass.src/audio-data.js— generated byscripts/analyze.py: per-frame loudness envelope and word timings (Whisper-small, Ukrainian, aligned by transcribing growing prefixes of the clip).scripts/render.mjs— renders every frame in headless Chromium and pipes the PNGs to ffmpeg together with the audio.
npm install
npm run analyze # after replacing audio/voice.wav (edit WORDS in scripts/analyze.py)
FFMPEG=/path/to/ffmpeg npm run render # 1920×1080
FFMPEG=/path/to/ffmpeg npm run render:vertical # 1080×1920
npm run stills # PNG previews into out/stillsLive preview: serve the repo root (npx http-server .) and open
/src/index.html (add ?w=1080&h=1920 for vertical, ?t=2.1 for a still);
click the canvas to play with sound.
The ChatGPT/OpenAI logo is a trademark of OpenAI (path from simple-icons 11.0.0).