@erosnicolau/animated-text/dist/components/AnimatedWord.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 AnimatedWord = memo(({ wordIndex, content, effect, duration, easing, animatedItems, className }) => {
    const isAnimated = animatedItems.has(wordIndex);
    const style = generateAnimationStyles(effect, duration, 0, // No CSS delay - timing handled by JS
    easing, isAnimated);
    // Add display: inline-block for transforms to work
    if (style.transform) {
        style.display = 'inline-block';
    }
    return (_jsx("span", { className: className, style: style, children: content }));
}, (prevProps, nextProps) => {
    // Only re-render if this specific word's animation state changes
    const prevAnimated = prevProps.animatedItems.has(prevProps.wordIndex);
    const nextAnimated = nextProps.animatedItems.has(nextProps.wordIndex);
    return (prevAnimated === nextAnimated &&
        prevProps.content === nextProps.content &&
        prevProps.wordIndex === nextProps.wordIndex &&
        prevProps.className === nextProps.className);
});
AnimatedWord.displayName = 'AnimatedWord';
export default AnimatedWord;