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

Advanced React animated text component with comprehensive animation effects

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText from '../../../';
import { DemoSection } from '../../components';
const ComposableEffectsSection = () => {
    return (_jsxs(DemoSection, { id: "composable-effects", title: "Composable Effects", description: "Combine multiple animation effects for rich, layered animations. Mix and match any effects seamlessly.", 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-cyan-50 rounded-xl text-center border border-blue-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-blue-900", children: "Fade + Slide Combination" }), _jsx(AnimatedText, { content: "Fade + Slide Up", animation: "block", align: "center", blockEffect: ['fadeIn', 'slide-up'], blockDuration: 800, className: "text-xl md:text-2xl lg:text-3xl font-bold text-blue-600", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-blue-700", children: "Classic combination: smooth fade-in with upward slide motion" }), _jsx("div", { className: "mt-3 text-xs bg-blue-100 px-3 py-2 rounded", children: _jsx("code", { children: `blockEffect={['fadeIn', 'slide-up']}` }) })] }), _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: "Multiple Slide Directions" }), _jsx(AnimatedText, { content: "Complex Movement", animation: "block", align: "center", blockEffect: ['fadeIn', 'slide-up', 'slide-left'], blockDuration: 1000, className: "text-xl md:text-2xl lg:text-3xl font-bold text-green-600", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-green-700", children: "Diagonal movement: combines upward and leftward motion" }), _jsx("div", { className: "mt-3 text-xs bg-green-100 px-3 py-2 rounded", children: _jsx("code", { children: `blockEffect={['fadeIn', 'slide-up', 'slide-left']}` }) })] }), _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: "Per-Phrase Combinations" }), _jsx(AnimatedText, { content: "Different|Effects|Per|Phrase", animation: "phrases", align: "center", phraseStyles: [
                                    { phrase: 1, effect: ['fadeIn', 'slide-up'], delayBefore: 0, className: 'text-purple-600' },
                                    { phrase: 2, effect: ['fadeIn', 'slide-down'], delayBefore: 300, className: 'text-pink-500' },
                                    { phrase: 3, effect: ['fadeIn', 'slide-left'], delayBefore: 600, className: 'text-violet-500' },
                                    { phrase: 4, effect: ['fadeIn', 'slide-right'], delayBefore: 900, className: 'text-indigo-500' }
                                ], 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: "Each phrase can have completely different effect combinations" })] }), _jsxs("div", { className: "p-6 bg-gradient-to-br from-orange-50 to-red-50 rounded-xl text-center border border-orange-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-orange-900", children: "Word-by-Word Effects" }), _jsx(AnimatedText, { content: "Each word gets combined effects", animation: "word", align: "center", wordEffect: ['fadeIn', 'slide-up'], wordDuration: 400, wordSpacing: 150, className: "text-xl md:text-2xl lg:text-3xl font-bold text-orange-600", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-orange-700", children: "Word-by-word animation with combined fade and slide effects" }), _jsx("div", { className: "mt-3 text-xs bg-orange-100 px-3 py-2 rounded", children: _jsx("code", { children: `wordEffect={['fadeIn', 'slide-up']}` }) })] })] }), _jsxs("div", { className: "p-6 bg-gradient-to-r from-indigo-50 to-blue-50 rounded-xl border border-indigo-200", children: [_jsx("h3", { className: "text-lg font-medium mb-4 text-center text-indigo-900", children: "Typewriter with Combined Effects" }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "Letters appear with smooth transitions", animation: "typewriter", align: "center", typewriterEffect: ['fadeIn', 'slide-down'], typewriterDuration: 120, typewriterDelay: 30, className: "text-xl md:text-2xl lg:text-3xl font-bold text-indigo-600", showReplay: true, showConfig: true }) }), _jsx("p", { className: "mt-4 text-sm text-indigo-700 text-center", children: "Even letter-by-letter animations support multiple combined effects" }), _jsx("div", { className: "mt-3 text-xs bg-indigo-100 px-3 py-2 rounded text-center", children: _jsx("code", { children: `typewriterEffect={['fadeIn', 'slide-down']}` }) })] }), _jsxs("div", { className: "mt-6 p-4 bg-green-50 border border-green-200 rounded-xl", children: [_jsx("h4", { className: "text-base font-medium mb-3 text-green-800", children: "\u2728 Available Effect Combinations" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("p", { className: "font-medium text-green-900 mb-2", children: "Fade Effects:" }), _jsx("code", { className: "bg-green-100 px-2 py-1 rounded text-xs block mb-1", children: `['fadeIn', 'slide-up']` }), _jsx("code", { className: "bg-green-100 px-2 py-1 rounded text-xs block mb-1", children: `['fadeOut', 'slide-down']` }), _jsxs("code", { className: "bg-green-100 px-2 py-1 rounded text-xs block", children: [`['fadeIn', 'fadeOut']`, " (for transitions)"] })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-green-900 mb-2", children: "Slide Combinations:" }), _jsx("code", { className: "bg-green-100 px-2 py-1 rounded text-xs block mb-1", children: `['fadeIn', 'slide-up', 'slide-left']` }), _jsx("code", { className: "bg-green-100 px-2 py-1 rounded text-xs block mb-1", children: `['fadeIn', 'slide-down-right']` }), _jsx("code", { className: "bg-green-100 px-2 py-1 rounded text-xs block", children: `['slide-up-left', 'slide-down-right']` })] })] })] })] }));
};
export default ComposableEffectsSection;