Components

Creative Cards

A collection of highly interactive, physics-driven, and mathematically aesthetic card components.

Glow Border

Hover Glow

The border illuminates based on cursor proximity.

Glow Color

#ffffff

<GlowCard 
    glowColor="#ffffff" 
    className="rounded-xl p-8"
>
    <h3>Content</h3>
</GlowCard>

Gradient Spin

Animated Border

Simulated conic gradient rotation.

Rotation Speed3s

Lower is faster.

<GradientBorderCard 
    speed={3} 
    colors={["#ff0080", "#7928ca", "#ff0080"]}
>
    Content
</GradientBorderCard>

Cinematic Noise

TEXTURE

Procedural Grain Generation

Noise Opacity0.05

<NoiseCard 
    noiseOpacity={0.05} 
    baseColor="black"
>
    Content
</NoiseCard>

Pattern Reveal

dots

Pattern Type

<PatternRevealCard 
    pattern="dots" 
    className="rounded-xl"
>
    Content
</PatternRevealCard>

Components

Creative Cards

A collection of highly interactive, physics-driven, and mathematically aesthetic card components.

Glow Border

Hover Glow

The border illuminates based on cursor proximity.

Glow Color

#ffffff

<GlowCard 
    glowColor="#ffffff" 
    className="rounded-xl p-8"
>
    <h3>Content</h3>
</GlowCard>

Gradient Spin

Animated Border

Simulated conic gradient rotation.

Rotation Speed3s

Lower is faster.

<GradientBorderCard 
    speed={3} 
    colors={["#ff0080", "#7928ca", "#ff0080"]}
>
    Content
</GradientBorderCard>

Cinematic Noise

TEXTURE

Procedural Grain Generation

Noise Opacity0.05

<NoiseCard 
    noiseOpacity={0.05} 
    baseColor="black"
>
    Content
</NoiseCard>

Pattern Reveal

dots

Pattern Type

<PatternRevealCard 
    pattern="dots" 
    className="rounded-xl"
>
    Content
</PatternRevealCard>

Frame

Creative Cards

Glow Border

Hover Glow

Gradient Spin

Animated Border

Cinematic Noise

TEXTURE

Pattern Reveal

Creative Cards

Glow Border

Hover Glow

Gradient Spin

Animated Border

Cinematic Noise

TEXTURE

Pattern Reveal