--- title: "Notes Reveal" description: "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" --- import { InstallCommand } from "/snippets/install-command.jsx"; import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; ```html notes-reveal.html Notes Reveal
THE POWER
OF
ONEFILE
WRITE
HTML
RENDER
IN 4K
SHIP
TODAY
9:41
Things nobody told me
about video.
my videos sucked
my tools cost $$$
and re-edits never end.
then i tried writing html only
started HyperFrames three weeks ago
the grind is gone, but more than that —
I ship videos weekly.
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
``` ## Install That writes `compositions/notes-reveal.html`, plus 4 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) 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. | | `cardTop` | `THE POWER` | string | First marker line on the closing card. | | `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. | 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
``` ## Source ```html Notes Reveal
THE POWER
OF
ONEFILE
WRITE
HTML
RENDER
IN 4K
SHIP
TODAY
9:41
Things nobody told me
about video.
my videos sucked
my tools cost $$$
and re-edits never end.
then i tried writing html only
started HyperFrames three weeks ago
the grind is gone, but more than that —
I ship videos weekly.
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
``` {/* hf:generated-footer */} Tagged `showcase` `mock-ui` `notes` `typing` `vertical` `ad-template`. Created by Miao Yang. ## Related topics - [Browse the complete Catalog](/catalog) - [Add assets and Catalog items in Studio](/studio/assets-and-blocks) - [Build a richer composition](/go-further)