@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
106 lines (105 loc) • 9.27 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText from '../../../';
import { DemoSection } from '../../components';
const UltimateEffectsSection = () => {
return (_jsxs(DemoSection, { id: "ultimate-effects", title: "Ultimate Effect Combinations", description: "Comprehensive testing of 8+ effect combinations showcasing the full power of the animation system.", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "8-Effect Ultimate Combination" }), _jsx("div", { className: "bg-gradient-to-r from-purple-50 to-blue-50 p-8 rounded-lg", children: _jsx(AnimatedText, { content: "MAXIMUM EFFECTS", animation: "block", blockEffect: [
'fadeIn',
{ type: 'slide', x: 0, y: -30 },
{ type: 'scale', from: 0.5, to: 1 },
{ type: 'rotate', from: 15, to: 0 },
{ type: 'fontSize', from: '12px', to: '48px' },
{ type: 'letterSpacing', from: '8px', to: '2px' },
{ type: 'textShadow', from: 'none', to: '0 0 20px #8b5cf6' },
{ type: 'color', from: '#8b5cf6', to: '#1e40af' }
], blockDuration: 3000, className: "text-center font-bold", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `8 effects: fadeIn + slide + scale + rotate + fontSize + letterSpacing + textShadow + color` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "10-Effect Layout Morphing" }), _jsx("div", { className: "bg-gradient-to-r from-green-50 to-emerald-50 p-8 rounded-lg", children: _jsx(AnimatedText, { content: "LAYOUT TRANSFORMATION", animation: "block", blockEffect: [
'fadeIn',
'slide-up',
{ type: 'width', from: '200px', to: '400px' },
{ type: 'height', from: '60px', to: '120px' },
{ type: 'padding', from: '10px', to: '30px 40px' },
{ type: 'borderRadius', from: '0', to: '20px' },
{ type: 'backgroundColor', from: '#d1fae5', to: '#059669' },
{ type: 'borderWidth', from: '1px', to: '4px' },
{ type: 'borderColor', from: '#6ee7b7', to: '#047857' },
{ type: 'color', from: '#065f46', to: '#ffffff' }
], blockDuration: 3500, className: "text-center font-semibold border border-green-300 flex items-center justify-center", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `10 effects: fadeIn + slide + width + height + padding + borderRadius + backgroundColor + borderWidth + borderColor + color` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Typography + Transform + Visual Combo" }), _jsx("div", { className: "bg-gradient-to-r from-rose-50 to-pink-50 p-8 rounded-lg", children: _jsx(AnimatedText, { content: "VISUAL SPECTACULAR", animation: "block", blockEffect: [
'fadeIn',
{ type: 'scale', from: 0.3, to: 1.1 },
{ type: 'rotate', from: -10, to: 5 },
{ type: 'fontSize', from: '16px', to: '42px' },
{ type: 'fontWeight', from: '200', to: '900' },
{ type: 'letterSpacing', from: '10px', to: '1px' },
{ type: 'lineHeight', from: '1.0', to: '1.2' },
{ type: 'textShadow', from: 'none', to: '0 0 30px #ec4899' },
{ type: 'backdropFilter', from: 'blur(0px)', to: 'blur(5px)' },
{ type: 'boxShadow', from: 'none', to: '0 20px 60px rgba(236, 72, 153, 0.3)' }
], blockDuration: 4000, className: "text-center text-rose-600", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `Advanced combo: Typography + Transform + Visual effects (10 total)` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Phrase-Based Ultra Combinations" }), _jsx("div", { className: "bg-gradient-to-r from-indigo-50 to-violet-50 p-8 rounded-lg", children: _jsx(AnimatedText, { content: "EACH|PHRASE|DIFFERENT|ULTRA|COMBO", animation: "phrases", phraseStyles: [
{
phrase: 1,
className: 'text-red-600 p-2',
effect: [
'fadeIn',
{ type: 'scale', from: 0.5, to: 1 },
{ type: 'rotate', from: 45, to: 0 },
{ type: 'fontSize', from: '12px', to: '24px' },
{ type: 'textShadow', from: 'none', to: '0 0 10px #dc2626' }
],
duration: 1000,
delayBefore: 0
},
{
phrase: 2,
className: 'text-blue-600 p-2',
effect: [
'fadeIn',
'slide-up',
{ type: 'letterSpacing', from: '5px', to: '1px' },
{ type: 'fontWeight', from: '100', to: '800' },
{ type: 'color', from: '#3b82f6', to: '#1e40af' }
],
duration: 800,
delayBefore: 400
},
{
phrase: 3,
className: 'text-green-600 p-2 border border-green-300',
effect: [
'fadeIn',
{ type: 'borderWidth', from: '1px', to: '3px' },
{ type: 'borderRadius', from: '0', to: '8px' },
{ type: 'backgroundColor', from: 'transparent', to: '#dcfce7' },
{ type: 'padding', from: '4px', to: '12px' }
],
duration: 900,
delayBefore: 800
},
{
phrase: 4,
className: 'text-purple-600 p-2',
effect: [
'fadeIn',
{ type: 'scale', from: 0.8, to: 1.2 },
{ type: 'fontSize', from: '14px', to: '28px' },
{ type: 'lineHeight', from: '1.0', to: '1.5' },
{ type: 'filter', from: 'brightness(1)', to: 'brightness(1.3)' }
],
duration: 1100,
delayBefore: 1200
},
{
phrase: 5,
className: 'text-orange-600 p-2',
effect: [
'fadeIn',
'slide-right',
{ type: 'rotate', from: -15, to: 0 },
{ type: 'fontWeight', from: '300', to: '700' },
{ type: 'textShadow', from: 'none', to: '0 4px 8px rgba(234, 88, 12, 0.5)' },
{ type: 'backdropFilter', from: 'blur(0px)', to: 'blur(2px)' }
],
duration: 1200,
delayBefore: 1600
}
], showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `Each phrase: 5-6 different effect combinations (25+ total effects)` })] })] }));
};
export default UltimateEffectsSection;