🎨 Animation Showcase

All available animations with their class names. Hover where indicated to see hover effects.

animate-border-stroke

Pulsing inset border — gentle inner glow that thickens and fades

animate-ring-stroke

Outer ring pulse — expanding glow ring radiating outward

conic-border-card

Conic rotating gradient — colorful border that spins around the card

animate-border-trace

Border trace on hover — border draws itself clockwise (hover me!)

glow-border-card

Glow border on hover — soft yellow aura + border color change (hover me!)

marching-border-card

Marching ants — dashed border that marches continuously around the card

shimmer-card

Shimmer sweep — a golden light highlight that sweeps across periodically

soft-float-card

Soft float glow — card gently lifts with a pulsing golden shadow

breathe-border-card

Border breathe — border opacity and glow pulse gently like breathing

animate-wiggle

Wiggle — subtle side-to-side rotation and scale pulse

animate-flashy

Flashy pulse — scaling pulse with glowing box-shadow

feature-card

Feature glow — scaling card with surrounding yellow glow

animate-bounce-down

Bounce down — vertical translation for scroll indicators

Text Stroke

animate-text-stroke

Text stroke — pulsing text-shadow that creates a golden stroke

animate-float

Float — slow, gentle vertical movement

animate-page-enter

Page enter — fade-in and slide-up entrance (re-trigger by reloading)

📌 How to use

Simply add the class name to any element. For example:

<div className="animate-border-stroke p-4 rounded-xl bg-white">
  Content here
</div>

All animations are defined in src/index.css. You can adjust colors, timing, and intensity there.