Fluted Glass
Reeded-glass refraction over an image or spectrum art; the flutes slide with scroll and lean with the pointer.
Controls
<FlutedGlass />About
A pane of reeded glass in front of a picture. The view is cut into vertical flutes; each behaves like a half-cylinder that pulls what is behind it toward its centre (most at its edges), softens it a little, catches a highlight just off-centre and leaves a shadow in each groove. Behind the glass is your image, cover-fitted, or soft spectrum art that drifts slowly. Scrolling slides the flutes across the scene and the pointer leans them, so the glass feels physical. It runs on the shared WebGL2 stage; without hardware WebGL2 a CSS version keeps the image (slightly softened) under real flute shading. Original to VibeBox Motion.
Use it when
- Interiors, cafés, salons, studios and architecture sites want a tactile, crafted hero.
- A photo needs to sit behind text without competing with it.
Skip it when
- The image must be seen clearly (a product photo or a face); the glass distorts it on purpose.
- The image is cross-origin without CORS; it cannot be drawn into WebGL (the CSS version still shows it).
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistProps
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | An image behind the glass (same origin, a data URL, or served with CORS). Without it, soft spectrum art. |
| alt | string | — | Describes the image when it carries meaning; otherwise the glass is decorative. |
| children | ReactNode | — | What sits on the glass. |
| flutes | number | 14 | Flutes across the width. |
| strength | number | 0.6 | How strongly each flute bends what is behind it, 0 to 1. |
| frost | number | 0.4 | Softness of the glass, 0 (clear) to 1 (frosted). |
| interactive | boolean | true | Scroll and the pointer slide the flutes across the scene. |
| className | string | — | Merged with cn(); give it a size and radius. |
Accessibility and motion
- Keyboard
- Not focusable; content on it keeps its own focus order.
- Screen readers
- Decorative unless
altdescribes the image, then an image with that name. - Touch
- Scrolling slides the flutes; a finger leans them; scrolling is never blocked.
- Reduced motion
- One still frame of the glass; no drift, scroll or pointer movement.
Edge cases and limits
- Cross-origin images need CORS headers to reach WebGL; otherwise the CSS version shows.
- Very many flutes with high
strengthscramble the image; keepstrengthunder 0.8 above 24 flutes.
Related
Sunlight through moving water, over any section: caustic light that wanders and ripples under the pointer.
Backgrounds · WebGL2
Spectrum Mesh
FreeA soft spectrum mesh gradient that drifts behind your content and leans toward the cursor; still under reduced motion.
Backgrounds · WebGL2
A before-and-after slider whose edge is a wobbling liquid seam; drag, tap or use the arrow keys.
Cursor and touch · WebGL2