Button
Interactive buttons with 3D perspective and liquid metal shader effect.
Current variant:
Small
Default
Large
import { ShaderButton } from "@/components/ui/shader-button"
<ShaderButton size="default">Get Started</ShaderButton>
<ShaderButton size="sm">Small</ShaderButton>
<ShaderButton size="lg">Large</ShaderButton>
<ShaderButton size="icon"><Sparkles /></ShaderButton>Props
size: "sm" | "default" | "lg" | "icon"disabled: booleanchildren: ReactNode
Features
- 3D perspective effect
- Hover and press states
- Click ripple animation
- Liquid metal shader border
Input
Text inputs with animated shader border on focus.
Current variant:
import { ShaderInput } from "@/components/ui/shader-input"
<ShaderInput placeholder="Enter your email..." />
<ShaderInput size="sm" placeholder="Small" />
<ShaderInput size="lg" placeholder="Large" />Props
size: "sm" | "default" | "lg"disabled: boolean- All standard input props
Features
- Focus-activated shader border
- Smooth hover transitions
- Inset shadow on focus
Card
Content containers with animated shader border and hover glow.
Current variant:
import { ShaderCard, ShaderCardHeader, ShaderCardTitle, ShaderCardContent } from "@/components/ui/shader-card"
<ShaderCard>
<ShaderCardHeader>
<ShaderCardTitle>Title</ShaderCardTitle>
</ShaderCardHeader>
<ShaderCardContent>Content here</ShaderCardContent>
</ShaderCard>
// Disable glow effect
<ShaderCard glowOnHover={false}>...</ShaderCard>Badge
Small status indicators with animated shader borders.
Current variant:
Small
Default
Large
With Icon
Static
import { ShaderBadge } from "@/components/ui/shader-badge"
<ShaderBadge>Default</ShaderBadge>
<ShaderBadge size="sm">Small</ShaderBadge>
<ShaderBadge size="lg">Large</ShaderBadge>
<ShaderBadge animated={false}>Static</ShaderBadge>Props
size: "sm" | "default" | "lg"animated: boolean (default: true)children: ReactNode
Features
- Animated shader border
- Hover speed increase
- Optional static mode
HoloCard
3D holographic cards inspired by Pokemon TCG with mouse-tracking effects.
Basic
Basic glare
Holo
Rainbow holo
Galaxy
Galaxy effect
Radiant
Radiant beams
Rainbow
Rainbow rare
import { HoloCard } from "@/components/ui/holo-card"
<HoloCard holoType="holo">
<div className="p-4">Card content</div>
</HoloCard>
// Available holo types
<HoloCard holoType="basic" /> // Simple glare
<HoloCard holoType="holo" /> // Rainbow holographic
<HoloCard holoType="galaxy" /> // Galaxy/cosmos effect
<HoloCard holoType="radiant" /> // Criss-cross beams
<HoloCard holoType="rainbow" /> // Full spectrum rainbow
// With image
<HoloCard imageSrc="/card.jpg" holoType="holo" />Props
size: "sm" | "default" | "lg"holoType: "basic" | "holo" | "galaxy" | "radiant" | "rainbow"imageSrc: string (optional background)disableHolo: boolean
Features
- Mouse-tracking 3D rotation
- 5 holographic effect types
- Glare and shine layers
- Inspired by Pokemon TCG cards
Example: Form
A complete form example combining multiple shader components.