@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
49 lines (48 loc) • 11.8 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText, { AnimatedTextGroup } from '../../../';
import { DemoSection } from '../../components';
const GroupAnimationsSection = () => {
return (_jsx(DemoSection, { title: "Group Animations", id: "group-animations", children: _jsxs("div", { className: "space-y-12", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-xl font-semibold mb-4 text-gray-800", children: "Parallel Mode - All Start Together" }), _jsx(AnimatedTextGroup, { className: "bg-gradient-to-br from-blue-50 to-indigo-100 p-8 rounded-2xl", coordinationMode: "parallel", showReplay: true, showConfig: true, debugMode: true, logTiming: true, children: _jsxs("div", { className: "text-center space-y-4", children: [_jsx(AnimatedText, { content: "Welcome to the Future", animation: "block", blockEffect: ['fadeIn', 'slide-up'], className: "text-3xl font-bold text-gray-900", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "Innovation|Design|Excellence", animation: "phrases", phraseStyles: [
{ phrase: 1, className: 'text-blue-600 font-medium', effect: ['fadeIn', 'slide-left'] },
{ phrase: 2, className: 'text-indigo-600 font-medium', effect: ['fadeIn', 'slide-up'] },
{ phrase: 3, className: 'text-purple-600 font-medium', effect: ['fadeIn', 'slide-right'] }
], className: "text-xl", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "Where possibilities become reality through creative technology", animation: "word", wordEffect: ['fadeIn', 'slide-up'], wordDuration: 300, wordSpacing: 150, className: "text-gray-600", showReplay: true, showConfig: true })] }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-xl font-semibold mb-4 text-gray-800", children: "Sequential Mode - One After Another" }), _jsx(AnimatedTextGroup, { className: "bg-gradient-to-br from-green-50 to-emerald-100 p-8 rounded-2xl", coordinationMode: "sequential", staggerDelay: 400, showReplay: true, showConfig: true, debugMode: true, logTiming: true, children: _jsxs("div", { className: "space-y-6", children: [_jsx(AnimatedText, { content: "Chapter One", animation: "typewriter", typewriterEffect: ['fadeIn'], className: "text-2xl font-bold text-emerald-800" }), _jsx(AnimatedText, { content: "The|Story|Begins|Here", animation: "phrases", phraseStyles: [
{ phrase: 1, className: 'text-green-700', effect: 'slide-up' },
{ phrase: 2, className: 'text-green-600', effect: 'slide-up' },
{ phrase: 3, className: 'text-green-500', effect: 'slide-up' },
{ phrase: 4, className: 'text-green-400', effect: 'slide-up' }
], className: "text-lg" }), _jsx(AnimatedText, { content: "Every great journey starts with a single step forward into the unknown", animation: "word", wordEffect: ['fadeIn', 'slide-up'], wordDuration: 200, wordSpacing: 80, className: "text-gray-700" })] }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-xl font-semibold mb-4 text-gray-800", children: "Cascade Mode - Staggered Start" }), _jsx(AnimatedTextGroup, { className: "bg-gradient-to-br from-orange-50 to-red-100 p-8 rounded-2xl", coordinationMode: "cascade", staggerDelay: 300, showReplay: true, showConfig: true, debugMode: true, logTiming: true, children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 text-center", children: [_jsxs("div", { className: "bg-white p-6 rounded-xl", children: [_jsx(AnimatedText, { content: "Design", animation: "block", blockEffect: ['fadeIn', 'slide-up', { type: 'scale', from: 0.8, to: 1 }], className: "text-2xl font-bold text-orange-600" }), _jsx(AnimatedText, { content: "Beautiful interfaces that users love", animation: "word", wordEffect: ['fadeIn'], wordSpacing: 100, className: "text-gray-600 mt-2" })] }), _jsxs("div", { className: "bg-white p-6 rounded-xl", children: [_jsx(AnimatedText, { content: "Develop", animation: "block", blockEffect: ['fadeIn', 'slide-up', { type: 'scale', from: 0.8, to: 1 }], className: "text-2xl font-bold text-red-600" }), _jsx(AnimatedText, { content: "Robust solutions built to last", animation: "word", wordEffect: ['fadeIn'], wordSpacing: 100, className: "text-gray-600 mt-2" })] }), _jsxs("div", { className: "bg-white p-6 rounded-xl", children: [_jsx(AnimatedText, { content: "Deploy", animation: "block", blockEffect: ['fadeIn', 'slide-up', { type: 'scale', from: 0.8, to: 1 }], className: "text-2xl font-bold text-purple-600" }), _jsx(AnimatedText, { content: "Seamless launches across platforms", animation: "word", wordEffect: ['fadeIn'], wordSpacing: 100, className: "text-gray-600 mt-2" })] })] }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-xl font-semibold mb-4 text-gray-800", children: "Wave Mode - Group Waves" }), _jsx(AnimatedTextGroup, { className: "bg-gradient-to-br from-purple-50 to-pink-100 p-8 rounded-2xl", coordinationMode: "wave", staggerDelay: 300, showReplay: true, showConfig: true, debugMode: true, logTiming: true, children: _jsxs("div", { className: "text-center space-y-8", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(AnimatedText, { content: "Wave One", animation: "block", blockEffect: ['fadeIn', 'slide-down'], className: "text-lg font-semibold text-purple-700" }), _jsx(AnimatedText, { content: "First|Second|Third", animation: "phrases", phraseStyles: [
{ phrase: 1, className: 'text-purple-600', effect: 'slide-up' },
{ phrase: 2, className: 'text-purple-500', effect: 'slide-up' },
{ phrase: 3, className: 'text-purple-400', effect: 'slide-up' }
] }), _jsx(AnimatedText, { content: "Items in this wave start together", animation: "word", wordEffect: ['fadeIn'], wordSpacing: 80, className: "text-gray-600 text-sm" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(AnimatedText, { content: "Wave Two", animation: "block", blockEffect: ['fadeIn', 'slide-down'], className: "text-lg font-semibold text-pink-700" }), _jsx(AnimatedText, { content: "Fourth|Fifth|Sixth", animation: "phrases", phraseStyles: [
{ phrase: 1, className: 'text-pink-600', effect: 'slide-up' },
{ phrase: 2, className: 'text-pink-500', effect: 'slide-up' },
{ phrase: 3, className: 'text-pink-400', effect: 'slide-up' }
] }), _jsx(AnimatedText, { content: "This wave starts after the delay", animation: "word", wordEffect: ['fadeIn'], wordSpacing: 80, className: "text-gray-600 text-sm" })] })] }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-xl font-semibold mb-4 text-gray-800", children: "Complex Layout - Product Showcase" }), _jsxs(AnimatedTextGroup, { className: "bg-black text-white rounded-2xl overflow-hidden relative", style: {
backgroundImage: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
minHeight: '400px'
}, coordinationMode: "cascade", staggerDelay: 500, showReplay: true, showConfig: true, debugMode: true, logTiming: true, children: [_jsx("div", { className: "relative z-10 flex flex-col items-center justify-center min-h-[400px] p-8", children: _jsxs("div", { className: "text-center space-y-8", children: [_jsx(AnimatedText, { content: "INTRODUCING", animation: "block", blockEffect: ['fadeIn', 'slide-down'], className: "text-sm font-light tracking-[0.3em] text-white/80" }), _jsx(AnimatedText, { content: "NEXT|GEN|PLATFORM", animation: "phrases", phraseStyles: [
{
phrase: 1,
className: 'font-light text-white',
effect: ['fadeIn', 'slide-up', { type: 'scale', from: 0.9, to: 1 }]
},
{
phrase: 2,
className: 'font-medium text-white',
effect: ['fadeIn', 'slide-up', { type: 'scale', from: 0.9, to: 1 }]
},
{
phrase: 3,
className: 'font-bold text-white',
effect: ['fadeIn', 'slide-up', { type: 'scale', from: 0.9, to: 1 }]
}
], className: "text-5xl md:text-6xl" }), _jsx(AnimatedText, { content: "Revolutionary technology meets impossible design in a platform that transforms how teams collaborate and create together", animation: "word", wordEffect: ['fadeIn', 'slide-up'], wordDuration: 300, wordSpacing: 120, className: "text-lg text-white/90 max-w-2xl leading-relaxed" }), _jsx(AnimatedText, { content: "COMING SOON", animation: "block", blockEffect: ['fadeIn', 'slide-up', { type: 'scale', from: 0.8, to: 1 }], className: "inline-block bg-white text-purple-600 px-8 py-3 rounded-full font-semibold tracking-wider text-sm" })] }) }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-purple-900/20 to-blue-900/20" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-xl font-semibold mb-4 text-gray-800", children: "Group Events - With Callbacks" }), _jsx("div", { className: "bg-gray-50 p-4 rounded-lg mb-4", children: _jsx("p", { className: "text-sm text-gray-600", children: "Open the browser console to see group event callbacks in action when animations start and complete." }) }), _jsx(AnimatedTextGroup, { className: "bg-gradient-to-br from-teal-50 to-cyan-100 p-8 rounded-2xl", coordinationMode: "sequential", staggerDelay: 300, showReplay: true, showConfig: true, debugMode: true, logTiming: true, children: _jsxs("div", { className: "text-center space-y-6", children: [_jsx(AnimatedText, { content: "Event Tracking", animation: "block", blockEffect: ['fadeIn', 'slide-up'], className: "text-3xl font-bold text-teal-800" }), _jsx(AnimatedText, { content: "Watch|The|Console|Output", animation: "phrases", phraseStyles: [
{ phrase: 1, className: 'text-teal-600', effect: 'slide-up' },
{ phrase: 2, className: 'text-cyan-600', effect: 'slide-up' },
{ phrase: 3, className: 'text-blue-600', effect: 'slide-up' },
{ phrase: 4, className: 'text-indigo-600', effect: 'slide-up' }
], className: "text-xl" }), _jsx(AnimatedText, { content: "Each animation triggers events that you can use for custom logic and coordination", animation: "word", wordEffect: ['fadeIn'], wordSpacing: 100, className: "text-gray-700" })] }) })] })] }) }));
};
export default GroupAnimationsSection;