---
title: "Share-Sheet Carousel"
description: "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"
---
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
```html share-sheet-carousel.html
Share-Sheet Carousel
Share
HyperFrames would like to share a video
OPEN-SOURCE VIDEO ENGINE · SHIP FROM HTML
Decline
Accept
```
## Install
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) 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
```
## Source
```html
Share-Sheet Carousel
Share
HyperFrames would like to share a video
OPEN-SOURCE VIDEO ENGINE · SHIP FROM HTML
Decline
Accept
```
{/* hf:generated-footer */}
Tagged `showcase` `mock-ui` `share-sheet` `vertical` `ad-template`.
Created by Miao Yang.
## Related topics
- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)
