# glass-design-system: I shipped Apple SVG refraction, not the WebGL registry

Source: https://www.michaelchurley.com/blog/glass-design-system-apple-svg-refraction-showcase  
Published: 2026-08-08  
Author: Michael C. Hurley  
Tags: glass-design-system, apple-glass, svg, displacement, catppuccin, nextjs, tailwind, shadcn, martech, design-system, twelveux-sibling

![Glass Design System home, video hero and glass contact form](/blog/glass-design-system-apple-svg-refraction-showcase/screenshots/home.png)

## 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:

1. **Apple Liquid Glass.** `GlassPanel` + `src/lib/displacement.ts`. SVG displacement map, chromatic aberration, strength/depth/radius props, `backdropFilter: url(...)`.
2. **AnimatedBorder.** `@property --conic-gradient-angle`, mask compositing, optional glow. Pink to Blue Catppuccin conic.
3. **Glass morphism.** Layered `color-mix` gradients + blur. Opacity got walked down hard so the displacement stays visible.
4. **GlassNav.** framer-motion jelly indicator that follows the active route.
5. **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`.

![Components showcase, glass cards over photographic backdrop](/blog/glass-design-system-apple-svg-refraction-showcase/screenshots/components-loaded.png)

## 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?

![About page on Glass Design System](/blog/glass-design-system-apple-svg-refraction-showcase/screenshots/about.png)