# Create music visualizers and lyric videos with Framefields

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](/docs/guides/audio-and-signals/#audio-reactive-visuals) 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](/docs/guides/animation/#kinetic-typography). 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](/docs/getting-started/).

For Codex or Cursor, install the [Framefields skills](/docs/agents/install/):

```bash
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](https://framefields.dev/docs/llms.txt), 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](/docs/agents/workflow/) covers inspection and QA. Check portrait layouts against the destination app's current controls before uploading.

## Prompt your assistant

```text
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](/blog/podcast-clips-with-captions/).