Explosion Text

The Explosion Text component creates an animated explosion effect when clicked, where characters scatter and reassemble. Customize the animation speed, color, direction, and more for a unique experience.

Overview

The ExplosionText component creates a fun and engaging animation where each character of the text explodes into particles when clicked. This component is perfect for adding interactive text effects to your project.

You can customize the explosion's duration, color, and direction, creating a dynamic user experience.

Preview

Explosion Text

Usage

'use client'
 
import { ExplosionText } from '@/components/text/explosion-text'
 
<ExplosionText text="Explosion Text" />

Code

'use client'
 
import { useState, useEffect, useRef } from 'react'
 
import { motion } from 'motion/react'
 
import { cn } from '@/lib/utils'
 
interface ExplosionTextProps {
  text: string
  duration?: number
  explosionColor?: string
  direction?: 'top' | 'bottom' | 'left' | 'right'
  resetDelay?: number
  className?: string
  as?: React.ElementType
}
 
export function ExplosionText({
  text,
  duration = 0.5,
  explosionColor = '#ff0000',
  direction = 'top',
  resetDelay = 1000,
  className,
  as: Component = 'span',
}: ExplosionTextProps) {
  const MotionComponent = motion.create(Component)
 
  const [exploded, setExploded] = useState(false)
  const [currentIndex, setCurrentIndex] = useState(0)
 
  const intervalRef = useRef<NodeJS.Timeout | null>(null)
 
  const handleClick = () => {
    setExploded(true)
    setCurrentIndex(0)
 
    // Clear previous interval
    if (intervalRef.current) clearTimeout(intervalRef.current)
 
    intervalRef.current = setInterval(() => {
      setCurrentIndex((prevIndex) => {
        if (prevIndex >= text.length - 1) {
          if (intervalRef.current) clearInterval(intervalRef.current)
          setTimeout(() => setExploded(false), resetDelay)
        }
        return prevIndex + 1
      })
    }, 50)
  }
 
  useEffect(() => {
    // Cleanup interval on unmount to prevent memory leaks
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }, [])
 
  return (
    <div
      className={cn('cursor-pointer text-4xl font-bold', className)}
      onClick={handleClick}
    >
      {text.split('').map((char, index) => (
        <MotionComponent
          key={index}
          animate={
            exploded && index < currentIndex
              ? {
                  y: [
                    0,
                    direction === 'top' ? -50 : direction === 'bottom' ? 50 : 0,
                  ],
                  x: [
                    0,
                    direction === 'left' ? -50 : direction === 'right' ? 50 : 0,
                  ],
                  opacity: [1, 0],
                  scale: [1, Math.random() * 0.5 + 0.5],
                  color: explosionColor,
                }
              : {
                  y: 0,
                  opacity: 1,
                  scale: 1,
                }
          }
          transition={{
            duration: duration,
            delay: index * 0.05,
          }}
        >
          {char}
        </MotionComponent>
      ))}
    </div>
  )
}

Examples

duration

The duration is used to explosion animation duration to 1 second for each character.

Explosion Duration

explosionColor

The explosionColor is used to custom explosion color.

Explosion Color

direction

The direction is used to explodes in the bottom direction.

Explosion Bottom

resetDelay

The resetDelay is used to reset delay after explosion effect.

Explosion Reset Delay

className

The className is used to allowing you to add custom styling to the component.

Explosion Text Color

Props

Prop	Type	Default
`text`	`string`	-
`duration`	`number`	`0.5`
`explosionColor`	`string`	`'#ff0000'`
`direction`	`"top" \| "bottom" \| "left" \| "right"`	`'top'`
`resetDelay`	`number`	`1000`
`className`	`string`	-
`as`	`ElementType<any, keyof IntrinsicElements>`	`"span"`

On this page