# AI use cases for Framefields (gatewai-dev/framefields) Repo: [gatewai-dev/framefields](https://github.com/gatewai-dev/framefields) | Use cases: 4 | Page: https://dedupedai.com/use-cases/gatewai-dev-framefields/ Framefields is an Apache-2.0 TypeScript npm package that lets code and AI agents build compositing, motion graphics, and 3D video, then render it to MP4 directly on the GPU through WebGPU. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Render a title card to MP4 from TypeScript: https://dedupedai.com/use-cases/gatewai-dev-framefields/render-title-card-mp4-from-typescript/ - Teach a coding agent to author Framefields videos: https://dedupedai.com/use-cases/gatewai-dev-framefields/install-framefields-agent-skills/ - Build beat-synced motion graphics for a short video: https://dedupedai.com/use-cases/gatewai-dev-framefields/build-beat-synced-motion-graphics/ - Render a glTF model in a lit 3D scene: https://dedupedai.com/use-cases/gatewai-dev-framefields/render-gltf-model-in-3d-scene/ ## How to render a title card to MP4 from TypeScript with Framefields Repo: [gatewai-dev/framefields](https://github.com/gatewai-dev/framefields) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Write one TypeScript file that builds a 1080p60 title card and renders it to a hardware-encoded MP4. **Who it is for:** A developer or marketer who needs a quick branded title or intro card and already works in a Node.js project. **The problem:** Making a simple animated title card in a desktop editor takes manual timeline work for every version. **The outcome:** An MP4 file at output/hero.mp4 that you can regenerate by running the script again after editing text or colors. ### Steps 1. Confirm Node.js 22 or newer is installed and that your machine has a WebGPU-capable GPU. 2. Run `pnpm add framefields` 3. Create a script that builds a Composition with width 1920, height 1080, fps 60, and a Layer.box with Layer.text children, following the README quickstart. 4. Add a LayerAnimation with fadeIn and fromTo entries, then call comp.renderVideo with outputPath set to output/hero.mp4 and quality set to high. 5. Run the saved script with Node.js, for example `node render-hero.mjs`, then open output/hero.mp4 and check the text, colors, and entrance motion. (inferred, check the README) ### Prompt to paste into your agent ```text Using the framefields repo, write a TypeScript script that builds a 1920x1080, 60 fps composition with a title card reading , renders it with renderVideo to output/<file name>.mp4, and runs it. Expected output: an MP4 at that path. Verify the file exists and that the printed Rendered to path matches it. ``` ### Caveat The README quickstart is the only confirmed code path, so test the render on a short composition first to confirm your GPU and Node.js setup works before building longer videos. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/gatewai-dev-framefields/render-title-card-mp4-from-typescript/ ## How to teach a coding agent to author Framefields videos with Framefields Repo: [gatewai-dev/framefields](https://github.com/gatewai-dev/framefields) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README Install the Framefields agent skills so Claude Code, Cursor, or Codex can write and render compositions. **Who it is for:** A developer who already uses a coding agent and wants it to produce videos with Framefields without learning the API first. **The problem:** A coding agent does not know the Framefields API, so its generated video code is often wrong or needs repeated correction. **The outcome:** A coding agent that knows how to author, animate, and render Framefields compositions, ready to produce a first video on request. ### Steps 1. In Claude Code, run `/plugin install framefields` 2. In Cursor, Codex, or another supported agent, run `npx skills add gatewai-dev/framefields` 3. Ask the agent to create a 3 second 1920x1080 composition with a text headline and a fade-in, and to render it to an MP4. 4. Confirm the agent ran `pnpm add framefields` in your project before it wrote any composition code. ### Prompt to paste into your agent ```text Install the framefields agent skills from the gatewai-dev/framefields repo, then create a 3 second 1080p composition in <project folder> with the headline <headline text> and render it to output/<name>.mp4. Expected output: a rendered MP4 file. Verify the file exists and that the composition code imports from framefields. ``` ### Caveat The README lists the install commands for these agents, but it does not show how the skills behave in each one, so check the agent's output against the documentation at Framefields.dev/docs. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/gatewai-dev-framefields/install-framefields-agent-skills/ ## How to build beat-synced motion graphics for a short video with Framefields Repo: [gatewai-dev/framefields](https://github.com/gatewai-dev/framefields) | Difficulty: Intermediate | Time: 60 minutes | Basis: From the README Use BeatGrids and LayerAnimation to time text and shape motion to the beat of a music track. **Who it is for:** A social media video editor or motion designer who needs short kinetic typography cut to music and does not want to keyframe by hand. **The problem:** Matching each text move to a beat in a desktop motion tool is slow, and small timing drift shows up in the final edit. **The outcome:** A rendered MP4 in which text entrances and motion land on frame-accurate beat positions from the audio. ### Steps 1. Run `pnpm add framefields` 2. Load an audio track and create a BeatGrid from it, using the Audio & Procedural SFX section of the Framefields.dev/docs guide. 3. Create several Layer.text entries and give each a LayerAnimation with fromTo or fadeIn keyframes timed to beat positions. 4. Add the composition to a Composition with a matching fps and durationFrames, then call renderVideo with an output path. (inferred, check the README) 5. Play the output MP4 and check that each text move starts on a beat. ### Prompt to paste into your agent ```text In the framefields repo, build a composition that places text from <lyrics or headline list> on the beats of <audio file>, animating each entrance with LayerAnimation, and render it to output/<name>.mp4. Expected output: an MP4 whose text moves start on beat frames. Verify by checking the BeatGrid timestamps against the keyframe start frames. ``` ### Caveat The README names BeatGrids but does not show their API, so read the audio section of Framefields.dev/docs before writing the timing code. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/gatewai-dev-framefields/build-beat-synced-motion-graphics/ ## How to render a glTF model in a lit 3D scene with Framefields Repo: [gatewai-dev/framefields](https://github.com/gatewai-dev/framefields) | Difficulty: Advanced | Time: 90 minutes | Basis: From the README Load a glTF or GLB model into a Framefields 3D scene with a LookAt camera and render it to MP4. **Who it is for:** A product designer or 3D artist who has a GLB or glTF model and wants a short rendered clip without opening a 3D application. **The problem:** Setting up a camera, lights, and a model for a short 3D render usually means opening a full 3D suite and exporting frames separately. **The outcome:** An MP4 showing the model under studio lighting with a camera that points at it, rendered from code. ### Steps 1. Run `pnpm add framefields` 2. Place your .glb or .gltf model file in your project's assets folder. 3. Add the model to a 3D scene with a LookAt camera and studio lighting, following the Unified 3D Scenes section at Framefields.dev/docs. (inferred, check the README) 4. Add the scene to a Composition with width, height, fps, and durationFrames set, then call renderVideo with an output path. 5. Open the rendered MP4 and check the model's materials, shadows, and camera framing. ### Prompt to paste into your agent ```text In the framefields repo, create a composition that loads <model file>.glb into a 3D scene with a LookAt camera and studio lighting, and render it to output/<name>.mp4. Expected output: an MP4 of the model. Verify the file exists and that the model is visible in the first and last frames. ``` ### Caveat The README lists 3D scene features but does not show the 3D API, so confirm the model loading and camera calls in the documentation before relying on this workflow. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/gatewai-dev-framefields/render-gltf-model-in-3d-scene/