@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
67 lines (66 loc) • 5.54 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText, { AnimatedTextGroup } from '../../../../../';
const GamingInterfaceDemo = () => {
return (_jsxs(AnimatedTextGroup, { className: "relative overflow-hidden rounded-2xl bg-black text-green-400 min-h-[400px] font-mono", coordinationMode: "sequential", staggerDelay: 600, showReplay: true, showConfig: true, debugMode: true, logTiming: true, children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-black via-gray-900 to-black opacity-90" }), _jsx("div", { className: "absolute inset-0", style: {
backgroundImage: `radial-gradient(circle at 25% 25%, #10b981 0%, transparent 50%),
radial-gradient(circle at 75% 75%, #3b82f6 0%, transparent 50%)`,
opacity: 0.1
} }), _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: "> SYSTEM_BOOT_SEQUENCE_INITIATED", animation: "typewriter", align: "center", typewriterEffect: [
'fadeIn',
{ type: 'fontSize', from: '12px', to: '16px' },
{ type: 'textShadow', from: 'none', to: '0 0 10px #10b981' }
], typewriterDuration: 80, typewriterDelay: 50, className: "text-green-400 text-sm", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "NEURAL|NETWORK|ONLINE", animation: "phrases", align: "center", startDelay: 400, phraseStyles: [
{
phrase: 1,
effect: [
'fadeIn',
{ type: 'scale', from: 0, to: 1 },
{ type: 'fontSize', from: '24px', to: '48px' },
{ type: 'fontWeight', from: '300', to: '700' },
{ type: 'letterSpacing', from: '8px', to: '4px' },
{ type: 'textShadow', from: 'none', to: '0 0 20px #10b981, 0 0 40px #10b981' },
{ type: 'filter', from: 'brightness(0.5)', to: 'brightness(1.2)' }
],
delayBefore: 0,
duration: 800,
className: 'text-green-400'
},
{
phrase: 2,
effect: [
'fadeIn',
{ type: 'scale', from: 0, to: 1 },
{ type: 'fontSize', from: '24px', to: '48px' },
{ type: 'fontWeight', from: '300', to: '700' },
{ type: 'letterSpacing', from: '8px', to: '4px' },
{ type: 'textShadow', from: 'none', to: '0 0 20px #3b82f6, 0 0 40px #3b82f6' },
{ type: 'filter', from: 'brightness(0.5)', to: 'brightness(1.2)' }
],
delayBefore: 200,
duration: 800,
className: 'text-blue-400'
},
{
phrase: 3,
effect: [
'fadeIn',
{ type: 'scale', from: 0, to: 1 },
{ type: 'fontSize', from: '24px', to: '48px' },
{ type: 'fontWeight', from: '300', to: '700' },
{ type: 'letterSpacing', from: '8px', to: '4px' },
{ type: 'textShadow', from: 'none', to: '0 0 20px #ef4444, 0 0 40px #ef4444' },
{ type: 'filter', from: 'brightness(0.5)', to: 'brightness(1.2)' }
],
delayBefore: 400,
duration: 800,
className: 'text-red-400'
}
], className: "text-3xl md:text-5xl lg:text-6xl font-bold tracking-[4px]", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "> READY_FOR_COMBAT", animation: "word", align: "center", startDelay: 500, wordEffect: [
'fadeIn',
'slide-up',
{ type: 'fontSize', from: '16px', to: '24px' },
{ type: 'letterSpacing', from: '4px', to: '2px' },
{ type: 'textShadow', from: 'none', to: '0 0 15px #10b981' }
], wordDuration: 400, wordSpacing: 150, className: "text-green-400 text-lg font-semibold", showReplay: true, showConfig: true })] }) }), _jsx("div", { className: "absolute bottom-4 left-4 text-xs text-gray-500", children: "Gaming Interface Style" })] }));
};
export default GamingInterfaceDemo;