Kleri UI / Components / Magic

Magic

Enchanted interactive components with cursor-following effects.

KleriMagicCard

Card with an animated radial gradient border and inner glow that follows the cursor.

Magic Card

Hover over this card to see the magic effect.

Usage 
<KleriMagicCard
  gradientSize={200}
  gradientOpacity={0.15}
>
  Magic Card
</KleriMagicCard>

Props

KleriAnimatedBeam

Animated gradient beam connecting two elements with customizable curvature and Kleri-themed colors.

From
To
Usage 
<KleriAnimatedBeam
  curvature={0}
  reverse={false}
  pathWidth={3}
  pathOpacity={0.15}
  startXOffset={0}
  startYOffset={0}
  endXOffset={0}
  endYOffset={0}
  duration={6}
  delay={0}
  beamLength={0.1}
  interval={0}
/>

Props

Reverse

false

KleriMagicButton

Button with an animated radial gradient border and glow effect that follows the cursor.

Usage 
<KleriMagicButton
  gradientSize={150}
  gradientOpacity={0.25}
  disabled={false}
>
  Magic Button
</KleriMagicButton>

Props

Disabled

false