Magnetic Characters Text

A text component where individual characters dynamically respond to hover, creating an engaging magnetic-like effect.

Overview

MagneticCharactersText is an interactive text component where each character reacts individually to hover, simulating a magnetic pull effect. This creates a dynamic and engaging user experience, making text elements feel more alive. The component is built using framer-motion for smooth animations.

You can easily customize its appearance using the className prop, allowing you to adjust font size, colors, spacing, and other styles to match your design needs.

Preview

Magnetic Characters

Usage

'use client'
 
import { MagneticCharactersText } from '@/components/text/magnetic-characters-text'
 
<MagneticCharactersText text="Magnetic Characters" />

Code

'use client'
 
import { useState } from 'react'
 
import { motion } from 'motion/react'
 
import { cn } from '@/lib/utils'
 
interface MagneticCharactersTextProps {
  text: string
  className?: string
  as?: React.ElementType
}
 
export function MagneticCharactersText({
  text,
  className,
  as: Component = 'span',
}: MagneticCharactersTextProps) {
  const MotionComponent = motion.create(Component)
 
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
 
  return (
    <div className={cn('text-4xl font-bold text-white', className)}>
      {text.split('').map((char, index) => {
        // Check if the character is a space
        if (char === ' ') {
          return (
            <span key={index} className="inline-block">
              {'\u00A0'}
            </span>
          )
        }
 
        return (
          <MotionComponent
            className="relative inline-block origin-center"
            key={index}
            onMouseEnter={() => setHoveredIndex(index)}
            onMouseLeave={() => setHoveredIndex(null)}
            animate={{
              x: hoveredIndex === index ? 10 : 0,
              y: hoveredIndex === index ? -10 : 0,
              scale: hoveredIndex === index ? 1.5 : 1,
              letterSpacing: hoveredIndex === index ? '0.4em' : '0em',
            }}
            transition={{
              type: 'spring',
              stiffness: 300,
              damping: 30,
            }}
          >
            {char}
          </MotionComponent>
        )
      })}
    </div>
  )
}

Props

Prop	Type	Default
`text`	`string`	-
`className`	`string`	-
`as`	`ElementType<any, keyof IntrinsicElements>`	`"span"`