> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Gallery Tunnel > An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog. # Gallery Tunnel An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog. **Gallery Tunnel** ```html gallery-tunnel.html Gallery Tunnel
``` Copy npx hyperframes add gallery-tunnel to the clipboard 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: ```html index.html
``` Move it in time with `data-start`. Put it on a different timeline row with `data-track-index`. See [data attributes](/concepts/data-attributes.md) 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`. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | - | - | - | - | | `images` | \`\` | string | | | `imageMix` | `0.5` | 0 to 1, step 0.05 | | | `speed` | `3` | 0segments/s to 8segments/s, step 0.1segments/s | | | `palette` | `#FF6A00,#AB54F7,#EA3737,#0072E3,#00AA3C,#FFB200` | string | | | `grid` | `2` | 1 to 4, step 1 | | | `fill` | `0.5` | 0 to 1, step 0.05 | | | `fog` | `14.25` | 3segments to 14.5segments, step 0.25segments | | | `edgeColor` | `#B0B0B0` | color | | | `edgeOpacity` | `0.5` | 0 to 1, step 0.05 | | | `backdrop` | `#000000` | color | | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap
``` {/* hf:generated-footer */} Tagged `webgl` `3d` `background` `showcase` `depth` `loop`. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md)