---
name: lower-third
description: Build or update a reusable lower third component in this Remotion project and render it with transparency for use in an NLE. Use when the user asks for a lower third, name title, name strap or chyron.
argument-hint: "Name" "Title" [seconds on screen, default 5]
---

<!--
Claude Code skill: /lower-third for Remotion
From the AgentCut prompt library: https://agentcut.dev/prompts/skill-remotion-lower-third/
Written by AgentCut. Free to copy, edit and use in your own projects.
Sources and credit: Remotion Agent Skills (remotion-dev/skills) (https://github.com/remotion-dev/skills): Use the official transparent video and timing guidance instead of guessing
Save as: .claude/skills/lower-third/SKILL.md
-->

# Lower third

Input: $ARGUMENTS

1. Read `brand/DESIGN.md` for fonts, colors, easing and safe margins. If it does not exist, ask the user for a font and one accent color.
2. If `src/components/LowerThird.tsx` exists, reuse it. Otherwise create it with props: name, title, accentColor, align (left or right), durationInFrames.
3. Motion: accent bar wipes in over 10 frames, name slides 24 px and fades in over 12 frames starting at frame 4, title follows 4 frames later. Hold. Exit is the reverse, 2 frames faster than the entrance. Ease out on entrances, ease in on exits.
4. Position: inside the graphics safe area, bottom left by default, never closer than 5% to any edge.
5. Test with the longest likely name (at least 28 characters) and make sure nothing clips or wraps badly.
6. Register a composition per lower third named `LT-<name>` at the project fps and resolution.
7. Render with transparency using the guidance from the Remotion transparent videos rule (ProRes 4444 in a .mov, or WebM with alpha), to `out/LT-<name>.mov`.
8. Tell the user the file path and which NLEs read that format with alpha.