@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
79 lines (78 loc) • 5.83 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText, { AnimatedTextGroup } from '../../../../../';
const ArtisticExpressionDemo = () => {
return (_jsxs(AnimatedTextGroup, { className: "relative overflow-hidden rounded-2xl min-h-[400px] bg-gradient-to-br from-violet-900 via-purple-900 to-indigo-900", coordinationMode: "sequential", staggerDelay: 500, showReplay: true, showConfig: true, debugMode: true, logTiming: true, children: [_jsx("div", { className: "absolute inset-0 opacity-20", style: {
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
} }), _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: "ART", animation: "block", align: "center", blockEffect: [
'fadeIn',
{ type: 'scale', from: 0.1, to: 1 },
{ type: 'rotate', from: -180, to: 0 },
{ type: 'fontSize', from: '200px', to: '120px' },
{ type: 'fontWeight', from: '100', to: '900' },
{ type: 'letterSpacing', from: '50px', to: '20px' },
{
type: 'textShadow',
from: 'none',
to: '0 0 50px rgba(168, 85, 247, 0.8), 0 0 100px rgba(168, 85, 247, 0.4)'
},
{ type: 'filter', from: 'hue-rotate(0deg)', to: 'hue-rotate(360deg)' }
], blockDuration: 500, className: "text-white text-8xl md:text-9xl lg:text-[12rem] font-black tracking-[20px]", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "in|motion|becomes|poetry", animation: "phrases", align: "center", startDelay: 500, phraseStyles: [
{
phrase: 1,
effect: [
'fadeIn',
'slide-up-left',
{ type: 'fontSize', from: '20px', to: '32px' },
{ type: 'fontWeight', from: '200', to: '300' },
{ type: 'letterSpacing', from: '8px', to: '3px' },
{ type: 'color', from: '#a855f7', to: '#e879f9' }
],
delayBefore: 0,
duration: 500,
className: 'italic'
},
{
phrase: 2,
effect: [
'fadeIn',
'slide-down',
{ type: 'fontSize', from: '20px', to: '32px' },
{ type: 'fontWeight', from: '200', to: '300' },
{ type: 'letterSpacing', from: '8px', to: '3px' },
{ type: 'color', from: '#06b6d4', to: '#0891b2' }
],
delayBefore: 250,
duration: 500,
className: 'italic'
},
{
phrase: 3,
effect: [
'fadeIn',
'slide-up-right',
{ type: 'fontSize', from: '20px', to: '32px' },
{ type: 'fontWeight', from: '200', to: '300' },
{ type: 'letterSpacing', from: '8px', to: '3px' },
{ type: 'color', from: '#f59e0b', to: '#d97706' }
],
delayBefore: 500,
duration: 500,
className: 'italic'
},
{
phrase: 4,
effect: [
'fadeIn',
'slide-up',
{ type: 'fontSize', from: '20px', to: '32px' },
{ type: 'fontWeight', from: '200', to: '300' },
{ type: 'letterSpacing', from: '8px', to: '3px' },
{ type: 'color', from: '#ef4444', to: '#dc2626' }
],
delayBefore: 500,
duration: 500,
className: 'italic'
}
], className: "text-2xl md:text-3xl font-light text-white", showReplay: true, showConfig: true })] }) }), _jsx("div", { className: "absolute bottom-4 left-4 text-xs text-gray-400", children: "Artistic Expression Style" })] }));
};
export default ArtisticExpressionDemo;