Notification Cascade

Add it to your video

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

index.html

<div
  data-composition-id="notification-cascade"
  data-composition-src="compositions/notification-cascade.html"
  data-start="0"
  data-duration="14"
  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
`notifTitle`	`New render`	string	Bold first line on every banner.
`message1`	`Launch video is ready.`	string	Subtitle of the first banner to land.
`message2`	`All checks passed.`	string	Subtitle of the second banner.
`message3`	`4K render done in 92s.`	string	Subtitle of the third banner.
`message4`	`Published to the catalog.`	string	Subtitle of the fourth banner.
`appName`	`HyperFrames`	string	Name of the brand this video promotes, credited in the corner of every banner. Use the real name of that brand.
`headlineTop`	`SHIP VIDEO`	string	First line of the closing card.
`headlineAccent`	`FROM HTML`	string	Accented second line of the closing card.
`footerText`	`hyperframes.heygen.com`	string	Domain of the brand this video promotes, under the end-card headline. Use the real domain, or a call to action when no domain fits.
`brandLogo`	`assets/hyperframes-logo-white.svg`	image	Transparent mark of the brand this video promotes, centered on the closing card.

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="notification-cascade"
  data-composition-src="compositions/notification-cascade.html"
  data-variable-values='{"notifTitle":"New render","message1":"Launch video is ready.","message2":"All checks passed.","message3":"4K render done in 92s.","message4":"Published to the catalog.","appName":"HyperFrames","headlineTop":"SHIP VIDEO","headlineAccent":"FROM HTML","footerText":"hyperframes.heygen.com","brandLogo":"assets/hyperframes-logo-white.svg"}'
></div>

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

Catalog

Add it to your video

Variables

Related topics