Notes Reveal

Add it to your video

It runs for 24.85 seconds at 1080×1920. Paste this into your composition:

index.html

<div
  data-composition-id="notes-reveal"
  data-composition-src="compositions/notes-reveal.html"
  data-start="0"
  data-duration="24.85"
  data-track-index="1"
  data-width="1080"
  data-height="1920"
></div>

Move it in time with data-start. Put it on a different timeline row with data-track-index. See 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.
`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:

<div
  data-composition-id="notes-reveal"
  data-composition-src="compositions/notes-reveal.html"
  data-variable-values='{"titleL1":"Things nobody told me","titleL2":"about video.","noteLine1":"my videos sucked","noteLine2":"my tools cost $$$","noteLine3":"and re-edits never end.","noteLine4":"then i tried writing html only","noteLine5":"started HyperFrames three weeks ago","noteLine6":"the grind is gone, but more than that —","noteLine7":"I ship videos weekly.","cardTop":"THE POWER","cardMid":"OF","cardBottom":"ONE FILE","check1Label":"WRITE","check1Value":"HTML","check2Label":"RENDER","check2Value":"IN 4K","check3Label":"SHIP","check3Value":"TODAY","brandLogo":"assets/hyperframes-logo-black.svg","brandDomain":"hyperframes.heygen.com"}'
></div>

Tagged showcase mock-ui notes typing vertical ad-template.Created by Miao Yang.

Catalog

Add it to your video

Variables

Related topics