> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Notes Typing > The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter # Notes Typing The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter **Notes Typing** ```html notes-typing.html theme={null} Notes Typing ``` Copy npx hyperframes add notes-typing to the clipboard That writes one file: `compositions/components/notes-typing.html`. ## Paste it into your composition Open `compositions/components/notes-typing.html` and copy what is inside into your own composition. A component has no size or duration of its own. It takes both from the composition you paste it into. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | | | - | - | - | - | - | - | | `title` | \`Things nobody told me | about video.\` | string | Bold note title. A | breaks the line. | | `lines` | \`my videos sucked | my tools cost \$\$\$ | and re-edits never end.\` | string | Pipe-separated body lines, typed one after another. | | `speed` | `1` | 0.5 to 2, step 0.1 | Typing speed multiplier. 1 is the measured human rhythm. | | | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap theme={null}
``` Tagged `motion-primitive` `notes` `typing` `mock-ui` `vertical`. Created by Miao Yang. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md) ## Related topics - [Notes Reveal](/catalog/blocks/notes-reveal.md) - [Flowchart](/catalog/blocks/flowchart.md) - [Flowchart Vertical](/catalog/blocks/flowchart-vertical.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.