Material · mesh · Paid
Gem Haze
Glassy smoke field for heroes and framed cards. Stand-in for image-bound fluted glass.
- Type
- mesh
- Contexts
- hero · card
- Tags
- mesh · smoke · gem · glass
- Perf
- webgl · GemSmoke with shape is mid-heavy — one hero or card; prefer static in grids.
Configurator
Pause freezes the live preview. Reduced motion uses the CSS shell fallback. Reset restores catalog defaults and clears config URL params. Share config copies this page link.
Get access
teamCLI
npx shadcn@latest add @frameline/gem-haze
Copy-paste path
components/ui/gem-haze.tsx
Drop source beside your UI kit, or paste JSX from the panel below after install.
Install unlocks after purchase. Preview JSX is for evaluation. Full install guide.
License
$299Team
Client-work rights · seats · invoice-ready.
Permitted
- Everything in Personal
- Client deliverables and multi-seat clarity
- Priority support
Not permitted
- Redistribute source packages
- Resell materials in templates or asset kits
Compare Free, Personal, and Team on Pricing.
JSX
import { GemHaze } from "@/materials";
<GemHaze
speed={0.65}
scale={0.7}
size={0.85}
outerGlow={0.6}
innerGlow={0.9}
innerDistortion={0.75}
outerDistortion={0.55}
angle={15}
offset={0.05}
colorBack="#0A0A0A"
colorInner="#1A1A2E"
colors={["#2D6BFF","#AF52DE","#E8F0FF"]}
className="absolute inset-0"
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| speed | number | 0.65 | Animation speed |
| scale | number | 0.7 | Pattern scale |
| size | number | 0.85 | Gem size |
| outerGlow | number | 0.6 | Outer glow |
| innerGlow | number | 0.9 | Inner glow |
| innerDistortion | number | 0.75 | Inner warp |
| outerDistortion | number | 0.55 | Outer warp |
| angle | number | 15 | Rotation angle |
| offset | number | 0.05 | Center offset |
| colorBack | color | #0A0A0A | Background color |
| colorInner | color | #1A1A2E | Inner color |
| colors | colors | #2D6BFF, #AF52DE, #E8F0FF | Smoke colors |
Frameline
Design assets for the AI era — shippable surface so you don’t ship the default look.
© 2026 Frameline. All rights reserved.
Sera · Stone · Blue