# Reeded Glass

A pane of fluted glass on rails. Each reed is a lens that magnifies what is behind and smears it softly sideways, sharp top to bottom, so a word reads from across the room. Slide it aside by its pull and the content is there.

Object · With a Pass · https://tactileui.dev/objects/reeded-glass

> The code and styling for this object 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

Cylindrical reed lens, Sideways defocus, Reed dispersion, Room fixed sheen, Sliding pane detents, Eye parallax, Single pass shader, Canvas fallback, Sleeping loop

## Usage notes

Content behind real optics. A hero where the product shot or the headline sits behind ribbed glass; a status numeral glowing through it like a clock radio's display; a locked preview (a dashboard image, a price, a result) that a signed-in visitor slides open; a quiet-hours or maintenance notice that is present without shouting.

## Options

| Option | Type | Description |
| - | - | - |
| content | enum | A word with a lamp behind it, a lit numeral, or your image. |
| text | text | Word or number |
| caption | text | Caption |
| image | text | Shown when "Behind the glass" is image. Same origin, or served with CORS. |
| glow | enum | The lit numeral: a vacuum-fluorescent cyan-white, or an amber or green lamp. |
| reeds | number | Reed width (px) |
| depth | number | How strongly each reed bends what is behind it. |
| tint | enum | Clear, the faint green of float glass, or smoke. |
| open | number | Where the pane rests. Slide it by its pull in the preview. |
| slide | boolean | Slides by hand |
| finish | enum | The rails and the pull, and the word’s ground. Auto cuts them from the page’s finish (its object tokens): light metal and a pale ground on a light finish, a dark one with bright edges on a dark one; without the tokens, aluminium on a light page and graphite on a dark one. |
| light | number | Where each reed’s highlight sits. |
| label | text | What is behind the glass, for people who cannot see it. Empty: the caption and word. |

## Methods

- value
- renderer
- update
- open
- close
- toggle
- destroy

## States

1. **Shut**: The content behind the reeds: sliced into flipped strips, smeared sideways, sharp top to bottom, each reed lit by the room lamp and dark in its valley.
2. **Sliding**: Drag the pull: the pane follows the hand with no lag; where it has gone the content is sharp, and the slab's green edge runs along the join.
3. **Let go**: It runs to open or shut, whichever it is nearer to or was flung toward, on a spring, and stops softly against the rails.
4. **Hover**: On a mouse, your eye moves with the pointer: the strips slide inside the reeds; leaving, they settle back.
5. **Keyboard**: The pull is a slider: Enter or Space opens and shuts it, arrows move it by a tenth, Page keys by a quarter, Home and End go to the ends.
6. **A word**: A word and its caption on the page's ground with a warm lamp behind them, which the reeds pull into bright columns.
7. **A numeral**: A number glowing like a vacuum-fluorescent display, or an amber or green lamp, broken into glowing strips.
8. **An image**: Your image, cover-fit behind the pane.
9. **No WebGL2**: A canvas slices the content column by column at each reed's shift and lays the reeds' light over it.
10. **Off screen or hidden**: It draws nothing.
11. **Reduced motion**: The pane jumps to open or shut; the eye stays put.

## How it works

Original. One WebGL2 fragment pass over a content texture drawn in a 2D canvas; a column-slicing canvas fallback. Nothing loops at rest.