Animocon

Animated icon buttons with multiple burst and ring animation effects using motion, inspired by mo.js Animocons. Supports toggle states, customizable colors, and 11 different animation effects.

Basic

Delayed

Multicolor

Swirl

Angled

Lines

Large Swirl

Multiple

Dual Direction

Rings Only

Heart Rings

// Code for animocon/basic

// Code for animocon/basic

Installation

Loading installation instructions...

Usage

import { Animocon } from "@/components/pluto-ui/animocon"

import { Animocon } from "@/components/pluto-ui/animocon"
import { ThumbsUp, Heart, Sparkles } from "lucide-react"

// Basic usage
<Animocon icon={<ThumbsUp />} />

// Different effects
<Animocon icon={<Heart />} effect="multicolor" />
<Animocon icon={<ThumbsUp />} effect="swirl" />
<Animocon icon={<Heart />} effect="heart-rings" />

// Custom colors
<Animocon 
  icon={<Heart />} 
  effect="multicolor"
  activeColor="#F35186"
/>

// Custom size and colors
<Animocon
  icon={<ThumbsUp />}
  effect="basic"
  size="lg"
  activeColor="#988ADE"
  inactiveColor="#C0C1C3"
  onToggle={(checked) => console.log(checked)}
/>

Props

Prop	Type	Default	Description
`icon`	`ReactNode`	-	The icon element to display
`effect`	`AnimoconEffect`	`"basic"`	Animation effect type
`className`	`string`	-	Additional CSS classes
`activeColor`	`string`	`"#988ADE"`	Color when the button is active/checked
`inactiveColor`	`string`	`"#C0C1C3"`	Color when the button is inactive/unchecked
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the icon button
`onToggle`	`(checked: boolean) => void`	-	Callback fired when button is toggled
`disabled`	`boolean`	`false`	Whether the button is disabled

Effects

The effect prop accepts the following values:

"basic" - Simple burst + ring + elastic scale (default)
"delayed" - Burst with delay
"multicolor" - Multi-color burst with shrinking particles
"swirl" - Swirl burst effect with rotating particles
"angled" - Angled burst (partial arc, 15 particles)
"lines" - Line particles instead of circles (20 lines)
"large-swirl" - Large swirl with double ring (18 particles)
"multiple" - Multiple sequential bursts
"dual-direction" - Two bursts in different directions with rotation
"rings-only" - Just rings, no burst particles
"heart-rings" - Multiple small rings (heart effect)

Examples

Different Effects

// Basic effect
<Animocon icon={<ThumbsUp />} effect="basic" />

// Multicolor burst
<Animocon icon={<Heart />} effect="multicolor" activeColor="#F35186" />

// Swirl effect
<Animocon icon={<Sparkles />} effect="swirl" />

// Heart rings
<Animocon icon={<Heart />} effect="heart-rings" activeColor="#F35186" />

Custom Colors

<Animocon
  icon={<ThumbsUp />}
  effect="basic"
  activeColor="#6F97F7"
  inactiveColor="#999"
/>

Different Sizes

<div className="flex gap-4 items-center">
  <Animocon icon={<ThumbsUp />} size="sm" />
  <Animocon icon={<ThumbsUp />} size="md" />
  <Animocon icon={<ThumbsUp />} size="lg" />
</div>

With Toggle Handler

<Animocon
  icon={<Heart />}
  onToggle={(checked) => {
    if (checked) {
      console.log("Liked!");
    } else {
      console.log("Unliked!");
    }
  }}
/>

Notes

The component uses motion/react (framer-motion) for animations
Burst particles animate outward when the button is clicked
Ring animations expand from the center
The icon scales with a spring animation

Credits

This component was inspired by https://tympanus.net/codrops/2016/02/23/icon-animations-powered-by-mo-js/

Animocon

On this page