Share-Sheet Carousel

Add it to your video

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

index.html

<div
  data-composition-id="share-sheet-carousel"
  data-composition-src="compositions/share-sheet-carousel.html"
  data-start="0"
  data-duration="7.2333"
  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
`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:

<div
  data-composition-id="share-sheet-carousel"
  data-composition-src="compositions/share-sheet-carousel.html"
  data-variable-values='{"shareTitle":"Share","senderName":"HyperFrames","itemLabel":"a video","stripText":"OPEN-SOURCE VIDEO ENGINE · SHIP FROM HTML","acceptLabel":"Accept","declineLabel":"Decline","slideImage1":"assets/slide-01.jpg","slideImage2":"assets/slide-02.jpg","slideImage3":"assets/slide-03.jpg","slideImage4":"assets/slide-04.jpg","brandLogo":"assets/hyperframes-logo-black.svg"}'
></div>

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

Catalog

Add it to your video

Variables

Related topics