Create music visualizers and lyric videos with Framefields

Oct 31, 2026

A music visualizer gives a track a visual identity without requiring a new filmed scene for every section. A lyric video adds another job: words must arrive at the right moment and stay readable. Framefields supports both through audio layers, signals and animated text.

Start with a track you can use and, for lyrics, the approved text and timings. Keep visual design separate from those source inputs so you can make another release in the same style.

Plan a 30-second excerpt

Choose an excerpt with a clear build and a musical payoff. Mark its source in-point and the timing of each phrase before animating anything. For a lyric video, make an SRT relative to the excerpt rather than the full song.

Time	Visual	Intention
0–5 s	Artwork and track title	Establish identity
5–12 s	Gentle motion	Leave room for the opening
12–24 s	Stronger response	Follow the musical build
24–28 s	Resolve the motion	Let the phrase finish
28–30 s	Artist and track reference	Close clearly

The visual intensity should follow what you hear. More particles or a bigger pulse are creative choices, not proof that the music has more energy.

Drive motion from audio

Use Layer.audio with an explicit duration covering the excerpt. You can precompute an amplitude envelope and feed it into Signal.fromArray, then bind that signal to scale, opacity or an effect parameter. The audio and signals guide describes this approach and audio analysis options.

A periodic signal at a known tempo is also useful, but it is a designed pulse rather than detected beats. Label your implementation correctly. Keep random motion seeded if you need repeatable renders.

For line-based lyrics, use Layer.caption with the supplied SRT. For word animation, create explicitly timed text layers and use TextAnimator. A line-level subtitle file does not automatically contain word-level timing.

Use Codex, ChatGPT, Claude, Cursor or Grok Bot

You can use Codex, ChatGPT, Claude, Cursor, or Grok Bot to plan the edit and write Framefields TypeScript. In a coding environment with project and terminal access, ask the assistant to implement the brief and run the checks. In a chat-only environment, ask for the source files, save them locally and run them in your Framefields project. Rendering needs Node.js 22+ and a supported WebGPU environment; see getting started.

For Codex or Cursor, install the Framefields skills:

npx skills add gatewai-dev/framefields -a codex -a cursor

For Claude Code, use /plugin install framefields. With ChatGPT or Grok Bot, supply the agent reference, your brief and asset list; available execution tools depend on your environment. The workflow does not require a native integration in every assistant.

Create a project with npx framefields init my-video --install --pm npm, then work inside my-video. Use the generated font setup and put your source media under assets/. Run npm run typecheck, inspect comp.lint() findings, render selected frames and a grid, then run npm run preview before npm run render. The agent workflow covers inspection and QA. Check portrait layouts against the destination app’s current controls before uploading.

Prompt your assistant

Create a 30-second Framefields music visualizer at 1920x1080,
30 fps, using assets/audio/excerpt.wav and assets/images/artwork.png.
Use a precomputed amplitude envelope for restrained scale and glow
changes. Keep title and artist readable. Add the approved lyrics
from assets/captions/excerpt.srt with line-level timing; do not
invent lyrics or claim word-level sync. Keep the full audio duration.
Inspect quiet and loud sections, then preview the export with sound.
Make a separate portrait layout after the landscape version is approved.

Review timing and intensity

A contact sheet can show whether the design clips at its largest scale. Playback reveals whether the motion lags the music or the lyric changes happen early. Check the first and last audio samples so the excerpt does not start with a click or end halfway through a word.

For a release series, keep artwork, metadata, audio paths, envelope data and caption paths in a track record. Reuse the composition while checking every new title and lyric for wrapping.

For speech-led clips, follow the podcast caption workflow.