Ripple

Pulsing ripple animation effect for highlighting content like avatars, icons, or status indicators

Color Configuration

CSS Variable
64px
color="var(--brand-5)"
RGB
64px
color="rgb(34 197 94)"
HEX
64px
color="#ef4444"
RGBA
64px
color="rgba(59, 130, 246, 1)"
HSL
64px
color="hsl(45, 93%, 47%)"

Duration Configuration

Fast
64px
duration={1}
Normal (Default)
64px
duration={2}
Slow
64px
duration={3}
Very Slow
64px
duration={4}

Shape Examples

Circle

Avatar, profile pictures

Props:
{ borderRadius: "9999px" }

Rounded Rectangle

Cards, buttons

Props:
{ width: 80, height: 48, borderRadius: "12px" }

Large Rounded

Feature cards

Props:
{ width: 96, height: 64, borderRadius: "16px" }

Pill Shape

Tags, badges

Props:
{ width: 96, height: 40, borderRadius: "9999px" }

Square

Icons, thumbnails

Props:
{ width: 56, borderRadius: "8px" }

Small Circle

Status indicators

Props:
{ width: 16, borderRadius: "9999px" }

Variants

Fill (Default)

Box-shadow fill effect

Props:
{ variant: "fill" }

Border

Outline ring effect

Props:
{ variant: "border" }

Real-world Usage

Avatar with Status

User profile with online indicator

Props:
{ nested: true }
Avatar

Success Avatar Update

Highlighting updated content

Props:
{ width: 64 }
Avatar

Notification Badge

New notification indicator

Props:
{ width: 12 }

Action Button

CTA button with attention pulse

Props:
{ width: 135, height: 48, borderRadius: "9999px" }

Props Reference

PropTypeDefaultDescription
widthnumber64Ripple width in pixels
heightnumber= widthRipple height in pixels (defaults to width)
borderRadiusstring9999pxBorder radius (e.g., "9999px", "12px", "8px")
colorstringvar(--brand-5)Supports CSS variable, HEX, RGB, RGBA, HSL formats
durationnumber2Animation duration in seconds
classNamestring-Additional CSS classes for the container
childrenReactNode-Content to display in center

Usage Guidelines

  • ✓Match ripple shape to content shape using borderRadius
  • ✓Use width and height for non-square shapes
  • ✓Faster animations (1-2s) for alerts, slower (3-4s) for ambient indicators
  • ✗Avoid using multiple ripples in close proximity
  • ✗Don't use on elements that already have animations