Settle a phone page, light the textarea focus ring, then type a note inside it
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
A phone mock on the left of a bright, defocused room shows a recipe card (photo, BREAKFAST label, dish title, yellow note, reaction pills). During local frames 0-5 the page scrolls a little further so the 'Hide note' link, an empty textarea and a yellow save button sit fully in view. At f12 the textarea border turns blue and thicker (focus), and from f14 a note is typed at roughly 1.1 frames per character, wrapping to a second line at about f38 and finishing around f60; the caret then holds.
Scroll-settle followed by a focus-state change on a form field and a caret-driven type-on that wraps inside the field.
Phase notes
- Frame 0 — Page still scrolling
- Frame 5 — Layout settles with field and button in view
- Frame 12 — Field gains blue focus ring
- Frame 14 — Typing begins
- Frame 60 — Note complete, caret holds
- Frame 80 — End
Use this example
- Watch the source and draft at normal speed. Compare the order of actions, the held states, and the transition into the result.
- Download the project and read its README before changing inputs. The package includes its implementation and declared dependencies.
- Replace the sample content through the package's documented input or content builder. Keep source footage in the research comparison.
- Render your adaptation and inspect text fit, framing, intermediate states, and entry and exit frames.
The source and remake are different assets. The original code-based illustration remains editable; source footage is a research reference. Read the retained findings below before using the choreography.
Recorded limits
- Visual fidelity is an authored draft judgement from sampled source frames; no independent blind review or native Resolve execution.
- Both variants rerendered from the packaged text renderer to repair a prior code/preview mismatch.