> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Sketched Frame > Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host) # Sketched Frame Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host) **Sketched Frame** ```html hw-frame.html

``` Copy npx hyperframes add hw-frame to the clipboard That writes `compositions/hw-frame.html`, plus 1 supporting file under `assets/fonts/`. ## Add it to your video It runs for 8 seconds at 1920×1080. 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. {/* hf:generated-footer */} Tagged `handwritten` `frame` `media`. ## 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)