@blend-text/react

React component for creating layered text effects with animations.

Installation

npm install @blend-text/react

Usage

import { BlendText } from '@blend-text/react'

function App() {
  return (
    <BlendText 
      text="Hello World"
      animation="hover"
      steps={6}
      distance={15}
      startColor="#ff6b35"
      endColor="#004e92"
    />
  )
}

Animation Examples

Static Effect

<BlendText 
  text="Static Text"
  animation="static"
  steps={8}
  distance={20}
/>

Hover Tracking

<BlendText 
  text="Hover Me"
  animation="hover"
  hoverMaxDistancePx={30}
  hoverSmoothingSec={0.2}
/>

Scroll Animation

<BlendText 
  text="Scroll Text"
  animation="scroll"
  scrollMode="smooth"
  strength={2}
/>

Props

See main README for complete API reference.

Features

• Mouse tracking with distance clamping
• Scroll progress with three modes
• SSR-safe with window guards
• Memoized layer calculations
• Automatic padding computation