Riffle

RiffleTemplate

Cards drop from the top and stack into a pile as the deck builds.

Showreel 4 of 14 · 1 to 30 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
`holdDuration`	number	`0.4`	Seconds the front card holds before the next drops.
`transitionDuration`	number	`0.32`	Seconds the incoming card takes to land on the pile.
`transitionStyle`	enum	`drop`	How the incoming card enters: drop (from top), pop (scale up), or flick (swing in).One of: `drop`, `pop`, `flick`
`easing`	enum	`ease-out`	The incoming card's easing curve: ease-out, linear, or spring (overshoots the landing once and settles back).One of: `ease-out`, `linear`, `spring`
`scaleIntensity`	number	`0.6`	Front card width as a fraction of the canvas.
`backRotation`	number	`1`	Degrees each card behind the front is rotated, pivoting at its bottom-left corner (0 = a flat stack).
`backOffsetX`	number	`0.025`	Horizontal shift per card behind the front, as a fraction of card width (+ = right). The front card stays centered.
`backOffsetY`	number	`0.015`	Vertical shift per card behind the front, as a fraction of card width (+ = down). The front card stays centered.
`stackDepth`	number	`4`	How many cards are visible in the stack (front + cards behind).
`shadowIntensity`	number	`0.1`	Drop-shadow strength under each card (0 = none, 1 = strong).
`mediaFit`	enum	`crop`	How media fills its card: "crop" (cover a fixed slot), "contain" (letterbox onto the card), or "natural" (keep original ratio).One of: `crop`, `contain`, `natural`
`imagePosition`	number	`0`	Vertical crop anchor 0–100 (0 = top, 50 = center, 100 = bottom). Only applies when mediaFit is "crop".

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 — Riffle

{
  "id": "RiffleTemplate",
  "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": "#0b0b0d",
      "backgroundType": "gradient",
      "backgroundLibraryCategory": "same",
      "backgroundLibraryImage": "",
      "blurAmount": 0,
      "backgroundOpacity": 1,
      "backgroundGradientStart": "#111111",
      "backgroundGradientEnd": "#444444",
      "backgroundGradientNoise": 0,
      "borderRadius": 0,
      "aspectRatio": "16:9",
      "cropAspectRatio": "16:9",
      "holdDuration": 0.4,
      "transitionDuration": 0.32,
      "transitionStyle": "drop",
      "easing": "ease-out",
      "scaleIntensity": 0.6,
      "backRotation": 1,
      "backOffsetX": 0.025,
      "backOffsetY": 0.015,
      "stackDepth": 4,
      "shadowIntensity": 0.1,
      "mediaFit": "crop",
      "imagePosition": 0
    }
  }
}