Folio

FolioTemplate

A folder spills your work into a grid, then fans it across a marquee.

Showreel 5 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
`folderColor`	color	`#a6ff4d`	Accent color of the intro + collect folder.
`folderLabel`	string	`Portfolio`	Short label printed on the folder pocket.
`folderFrost`	number	`9`	Frosted-glass blur on the folder front (calibrated to a 360px folder).
`folderSize`	number	`0.26`	Intro folder width as a fraction of the canvas.
`cursorSize`	number	`0.058`	Intro cursor size as a fraction of the canvas width.
`collectFolderSize`	number	`0.25`	Width of the finale "collect" folder as a fraction of the canvas (min 0.1).
`collectFolderTilt`	number	`-27`	Diagonal tilt of the collect folder in degrees (negative leans the top left).
`collectFolderX`	number	`-0.05`	Nudge the collect folder horizontally from the bottom-right corner (fraction of the canvas).
`collectFolderY`	number	`-0.1`	Nudge the collect folder vertically from the bottom-right corner (fraction of the canvas).
`gridSize`	number	`9`	How many media fill one grid before it swaps (the reel is chunked into ceil(N / gridSize) batches).
`gridPadding`	number	`0.035`	Inset of each image inside its grid cell, as a fraction of the canvas short side.
`gridLineColor`	color	`#797872`	Hue of the grid divider lines (drawn at a fixed low alpha).
`showcaseDuration`	number	`1`	Seconds for a card to grow to the centered hero (and to fall back).
`showcaseHold`	number	`0.6`	Seconds each card holds at the hero spot during the snap slideshow.
`transitionInDuration`	number	`1.9`	Seconds for a grid to come in (spill from the folder, or slide in).
`transitionOutDuration`	number	`1.7`	Seconds for a finished grid to slide out.
`introDuration`	number	`1.5`	Seconds for the folder to rise and the first card to peek before the spill.
`collectDuration`	number	`2`	Seconds for the collect folder to gather the last grid and slide out.
`marqueeDuration`	number	`4.5`	Seconds of the closing two-row marquee.
`marqueeSpeed`	number	`1`	Marquee scroll speed multiplier.
`marqueeGapX`	number	`0.026`	Horizontal gap between marquee tiles, as a fraction of the canvas width.
`marqueeGapY`	number	`0.05`	Vertical gap between the two marquee rows, as a fraction of the canvas height.
`mediaFit`	enum	`contain`	How each media fills its slot.One of: `crop`, `contain`
`imagePosition`	number	`0`	Vertical crop anchor 0–100 (crop only).
`scaleIntensity`	number	`0.82`	Hero width as a fraction of the canvas when a card is showcased.

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

{
  "id": "FolioTemplate",
  "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": "#e8e7dd",
      "backgroundType": "color",
      "backgroundLibraryCategory": "same",
      "backgroundLibraryImage": "https://cdn.reelfolio.io/reelfolio-background-library/macos/11-0-Color-Day-thumbnails.webp",
      "blurAmount": 0,
      "backgroundOpacity": 1,
      "borderRadius": 0,
      "aspectRatio": "16:9",
      "folderColor": "#a6ff4d",
      "folderLabel": "Portfolio",
      "folderFrost": 9,
      "folderSize": 0.26,
      "cursorSize": 0.058,
      "collectFolderSize": 0.25,
      "collectFolderTilt": -27,
      "collectFolderX": -0.05,
      "collectFolderY": -0.1,
      "gridSize": 9,
      "gridPadding": 0.035,
      "gridLineColor": "#797872",
      "showcaseDuration": 1,
      "showcaseHold": 0.6,
      "transitionInDuration": 1.9,
      "transitionOutDuration": 1.7,
      "introDuration": 1.5,
      "collectDuration": 2,
      "marqueeDuration": 4.5,
      "marqueeSpeed": 1,
      "marqueeGapX": 0.026,
      "marqueeGapY": 0.05,
      "mediaFit": "contain",
      "imagePosition": 0,
      "scaleIntensity": 0.82,
      "musicTrack": "",
      "musicVolume": 0.08,
      "sfxEnabled": false,
      "sfxVolume": 0.08,
      "sfxSounds": {
        "whoosh": "swoosh",
        "swipe": "off"
      }
    }
  }
}