Travel / tourism

Hotel Room Showcase

Champagne-luxe hotel reel iterating a rooms[] array of photo, name and amenities; swap hotel, location, CTA.

Type: Video
Format: Instagram Reel · 9:16
Orientation: Portrait
Duration: 18.6s
Scenes: 5
Render cost: $0.00465 / render

VariablesData-driven repeat

Free template · opens in the editor, no account required.

Customize Hotel Room Showcase

Hotel Room Showcase is a ready-to-render Travel / tourism video design formatted for Instagram Reel · 9:16 with 5 scenes and support for variables, data-driven repeat. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

9 variables: Every value below is a variable you can override — send them in the variables field of the render request (or edit them in the editor) to generate on-brand versions at scale.

hotelNameText

The Amara Suites

taglineText

A room for every kind of quiet.

locationText

Ubud · Bali

ctaTextText

Book your suite

ctaHandleText

amara-suites.com

accentColorColor

#C9A66B

roomsList · 3

n01

nameGarden Pavilion

amenityPrivate plunge pool · rainforest view

photophoto-1629140727571-9b5c6f6267b4

n02

nameSignature Loft

amenityKing bed · marble bath · sunrise deck

photophoto-1578898886225-c7c894047899

n03

nameThe Canopy Villa

amenityTwo floors · butler service · infinity edge

photophoto-1590675560125-0d832b9d719e

coverImageMedia URL

photo-1742821855309-d26c83bdfe1d

musicUrlMedia URL

audio_ed6f0ed574.mp3

The exact JSON payload

This is the full render config — POST it to the API, or open it in the editor to tweak.

Open in editor ↗

{
  "name": "travel-hotel-room-showcase",
  "resolution": "instagram-reel",
  "frameRate": 30,
  "backgroundColor": "#14100C",
  "outputFormat": "mp4",
  "variables": {
    "hotelName": "The Amara Suites",
    "tagline": "A room for every kind of quiet.",
    "location": "Ubud · Bali",
    "ctaText": "Book your suite",
    "ctaHandle": "amara-suites.com",
    "accentColor": "#C9A66B",
    "rooms": [
      {
        "n": "01",
        "name": "Garden Pavilion",
        "amenity": "Private plunge pool · rainforest view",
        "photo": "https://images.unsplash.com/photo-1629140727571-9b5c6f6267b4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3MDgwMTZ8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMHJvb20lMjBpbnRlcmlvcnxlbnwwfHx8fDE3ODMyNjg1NjZ8MA&ixlib=rb-4.1.0&q=80&w=1080"
      },
      {
        "n": "02",
        "name": "Signature Loft",
        "amenity": "King bed · marble bath · sunrise deck",
        "photo": "https://images.unsplash.com/photo-1578898886225-c7c894047899?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3MDgwMTZ8MHwxfHNlYXJjaHwyfHxsdXh1cnklMjBob3RlbCUyMHJvb20lMjBpbnRlcmlvcnxlbnwwfHx8fDE3ODMyNjg1NjZ8MA&ixlib=rb-4.1.0&q=80&w=1080"
      },
      {
        "n": "03",
        "name": "The Canopy Villa",
        "amenity": "Two floors · butler service · infinity edge",
        "photo": "https://images.unsplash.com/photo-1590675560125-0d832b9d719e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3MDgwMTZ8MHwxfHNlYXJjaHwzfHxsdXh1cnklMjBob3RlbCUyMHJvb20lMjBpbnRlcmlvcnxlbnwwfHx8fDE3ODMyNjg1NjZ8MA&ixlib=rb-4.1.0&q=80&w=1080"
      }
    ],
    "coverImage": "https://images.unsplash.com/photo-1742821855309-d26c83bdfe1d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3MDgwMTZ8MHwxfHNlYXJjaHw1fHxsdXh1cnklMjBob3RlbCUyMHJvb20lMjBpbnRlcmlvcnxlbnwwfHx8fDE3ODMyNjg1NjZ8MA&ixlib=rb-4.1.0&q=80&w=1080",
    "musicUrl": "https://cdn.pixabay.com/audio/2025/04/21/audio_ed6f0ed574.mp3"
  },
  "scenes": [
    {
      "id": "cover",
      "duration": 3.8,
      "backgroundColor": "#14100C",
      "transition": "smoothleft",
      "transitionId": "room",
      "transitionDuration": 0.5,
      "visuals": [
        {
          "type": "IMAGE",
          "src": "{{coverImage}}",
          "width": 1080,
          "height": 1920,
          "position": "center-center",
          "resize": "cover",
          "zoom": true,
          "track": 0,
          "enterBegin": 0,
          "exitEnd": 3.8
        },
        {
          "type": "SVG",
          "width": 1080,
          "height": 1920,
          "track": 1,
          "enterBegin": 0,
          "exitEnd": 3.8,
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='thrCover' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='#14100C' stop-opacity='0.66'/><stop offset='0.45' stop-color='#14100C' stop-opacity='0.14'/><stop offset='1' stop-color='#14100C' stop-opacity='0.95'/></linearGradient></defs><rect width='1080' height='1920' fill='url(#thrCover)'/><rect x='90' y='1200' width='120' height='2' fill='#C9A66B'/></svg>"
        },
        {
          "type": "TEXT",
          "x": 90,
          "y": 150,
          "anchor": "top-left",
          "track": 2,
          "enterBegin": 0.25,
          "enterEnd": 0.7,
          "enterAnimation": "fade",
          "exitEnd": 3.8,
          "style": {
            "fontFamily": "Outfit"
          },
          "html": "<div style='color:#C9A66B; font-size:25px; font-weight:600; letter-spacing:7px;'>{{location}}</div>"
        },
        {
          "type": "TEXT",
          "x": 90,
          "y": 1250,
          "width": 900,
          "anchor": "top-left",
          "track": 3,
          "enterBegin": 0.5,
          "enterEnd": 1.05,
          "enterAnimation": "smoothup",
          "exitEnd": 3.8,
          "style": {
            "fontFamily": "Playfair Display"
          },
          "html": "<div style='color:#F4ECDE; font-size:100px; line-height:0.98; font-weight:600; letter-spacing:-2px;'>{{hotelName}}</div><div style='margin-top:24px; color:#D5C6AF; font-size:36px; line-height:1.35; font-weight:400; font-style:italic;'>{{tagline}}</div>"
        }
      ]
    },
    {
      "id": "room",
      "iterate": "rooms",
      "iterateAs": "room",
      "duration": 4.2,
      "backgroundColor": "#14100C",
      "transition": "smoothleft",
      "transitionId": "cta",
      "transitionDuration": 0.5,
      "visuals": [
        {
          "type": "IMAGE",
          "src": "{{room.photo}}",
          "x": 540,
          "y": 700,
          "width": 900,
          "height": 1080,
          "anchor": "center-center",
          "resize": "cover",
          "zoom": true,
          "radius": {
            "tl": 44,
            "tr": 44,
            "bl": 44,
            "br": 44
          },
          "track": 1,
          "enterBegin": 0,
          "enterEnd": 0.55,
          "enterAnimation": "smoothright",
          "exitEnd": 4.2
        },
        {
          "type": "SVG",
          "width": 1080,
          "height": 1920,
          "track": 0,
          "enterBegin": 0,
          "exitEnd": 4.2,
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><radialGradient id='thrRoom' cx='0.5' cy='0.36' r='0.95'><stop offset='0' stop-color='#221A12'/><stop offset='1' stop-color='#14100C'/></radialGradient></defs><rect width='1080' height='1920' fill='url(#thrRoom)'/><path d='M120 1340 H960' stroke='rgba(201,166,107,0.35)' stroke-width='1.5'/></svg>"
        },
        {
          "type": "TEXT",
          "x": 90,
          "y": 116,
          "anchor": "top-left",
          "track": 2,
          "enterBegin": 0.15,
          "enterEnd": 0.55,
          "enterAnimation": "fade",
          "exitEnd": 4.2,
          "style": {
            "fontFamily": "Outfit"
          },
          "html": "<div style='color:rgba(213,198,175,0.75); font-size:23px; font-weight:600; letter-spacing:5px;'>{{hotelName}} · SUITES</div>"
        },
        {
          "type": "TEXT",
          "x": 90,
          "y": 1370,
          "width": 900,
          "anchor": "top-left",
          "track": 3,
          "enterBegin": 0.4,
          "enterEnd": 0.9,
          "enterAnimation": "smoothup",
          "exitEnd": 4.2,
          "style": {
            "fontFamily": "Playfair Display"
          },
          "html": "<div style='color:#C9A66B; font-size:34px; font-weight:600; letter-spacing:2px; font-family:Outfit, sans-serif;'>{{room.n}}</div><div style='margin-top:8px; color:#F4ECDE; font-size:76px; line-height:1; font-weight:600; letter-spacing:-1px;'>{{room.name}}</div><div style='margin-top:22px; color:#D5C6AF; font-size:31px; line-height:1.4; font-weight:400; font-family:Outfit, sans-serif;'>{{room.amenity}}</div>"
        }
      ]
    },
    {
      "id": "cta",
      "duration": 4.2,
      "backgroundColor": "#14100C",
      "visuals": [
        {
          "type": "SVG",
          "width": 1080,
          "height": 1920,
          "track": 0,
          "enterBegin": 0,
          "exitEnd": 4.2,
          "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><radialGradient id='thrCta' cx='0.5' cy='0.42' r='0.9'><stop offset='0' stop-color='#241A11'/><stop offset='1' stop-color='#14100C'/></radialGradient></defs><rect width='1080' height='1920' fill='url(#thrCta)'/><rect x='46' y='46' width='988' height='1828' rx='40' fill='none' stroke='rgba(201,166,107,0.32)' stroke-width='1.5'/><path d='M420 720 H660' stroke='#C9A66B' stroke-width='2'/></svg>"
        },
        {
          "type": "TEXT",
          "x": 540,
          "y": 820,
          "width": 900,
          "anchor": "top-center",
          "track": 1,
          "enterBegin": 0.3,
          "enterEnd": 0.8,
          "enterAnimation": "smoothup",
          "exitEnd": 4.2,
          "style": {
            "fontFamily": "Playfair Display"
          },
          "html": "<div style='text-align:center; color:#C9A66B; font-size:25px; font-weight:600; letter-spacing:7px; font-family:Outfit, sans-serif;'>{{location}}</div><div style='margin-top:24px; text-align:center; color:#F4ECDE; font-size:82px; line-height:1.05; font-weight:600; letter-spacing:-1px;'>Your suite is<br>ready when<br>you are.</div>"
        },
        {
          "type": "TEXT",
          "x": 540,
          "y": 1310,
          "anchor": "top-center",
          "track": 2,
          "enterBegin": 0.85,
          "enterEnd": 1.3,
          "enterAnimation": "smoothup",
          "exitEnd": 4.2,
          "style": {
            "fontFamily": "Outfit"
          },
          "html": "<div style='display:inline-block; background:{{accentColor}}; color:#14100C; border-radius:999px; padding:27px 66px; font-size:40px; font-weight:700;'>{{ctaText}}</div>"
        },
        {
          "type": "TEXT",
          "x": 540,
          "y": 1476,
          "anchor": "top-center",
          "track": 3,
          "enterBegin": 1.2,
          "enterEnd": 1.6,
          "enterAnimation": "fade",
          "exitEnd": 4.2,
          "style": {
            "fontFamily": "Outfit"
          },
          "html": "<div style='text-align:center; color:#8E8168; font-size:27px; font-weight:500; letter-spacing:2px;'>{{ctaHandle}}</div>"
        }
      ]
    }
  ],
  "audios": [
    {
      "src": "{{musicUrl}}",
      "volume": 0.15,
      "track": 0
    }
  ]
}

More Travel / tourism templates

Before You Visit

Before You Visit

Travel / tourism$0.0055

City Guide Short

City Guide Short

Travel / tourism$0.00474

Destination Promo

Destination Promo

Travel / tourism$0.00328

Flight Deal Alert

Flight Deal Alert

Travel / tourism$0.003

Hotel Deal Alert

Hotel Deal Alert

Travel / tourism$0.00295

Itinerary Video

Itinerary Video

Travel / tourism$0.00455

Travel Package Offer

Travel Package Offer

Travel / tourism$0.00317

Top 5 Things To Do

Top 5 Things To Do

Travel / tourism$0.00528

Customer Trip Recap

Customer Trip Recap

Travel / tourism$0.00414

Weekend Getaway

Weekend Getaway

Travel / tourism$0.00302

Ready to ship video at scale?

Start free — your first render is only a JSON payload away.

Explore the API ↗