> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Notification Cascade > Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card # Notification Cascade Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card **Notification Cascade** ```html notification-cascade.html Notification Cascade
Show less
New render
Launch video is ready.
NOW
HyperFrames
New render
All checks passed.
NOW
HyperFrames
New render
4K render done in 92s.
NOW
HyperFrames
New render
Published to the catalog.
NOW
HyperFrames
SHIP VIDEO
FROM HTML
Brand logo
``` Copy npx hyperframes add notification-cascade to the clipboard That writes `compositions/notification-cascade.html`, plus 3 supporting files under `assets/`. ## Add it to your video It runs for 14 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 | | - | - | - | - | | `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: ```html wrap
``` {/* hf:generated-footer */} Tagged `showcase` `mock-ui` `notification` `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)