Hellooooooo DEV Community!
About 9 months ago, I shared my first ever npm package here — react-flexi-window, a draggable and resizable window component for React. The response was really encouraging, and I've been working on it ever since.
Today I'm excited to share v2.0 — and it's a big one. I built a custom WebAssembly optics engine in Rust and shipped it as a new feature called the Material System. The first material is Liquid Glass — a refractive lens effect that actually bends background pixels through the window edges using real Snell's Law physics.
What changed from v1?
In v1, react-flexi-window was all about the basics — drag, resize, boundary constraints, and a built-in color system. That hasn't changed, but v2.0 adds an entirely new layer: materials.
Instead of just styling the window with colors and blur, you can now apply physically-based visual effects:
import WindowComponent, { liquidGlass } from 'react-flexi-window';
<WindowComponent
w={400} h={300} x={100} y={100}
material={liquidGlass(16, 3, 12)}
boundary={true}
>
<div style={{ padding: '20px', color: 'white' }}>
Content behind glass
</div>
</WindowComponent>
Three numbers — radius, blur, bezelWidth — and you get a glass window that refracts whatever is behind it. No configuration files, no external assets, no loading spinners.
How the Liquid Glass engine works
I wanted something that goes beyond a CSS backdrop-filter: blur() trick. Blur makes things look frosted, but it doesn't bend pixels — it doesn't create that lens-like distortion you see in real glass. For that, you need per-pixel displacement mapping.
Here's what happens under the hood:
1. Snell's Law in Rust/WASM
I wrote a small Rust module (~6KB compiled) that computes displacement and specular maps using Snell's Law refraction. It runs with no_std and no allocator — zero garbage collection overhead.
The WASM binary is base64-inlined directly into the JS bundle. No network fetch, no external files. It just works.
2. 9-Slice rendering
The computed maps get split into 9-slice parts (corners + edges + center), then assembled into SVG filters. This means the glass effect scales to any window size without re-running the refraction math every time you resize.
3. Single-pass SVG backdrop filter
Everything runs through one SVG backdrop-filter pipeline:
- Blur → soft background
- Displacement → actual pixel bending at the edges
- Specular → depth and light highlights for realism
4. SSR safe
All browser APIs (Canvas, WebAssembly) are called inside useLayoutEffect. If you're using Next.js or any SSR framework, the server render produces clean HTML with zero hydration issues.
Still zero dependencies
One thing I'm proud of is that this is still a zero-dependency package (React is the only peer dependency). The entire thing — including the WASM engine — is ~14KB gzipped. No heavy graphics libraries, no runtime downloads.
Everything from v1 is still here
All the features from the original release are still there:
- Drag & Resize — edges and corners
- Assistive Resize Handles — large 40×40px corner handles during interaction
- Boundary Constraints — lock windows to viewport
- Color System —
windowColor="blue-500/30"syntax - Responsive — auto-adjusts on viewport changes
- Smart Interactions — respects buttons, inputs, links
- TypeScript — full type definitions
What's next?
The material system is designed to be extensible. I'm planning these next:
| Material | What it does |
|---|---|
| Frosted Glass | Diffuse scattering with adjustable roughness |
| Chromatic Aberration | Color-split refraction for prismatic effects |
| Acrylic | Windows 11 Fluent-style layered translucency |
Got an idea for a material? Open an issue!
Try it out
npm install react-flexi-window
Building this WASM engine and getting it to work inline with zero dependencies was one of the most fun engineering challenges I've taken on. If you found this interesting, a ⭐ on GitHub would mean a lot. And if you have questions about the WASM pipeline or the optics math, I'd love to chat in the comments!
Thanks for the support on v1 — here's to v2!
Top comments (0)