@erosnicolau/animated-text/dist/components/AnimatedWordTypewriterWord.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 AnimatedWordTypewriterWord = memo(({ letters, effect, duration, easing, animatedItems }) => {
    return (_jsx("span", { style: { display: 'inline-block' }, children: letters.map((letter, index) => {
            const isAnimated = animatedItems.has(letter.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: letter.content }, index));
        }) }));
}, (prevProps, nextProps) => {
    // Check if any letter in this word has changed animation state
    const prevAnimatedLetters = prevProps.letters.filter(letter => prevProps.animatedItems.has(letter.letterIndex)).length;
    const nextAnimatedLetters = nextProps.letters.filter(letter => nextProps.animatedItems.has(letter.letterIndex)).length;
    return prevAnimatedLetters === nextAnimatedLetters && prevProps.letters.length === nextProps.letters.length;
});
AnimatedWordTypewriterWord.displayName = 'AnimatedWordTypewriterWord';
export default AnimatedWordTypewriterWord;