> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Share-Sheet Carousel > A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap # Share-Sheet Carousel A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap **Share-Sheet Carousel** ```html share-sheet-carousel.html Share-Sheet Carousel
Share
HyperFrames would like to share a video
Brand logo
OPEN-SOURCE VIDEO ENGINE · SHIP FROM HTML
Decline
Accept
``` Copy npx hyperframes add share-sheet-carousel to the clipboard That writes `compositions/share-sheet-carousel.html`, plus 6 supporting files under `assets/`. ## Add it to your video It runs for 7.2333 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 | | - | - | - | - | | `shareTitle` | `Share` | string | Heading at the top of the share sheet. | | `senderName` | `HyperFrames` | string | Name of the brand this video promotes, shown as the sender offering the item. Use the real name of that brand. | | `itemLabel` | `a video` | string | What the sender is offering, completing the sentence "… would like to share …". | | `stripText` | `OPEN-SOURCE VIDEO ENGINE · SHIP FROM HTML` | string | Positioning line of the brand this video promotes, in small caps beside its logo. | | `acceptLabel` | `Accept` | string | Right-hand action button. | | `declineLabel` | `Decline` | string | Left-hand action button. | | `slideImage1` | `assets/slide-01.jpg` | image | First carousel image; also fills the blurred background. | | `slideImage2` | `assets/slide-02.jpg` | image | Second carousel image; also fills the blurred background. | | `slideImage3` | `assets/slide-03.jpg` | image | Third carousel image; also fills the blurred background. | | `slideImage4` | `assets/slide-04.jpg` | image | Fourth carousel image; also fills the blurred background. | | `brandLogo` | `assets/hyperframes-logo-black.svg` | image | Transparent horizontal wordmark of the brand this video promotes, in the preview strip. | 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` `share-sheet` `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)