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.
What it is for
Content behind real optics.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Cylindrical reed lens, Sideways defocus, Reed dispersion, Room fixed sheen, Sliding pane detents, Eye parallax, Single pass shader, Canvas fallback, Sleeping loop
- Stack
- Vanilla ES modules, WebGL2, Canvas 2D, CSS
- Needs
- Nothing, no dependencies
- States
- 11 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- ShutThe 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.
- SlidingDrag 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.
- Let goIt runs to open or shut, whichever it is nearer to or was flung toward, on a spring, and stops softly against the rails.
- HoverOn a mouse, your eye moves with the pointer: the strips slide inside the reeds; leaving, they settle back.
- KeyboardThe 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.
- A wordA word and its caption on the page's ground with a warm lamp behind them, which the reeds pull into bright columns.
- A numeralA number glowing like a vacuum-fluorescent display, or an amber or green lamp, broken into glowing strips.
- An imageYour image, cover-fit behind the pane.
- No WebGL2A canvas slices the content column by column at each reed's shift and lays the reeds' light over it.
- Off screen or hiddenIt draws nothing.
- Reduced motionThe pane jumps to open or shut; the eye stays put.
Notes
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. The pull is a slider (0–100 % open) that keyboards open and shut, and what is behind the glass is always in the accessible name.
Original. One WebGL2 fragment pass over a content texture drawn in a 2D canvas; a column-slicing canvas fallback. Nothing loops at rest.
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
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.