Reeded Glass

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. 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.

Copy the reeded-glass folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="reeded-glass/reeded-glass.css">
<div id="reeded-glass" style="width: min(92vw, 880px)"></div>

<script type="module">
  import ReededGlass from './reeded-glass/reeded-glass.mjs';

  const reededGlass = new ReededGlass(document.getElementById('reeded-glass'), {
    content: 'word',
    text: 'Quiet hours',
    caption: 'Deploys pause at 22:00',
  });

  // reededGlass.update({ … });   change any option in place
  // reededGlass.destroy();        and take it away again
</script>

new ReededGlass(element, options)

Builds it inside the element with these options.

value

How far open, 0…1, as it stands.

renderer

update(opts = {})

Change options in place.

open()

close()

toggle()

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: change, input.

1. 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.
2. 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.
3. 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.
4. HoverOn a mouse, your eye moves with the pointer: the strips slide inside the reeds; leaving, they settle back.
5. 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.
6. A wordA word and its caption on the page's ground with a warm lamp behind them, which the reeds pull into bright columns.
7. A numeralA number glowing like a vacuum-fluorescent display, or an amber or green lamp, broken into glowing strips.
8. An imageYour image, cover-fit behind the pane.
9. No WebGL2A canvas slices the content column by column at each reed's shift and lays the reeds' light over it.
10. Off screen or hiddenIt draws nothing.
11. Reduced motionThe pane jumps to open or shut; the eye stays put.

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

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