Form Fill Sequence
A sign-up form filling itself out field by field, each one validating before the next takes focus.
SceneScenes
$ npx remotion-ui@latest add form-fill-sequenceThe caret drops into the first field, types its value, and the field ticks green before focus moves on. The submit button stays disabled until the last field has validated, so the ending reads as a consequence of the form rather than a separate flourish.
Field timings are not fixed constants — each one is derived from its own value
length and charsPerSecond, so a long email visibly takes longer to enter than
a short name and the whole sequence lengthens when you pass more fields. Budget
roughly value.length / charsPerSecond + 0.26s per field when you are fitting
this into a cut.
accentColor is the focus ring and the armed button; validColor is the tick
and the settled border. They are separate props on purpose — collapsing them
into one colour makes "this field has focus" and "this field passed"
indistinguishable at a glance.
Typing here is the subject. When the typing is only setup for a result list,
reach for search-results-populate instead.
Field beats are derived from each value's length, so the sequence lengthens with the content rather than running on fixed constants. The submit button stays disabled until the last field ticks. Typing is the subject here; when it is only setup for a result list, use search-results-populate.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/form-fill-sequence- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: fields, title, subtitle, submitLabel, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { FormFillSequence } from "@/remotion/scenes/form-fill-sequence";
<FormFillSequence
title="Create your workspace"
fields={[
{ label: "Full name", value: "Ada Lovelace", placeholder: "Your name" },
{ label: "Work email", value: "ada@northstar.dev" },
]}
submitLabel="Create workspace"
successLabel="Workspace created"
holdSeconds={4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| fields | FormField[] | 3 sample fields | Label, typed value and placeholder for each field, filled in order. |
| title | string | "Create your workspace" | Heading on the card. Omit to show the fields alone. |
| subtitle | string | "Takes about a minute." | Supporting line under the heading. |
| submitLabel | string | "Create workspace" | Button text while the form is still filling. |
| successLabel | string | "Workspace created" | Button text once every field has validated. |
| charsPerSecond | number | 34 | Typing rate. Each field's duration is its value length divided by this. |
| holdSeconds | number | - | Seconds the filled form holds before the card retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Focus ring and armed submit button. |
| validColor | string | "#7FD1A0" | Tick and settled border. Kept off accentColor so focus and validation stay two states. |
| backgroundColor | string | - | Page behind the card. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |