Component Library

Browse, preview, and copy components

Visual Effects Library

A comprehensive collection of glassmorphism, neon, gradient, and animation effects to create stunning modern interfaces.

Glassmorphism Cards

Default Glass

Standard glassmorphism effect

Clean and minimal glass effect with subtle backdrop blur.

Frosted Glass

Enhanced frosted effect

Premium frosted glass with inner shadow and glow.

Colored Glass

Primary color tinted

Spotlight effect follows your cursor on hover.

Glass Panels

Default Panel with Mesh

A versatile panel with mesh background gradient for depth.

Gradient Panel with Grain

Subtle grain texture adds visual interest and depth.

Neon Panel

Cyberpunk-inspired neon glow effect with inner illumination.

Solid Panel

Maximum blur and opacity for prominent UI elements.

Gradient Text

Primary Gradient
Rainbow Animated
Sunset Gradient
Ocean Gradient
Aurora with Glow
Gold Gradient

Neon Buttons

Shadow Effects

Glow SM

Glow MD

Glow LG

Glow XL

Elevation 1

Elevation 2

Elevation 3

Elevation 4

Elevation 5

Soft

Soft LG

Neon

Neon LG

Animations

Pulse Glow

Shimmer

Float

Bounce Soft

Wiggle

Heartbeat

Spin Slow

Gradient X

Interactive 3D Cards

3D Tilt Card

Move your mouse over this card to see the 3D tilt effect with glare.

Glass Tilt Card

Combines glassmorphism with 3D perspective effects.

Glow Tilt Card

Glowing effect with scale animation on hover.

Spotlight Effects

Spotlight Card 1

Move your cursor around to see the spotlight follow.

Spotlight Card 2

Custom accent color spotlight effect.

Spotlight Card 3

Great for feature grids and pricing cards.

Parallax Depth Cards

Depth Layer 1

Middle content layer

Depth Layer 2

Floating elements pop out

Premium

Magnetic Buttons

Animated Borders

Gradient Border

Smooth gradient animation along the border.

Rainbow Border

Rotating rainbow colors effect.

Glow Border

Blurred rotating glow effect.

Pulse Border

Pulsing border animation.

Custom Colors

Use custom color arrays for unique effects.

Spotlight Border

Border highlights follow your cursor.

Utility Classes

Gradient Border

Use border-gradient class

Hover Lift

Use hover-lift class

Noise Texture

Use noise class

Shimmer Effect

Use shimmer class