> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Notes Reveal > A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist # Notes Reveal A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist **Notes Reveal** ```html notes-reveal.html Notes Reveal
THE POWER
OF
ONEFILE
WRITE
HTML
RENDER
IN 4K
SHIP
TODAY
hyperframes.heygen.com
9:41
Things nobody told me
about video.
Aa
The
My
I
q
w
e
r
t
y
u
i
o
p
a
s
d
f
g
h
j
k
l
z
x
c
v
b
n
m
123
space
``` Copy npx hyperframes add notes-reveal to the clipboard That writes `compositions/notes-reveal.html`, plus 5 supporting files under `assets/`. ## Add it to your video It runs for 24.85 seconds at 1080×1920. Paste this into your composition: ```html index.html
``` Move it in time with `data-start`. Put it on a different timeline row with `data-track-index`. See [data attributes](/concepts/data-attributes.md) for the rest. ## 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 | | - | - | - | - | | `titleL1` | `Things nobody told me` | string | First line of the note title. | | `titleL2` | `about video.` | string | Second line of the note title. | | `noteLine1` | `my videos sucked` | string | First typed line of the note. The seven body lines are the bulk of the video: they must be about the brand this video promotes, not about video-making. | | `noteLine2` | `my tools cost $$$` | string | Second typed line of the note. | | `noteLine3` | `and re-edits never end.` | string | Third typed line of the note. | | `noteLine4` | `then i tried writing html only` | string | Fourth typed line of the note — the turn, where the brand enters. | | `noteLine5` | `started HyperFrames three weeks ago` | string | Fifth typed line of the note — name the brand here. | | `noteLine6` | `the grind is gone, but more than that —` | string | Sixth typed line of the note. | | `noteLine7` | `I ship videos weekly.` | string | Last typed line of the note — the payoff. | | `cardTop` | `THE POWER` | string | First marker line on the closing card. The underline follows its last word. | | `cardMid` | `OF` | string | Short connector line between the two headline lines, centred on the card. | | `cardBottom` | `ONE FILE` | string | Last marker line on the closing card. Its first word is ringed. | | `check1Label` | `WRITE` | string | Typewriter label of the first checklist row. | | `check1Value` | `HTML` | string | Marker value of the first checklist row. | | `check2Label` | `RENDER` | string | Typewriter label of the second checklist row. | | `check2Value` | `IN 4K` | string | Marker value of the second checklist row. | | `check3Label` | `SHIP` | string | Typewriter label of the third checklist row. | | `check3Value` | `TODAY` | string | Marker value of the third checklist row. | | `brandLogo` | `assets/hyperframes-logo-black.svg` | image | Transparent mark of the brand this video promotes, in the sign-off strip under the card. | | `brandDomain` | `hyperframes.heygen.com` | string | Domain of the brand this video promotes, closing the sign-off strip. Use the real domain, or a call to action when no domain fits. | 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
``` {/* hf:generated-footer */} Tagged `showcase` `mock-ui` `notes` `typing` `vertical` `ad-template`. 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)