@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
66 lines (65 loc) • 12.7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText from '../../../';
import { DemoSection } from '../../components';
const VisualEffectsSection = () => {
return (_jsxs(DemoSection, { id: "visual-effects", title: "Visual Polish Effects", description: "Advanced visual effects for modern glass morphism, shadows, and filters that create premium experiences.", 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-blue-50 rounded-xl text-center border border-indigo-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-indigo-900", children: "Backdrop Filter (Glass Effect)" }), _jsx("div", { className: "relative overflow-hidden rounded-lg min-h-[200px] bg-cover bg-center", style: {
backgroundImage: 'url(https://picsum.photos/600/300?random=1)'
}, children: _jsx(AnimatedText, { content: "Glass Morphism", animation: "block", align: "center", blockEffect: ['fadeIn', 'slide-up', { type: 'backdropFilter', from: 'blur(0px)', to: 'blur(10px)' }], blockDuration: 1200, className: "text-xl md:text-2xl lg:text-3xl font-bold text-white bg-white bg-opacity-20 border border-white border-opacity-30 p-4 m-4 rounded-lg", showReplay: true, showConfig: true }) }), _jsx("p", { className: "mt-4 text-sm text-indigo-700", children: "Backdrop blur creates modern glass morphism effects" }), _jsx("div", { className: "mt-3 text-xs bg-indigo-100 px-3 py-2 rounded", children: _jsx("code", { children: `{ type: 'backdropFilter', from: 'blur(0px)', to: 'blur(10px)' }` }) })] }), _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: "Box Shadow Animation" }), _jsx(AnimatedText, { content: "Growing Shadow", animation: "block", align: "center", blockEffect: [
'fadeIn',
'slide-up',
{ type: 'boxShadow', from: 'none', to: '0 20px 40px rgba(138, 43, 226, 0.3)' }
], blockDuration: 1000, className: "text-xl md:text-2xl lg:text-3xl font-bold text-purple-600 bg-white p-4 rounded-lg", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-purple-700", children: "Box shadow grows from nothing to dramatic depth" }), _jsx("div", { className: "mt-3 text-xs bg-purple-100 px-3 py-2 rounded", children: _jsx("code", { children: `{ type: 'boxShadow', from: 'none', to: '0 20px 40px rgba(138, 43, 226, 0.3)' }` }) })] }), _jsxs("div", { className: "p-6 bg-gradient-to-br from-emerald-50 to-green-50 rounded-xl text-center border border-emerald-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-emerald-900", children: "Filter Effects" }), _jsx(AnimatedText, { content: "Brightness + Blur", animation: "block", align: "center", blockEffect: [
'fadeIn',
{ type: 'filter', from: 'brightness(0.5) blur(8px)', to: 'brightness(1.2) blur(0px)' }
], blockDuration: 1500, className: "text-xl md:text-2xl lg:text-3xl font-bold text-emerald-600 bg-emerald-100 p-4 rounded-lg", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-emerald-700", children: "Complex filter combinations: brightness and blur together" }), _jsx("div", { className: "mt-3 text-xs bg-emerald-100 px-3 py-2 rounded", children: _jsx("code", { children: `{ type: 'filter', from: 'brightness(0.5) blur(8px)', to: 'brightness(1.2) blur(0px)' }` }) })] }), _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: "Multi-Visual Combo" }), _jsx(AnimatedText, { content: "Ultimate Visual", animation: "block", align: "center", blockEffect: [
'fadeIn',
'slide-up',
{ type: 'boxShadow', from: '0 2px 4px rgba(0,0,0,0.1)', to: '0 25px 50px rgba(245, 101, 101, 0.5)' },
{ type: 'filter', from: 'brightness(0.8)', to: 'brightness(1.1) contrast(1.2)' }
], blockDuration: 1500, className: "text-xl md:text-2xl lg:text-3xl font-bold text-orange-600 bg-white p-4 rounded-lg", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-orange-700", children: "Combined shadow + filter effects for maximum impact" }), _jsx("div", { className: "mt-3 text-xs bg-orange-100 px-3 py-2 rounded", children: _jsx("code", { children: `[boxShadow + filter combo]` }) })] })] }), _jsxs("div", { className: "p-6 bg-gradient-to-r from-slate-50 to-gray-50 rounded-xl border border-slate-200", children: [_jsx("h3", { className: "text-lg font-medium mb-4 text-center text-slate-900", children: "Complete Glass Card Effect" }), _jsx("div", { className: "relative overflow-hidden rounded-lg min-h-[300px] bg-cover bg-center", style: {
backgroundImage: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80)'
}, children: _jsx("div", { className: "p-8", children: _jsx(AnimatedText, { content: "Premium|Glass|Experience", animation: "phrases", align: "center", phraseStyles: [
{
phrase: 1,
effect: [
'fadeIn',
'slide-up',
{ type: 'backdropFilter', from: 'blur(0px)', to: 'blur(15px)' },
{ type: 'boxShadow', from: 'none', to: '0 8px 32px rgba(31, 38, 135, 0.37)' }
],
delayBefore: 0,
duration: 1000,
className: 'text-white font-light'
},
{
phrase: 2,
effect: [
'fadeIn',
'slide-up',
{ type: 'backdropFilter', from: 'blur(0px)', to: 'blur(15px)' },
{ type: 'boxShadow', from: 'none', to: '0 8px 32px rgba(31, 38, 135, 0.37)' }
],
delayBefore: 600,
duration: 1000,
className: 'text-white font-bold'
},
{
phrase: 3,
effect: [
'fadeIn',
'slide-up',
{ type: 'backdropFilter', from: 'blur(0px)', to: 'blur(15px)' },
{ type: 'boxShadow', from: 'none', to: '0 8px 32px rgba(31, 38, 135, 0.37)' }
],
delayBefore: 1200,
duration: 1000,
className: 'text-white font-bold'
}
], className: "text-2xl md:text-3xl lg:text-4xl bg-white bg-opacity-10 border border-white border-opacity-20 p-6 rounded-xl backdrop-blur-sm", showReplay: true, showConfig: true }) }) }), _jsx("p", { className: "mt-4 text-sm text-slate-700 text-center", children: "Phrase-by-phrase glass morphism with backdrop filters and shadows" })] }), _jsxs("div", { className: "p-6 bg-gradient-to-r from-violet-50 to-purple-50 rounded-xl border border-violet-200", children: [_jsx("h3", { className: "text-lg font-medium mb-4 text-center text-violet-900", children: "Word-by-Word Visual Effects" }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "Each word gets visual effects applied", animation: "word", align: "center", wordEffect: [
'fadeIn',
'slide-up',
{ type: 'boxShadow', from: 'none', to: '0 4px 8px rgba(139, 69, 19, 0.3)' },
{ type: 'filter', from: 'brightness(0.8)', to: 'brightness(1.1)' }
], wordDuration: 600, wordSpacing: 250, wordEasing: "ease-out", className: "text-xl md:text-2xl lg:text-3xl font-bold text-violet-700 bg-violet-100 p-2 rounded", showReplay: true, showConfig: true }) }), _jsx("p", { className: "mt-4 text-sm text-violet-700 text-center", children: "Word-by-word animation with individual visual effects per word" })] }), _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: "\u2728 Visual Effects API" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("p", { className: "font-medium text-blue-900 mb-2", children: "Backdrop Filter:" }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block mb-1", children: `{ type: 'backdropFilter', from: 'blur(0px)', to: 'blur(10px)' }` }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block", children: `{ type: 'backdropFilter', from: 'none', to: 'brightness(1.2)' }` })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-blue-900 mb-2", children: "Box Shadow:" }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block mb-1", children: `{ type: 'boxShadow', from: 'none', to: '0 10px 20px rgba(0,0,0,0.2)' }` }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block", children: `{ type: 'boxShadow', from: '0 2px 4px rgba(0,0,0,0.1)', to: '0 20px 40px rgba(0,0,0,0.3)' }` })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-blue-900 mb-2", children: "Filter Effects:" }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block mb-1", children: `{ type: 'filter', from: 'blur(5px)', to: 'blur(0px)' }` }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block", children: `{ type: 'filter', from: 'brightness(0.5)', to: 'brightness(1.2) contrast(1.1)' }` })] })] })] }), _jsxs("div", { className: "mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-xl", children: [_jsx("h4", { className: "text-base font-medium mb-3 text-yellow-800", children: "\uD83C\uDFA8 Glass Morphism Tips" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-yellow-700", children: [_jsxs("div", { children: [_jsx("p", { className: "font-medium mb-2", children: "Perfect Glass Effect:" }), _jsxs("ul", { className: "list-disc ml-4 space-y-1", children: [_jsxs("li", { children: ["Use ", _jsx("code", { className: "bg-yellow-100 px-1 rounded", children: "backdrop-filter: blur(10px)" })] }), _jsxs("li", { children: ["Add ", _jsx("code", { className: "bg-yellow-100 px-1 rounded", children: "background: rgba(255,255,255,0.1)" })] }), _jsxs("li", { children: ["Include ", _jsx("code", { className: "bg-yellow-100 px-1 rounded", children: "border: 1px solid rgba(255,255,255,0.2)" })] }), _jsxs("li", { children: ["Apply subtle ", _jsx("code", { className: "bg-yellow-100 px-1 rounded", children: "box-shadow" })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium mb-2", children: "Performance Notes:" }), _jsxs("ul", { className: "list-disc ml-4 space-y-1", children: [_jsx("li", { children: "Backdrop filters are GPU-accelerated" }), _jsx("li", { children: "Complex filters may impact performance on older devices" }), _jsxs("li", { children: ["Test with ", _jsx("code", { className: "bg-yellow-100 px-1 rounded", children: "prefers-reduced-motion" })] }), _jsx("li", { children: "Use sparingly for best performance" })] })] })] })] })] }));
};
export default VisualEffectsSection;