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

Advanced React animated text component with comprehensive animation effects

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText from '../../../';
import { DemoSection } from '../../components';
const LetterSpacingEffectsSection = () => {
    return (_jsxs(DemoSection, { id: "letter-spacing-effects", title: "Letter Spacing Effects", description: "Dynamic letter spacing animations that expand, compress, and create rhythm in text.", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mb-6", children: [_jsxs("div", { className: "p-6 bg-gradient-to-br from-indigo-50 to-blue-50 rounded-xl text-center border border-indigo-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-indigo-900", children: "Letter Expansion" }), _jsx(AnimatedText, { content: "EXPANDING TEXT", animation: "block", align: "center", blockEffect: ['fadeIn', { type: 'letterSpacing', from: '0px', to: '8px' }], blockDuration: 1200, className: "text-xl md:text-2xl lg:text-3xl font-bold text-indigo-600", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-indigo-700", children: "Letters spread out from normal to wide spacing" }), _jsx("div", { className: "mt-3 text-xs bg-indigo-100 px-3 py-2 rounded", children: _jsx("code", { children: `{ type: 'letterSpacing', from: '0px', to: '8px' }` }) })] }), _jsxs("div", { className: "p-6 bg-gradient-to-br from-violet-50 to-purple-50 rounded-xl text-center border border-violet-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-violet-900", children: "Letter Compression" }), _jsx(AnimatedText, { content: "COMPRESSED", animation: "block", align: "center", blockEffect: ['fadeIn', { type: 'letterSpacing', from: '12px', to: '1px' }], blockDuration: 1000, className: "text-xl md:text-2xl lg:text-3xl font-bold text-violet-600", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-violet-700", children: "Wide spacing compresses to tight letter spacing" }), _jsx("div", { className: "mt-3 text-xs bg-violet-100 px-3 py-2 rounded", children: _jsx("code", { children: `{ type: 'letterSpacing', from: '12px', to: '1px' }` }) })] }), _jsxs("div", { className: "p-6 bg-gradient-to-br from-emerald-50 to-green-50 rounded-xl text-center border border-emerald-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-emerald-900", children: "Combined with Scale" }), _jsx(AnimatedText, { content: "SCALE + SPACING", animation: "block", align: "center", blockEffect: [
                                    'fadeIn',
                                    'slide-up',
                                    { type: 'scale', from: 0.7, to: 1 },
                                    { type: 'letterSpacing', from: '15px', to: '2px' }
                                ], blockDuration: 1400, className: "text-xl md:text-2xl lg:text-3xl font-bold text-emerald-600", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-emerald-700", children: "Scale and letter spacing animate together for dramatic effect" }), _jsx("div", { className: "mt-3 text-xs bg-emerald-100 px-3 py-2 rounded", children: _jsx("code", { children: `[scale + letterSpacing]` }) })] }), _jsxs("div", { className: "p-6 bg-gradient-to-br from-orange-50 to-red-50 rounded-xl text-center border border-orange-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-orange-900", children: "Em Units" }), _jsx(AnimatedText, { content: "Relative Spacing", animation: "block", align: "center", blockEffect: ['fadeIn', { type: 'letterSpacing', from: '0em', to: '0.5em' }], blockDuration: 1000, className: "text-xl md:text-2xl lg:text-3xl font-bold text-orange-600", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-orange-700", children: "Using em units for responsive letter spacing" }), _jsx("div", { className: "mt-3 text-xs bg-orange-100 px-3 py-2 rounded", children: _jsx("code", { children: `{ type: 'letterSpacing', from: '0em', to: '0.5em' }` }) })] })] }), _jsxs("div", { className: "p-6 bg-gradient-to-r from-slate-50 to-gray-50 rounded-xl border border-slate-200", children: [_jsx("h3", { className: "text-lg font-medium mb-4 text-center text-slate-900", children: "Word-by-Word Letter Spacing" }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "Each word gets dynamic letter spacing effects", animation: "word", align: "center", wordEffect: ['fadeIn', 'slide-up', { type: 'letterSpacing', from: '8px', to: '0px' }], wordDuration: 600, wordSpacing: 300, wordEasing: "ease-out", className: "text-xl md:text-2xl lg:text-3xl font-bold text-slate-700", showReplay: true, showConfig: true }) }), _jsx("p", { className: "mt-4 text-sm text-slate-700 text-center", children: "Word-by-word animation where each word compresses from wide to normal spacing" }), _jsx("div", { className: "mt-3 text-xs bg-slate-100 px-3 py-2 rounded text-center", children: _jsx("code", { children: `wordEffect: [fadeIn, slide-up, letterSpacing]` }) })] }), _jsxs("div", { className: "p-6 bg-gradient-to-r from-rose-50 to-pink-50 rounded-xl border border-rose-200", children: [_jsx("h3", { className: "text-lg font-medium mb-4 text-center text-rose-900", children: "Typewriter + Letter Spacing" }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "Letter by letter with spacing!", animation: "typewriter", align: "center", typewriterEffect: ['fadeIn', { type: 'letterSpacing', from: '4px', to: '0px' }], typewriterDuration: 200, typewriterDelay: 60, typewriterEasing: "ease-out", className: "text-xl md:text-2xl lg:text-3xl font-bold text-rose-600", showReplay: true, showConfig: true }) }), _jsx("p", { className: "mt-4 text-sm text-rose-700 text-center", children: "Letter-by-letter typewriter with each letter spacing effect" })] }), _jsxs("div", { className: "mt-6 p-4 bg-blue-50 border border-blue-200 rounded-xl", children: [_jsx("h4", { className: "text-base font-medium mb-3 text-blue-800", children: "\uD83D\uDCD0 Letter Spacing Units" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("p", { className: "font-medium text-blue-900 mb-2", children: "Pixel Units:" }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block mb-1", children: `from: '0px', to: '8px'` }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block", children: `from: '10px', to: '2px'` })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-blue-900 mb-2", children: "Em Units:" }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block mb-1", children: `from: '0em', to: '0.3em'` }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block", children: `from: '0.5em', to: '0.1em'` })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-blue-900 mb-2", children: "Rem Units:" }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block mb-1", children: `from: '0rem', to: '0.5rem'` }), _jsx("code", { className: "bg-blue-100 px-2 py-1 rounded text-xs block", children: `from: '1rem', to: '0.2rem'` })] })] })] })] }));
};
export default LetterSpacingEffectsSection;