@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
66 lines (65 loc) • 5.13 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText, { AnimatedTextGroup } from '../../../../../';
const ProductLaunchDemo = () => {
return (_jsxs(AnimatedTextGroup, { className: "relative overflow-hidden rounded-2xl bg-black text-white min-h-[400px]", style: {
backgroundImage: 'url(https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80)'
}, coordinationMode: "sequential", staggerDelay: 300, showReplay: true, showConfig: true, debugMode: true, logTiming: true, children: [_jsx("div", { className: "absolute inset-0 bg-cover bg-center", style: {
backgroundImage: 'url(https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80)',
filter: 'brightness(0.3)'
} }), _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: "INTRODUCING", animation: "block", align: "center", blockEffect: [
'fadeIn',
'slide-up',
{ type: 'letterSpacing', from: '20px', to: '8px' },
{ type: 'fontSize', from: '12px', to: '18px' },
{ type: 'textShadow', from: 'none', to: '0 0 20px rgba(255,255,255,0.5)' }
], blockDuration: 500, className: "text-gray-300 font-light tracking-[8px]", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "FUTURE|VISION|PRO", animation: "phrases", align: "center", startDelay: 400, phraseStyles: [
{
phrase: 1,
effect: [
'fadeIn',
'slide-up',
{ type: 'scale', from: 0.8, to: 1 },
{ type: 'fontSize', from: '32px', to: '64px' },
{ type: 'fontWeight', from: '300', to: '900' },
{ type: 'textShadow', from: 'none', to: '0 0 40px rgba(59, 130, 246, 0.8)' }
],
delayBefore: 0,
duration: 700,
className: 'text-blue-400'
},
{
phrase: 2,
effect: [
'fadeIn',
'slide-up',
{ type: 'scale', from: 0.8, to: 1 },
{ type: 'fontSize', from: '32px', to: '64px' },
{ type: 'fontWeight', from: '300', to: '900' },
{ type: 'textShadow', from: 'none', to: '0 0 40px rgba(168, 85, 247, 0.8)' }
],
delayBefore: 200,
duration: 700,
className: 'text-purple-400'
},
{
phrase: 3,
effect: [
'fadeIn',
'slide-up',
{ type: 'scale', from: 0.8, to: 1 },
{ type: 'fontSize', from: '32px', to: '64px' },
{ type: 'fontWeight', from: '300', to: '900' },
{ type: 'textShadow', from: 'none', to: '0 0 40px rgba(34, 197, 94, 0.8)' }
],
delayBefore: 400,
duration: 700,
className: 'text-green-400'
}
], className: "text-4xl md:text-6xl lg:text-7xl font-black", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "Revolutionary technology meets impossible design", animation: "word", align: "center", startDelay: 500, wordEffect: [
'fadeIn',
'slide-up',
{ type: 'fontSize', from: '14px', to: '20px' },
{ type: 'letterSpacing', from: '3px', to: '1px' }
], wordDuration: 400, wordSpacing: 100, className: "text-gray-300 font-light", showReplay: true, showConfig: true })] }) }), _jsx("div", { className: "absolute bottom-4 left-4 text-xs text-gray-500", children: "Product Launch Style" })] }));
};
export default ProductLaunchDemo;