AI Answer Rank

Add it to your video

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

index.html

<div
  data-composition-id="ai-answer-rank"
  data-composition-src="compositions/ai-answer-rank.html"
  data-start="0"
  data-duration="9"
  data-track-index="1"
  data-width="1080"
  data-height="1080"
></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
`prompt`	`What's the best CRM for a small team?`	string	The question typed into the user bubble. Up to about 60 characters keeps it on one or two lines.
`lead`	`Here are the top picks:`	string	The assistant line above the ranked list.
`rowA`	`Brand A`	string	First pick in the original answer: a product other than the brand this video promotes.
`rowB`	`Brand B`	string	Second pick in the original answer: a product other than the brand this video promotes.
`rowC`	`Brand C`	string	Third pick in the original answer. It drops out of the top three when the brand lands.
`brand`	`Your brand`	string	The brand this video promotes, by its real name. It slides into the answer and takes the highlight.
`brandRank`	`1`	`1`, `2`, `3`	The slot the brand lands in. Picks at and below it step down one place.
`accent`	`#16a34a`	color	Highlight, monogram and check on the brand row, the one accent element.
`ink`	`#18181b`	color	Text colour; every placeholder surface is this ink at an alpha step.
`ground`	`#fcfcfb`	color	Chat card surface; the page around it is the ground tinted toward the ink.

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="ai-answer-rank"
  data-composition-src="compositions/ai-answer-rank.html"
  data-variable-values='{"prompt":"What's the best CRM for a small team?","lead":"Here are the top picks:","rowA":"Brand A","rowB":"Brand B","rowC":"Brand C","brand":"Your brand","brandRank":"1","accent":"#16a34a","ink":"#18181b","ground":"#fcfcfb"}'
></div>

Tagged mock-ui ai chat ranking list marketing ad-template square.Created by Tugra Avci.

Catalog

Add it to your video

Variables

Related topics