Back

Microanimations Lab

Pre-built, configurable React animation components. Copy, paste, and customize.

Click Me

Fluid Blob

An organic, liquid-like morphing border that wraps around content. Perfect for CTAs and buttons.

Props

duration: numberstrokeColor: stringstrokeWidth: numberintensity: number
<FluidBlob
  strokeColor="#eab308"
  duration={10}
  intensity={1}
>
  Click Me
</FluidBlob>
3

Pulse Ring

Concentric rings that pulse outward. Great for drawing attention to notifications or status indicators.

Props

rings: numberduration: numbercolor: stringopacity: number
<PulseRing
  rings={3}
  duration={2}
  color="#eab308"
  opacity={0.3}
>
  <NotificationBadge />
</PulseRing>
Hover & Move

Magnetic Text

Text that follows your cursor with a magnetic pull effect. Adds playful interactivity.

Props

strength: number
<MagneticText strength={0.4}>
  Hover & Move
</MagneticText>
Glowing Text

Glow Text

Text with a pulsing glow effect. Perfect for highlighting important messages.

Props

color: stringduration: numberintensity: number
<GlowText
  color="#eab308"
  duration={2}
  intensity={20}
>
  Glowing Text
</GlowText>
Wavy Link

Wave Underline

An animated wavy underline that brings text to life.

Props

color: stringduration: numberwaveHeight: numberfrequency: number
<WaveUnderline
  color="#eab308"
  duration={2}
  waveHeight={4}
  frequency={3}
>
  Wavy Link
</WaveUnderline>
Breathing

Breathing Border

A gradient border that pulses with a breathing effect.

Props

color: stringduration: numberborderRadius: string
<BreathingBorder
  color="#eab308"
  duration={3}
  borderRadius="12px"
>
  <Button>Breathing</Button>
</BreathingBorder>

Installation

Copy the component files to your project and import them:

import { FluidBlob, PulseRing, MagneticText } from '@/components/lab';

All components are self-contained with no external dependencies beyond React.