@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
62 lines (61 loc) • 4.96 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText, { AnimatedTextGroup } from '../../../../../';
const CreativeAgencyDemo = () => {
return (_jsxs(AnimatedTextGroup, { className: "relative overflow-hidden rounded-2xl min-h-[400px]", coordinationMode: "cascade", staggerDelay: 300, showReplay: true, showConfig: true, debugMode: true, logTiming: true, children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-pink-100 via-purple-50 to-indigo-100" }), _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-6", children: [_jsx(AnimatedText, { content: "WE|CREATE|MAGIC", animation: "phrases", align: "center", phraseStyles: [
{
phrase: 1,
effect: [
'fadeIn',
'slide-up-left',
{ type: 'rotate', from: -15, to: 0 },
{ type: 'fontSize', from: '40px', to: '80px' },
{ type: 'fontWeight', from: '100', to: '900' },
{ type: 'letterSpacing', from: '15px', to: '3px' },
{ type: 'textShadow', from: 'none', to: '0 10px 20px rgba(219, 39, 119, 0.3)' },
{ type: 'color', from: '#ec4899', to: '#be185d' }
],
delayBefore: 0,
duration: 800,
className: 'block transform rotate-[-2deg]'
},
{
phrase: 2,
effect: [
'fadeIn',
'slide-down',
{ type: 'scale', from: 0.3, to: 1 },
{ type: 'fontSize', from: '40px', to: '80px' },
{ type: 'fontWeight', from: '100', to: '900' },
{ type: 'letterSpacing', from: '20px', to: '5px' },
{ type: 'textShadow', from: 'none', to: '0 10px 20px rgba(139, 92, 246, 0.3)' },
{ type: 'color', from: '#8b5cf6', to: '#7c3aed' }
],
delayBefore: 800,
duration: 800,
className: 'block transform rotate-[1deg]'
},
{
phrase: 3,
effect: [
'fadeIn',
'slide-up-right',
{ type: 'rotate', from: 20, to: 0 },
{ type: 'fontSize', from: '40px', to: '80px' },
{ type: 'fontWeight', from: '100', to: '900' },
{ type: 'letterSpacing', from: '12px', to: '4px' },
{ type: 'textShadow', from: 'none', to: '0 10px 20px rgba(59, 130, 246, 0.3)' },
{ type: 'color', from: '#3b82f6', to: '#1d4ed8' }
],
delayBefore: 800,
duration: 800,
className: 'block transform rotate-[-1deg]'
}
], className: "text-6xl md:text-8xl lg:text-9xl font-black space-y-2", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "Through bold typography, stunning visuals, and impossible animations that bring brands to life in ways you never imagined", animation: "word", align: "center", startDelay: 500, wordEffect: [
'fadeIn',
'slide-up',
{ type: 'fontSize', from: '14px', to: '18px' },
{ type: 'letterSpacing', from: '2px', to: '0.5px' },
{ type: 'color', from: '#9ca3af', to: '#374151' }
], wordDuration: 300, wordSpacing: 80, className: "text-gray-600 font-light max-w-3xl mx-auto leading-relaxed", showReplay: true, showConfig: true })] }) }), _jsx("div", { className: "absolute bottom-4 left-4 text-xs text-gray-500", children: "Creative Agency Style" })] }));
};
export default CreativeAgencyDemo;