@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
69 lines (68 loc) • 10.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText from '../../../';
import { DemoSection } from '../../components';
const SizeLayoutEffectsSection = () => {
return (_jsxs(DemoSection, { id: "size-layout-effects", title: "Size & Layout Effects", description: "Complete control over element dimensions with width, height, and their min/max variants.", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Width Control" }), _jsx("p", { className: "text-sm text-gray-600", children: "Animate width changes for dynamic content expansion." }), _jsx("div", { className: "bg-blue-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Watch this text container grow from narrow to wide as the animation plays", animation: "block", blockEffect: ['fadeIn', 'slide-up', { type: 'width', from: '200px', to: '400px' }], blockDuration: 2000, className: "text-blue-600 font-medium bg-blue-100 p-4 border border-blue-200 rounded", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `{ type: 'width', from: '200px', to: '400px' }` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Min/Max Width Constraints" }), _jsx("p", { className: "text-sm text-gray-600", children: "Control responsive behavior with minimum and maximum width boundaries." }), _jsxs("div", { className: "bg-green-50 p-6 rounded-lg space-y-4", children: [_jsx(AnimatedText, { content: "Minimum width ensures this text never gets too narrow for readability", animation: "block", blockEffect: ['fadeIn', { type: 'minWidth', from: '100px', to: '300px' }], blockDuration: 1500, className: "text-green-600 font-medium bg-green-100 p-3 border border-green-200 rounded", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "Maximum width prevents this text from becoming too wide and hard to read across the entire screen width", animation: "block", blockEffect: ['fadeIn', { type: 'maxWidth', from: '300px', to: '600px' }], blockDuration: 1500, className: "text-green-700 font-medium bg-green-100 p-3 border border-green-200 rounded", showReplay: true, showConfig: true })] }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `// Min-width expands, max-width contracts
{ type: 'minWidth', from: '100px', to: '300px' }
{ type: 'maxWidth', from: '300px', to: '600px' }` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Height Control" }), _jsx("p", { className: "text-sm text-gray-600", children: "Animate height changes for vertical expansion effects." }), _jsx("div", { className: "bg-purple-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Vertical Growth Effect", animation: "block", blockEffect: ['fadeIn', { type: 'height', from: '40px', to: '120px' }], blockDuration: 2000, className: "text-purple-600 font-bold text-center bg-purple-100 border border-purple-200 rounded flex items-center justify-center", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `{ type: 'height', from: '40px', to: '120px' }` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Min/Max Height Constraints" }), _jsx("p", { className: "text-sm text-gray-600", children: "Control vertical boundaries with minimum and maximum height limits." }), _jsxs("div", { className: "bg-orange-50 p-6 rounded-lg space-y-4", children: [_jsx(AnimatedText, { content: "Minimum height ensures adequate space", animation: "block", blockEffect: ['fadeIn', { type: 'minHeight', from: '30px', to: '80px' }], blockDuration: 1500, className: "text-orange-600 font-medium bg-orange-100 p-3 border border-orange-200 rounded flex items-center", showReplay: true, showConfig: true }), _jsx(AnimatedText, { content: "Maximum height prevents excessive vertical space that might break layout harmony and visual balance", animation: "block", blockEffect: ['fadeIn', { type: 'maxHeight', from: '100px', to: '60px' }], blockDuration: 1500, className: "text-orange-700 font-medium bg-orange-100 p-3 border border-orange-200 rounded overflow-hidden", showReplay: true, showConfig: true })] }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `// Vertical constraint control
{ type: 'minHeight', from: '30px', to: '80px' }
{ type: 'maxHeight', from: '100px', to: '60px' }` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Complete Size Animation" }), _jsx("p", { className: "text-sm text-gray-600", children: "Combine multiple size effects for comprehensive layout transformations." }), _jsx("div", { className: "bg-indigo-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Ultimate Size Control", animation: "block", blockEffect: [
'fadeIn',
'slide-up',
{ type: 'width', from: '150px', to: '350px' },
{ type: 'height', from: '50px', to: '100px' },
{ type: 'minWidth', from: '100px', to: '200px' },
{ type: 'maxWidth', from: '500px', to: '400px' }
], blockDuration: 2500, className: "text-indigo-600 font-bold text-center bg-indigo-100 border-2 border-indigo-300 rounded-lg flex items-center justify-center", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `// Multi-dimensional animation
blockEffect={[
'fadeIn', 'slide-up',
{ type: 'width', from: '150px', to: '350px' },
{ type: 'height', from: '50px', to: '100px' },
{ type: 'minWidth', from: '100px', to: '200px' },
{ type: 'maxWidth', from: '500px', to: '400px' }
]}` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Individual Phrase Size Control" }), _jsx("p", { className: "text-sm text-gray-600", children: "Each phrase can have its own size constraints for complex layouts." }), _jsx("div", { className: "bg-gray-50 p-6 rounded-lg space-y-3", children: _jsx(AnimatedText, { content: "Small Box|Medium Container|Large Area", animation: "phrases", phraseStyles: [
{
phrase: 1,
className: 'text-red-600 font-bold bg-red-100 border border-red-200 rounded p-2 block text-center',
width: '200px',
height: '60px',
effect: ['fadeIn', 'slide-up'],
delayBefore: 0
},
{
phrase: 2,
className: 'text-blue-600 font-bold bg-blue-100 border border-blue-200 rounded p-3 block text-center',
width: '350px',
height: '80px',
effect: ['fadeIn', 'slide-up'],
delayBefore: 600
},
{
phrase: 3,
className: 'text-green-600 font-bold bg-green-100 border border-green-200 rounded p-4 block text-center',
width: '500px',
height: '100px',
effect: ['fadeIn', 'slide-up'],
delayBefore: 1200
}
], showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `// Individual phrase dimensions
phraseStyles={[
{ phrase: 1, width: '120px', height: '60px' },
{ phrase: 2, width: '200px', height: '80px' },
{ phrase: 3, width: '280px', height: '100px' }
]}` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Responsive Layout Animation" }), _jsx("p", { className: "text-sm text-gray-600", children: "Create responsive behaviors with animated size constraints." }), _jsx("div", { className: "bg-yellow-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "This text demonstrates responsive animation by starting with mobile-friendly constraints and expanding to desktop-optimized dimensions for better readability and visual appeal", animation: "block", blockEffect: [
'fadeIn',
{ type: 'maxWidth', from: '250px', to: '500px' },
{ type: 'minHeight', from: '60px', to: '100px' },
{ type: 'fontSize', from: '14px', to: '18px' },
{ type: 'lineHeight', from: '1.3', to: '1.6' }
], blockDuration: 3000, className: "text-yellow-700 font-medium bg-yellow-100 p-4 border border-yellow-200 rounded", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `// Mobile to desktop responsive animation
blockEffect={[
'fadeIn',
{ type: 'maxWidth', from: '250px', to: '500px' },
{ type: 'minHeight', from: '60px', to: '100px' },
{ type: 'fontSize', from: '14px', to: '18px' },
{ type: 'lineHeight', from: '1.3', to: '1.6' }
]}` })] })] }));
};
export default SizeLayoutEffectsSection;