@erosnicolau/animated-text/dist/demo/sections/TypographicShowcases/index.js

Advanced React animated text component with comprehensive animation effects

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText, { AnimatedTextGroup } from '../../../';
import { DemoSection } from '../../components';
const TypographicShowcasesSection = () => {
    return (_jsxs(DemoSection, { id: "typographic-showcases", title: "Typographic Showcases", description: "Sophisticated typewriter effects and modern typographic design variations inspired by contemporary brand identity and editorial design.", children: [_jsxs("div", { className: "space-y-16", children: [_jsxs("div", { className: "bg-white p-12 rounded-2xl border border-gray-100 shadow-sm relative", children: [_jsx("div", { className: "max-w-4xl mx-auto", children: _jsx("div", { className: "text-center space-y-8", children: _jsxs(AnimatedTextGroup, { coordinationMode: "sequential", staggerDelay: 1000, showReplay: true, showConfig: true, className: "space-y-8", children: [_jsx(AnimatedText, { content: "ARCHITECTS OF|AUTHENTIC|PERSONAL BRANDS", animation: "phrases", align: "center", phraseStyles: [
                                                    {
                                                        phrase: 1,
                                                        effect: [
                                                            'fadeIn',
                                                            { type: 'fontSize', from: '32px', to: '72px' },
                                                            { type: 'fontWeight', from: '200', to: '800' },
                                                            { type: 'letterSpacing', from: '4px', to: '1px' }
                                                        ],
                                                        delayBefore: 0,
                                                        duration: 1000,
                                                        className: 'text-gray-900'
                                                    },
                                                    {
                                                        phrase: 2,
                                                        effect: [
                                                            'fadeIn',
                                                            { type: 'fontSize', from: '32px', to: '72px' },
                                                            { type: 'fontWeight', from: '200', to: '800' },
                                                            { type: 'letterSpacing', from: '4px', to: '1px' }
                                                        ],
                                                        delayBefore: 800,
                                                        duration: 1000,
                                                        className: 'text-orange-500'
                                                    },
                                                    {
                                                        phrase: 3,
                                                        effect: [
                                                            'fadeIn',
                                                            { type: 'fontSize', from: '32px', to: '72px' },
                                                            { type: 'fontWeight', from: '200', to: '800' },
                                                            { type: 'letterSpacing', from: '4px', to: '1px' }
                                                        ],
                                                        delayBefore: 1600,
                                                        duration: 1000,
                                                        className: 'text-gray-900'
                                                    }
                                                ], className: "text-5xl md:text-7xl lg:text-8xl font-black leading-[0.9] tracking-tight", showReplay: true, showConfig: true }), _jsx("div", { className: "pt-8 border-t border-gray-200", children: _jsx(AnimatedText, { content: "We craft distinctive identities that resonate with your audience and reflect your authentic self", animation: "typewriter", align: "center", typewriterEffect: [
                                                        'fadeIn',
                                                        { type: 'fontSize', from: '16px', to: '24px' },
                                                        { type: 'letterSpacing', from: '2px', to: '0.5px' }
                                                    ], typewriterDuration: 60, typewriterDelay: 30, className: "text-xl text-gray-600 font-light max-w-3xl mx-auto leading-relaxed", showReplay: true, showConfig: true }) })] }) }) }), _jsx("div", { className: "absolute top-4 left-4 text-xs text-gray-400", children: "Modern Brand Identity" })] }), _jsxs("div", { className: "bg-gradient-to-br from-slate-50 to-gray-100 p-12 rounded-2xl relative", children: [_jsx("div", { className: "max-w-6xl mx-auto", children: _jsx("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-12 items-center", children: _jsxs(AnimatedTextGroup, { coordinationMode: "sequential", staggerDelay: 800, showReplay: true, showConfig: true, className: "space-y-6", children: [_jsx(AnimatedText, { content: "THE FUTURE IS WRITTEN IN CODE", animation: "word-typewriter", wordTypewriterEffect: [
                                                    'fadeIn',
                                                    { type: 'fontSize', from: '24px', to: '56px' },
                                                    { type: 'fontWeight', from: '300', to: '900' },
                                                    { type: 'lineHeight', from: '1.0', to: '1.1' }
                                                ], wordTypewriterDuration: 120, wordTypewriterLetterDelay: 50, wordTypewriterWordDelay: 400, className: "text-4xl md:text-6xl font-black text-slate-900 leading-tight", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "Every line of code tells a story. Every function holds a purpose. In the digital age, developers are the modern storytellers, crafting experiences that shape how we interact with the world.", animation: "typewriter", typewriterEffect: [
                                                    'fadeIn',
                                                    { type: 'fontSize', from: '14px', to: '18px' },
                                                    { type: 'lineHeight', from: '1.3', to: '1.6' }
                                                ], typewriterDuration: 40, typewriterDelay: 25, className: "text-lg text-slate-700 font-light leading-relaxed", showReplay: true, showConfig: true }), _jsx("div", { className: "bg-white p-8 rounded-xl shadow-sm", children: _jsx(AnimatedText, { content: "Innovation starts with imagination", animation: "word", wordEffect: [
                                                        'fadeIn',
                                                        'slide-up',
                                                        { type: 'fontSize', from: '20px', to: '32px' },
                                                        { type: 'fontWeight', from: '300', to: '600' }
                                                    ], wordDuration: 600, wordSpacing: 300, className: "text-2xl md:text-3xl text-slate-600 italic text-center", showReplay: true, showConfig: true }) })] }) }) }), _jsx("div", { className: "absolute top-4 left-4 text-xs text-gray-400", children: "Editorial Magazine" })] }), _jsxs("div", { className: "bg-white p-12 rounded-2xl border-l-8 border-black relative", children: [_jsx("div", { className: "max-w-4xl mx-auto", children: _jsxs(AnimatedTextGroup, { coordinationMode: "sequential", staggerDelay: 1000, showReplay: true, showConfig: true, className: "space-y-12", children: [_jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "FORM FOLLOWS FUNCTION", animation: "typewriter", typewriterEffect: [
                                                    'fadeIn',
                                                    { type: 'fontSize', from: '48px', to: '96px' },
                                                    { type: 'fontWeight', from: '100', to: '900' },
                                                    { type: 'letterSpacing', from: '12px', to: '4px' }
                                                ], typewriterDuration: 150, typewriterDelay: 100, className: "text-6xl md:text-8xl lg:text-9xl font-black text-black tracking-[4px]", showReplay: true, showConfig: true }) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 pt-8", children: [_jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "CLARITY", animation: "word-typewriter", wordTypewriterEffect: [
                                                            'fadeIn',
                                                            { type: 'fontSize', from: '16px', to: '24px' },
                                                            { type: 'fontWeight', from: '400', to: '700' }
                                                        ], wordTypewriterDuration: 100, wordTypewriterLetterDelay: 60, className: "text-xl font-bold text-black mb-3", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "PURPOSE", animation: "word-typewriter", wordTypewriterEffect: [
                                                            'fadeIn',
                                                            { type: 'fontSize', from: '16px', to: '24px' },
                                                            { type: 'fontWeight', from: '400', to: '700' }
                                                        ], wordTypewriterDuration: 100, wordTypewriterLetterDelay: 60, className: "text-xl font-bold text-black mb-3", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "ELEGANCE", animation: "word-typewriter", wordTypewriterEffect: [
                                                            'fadeIn',
                                                            { type: 'fontSize', from: '16px', to: '24px' },
                                                            { type: 'fontWeight', from: '400', to: '700' }
                                                        ], wordTypewriterDuration: 100, wordTypewriterLetterDelay: 60, className: "text-xl font-bold text-black mb-3", showReplay: true, showConfig: true }) })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [_jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "Simple, direct communication without unnecessary decoration", animation: "typewriter", typewriterDuration: 40, typewriterDelay: 20, className: "text-sm text-gray-600 leading-relaxed", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "Every element serves a specific function in the design", animation: "typewriter", typewriterDuration: 40, typewriterDelay: 20, className: "text-sm text-gray-600 leading-relaxed", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "Beauty emerges from the harmony of all elements", animation: "typewriter", typewriterDuration: 40, typewriterDelay: 20, className: "text-sm text-gray-600 leading-relaxed", showReplay: true, showConfig: true }) })] })] }) }), _jsx("div", { className: "absolute top-4 left-4 text-xs text-gray-400", children: "Swiss Minimalism" })] }), _jsxs("div", { className: "bg-black text-white p-12 rounded-2xl relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-black via-gray-900 to-black opacity-90" }), _jsx("div", { className: "relative z-10 max-w-5xl mx-auto", children: _jsxs(AnimatedTextGroup, { coordinationMode: "sequential", staggerDelay: 1200, showReplay: true, showConfig: true, className: "space-y-8", children: [_jsx(AnimatedText, { content: "WE DON'T FOLLOW TRENDS", animation: "word-typewriter", wordTypewriterEffect: [
                                                'fadeIn',
                                                { type: 'fontSize', from: '32px', to: '64px' },
                                                { type: 'fontWeight', from: '400', to: '900' },
                                                { type: 'letterSpacing', from: '6px', to: '2px' },
                                                { type: 'textShadow', from: 'none', to: '0 0 30px rgba(255,255,255,0.3)' }
                                            ], wordTypewriterDuration: 150, wordTypewriterLetterDelay: 60, wordTypewriterWordDelay: 500, className: "text-4xl md:text-6xl lg:text-7xl font-black text-center leading-tight tracking-[2px]", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "WE CREATE THEM", animation: "typewriter", align: "center", typewriterEffect: [
                                                'fadeIn',
                                                { type: 'fontSize', from: '48px', to: '72px' },
                                                { type: 'fontWeight', from: '200', to: '900' },
                                                { type: 'letterSpacing', from: '8px', to: '3px' },
                                                { type: 'textShadow', from: 'none', to: '0 0 40px rgba(234, 88, 12, 0.8)' },
                                                { type: 'color', from: '#ffffff', to: '#ea580c' }
                                            ], typewriterDuration: 200, typewriterDelay: 150, className: "text-5xl md:text-7xl font-black text-center leading-tight tracking-[3px]", showReplay: true, showConfig: true }), _jsx("div", { className: "pt-8", children: _jsx(AnimatedText, { content: "Innovation isn't about following the crowd\u2014it's about having the courage to lead where others fear to go.", animation: "word", align: "center", wordEffect: [
                                                    'fadeIn',
                                                    'slide-up',
                                                    { type: 'fontSize', from: '16px', to: '20px' },
                                                    { type: 'letterSpacing', from: '1px', to: '0.5px' }
                                                ], wordDuration: 400, wordSpacing: 150, className: "text-lg text-gray-300 font-light max-w-3xl mx-auto text-center leading-relaxed", showReplay: true, showConfig: true }) })] }) }), _jsx("div", { className: "absolute top-4 left-4 text-xs text-gray-500", children: "Bold Statement" })] }), _jsxs("div", { className: "bg-gradient-to-br from-indigo-50 via-white to-purple-50 p-12 rounded-2xl relative", children: [_jsx("div", { className: "max-w-6xl mx-auto", children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-0 flex items-center justify-center opacity-5", children: _jsx("span", { className: "text-[20rem] font-black text-indigo-900 select-none", children: "TYPE" }) }), _jsx("div", { className: "relative z-10 text-center space-y-12", children: _jsxs(AnimatedTextGroup, { coordinationMode: "sequential", staggerDelay: 1000, showReplay: true, showConfig: true, className: "space-y-12", children: [_jsx(AnimatedText, { content: "TYPOGRAPHY IS THE CRAFT OF ENDOWING HUMAN LANGUAGE WITH A DURABLE VISUAL FORM", animation: "word", wordEffect: [
                                                            'fadeIn',
                                                            'slide-up',
                                                            { type: 'fontSize', from: '24px', to: '40px' },
                                                            { type: 'fontWeight', from: '300', to: '700' },
                                                            { type: 'letterSpacing', from: '3px', to: '1px' }
                                                        ], wordDuration: 500, wordSpacing: 200, className: "text-3xl md:text-4xl lg:text-5xl font-bold text-indigo-900 leading-tight max-w-4xl mx-auto", showReplay: true, showConfig: true }), _jsx("div", { className: "pt-8", children: _jsx(AnimatedText, { content: "Robert Bringhurst", animation: "typewriter", align: "center", typewriterEffect: [
                                                                'fadeIn',
                                                                { type: 'fontSize', from: '14px', to: '18px' },
                                                                { type: 'letterSpacing', from: '4px', to: '2px' }
                                                            ], typewriterDuration: 100, typewriterDelay: 80, className: "text-lg text-indigo-600 font-light italic tracking-[2px]", showReplay: true, showConfig: true }) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 pt-12", children: [_jsx(AnimatedText, { content: "Typography shapes the way we read, think, and feel about written content", animation: "word-typewriter", wordTypewriterEffect: [
                                                                    'fadeIn',
                                                                    { type: 'fontSize', from: '14px', to: '16px' },
                                                                    { type: 'lineHeight', from: '1.4', to: '1.6' }
                                                                ], wordTypewriterDuration: 80, wordTypewriterLetterDelay: 40, wordTypewriterWordDelay: 200, className: "text-base text-gray-700 leading-relaxed", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "Good typography is invisible\u2014it serves the content without drawing attention to itself", animation: "word-typewriter", wordTypewriterEffect: [
                                                                    'fadeIn',
                                                                    { type: 'fontSize', from: '14px', to: '16px' },
                                                                    { type: 'lineHeight', from: '1.4', to: '1.6' }
                                                                ], wordTypewriterDuration: 80, wordTypewriterLetterDelay: 40, wordTypewriterWordDelay: 200, className: "text-base text-gray-700 leading-relaxed", showReplay: true, showConfig: true })] })] }) })] }) }), _jsx("div", { className: "absolute top-4 left-4 text-xs text-gray-400", children: "Contemporary Layered" })] })] }), _jsxs("div", { className: "mt-12 p-6 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border border-green-200", children: [_jsx("h4", { className: "text-lg font-semibold mb-4 text-green-900", children: "\u270D\uFE0F Typewriter Effects Mastery" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 text-sm", children: [_jsxs("div", { children: [_jsx("h5", { className: "font-medium text-green-800 mb-2", children: "Design Principles:" }), _jsxs("ul", { className: "space-y-1 text-green-700", children: [_jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Pacing & rhythm" }), " create emotional engagement"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Letter spacing" }), " enhances readability and impact"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Font weight progression" }), " builds visual hierarchy"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Strategic delays" }), " guide reader attention"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Contextual styling" }), " supports brand personality"] })] })] }), _jsxs("div", { children: [_jsx("h5", { className: "font-medium text-green-800 mb-2", children: "Typewriter Techniques:" }), _jsxs("ul", { className: "space-y-1 text-green-700", children: [_jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "word-typewriter" }), " for dramatic reveals"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "typewriter" }), " for detailed storytelling"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Variable timing" }), " creates natural reading flow"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Size & weight morphing" }), " adds sophistication"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Staggered sequences" }), " build complex narratives"] })] })] })] })] })] }));
};
export default TypographicShowcasesSection;