@erosnicolau/animated-text/dist/demo/sections/SizeEffects/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 SizeEffectsSection = () => {
    return (_jsxs(DemoSection, { id: "size-effects", title: "Size Effects (Width & Height)", description: "Dynamic width and height transitions for container morphing and responsive animations.", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Width Animation" }), _jsx("div", { className: "bg-gray-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Expanding Width", animation: "block", blockEffect: ['fadeIn', 'slide-up', { type: 'width', from: '100px', to: '300px' }], blockDuration: 1500, className: "text-xl text-gray-800 bg-blue-100 p-4 text-center border", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `{ type: 'width', from: '100px', to: '300px' }` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Height Animation" }), _jsx("div", { className: "bg-green-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Growing Height", animation: "block", blockEffect: ['fadeIn', { type: 'height', from: '40px', to: '120px' }], blockDuration: 1200, className: "text-green-700 text-lg bg-green-100 p-4 border 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: "Combined Width & Height Animation" }), _jsx("div", { className: "bg-purple-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Box Expansion", animation: "block", blockEffect: [
                                'fadeIn',
                                'slide-up',
                                { type: 'width', from: '80px', to: '200px' },
                                { type: 'height', from: '60px', to: '100px' }
                            ], blockDuration: 1800, className: "text-purple-700 text-lg bg-purple-100 p-4 border-2 border-purple-300 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-effect: width + height expansion` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Percentage-Based Sizing" }), _jsx("div", { className: "bg-orange-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Responsive Scaling", animation: "block", blockEffect: [
                                'fadeIn',
                                { type: 'width', from: '30%', to: '80%' },
                                { type: 'height', from: '50px', to: '100px' }
                            ], blockDuration: 1400, className: "text-orange-700 text-lg bg-orange-100 p-4 border border-orange-300 text-center", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `{ type: 'width', from: '30%', to: '80%' }` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Ultimate Container Morphing" }), _jsx("div", { className: "bg-indigo-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Complete Transformation", animation: "block", blockEffect: [
                                'fadeIn',
                                'slide-up',
                                { type: 'width', from: '120px', to: '280px' },
                                { type: 'height', from: '40px', to: '80px' },
                                { type: 'borderRadius', from: '0', to: '20px' },
                                { type: 'backgroundColor', from: '#e0e7ff', to: '#3730a3' },
                                { type: 'color', from: '#4338ca', to: '#ffffff' }
                            ], blockDuration: 2000, className: "text-indigo-700 text-lg p-4 border border-indigo-300 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: `Ultimate: width + height + borderRadius + backgroundColor + color` })] })] }));
};
export default SizeEffectsSection;