@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
50 lines (49 loc) • 6.31 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText from '../../../';
import { DemoSection } from '../../components';
const TextShadowEffectsSection = () => {
return (_jsxs(DemoSection, { id: "text-shadow-effects", title: "Dynamic Text Shadow Effects", description: "Animate text shadows from simple to complex, creating depth and visual interest.", 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-indigo-50 to-purple-50 rounded-xl text-center border border-indigo-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-indigo-900", children: "Simple Shadow Fade" }), _jsx(AnimatedText, { content: "Shadow Animation", animation: "block", align: "center", blockEffect: [
'fadeIn',
'slide-up',
{ type: 'textShadow', from: 'none', to: '0 4px 12px rgba(79, 70, 229, 0.6)' }
], blockDuration: 1000, 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", children: "Text shadow appears progressively with slide-up animation" }), _jsx("div", { className: "mt-3 text-xs bg-indigo-100 px-3 py-2 rounded", children: _jsx("code", { children: `{ type: 'textShadow', from: 'none', to: '...' }` }) })] }), _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: "Complex Shadow Morph" }), _jsx(AnimatedText, { content: "Advanced Shadow", animation: "block", align: "center", blockEffect: [
'fadeIn',
{ type: 'scale', from: 0.8, to: 1 },
{ type: 'textShadow', from: '2px 2px 4px rgba(0,0,0,0.2)', to: '0 0 20px rgba(239, 68, 68, 0.8)' }
], blockDuration: 1200, className: "text-xl md:text-2xl lg:text-3xl font-bold text-red-600", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-orange-700", children: "Shadow transforms from subtle drop shadow to dramatic glow effect" }), _jsx("div", { className: "mt-3 text-xs bg-orange-100 px-3 py-2 rounded", children: _jsx("code", { children: `from: 'drop shadow', to: 'glow effect'` }) })] })] }), _jsxs("div", { className: "p-6 bg-gradient-to-r from-emerald-50 to-teal-50 rounded-xl border border-emerald-200", children: [_jsx("h3", { className: "text-lg font-medium mb-4 text-center text-emerald-900", children: "Phrase-Based Text Shadow Animation" }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "Glow|Pulse|Shine", animation: "phrases", align: "center", className: "text-2xl md:text-3xl lg:text-4xl font-bold", phraseStyles: [
{
phrase: 1,
effect: [
'fadeIn',
'slide-up',
{ type: 'textShadow', from: 'none', to: '0 0 15px rgba(34, 197, 94, 0.8)' }
],
delayBefore: 0,
duration: 800,
className: 'text-green-600'
},
{
phrase: 2,
effect: [
'fadeIn',
'slide-up',
{ type: 'textShadow', from: 'none', to: '0 0 25px rgba(245, 158, 11, 0.9)' }
],
delayBefore: 600,
duration: 800,
className: 'text-yellow-500'
},
{
phrase: 3,
effect: [
'fadeIn',
'slide-up',
{ type: 'textShadow', from: 'none', to: '0 0 30px rgba(168, 85, 247, 0.8)' }
],
delayBefore: 1200,
duration: 800,
className: 'text-purple-500'
}
], showReplay: true, showConfig: true }) }), _jsx("p", { className: "mt-4 text-sm text-emerald-700 text-center", children: "Each phrase gets a different colored glow effect with synchronized timing" })] }), _jsxs("div", { className: "mt-6 p-4 bg-blue-50 border border-blue-200 rounded-xl", children: [_jsx("h4", { className: "text-base font-medium mb-3 text-blue-800", children: "\uD83C\uDF1F Text Shadow Effects API" }), _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-blue-900 mb-2", children: "Basic Usage:" }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block mb-1", children: `{ type: 'textShadow', from: 'none', to: '...' }` }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block", children: `from: '0 2px 4px rgba(0,0,0,0.3)'` })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-blue-900 mb-2", children: "Effect Types:" }), _jsxs("div", { className: "text-xs text-blue-700 space-y-1", children: [_jsxs("div", { children: ["\u2022 ", _jsx("code", { children: "none" }), " \u2192 Glow: none to colored shadow"] }), _jsx("div", { children: "\u2022 Drop \u2192 Glow: subtle to dramatic effect" }), _jsx("div", { children: "\u2022 Size morphing: small to large shadows" }), _jsx("div", { children: "\u2022 Color transitions: shadow color changes" })] })] })] })] })] }));
};
export default TextShadowEffectsSection;