# Light Table

A portfolio gallery made as an edit table: slides in their mounts on opal glass lit from below, the chosen one lifted off it and shown whole in a viewer with its title, place, year and exposure, transport keys and a counter, series keys, and a switch for the table's light.

Block · With a Pass · https://tactileui.dev/blocks/light-table

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Lit opal table, Slide mounts that lift, Viewer figure with caption, Transport keys and counter, Arrow keys through frames, Series radio tray, Table light toggle, Drawn greyscale demo frames, Own frames by src, Container query layout, Concentric radii, Finish following

## Usage notes

The work section of a photographer's, studio's or illustrator's site. Where Portfolio Iris opens each photograph behind shutter blades, one at a time, this is the edit table: every frame in view at once on lit glass, and one in the hand. Choose a slide and it lifts; its picture fills the viewer beside the table, with what it is, where, when and how it was shot. Transport keys and the arrow keys step through, series keys narrow the table to one body of work, and a switch turns the table's light off and on. The demo's nine pictures are drawn in greys as SVG; give it your own frames by src and alt. Buttons with aria-current, native radios, a toggle, a figure with its caption, a polite counter. CSS, SVG and a little DOM, no dependency, every finish of the kit.

## Options

| Option | Type | Description |
| - | - | - |
| name | text | Printed small above the heading. |
| title | text | Heading |
| lead | text | Lead |
| series | enum | Series at start |
| start | number | Among all the frames; if it is not in the series, the series’ first. |
| light | boolean | The switch on the desk turns it off and on; fires ltb-light. |
| cta | text | Empty leaves it out. |
| ctaHref | text | Contrast key link |
| finish | enum | Auto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. |

## Methods

- show
- next
- prev
- update
- destroy

## States

1. **At rest**: Nothing runs.
2. **Slide chosen**: 
3. **Stepping**: Previous and Next, or Left and Right anywhere but the series radios, step through the frames on the table and wrap; Home and End go to the ends; on the table focus follows the slide.
4. **Series chosen**: Its key stands raised in the tray; the table narrows to that series and the counter counts it; ltb-series fires.
5. **Light off**: The switch goes down, its lamp goes dark, the glass becomes a plain recess and the pictures dim.
6. **Your own frames**: 
7. **Tablet**: 
8. **Phone**: 
9. **Reduced motion**: The picture swaps at once; slides do not lift or fade.
10. **Finishes**: On a page with the kit's finish tokens it is drawn from them, in any of the twelve, the table always the brightest surface; otherwise aluminium or graphite by data-finish, tone or system.

## How it works

Original composition. The photographer (Ines Varga), the titles, places, years and exposures are sample copy, and the nine pictures are drawn here in SVG for the demo; the preview says so. The plates, mounts, glass and lamp are CSS in the kit's tokens; no image file.