@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
83 lines (82 loc) • 6.24 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText, { AnimatedTextGroup } from '../../../../../';
const CinematicTrailerDemo = () => {
return (_jsxs(AnimatedTextGroup, { className: "relative overflow-hidden rounded-2xl bg-black text-white min-h-[400px]", coordinationMode: "sequential", staggerDelay: 400, 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-1419242902214-272b3f66ee7a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80)',
filter: 'brightness(0.2) contrast(1.2)'
} }), _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: "IN A WORLD", animation: "block", align: "center", blockEffect: [
'fadeIn',
{ type: 'scale', from: 0.5, to: 1.1 },
{ type: 'rotate', from: -5, to: 0 },
{ type: 'fontSize', from: '24px', to: '36px' },
{ type: 'fontWeight', from: '400', to: '800' },
{ type: 'letterSpacing', from: '10px', to: '4px' },
{
type: 'textShadow',
from: 'none',
to: '0 0 20px rgba(239, 68, 68, 0.8), 0 0 40px rgba(239, 68, 68, 0.4)'
}
], blockDuration: 800, className: "text-red-500 text-2xl md:text-4xl font-bold tracking-[4px]", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "WHERE|ANIMATIONS|COME|ALIVE", animation: "phrases", align: "center", startDelay: 400, phraseStyles: [
{
phrase: 1,
effect: [
'fadeIn',
'slide-down',
{ type: 'scale', from: 1.5, to: 1 },
{ type: 'fontSize', from: '48px', to: '72px' },
{ type: 'fontWeight', from: '200', to: '900' },
{ type: 'textShadow', from: 'none', to: '2px 2px 0px #000, 0 0 30px rgba(255,255,255,0.5)' }
],
delayBefore: 0,
duration: 800,
className: 'text-white'
},
{
phrase: 2,
effect: [
'fadeIn',
'slide-left',
{ type: 'rotate', from: 10, to: 0 },
{ type: 'fontSize', from: '48px', to: '72px' },
{ type: 'fontWeight', from: '200', to: '900' },
{ type: 'textShadow', from: 'none', to: '2px 2px 0px #000, 0 0 30px rgba(255,215,0,0.8)' }
],
delayBefore: 300,
duration: 800,
className: 'text-yellow-400'
},
{
phrase: 3,
effect: [
'fadeIn',
'slide-right',
{ type: 'scale', from: 0.8, to: 1 },
{ type: 'fontSize', from: '48px', to: '72px' },
{ type: 'fontWeight', from: '200', to: '900' },
{ type: 'textShadow', from: 'none', to: '2px 2px 0px #000, 0 0 30px rgba(34,197,94,0.8)' }
],
delayBefore: 600,
duration: 800,
className: 'text-green-400'
},
{
phrase: 4,
effect: [
'fadeIn',
'slide-up',
{ type: 'scale', from: 1.2, to: 1 },
{ type: 'fontSize', from: '48px', to: '72px' },
{ type: 'fontWeight', from: '200', to: '900' },
{ type: 'textShadow', from: 'none', to: '2px 2px 0px #000, 0 0 30px rgba(168,85,247,0.8)' }
],
delayBefore: 900,
duration: 800,
className: 'text-purple-400'
}
], className: "text-5xl md:text-7xl lg:text-8xl font-black leading-tight", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "Coming this summer...", animation: "typewriter", align: "center", startDelay: 500, typewriterEffect: [
'fadeIn',
{ type: 'fontSize', from: '16px', to: '24px' },
{ type: 'letterSpacing', from: '5px', to: '2px' }
], typewriterDuration: 100, typewriterDelay: 80, className: "text-gray-300 font-light italic", showReplay: true, showConfig: true })] }) }), _jsx("div", { className: "absolute bottom-4 left-4 text-xs text-gray-500", children: "Cinematic Trailer Style" })] }));
};
export default CinematicTrailerDemo;