` block from `index.html`, then replace its twenty source links with your own. Each source item has this shape: _Code snippet omitted: it ships with the download._ Keep at least five images. The script distributes the source items across five desktop columns or two mobile columns and creates enough mesh instances to fill the stage. The source order is also the viewer’s previous/next order. `data-caption` is optional; the image’s alt text is used when it is absent. **3. Add this before your closing `` tag:** _Code snippet omitted: it ships with the download._ Already using three.js? Reuse your existing module import and assign it to `window.THREE` before loading `script.js`. Keep one three.js version on the page. The unminified and minified scripts are equivalent; load one of them. Serve your page over HTTP or HTTPS so module imports and images can load normally. ### Using It With Your Own Design **Required markup:** one `[data-lens-wall]` stage, a `[data-wall-source]` container containing image links marked `[data-wall-item]`, and the control hooks from the supplied main block. Keep `[data-wall-keys]` empty: the script builds one keyboard control per lane. The native `[data-wall-dialog]` contains the close, previous, next, caption, counter and fallback-image hooks. Use a unique caption ID if mounting several stages in one document. **Demo styling:** the dark ground, Mona Sans, compact charcoal controls and photographic selection are presentation choices. Replace the palette, typeface, caption styling and toolbar position without changing the data hooks. The twenty example images can all be replaced; their names have no special meaning to the effect. **CSS that must survive:** the root needs a definite height, `position: relative` and clipped overflow. The canvas fills that root. Keep the `html.gl` and `.is-live` source-visibility rules, the fallback’s scrollable grid, `.is-live` canvas sizing, the native dialog’s transparent WebGL state and its opaque fallback state. `touch-action: none` belongs on the active full-screen wall so vertical touch dragging controls a lane; this is a takeover gallery, so place ordinary page navigation outside it. The keyboard lane controls intentionally use `pointer-events: none` while remaining focusable. Keep the image’s `draggable="false"` and CSS native-drag guard. The supplied viewer is composed for a stage that fills its viewport, including an iframe viewport. A short embedded component requires adapting the viewer’s DOM positioning and mesh target together. ### Options Set these attributes on `[data-lens-wall]` before the script starts. | Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | `data-speed` | Pixels per second, including `0` | `14` | Alternating automatic lane drift continues in the other columns while one is scrolled or dragged. `0` starts paused. | | `data-strength` | `0`–`1.3` | `1` | Maximum lens intensity. `0` leaves sliding photographs flat. | | `data-wheel` | `true`, `false`, `all` | `true` | Wheel input moves the lane under the pointer. `all` moves every lane; `false` leaves the wheel to the page. Drag and keyboard browsing still work. | | `data-duration` | Seconds, including `0` | `0.82` | Viewer opening/closing duration. Interrupted transitions use their remaining distance. | | `data-caption` | Text | Image alt text | Optional caption on each `[data-wall-item]` link. | Desktop uses five columns and viewports below 700px use two. These layout choices live in `layout()` and the matching CSS media query. Explicit zero values are preserved for every numerical option. ### Choosing Your Images The lens rewards visible geometry: architectural edges, layered interiors, a horizon, rows of objects or a clearly framed subject. At speed, those lines bow around the central field. Natural landscapes work too, but a wall containing only fog and featureless sky hides much of the mechanism. The demo ships twenty WebP photographs at 1600 × 1067. Images are cover-fitted in the wall and contained in the large viewer, preserving their natural colour. Other aspect ratios work; leave space around a subject that must survive the wall’s landscape crop. Meaningful alt text doubles as a useful default viewer caption. Use local or same-origin images. For cross-origin images, the host must permit CORS and the `` must set `crossorigin="anonymous"` before loading. WebGL cannot upload a photograph the browser treats as an unsafe cross-origin source. ### Accessibility - **Keyboard:** Tab to a column. Up/Down selects every photograph in that column and centres it immediately; Left/Right moves focus between columns. Enter or Space opens the selected image. Each column button announces the current photograph and its navigation instructions. - **Viewer:** native `