@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
80 lines (79 loc) • 10.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText from '../../../';
import { DemoSection } from '../../components';
const LineHeightEffectsSection = () => {
return (_jsxs(DemoSection, { id: "line-height-effects", title: "Line Height Effects", description: "Dynamic line height transitions for improved text rhythm and visual hierarchy.", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Simple Line Height Expansion" }), _jsx("div", { className: "bg-gray-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Expanding line height creates better text rhythm and readability for longer content blocks that span multiple lines", animation: "block", blockEffect: ['fadeIn', 'slide-up', { type: 'lineHeight', from: '1.1', to: '1.9' }], blockDuration: 1200, className: "text-gray-800 text-base", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `// Subtle line spacing increase for readability
blockEffect={['fadeIn', 'slide-up', { type: 'lineHeight', from: '1.1', to: '1.9' }]}` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Extreme Line Height Transitions" }), _jsx("p", { className: "text-sm text-gray-600", children: "Watch vertical spacing change between lines - from cramped to airy text breathing room." }), _jsx("div", { className: "bg-blue-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "This is a multi-line text example that demonstrates how line height animation works by showing the vertical spacing between these lines changing from very tight to very loose spacing", animation: "block", blockEffect: ['fadeIn', { type: 'lineHeight', from: '0.9', to: '2.2' }], blockDuration: 2000, className: "text-blue-600 font-semibold text-lg", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `// Watch the space BETWEEN lines grow
{ type: 'lineHeight', from: '0.9', to: '2.2' }` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Phrase-by-Phrase Line Height Control" }), _jsx("p", { className: "text-sm text-gray-600", children: "Different content blocks get appropriate line spacing. Each phrase displays side-by-side with its own max-width for layout control." }), _jsx("div", { className: "bg-green-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "This is a tight headline with multiple lines of text that demonstrates compact line spacing suitable for impact and attention-grabbing headers that need to feel dense and powerful|This represents normal paragraph text with comfortable line spacing that makes reading pleasant and easy on the eyes while maintaining good readability across multiple lines of content|This final section shows loose poetic text that flows with generous breathing room between each line creating an airy feeling that gives words space to breathe and creates a more contemplative reading experience", animation: "phrases", verticalAlign: "top", phraseStyles: [
{
phrase: 1,
className: 'text-green-800 font-bold text-lg inline-block',
effect: ['fadeIn', { type: 'lineHeight', from: '1.0', to: '1.2' }],
duration: 600,
delayBefore: 0,
maxWidth: '180px'
},
{
phrase: 2,
className: 'text-green-600 font-medium text-base inline-block ml-4',
effect: ['fadeIn', { type: 'lineHeight', from: '1.0', to: '1.6' }],
duration: 600,
delayBefore: 800,
maxWidth: '220px'
},
{
phrase: 3,
className: 'text-green-500 font-light text-base inline-block ml-4',
effect: ['fadeIn', { type: 'lineHeight', from: '1.0', to: '2.2' }],
duration: 600,
delayBefore: 1600,
maxWidth: '160px'
}
], showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `// Inline-block phrases with individual max-widths for line wrapping
phraseStyles={[
{ phrase: 1, maxWidth: '180px', className: 'inline-block' },
{ phrase: 2, maxWidth: '220px', className: 'inline-block ml-4' },
{ phrase: 3, maxWidth: '160px', className: 'inline-block ml-4' }
]}` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Vertical Alignment Control" }), _jsx("p", { className: "text-sm text-gray-600", children: "Control how inline-block phrases align vertically relative to each other." }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "bg-blue-50 p-4 rounded-lg", children: [_jsx("p", { className: "text-sm font-medium text-blue-800 mb-2", children: "Top Aligned (default)" }), _jsx(AnimatedText, { content: "Short text|Much longer text with multiple lines that demonstrates different heights|Medium length text here", animation: "phrases", verticalAlign: "top", phraseStyles: [
{ phrase: 1, className: 'bg-blue-100 border p-2 inline-block font-medium', maxWidth: '33.333%' },
{ phrase: 2, className: 'bg-blue-200 border p-2 inline-block ml-3', maxWidth: '33.333%' },
{ phrase: 3, className: 'bg-blue-100 border p-2 inline-block ml-3', maxWidth: '33.333%' }
], showReplay: true, showConfig: true })] }), _jsxs("div", { className: "bg-purple-50 p-4 rounded-lg", children: [_jsx("p", { className: "text-sm font-medium text-purple-800 mb-2", children: "Middle Aligned" }), _jsx(AnimatedText, { content: "Short text|Much longer text with multiple lines that demonstrates different heights|Medium length text here", animation: "phrases", verticalAlign: "middle", phraseStyles: [
{ phrase: 1, className: 'bg-purple-100 border p-2 inline-block font-medium', maxWidth: '33.333%' },
{ phrase: 2, className: 'bg-purple-200 border p-2 inline-block ml-3', maxWidth: '33.333%' },
{ phrase: 3, className: 'bg-purple-100 border p-2 inline-block ml-3', maxWidth: '33.333%' }
], showReplay: true, showConfig: true })] }), _jsxs("div", { className: "bg-orange-50 p-4 rounded-lg", children: [_jsx("p", { className: "text-sm font-medium text-orange-800 mb-2", children: "Bottom Aligned" }), _jsx(AnimatedText, { content: "Short text|Much longer text with multiple lines that demonstrates different heights|Medium length text here", animation: "phrases", verticalAlign: "bottom", phraseStyles: [
{ phrase: 1, className: 'bg-orange-100 border p-2 inline-block font-medium', maxWidth: '33.333%' },
{ phrase: 2, className: 'bg-orange-200 border p-2 inline-block ml-3', maxWidth: '33.333%' },
{ phrase: 3, className: 'bg-orange-100 border p-2 inline-block ml-3', maxWidth: '33.333%' }
], showReplay: true, showConfig: true })] })] }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `// Global vertical alignment control
verticalAlign="top" // default - align to top
verticalAlign="middle" // center vertically
verticalAlign="bottom" // align to bottom
verticalAlign="baseline" // align to text baseline` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Individual Phrase Vertical Alignment" }), _jsx("p", { className: "text-sm text-gray-600", children: "Each phrase can have its own vertical alignment setting." }), _jsx("div", { className: "bg-gray-50 p-4 rounded-lg", children: _jsx(AnimatedText, { content: "Top aligned|Middle aligned but longer text for demo purposes|Bottom aligned and slightly longer text", align: "center", animation: "phrases", phraseStyles: [
{
phrase: 1,
className: 'bg-red-100 border p-3 inline-block font-medium',
maxWidth: '250px',
verticalAlign: 'top'
},
{
phrase: 2,
className: 'bg-yellow-100 border p-3 inline-block ml-3 font-light',
maxWidth: '250px',
verticalAlign: 'middle'
},
{
phrase: 3,
className: 'bg-green-100 border p-3 inline-block ml-3',
maxWidth: '250px',
verticalAlign: 'bottom'
}
], showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-2 rounded", children: `// Individual phrase alignment control
phraseStyles={[
{ phrase: 1, verticalAlign: 'top' },
{ phrase: 2, verticalAlign: 'middle' },
{ phrase: 3, verticalAlign: 'bottom' }
]}` })] })] }));
};
export default LineHeightEffectsSection;