The Forge
Premium glass morphism components with conic gradient borders, multi-layer shadows, CSS Houdini properties, and Canvas 2D particle effects. Every surface is forged.
Origin
The Original Glass Component
The source of truth. Everything in Forgemaster derives from this single styled-component — 5-20% opacity, conic gradient border with CSS Houdini, 3D rotate on press, 7-layer shadow stacking.
Background
rgba(255,255,255, 0.05 → 0.2)
True glass, not metallic silver
Border
Conic gradient with CSS Houdini --angle-1
Rotates on hover via custom property transition
Interaction
rotate3d(1,0,0,25deg) on active
3D tilt + shadow shift + sheen sweep
Palette
Color System
Bronze, gold, ember, silver, and glass tokens. Warm parchment backgrounds with fire-tinted accents.
Bronze
50
#FDF6EF
300
#EBAF77
500 (Primary)
#C4956A
700
#935F41
900
#633F32
Gold
50
#FDFAED
300
#EFCF55
500 (Primary)
#D4AF37
700
#A66D0F
900
#734615
Ember
50
#FFF5ED
300
#FFA968
400 (Primary)
#FF8533
600
#C44F08
900
#612A12
Canvas
#FAF7F2
Canvas Secondary
#F3EDE4
Elevated
#FFFFFF
Text Primary
#1A1A1A
Text Secondary
#52525B
Text Muted
#A1A1AA
Surfaces
Forged Cards
Three card variants with conic gradient borders, multi-layer shadows, and sheen sweeps. Hover to see the border rotate.
Glass
Translucent surface with backdrop blur. The default card for content blocks and features.
Hover to see the conic border rotate and sheen sweep.
Gold
Solid bronze gradient surface for emphasis, pricing tiers, and premium features.
Gold-tinted conic border with bronze glow halo.
Ember
Fire-tinted gradient for urgent actions, warnings, and high-energy call-to-actions.
Ember conic border with orange glow halo.
Small
Compact
Medium
Default
Large
Spacious
import { ForgeCard, ForgeCardTitle } from "@/components/forge";
<ForgeCard variant="glass" size="md">
<ForgeCardTitle>Glass Card</ForgeCardTitle>
<p>Content</p>
</ForgeCard>Interactions
Strikes
Direct port of the OG glass-card button — shadow layer, sheen sweep, and 3D rotate3d press. Click and hold to feel the press.
Glass
Gold
Ember
Ghost
import { ForgeButton } from "@/components/forge";
<ForgeButton variant="glass" size="md">Click Me</ForgeButton>
<ForgeButton variant="gold" size="lg">Get Started</ForgeButton>
<ForgeButton variant="ember" size="sm">Deploy</ForgeButton>Forms
Channels
Translucent inputs with backdrop blur, gold focus accent lines, and ember error states.
Please enter a valid email address.
import { ForgeInput, ForgeTextarea } from "@/components/forge";
<ForgeInput placeholder="Enter text..." />
<ForgeInput error placeholder="Invalid..." />
<ForgeTextarea placeholder="Message..." />Loading
The Bellows
Three loader variants — spinning conic gradient ring, pulsing ember dots, and a forge progress bar with trailing sparks.
Spinner
sm
md
lg
Ember Dots
sm
md
lg
Forge Bar
sm
md
lg
Overlays
Forge Dialog
Radix Dialog primitive with Forge glass treatment — backdrop blur, ember glow shadow, scale-in entrance animation.
Accents
Badges & Dividers
Status badges with gradient fills and section dividers with gold center diamonds.
Badges
Horizontal Dividers
Default
With Diamond
Vertical Dividers
Effect
Glitch Text
CSS-only glitch using ::before and ::after with clip-path animations. Ember and gold offset layers. Hover to trigger.
FORGEMASTER
Hover the text above
Tactile
The Press
Click and hold the button below. Feel the 3D rotate3d tilt, watch the shadow compress, the sheen snap. Direct port from the OG glass-card.tsx — not a CSS approximation.
Hover for tooltips. Click for 3D press.
<200ms
Token changes propagate to all components in under 200 milliseconds. Every button, card, and input updates in real time.