Notes Typing
Social formatsA blank phone note fills itself in, typed line by line with the keyboard lighting under each letter, then Done is tapped and the keyboard drops away
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 8 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Title *title · string
The note's heading, typed first in heavy weight. Short: it sets the frame and everything else reads as the answer to it.
now: about video.
- Lines *lines · array
Body lines, typed one after another with a blank line between them. Each is its own beat, so write them as separate thoughts rather than as one paragraph split for width.
now: 3 items
- Suggestionssuggestions · tuple
The three words in the keyboard's predictive strip. Cosmetic, but wrong words are the fastest way to make the mock read as fake.
now: 3 items
- Accentaccent · string
The Done button, the caret and the pressed key. Notes yellow by default. A hex value, because this is a fixed piece of interface rather than a brand surface.
now: #f2b418
- Pacepace · number
Typing speed multiplier. 1 fills the duration with the text you gave it, so the note lands just before the end. Below 1 finishes earlier and holds longer, above 1 runs out of frames. Leave it at 1 unless you want the pause.
now: 1
- Dismiss keyboarddismissKeyboard · boolean
Tap Done at the end, so the keyboard drops away and the finished note is alone in the frame. Turn it off to hold on the keyboard instead.
now: true
- Status timestatusTime · string
Clock in the status bar.
now: 9:41
- Brandbrand · string
Brand token id, one of the keys of BRANDS. Only the backdrop behind the phone uses it. The note itself is deliberately iOS rather than branded.
now: paper
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A twenty second vertical hook that looks like somebody typing a note on their phone. Open on a blank note with the keyboard up and the caret blinking, then type a heavy title and three short body lines, one at a time, pausing between them the way a person does when they read back what they wrote. Draw the whole phone: status bar, back chevron, the undo and share pill, a yellow Done button, the formatting row and a full keyboard. Light the key under each letter as it is struck. Vary the rhythm so it does not read as a machine, and make the timing fit whatever text it is given rather than running past the end. Finish by tapping Done so the keyboard drops away and the finished note holds alone.
