Banner

LoopHeroReelTemplate

Active thumbnail lifts while a full-frame backdrop wipes to match.

Loop · Carousel & Flow 32 of 32 · 3 to 10 images or videos

0:00 / 0:00

Settings

Template settings

Specific to this template. Every template also accepts the common settings (aspect ratio, background, corner radius).

Setting	Type	Default	What it does
`loopDuration`	number	`10`
`loopRepeat`	number	`2`
`mediaFit`	enum	`crop`	How each media fills its slot.One of: `crop`, `natural`
`padding`	number	`6`
`shadowEnabled`	boolean	`false`
`shadowX`	number	`0`
`shadowY`	number	`1`
`shadowBlur`	number	`1.5`
`shadowSpread`	number	`-0.25`
`shadowOpacity`	number	`40`
`shadowColor`	color	`#000000`
`easing`	enum	`smooth`	One of: `custom`, `smooth`, `natural`, `slowdown`, `snappy`, `accelerate`, `elastic`, `bounce`, `overshoot`, `impulse`, `swing`, `linear`
`easeBezier`	string	`0.50,0.00,0.50,1.00`
`lift`	number	`1.8`
`activeScale`	number	`108`
`gap`	number	`2`	Spacing between items, in pixels.
`heroOpacity`	number	`55`
`kenBurns`	number	`60`
`hold`	number	`55`
`style`	enum	`grid`	One of: `grid`, `blinds`
`pattern`	enum	`normal`	One of: `normal`, `diagonal`, `radial`, `spiral`, `random`
`orientation`	enum	`horizontal`	One of: `horizontal`, `vertical`
`openFrom`	enum	`start`	One of: `start`, `end`, `center`, `alternate`
`rows`	number	`4`
`columns`	number	`4`
`slats`	number	`8`
`stagger`	number	`60`
`speedVariation`	number	`0`

Request

Example request

A complete, working body for POST /api/v1/render with every default spelled out. Send only the settings you want to change.

POST /api/v1/render — Banner

{
  "id": "LoopHeroReelTemplate",
  "scale": 1,
  "inputProps": {
    "images": [
      "https://picsum.photos/seed/reelfolio1/1280/800",
      "https://picsum.photos/seed/reelfolio2/1280/800",
      "https://picsum.photos/seed/reelfolio3/1280/800"
    ],
    "settings": {
      "backgroundColor": "#0b0b0f",
      "backgroundType": "gradient",
      "backgroundGradientStart": "#111111",
      "backgroundGradientEnd": "#444444",
      "backgroundGradientNoise": 0,
      "backgroundLibraryCategory": "same",
      "backgroundLibraryImage": "",
      "blurAmount": 0,
      "backgroundOpacity": 1,
      "borderRadius": 32,
      "aspectRatio": "16:9",
      "mediaFit": "crop",
      "loopDuration": 10,
      "loopRepeat": 2,
      "padding": 6,
      "shadowEnabled": false,
      "shadowX": 0,
      "shadowY": 1,
      "shadowBlur": 1.5,
      "shadowSpread": -0.25,
      "shadowOpacity": 40,
      "shadowColor": "#000000",
      "easing": "smooth",
      "easeBezier": "0.50,0.00,0.50,1.00",
      "lift": 1.8,
      "activeScale": 108,
      "gap": 2,
      "heroOpacity": 55,
      "kenBurns": 60,
      "hold": 55,
      "style": "grid",
      "pattern": "normal",
      "orientation": "horizontal",
      "openFrom": "start",
      "rows": 4,
      "columns": 4,
      "slats": 8,
      "stagger": 60,
      "speedVariation": 0
    }
  }
}