Glass
A self-contained glassmorphism theme preset — a frosted, translucent panel with a white top-edge highlight, soft inner glow, and 1px light border floating over a soft, vibrant blurred gradient ground that shows through, with nested glass chips for layered depth. A keyboard-operable radiogroup of mood chips re-tints the ground and accents live (Aqua / Violet / Peach) while the frost stays; reduced motion pins the drifting orbs to a calm static frosted frame.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/glassManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | string | Controlled active preset id (matches a preset's id). | |
| defaultVariant | string | "aqua" (first preset) | Initial preset id when uncontrolled. |
| onVariantChange | (id: string) => void | Fires with the next preset id whenever the switcher changes. | |
| presets | GlassPreset[] | the three built-in moods | Override the built-in preset set (chips + palettes). |
| colors | Partial<GlassPalette> | Token overrides merged over the active preset — makes any palette reachable. | |
| speed | number | 1 | Orb-drift speed multiplier. |
| intensity | number | 1 | Frost blur + glow strength multiplier. |
| paused | boolean | false | Freeze the ground at a static frosted frame. |
| tagline | string | "OVERVIEW" | Small mono label above the heading. |
| heading | string | "Clearlight" | Display heading. |
| description | string | "Frosted panels over soft light. Pick a mood." | Body line under the heading. |
| statValue | string | "98" | Stat figure. |
| statLabel | string | "CLARITY" | Stat unit / label. |
| progress | number | 0.72 | Progress fraction, 0–1, shown in the depth meter. |
| tag | string | "LAYER 3" | Small pill tag. |
| primaryLabel | string | "Continue" | Filled button label. |
| secondaryLabel | string | "Dismiss" | Ghost button label. |
| label | string | "Glassmorphism theme preset" | Accessible label for the panel region. |
| switcherLabel | string | "Theme mood" | Accessible label for the switcher group. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"section">, "onChange"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.