@erosnicolau/animated-text/dist/components/AnimatedLetter.js

Advanced React animated text component with comprehensive animation effects

import { jsx as _jsx } from "react/jsx-runtime";
import { memo } from 'react';
import { generateAnimationStyles } from '../utils/animationStyles';
const AnimatedLetter = memo(({ letterIndex, content, effect, duration, easing, animatedItems }) => {
    const isAnimated = animatedItems.has(letterIndex);
    const style = generateAnimationStyles(effect, duration, 0, // No CSS delay - timing handled by JS
    easing, isAnimated);
    // Add display: inline-block for transforms to work on letters
    if (style.transform) {
        style.display = 'inline-block';
    }
    return _jsx("span", { style: style, children: content });
}, (prevProps, nextProps) => {
    // Only re-render if this specific letter's animation state changes
    const prevAnimated = prevProps.animatedItems.has(prevProps.letterIndex);
    const nextAnimated = nextProps.animatedItems.has(nextProps.letterIndex);
    return (prevAnimated === nextAnimated &&
        prevProps.content === nextProps.content &&
        prevProps.letterIndex === nextProps.letterIndex);
});
AnimatedLetter.displayName = 'AnimatedLetter';
export default AnimatedLetter;