@erosnicolau/animated-text/dist/demo/sections/AnimationTypes/index.js

Advanced React animated text component with comprehensive animation effects

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AnimatedText, DemoSection } from '../../components';
const AnimationTypesSection = () => {
    return (_jsxs(DemoSection, { id: "animation-types", title: "Animation Types", description: "Explore the 5 different animation modes available in AnimatedText.", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mb-6", children: [_jsxs("div", { className: "p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl text-center border border-blue-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-blue-900", children: "Block Animation" }), _jsx(AnimatedText, { content: "Entire block animates together", animation: "block", align: "center", blockEffect: ['fadeIn', 'slide-up'], blockDuration: 800, className: "text-xl md:text-2xl lg:text-3xl font-bold", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-blue-700", children: "The entire text animates as one unit with customizable effects" })] }), _jsxs("div", { className: "p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl text-center border border-green-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-green-900", children: "Phrase Animation" }), _jsx(AnimatedText, { content: "Each phrase|can animate|separately", animation: "phrases", align: "center", phraseStyles: [
                                    { phrase: 1, effect: ['fadeIn', 'slide-up'], delayBefore: 0, className: 'text-green-600' },
                                    { phrase: 2, effect: ['fadeIn', 'slide-up'], delayBefore: 300, className: 'text-blue-500' },
                                    { phrase: 3, effect: ['fadeIn', 'slide-up'], delayBefore: 600, className: 'text-purple-500' }
                                ], className: "text-xl md:text-2xl lg:text-3xl font-bold", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-green-700", children: "Each phrase (separated by |) animates with individual timing and effects" })] }), _jsxs("div", { className: "p-6 bg-gradient-to-br from-orange-50 to-yellow-50 rounded-xl text-center border border-orange-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-orange-900", children: "Word Animation" }), _jsx(AnimatedText, { content: "Each word appears sequentially", animation: "word", align: "center", wordEffect: ['fadeIn', 'slide-up'], wordDuration: 400, wordSpacing: 200, className: "text-xl md:text-2xl lg:text-3xl font-bold", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-orange-700", children: "Word-by-word animation with configurable timing and effects" })] }), _jsxs("div", { className: "p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl text-center border border-purple-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-purple-900", children: "Typewriter Animation" }), _jsx(AnimatedText, { content: "Letter by letter typing", animation: "typewriter", align: "center", typewriterEffect: ['fadeIn'], typewriterDuration: 150, typewriterDelay: 50, className: "text-xl md:text-2xl lg:text-3xl font-bold", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-purple-700", children: "Classic typewriter effect with letter-by-letter appearance" })] })] }), _jsxs("div", { className: "p-6 bg-gradient-to-r from-teal-50 to-cyan-50 rounded-xl border border-teal-200", children: [_jsx("h3", { className: "text-lg font-medium mb-4 text-center text-teal-900", children: "Word-Typewriter (Hybrid)" }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "Letters appear with word pauses for natural reading flow", animation: "word-typewriter", align: "center", wordTypewriterEffect: ['fadeIn'], wordTypewriterDuration: 100, wordTypewriterLetterDelay: 40, wordTypewriterWordDelay: 300, className: "text-xl md:text-2xl lg:text-3xl font-bold", showReplay: true, showConfig: true }) }), _jsx("p", { className: "mt-4 text-sm text-teal-700 text-center", children: "Combination of letter-by-letter typing with longer pauses between words" })] })] }));
};
export default AnimationTypesSection;