Skip to main content

​
Install

Terminal
That writes one file: compositions/gallery-tunnel.html.

​
Add it to your video

It runs for 12 seconds at 1920×1080. Paste this into your composition:
index.html
Move it in time with data-start. Put it on a different timeline row with data-track-index. See data attributes for the rest.

​
Change how it looks

Set these CSS variables on the block:
  • --images — Image slots: comma-separated paths, tiled into the panels (e.g. assets/shot-1.png,assets/shot-2.png). Defaults to “.
  • --imagemix — Image share of filled slots (0 = all colour, 1 = all images). Defaults to 0.5.
  • --speed — Flight speed (segments per second). Defaults to 3.
  • --palette — Slab palette: comma-separated hex colours. Defaults to #FF6A00,#AB54F7,#EA3737,#0072E3,#00AA3C,#FFB200.
  • --grid — Grid density: slots per wall face per axis (2 = 4 per face, 16 per segment). Defaults to 2.
  • --fill — Slot fill rate. Defaults to 0.5.
  • --fog — Fog distance in segments: depth at which the corridor reaches pure backdrop. Defaults to 14.25.
  • --edgecolor — Edge line colour. Defaults to #B0B0B0.
  • --edgeopacity — Edge line opacity. Defaults to 0.5.
  • --backdrop — Backdrop and fog colour. Defaults to #000000.
Tagged webgl 3d background showcase depth loop.