24 · Glass Bench: a free tool for designing a glass panel and taking it home as one snippet

Glass Bench is a working tool, not a business site. You shape a pane of glass over a backdrop, check that the words on it read, see what it costs the device, and copy out one small snippet with no libraries. The thing that makes people stop is the hero: a headline sits on a drawn test card (Siemens star, colour bars, grey ramp, ruler ticks) and a draggable glass slab bends the test card as it drifts over the word "bends". The page then teaches the glass rules while you use it.

Inspiration

The glass itself comes from Lab 05 of the 20 Oct labs: SVG-filter refraction, a signed-distance lens map and three displacement passes for a colour split at the rim. That is the kit's glass.js, our own code. The backdrops borrow from Paper Shaders (the Warp shader, "Kelp" preset) and from Uiverse (a wave pattern). Dragging with inertia and soft scroll reveals are GSAP.

What was added on top is the tool layer, which the kit does not have: six backdrops including your own dropped image, four shapes, four presets, nine sliders, a readability check that measures real backdrop pixels, a cost meter, a live view of the lens map, and an exporter that reuses the kit's own functions.

Visual direction

Theme, kit and licenses

Theme: Glass, on a light bench instead of dark glass. It fits because glass is the subject: the tool needs a patterned backdrop to show bending, and a calm light page keeps attention on the pane. The theme rules are followed on the page itself. The top bar is solid, the control panel is solid, the rules row sits over a still pattern, and the moving Kelp stripes are the only costly backdrop.

Kit parts used: glass.js and glass.css, paper.js (Warp "Kelp"), uv-piece.js (wave pattern), fps-chip.js (shown with ?fps). GSAP 3.15 with Draggable, InertiaPlugin and ScrollTrigger. No new libraries.

Licenses:

References

Why these choices

A glass tool has to be honest about glass, so most decisions are about cost and fallbacks. Refraction only works in Chrome and Edge, so the page labels what the visitor sees (a status pill in the top bar) and the export carries frost first, refraction as an upgrade, and a solid panel for reduced transparency. The three mode tiles let you design for all three audiences at once.

The readability check is the most useful idea. On canvas backdrops it samples the real pixels under the words. For Kelp it reads back an actual shader frame, then scores all three stripe colours because the stripes move. It offers the lightest tint that passes, a "clearer still passes" tint, or flipping the ink. The builder's own default tint failed the check and was raised to 58%.

The cost meter scores pane count, area, motion, frost, sticky and overlap, and runs five rule checks. Trade-offs: the lens map is cached by reassigning the inlined function so sliders stay smooth (the kit was not edited), and the Kelp backdrop is the only moving thing on the page. Pattern readability is estimated from two colours, and the page says so.

Who this kind of site is for

The tool: front-end builders, small-agency designers and anyone adding a glass nav or card to a site who wants a paste-ready result and a straight answer on cost and readability.

What kind of site the glass suits: studios, conservatories, spas, galleries and tech-forward local businesses, where a premium look matters and the backdrop has pattern or type to bend. It is the wrong call over flat colour, on sticky bars over animation, or for text-heavy task pages.

Pitching or reusing it: as a free lead magnet on the StarForge site, it shows we know the cost of effects, not just how to make them. A client version could swap the examples for their own words and brand colours.

How to make it

Stack and key techniques

The prompt

Build a single-file website called Glass Bench: a free tool for designing a glass panel and exporting it as one snippet. No client, tool only. Use the Brain Melt kit (glass.js and glass.css, paper.js, uv-piece.js, fps-chip.js) and GSAP 3.15 (Draggable, InertiaPlugin, ScrollTrigger). No other libraries.

Look: a light lab bench. Bench #f3f5f7, graph lines #cfd8e3, ink #10202e, cobalt #2457ff. Manrope for headlines (800, tight tracking) and JetBrains Mono for labels. Rulers on the stage, crosshairs while dragging, a dimension tag. Slow drift, inertia drags, soft reveals. Solid top bar and solid controls: never glass on a sticky bar.

Sections:
1. Hero: a test card drawn in code (Siemens star, colour bars, grey ramp, ruler ticks) behind the headline "Glass that bends what is behind it." One draggable glass slab drifts over the word "bends". Keyboard arrows move it.
2. Bench: six backdrops (moving Paper Warp Kelp, still Uiverse wave, big type on canvas, a field drawn in code, flat colour, your own dropped image that stays local). Four shapes (pill, card, circle, nav), four presets, nine sliders (width, height, radius, bend, rim, colour split, frost, tint strength, pieces in view), tint and ink pickers, a plate option, a sticky toggle, editable words. Panes drag with inertia and move with arrow keys.
3. Mode tiles: the same pane in refract, frost and off, side by side. For Kelp, use a real shader frame read back right after Paper draws.
4. Readability check: measure the real backdrop pixels under the words, score Kelp on all three stripe colours, and offer the lightest passing tint, a clearer tint that still passes, or flipping the ink.
5. Cost meter with a needle and five rule checks (one layer, two pieces at most over motion, no sticky glass, words read, something to bend) plus a live fps line.
6. Six glass rule cards over a still wave pattern, each with a button that breaks its rule on the bench.
7. How it works: show the real lens map for the current pane.
8. Export: snippet and demo page built from the kit's own lens map and filter functions, frost by default, refraction for Chrome and Edge, a solid panel for reduced transparency, a credit line. Copy, download, open in a new tab.

Rules: single file; reduced motion and reduced transparency respected; no horizontal overflow at 1440 or 390 wide; visible focus; credit Paper Shaders, Uiverse and GSAP in the footer.

Verify: screenshot at several scroll stops on desktop and a phone. Check the console for errors. Exercise every control, preset and break-it button with reduced motion on. Download both exports, open them, and emulate reduced transparency. Fix what you find and repeat.

Build notes

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, and the evidence here is the spec table plus extrapolation from earlier-generation reviews.

Feature Sonnet 5.5 with this kit Sonnet 5.5 from a blank page
Hero slab over the test card Likely does fine: the kit's bmGlass and Draggable do the work Attempts it with likely bugs: a wrong lens map, so the rim bends the wrong way or not at all
Mode tiles with a real shader frame Likely does fine on the stills; the Kelp readback timing is the risk Likely simplified away to a flat stand-in image
Readability check on real pixels Attempts it with likely bugs: Kelp scored on one frame, not its full range Likely a fixed-colour guess, not a pixel read
Cost meter and rule checks Likely does fine; it is plain logic Likely does fine but with invented numbers
Export from the kit's own functions Likely does fine, but may miss the LT trick that keeps </script> from closing the page Attempts it with likely bugs: a snippet that differs from the stage
Frost and solid fallbacks Likely does fine; the kit already switches modes Likely simplified away: refraction only, no frost or solid path
Smooth sliders (lens cache) Attempts it with likely bugs: slider lag, since the rebuild gotcha needs spotting Attempts it with likely bugs: slider lag
Gaps and polish (rulers, crosshairs, phone layout) Moderate loss: fewer secondary touches Large loss: more template-like, more overflow bugs

Overall (judgment call): Sonnet 5.5 with the kit likely keeps roughly 75 to 90 percent of the visual and functional impact in one pass. From a blank page, roughly 40 to 60 percent, mostly because the glass maths and the readback are where small errors compound. A screenshot loop and a note about the lens-map rebuild would close most of the gap with the kit. Without the kit, a separate pass on the glass filter alone would help the most.

← Previous reportNext report →