Who
I needed liquid glass on the web that bent the photograph behind it. A CSS blur was not enough. A WebGL sphere from a registry was the wrong shape for this demo.
That operator is me on a March afternoon with a BRIEF.md that names five effects and hard rules: real Catppuccin dark: classes, no filter: invert(), Tailwind v4 only, Next 16.
It is also anyone comparing two glass paths in my queue. twelveux ships pen.dev glass.glsl as a hosted shadcn item. This repo is the other path: SVG feDisplacementMap, animated conic borders, jelly nav, Apple-style sidebar. A full demo site over HustleLaunch photo and video plates.
Frontend builders who live in shadcn New York primitives but want the chrome to refract. Catppuccin people who refuse grayscale hacks. MarTech / indie product people who need cards, forms, dialogs, and a contact sidebar that still read when the backdrop is a real campaign still.
What
I built glass-design-system: Next.js 16.2.6, React 19.2.6, Tailwind 4.3, shadcn New York, package 0.1.0 private. Bun lockfile. Live title: Glass Design System.
Five effects from the project brief, all in the tree:
- Apple Liquid Glass.
GlassPanel+src/lib/displacement.ts. SVG displacement map, chromatic aberration, strength/depth/radius props,backdropFilter: url(...). - AnimatedBorder.
@property --conic-gradient-angle, mask compositing, optional glow. Pink to Blue Catppuccin conic. - Glass morphism. Layered
color-mixgradients + blur. Opacity got walked down hard so the displacement stays visible. - GlassNav. framer-motion jelly indicator that follows the active route.
- Catppuccin Mocha / Latte. Real tokens in
globals.css. Geist on the page (Max stays on twelveux / uncap / hms).
Glass barrel at src/components/glass/: panel, border, card, nav, button, dialog, sheet, sidebar (+ provider), form controls, use-glass-surface.
Routes:
/: video hero, YouTube embed, glass contact form in AnimatedBorder, value copy, CTA./components: ~3,215 lines. Commit message says 80+ example variations across commerce, auth, analytics, productivity, messaging, and states./about: content page using the system.
Layout shell: sticky GlassNav + non-modal right GlassSidebar titled Quick Contact.
Backgrounds under public/bg/: hero-video.webm, hero-michael.jpg, campaign-monitoring.webp, web-designer.png, and the rest of the HustleLaunch stills. March 21 replaced flat gradient section shells with full-width photographic plates so the glass has something to bend.
Reference originals stay in-tree (reference-apple-glass/, reference-animated-border.css). Fallow marks them unused. That is honest: they are the port sources, not runtime.
Fallow REVIEW snapshot: ~10,194 LOC, dead files 11.1%, dead exports 24.9%, one circular dep. GlassSheet / GlassButton / GlassSidebar sit in the high-CRAP table. Live response sends X-Robots-Tag: index, follow.
Where
Live: https://glass-design-system.vercel.app
Repo: https://github.com/michaelmonetized/glass-design-system
Homepage field on GitHub points at that Vercel app. Adjacent systems in the same operator map: twelveux (WebGL registry Glass), modern-design-playground (WebGL instrument + nine worlds), uncap.us and hms (Max + Catppuccin product surfaces, different jobs).
When
2026-03-05, 1:41 PM ET. Brief + reference files.
2:12. Core feat: apple glass refraction, animated borders, jelly nav, Catppuccin.
2:30–3:14. Photo/video sections, HustleLaunch assets, local webm instead of a dead WordPress URL, fixed parallax plates.
3:23–3:53. Opacity and contrast wars: glass-morphism thin enough for displacement, Tailwind utility backgrounds overridden, nav readable, gradient repeat tuned, button/dialog/sheet contrast fixed.
4:01–4:31. Apple-style non-modal glass sidebar, glass form components, hero wireframe iterations until video left + form right matched the layout.
Sixteen commits the same afternoon.
2026-03-21, 7:25–9:35 AM ET. Comprehensive showcase (80+), mobile 375px stacking, animated gradients then real /public/bg/ assets, full-width absolute section shells.
2026-06-22. Two nightly commits.
2026-08-08, 6:49 AM ET. HEAD 0814e1f, X-Robots-Tag index, follow. Same robots batch as several sibling Vercel repos that morning. 24 commits on main.
Why
I already had Apple-glass and animated-border references sitting as ports. I wanted them inside Next 16 / Tailwind 4 / shadcn with Catppuccin that does not cheat.
Glass only proves itself against a photograph or a video plate. Gradients flatter. The March 21 backdrop swap is the reason the showcase exists at that density.
twelveux answers a different question: can I npx Max, theme, and a real WebGL Glass shader. This repo answers: can the whole chrome stack refract with SVG displacement and still ship a contact sidebar and an 80-variation gallery.
Engagement
If you already run twelveux Glass, what breaks first when you try SVG displacement over a busy campaign still: chromatic fringe, text contrast, or the nav jelly fighting the sidebar?
