@erosnicolau/animated-text/dist/demo/sections/LayoutEffects/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 LayoutEffectsSection = () => {
    return (_jsxs(DemoSection, { id: "layout-effects", title: "Layout & Container Effects", description: "Dynamic layout animations that transform padding, margins, and border radius for container morphing effects.", 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-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: "Padding Animation" }), _jsx(AnimatedText, { content: "Growing Padding", animation: "block", align: "center", blockEffect: ['fadeIn', { type: 'padding', from: '10px 20px', to: '30px 60px' }], blockDuration: 1200, className: "text-xl md:text-2xl lg:text-3xl font-bold text-emerald-600 bg-emerald-100 rounded", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-emerald-700", children: "Padding expands from compact to spacious" }), _jsx("div", { className: "mt-3 text-xs bg-emerald-100 px-3 py-2 rounded", children: _jsx("code", { children: `{ type: 'padding', from: '10px 20px', to: '30px 60px' }` }) })] }), _jsxs("div", { className: "p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl text-center border border-blue-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-blue-900", children: "Border Radius Animation" }), _jsx(AnimatedText, { content: "Shape Shifting", animation: "block", align: "center", blockEffect: ['fadeIn', 'slide-up', { type: 'borderRadius', from: '0px', to: '24px' }], blockDuration: 1000, className: "text-xl md:text-2xl lg:text-3xl font-bold text-blue-600 bg-blue-100 px-4 py-2", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-blue-700", children: "Container morphs from sharp corners to rounded" }), _jsx("div", { className: "mt-3 text-xs bg-blue-100 px-3 py-2 rounded", children: _jsx("code", { children: `{ type: 'borderRadius', from: '0px', to: '24px' }` }) })] }), _jsxs("div", { className: "p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl text-center border border-purple-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-purple-900", children: "Margin Animation" }), _jsx(AnimatedText, { content: "Space Expansion", animation: "block", align: "center", blockEffect: ['fadeIn', { type: 'margin', from: '5px', to: '25px auto' }], blockDuration: 1000, className: "text-xl md:text-2xl lg:text-3xl font-bold text-purple-600 bg-purple-100 px-4 py-2 rounded", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-purple-700", children: "Margin grows and centers horizontally" }), _jsx("div", { className: "mt-3 text-xs bg-purple-100 px-3 py-2 rounded", children: _jsx("code", { children: `{ type: 'margin', from: '5px', to: '25px auto' }` }) })] }), _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: "Individual Padding" }), _jsx(AnimatedText, { content: "Precise Control", animation: "block", align: "center", blockEffect: [
                                    'fadeIn',
                                    { type: 'paddingTop', from: '5px', to: '25px' },
                                    { type: 'paddingLeft', from: '10px', to: '40px' }
                                ], blockDuration: 1200, className: "text-xl md:text-2xl lg:text-3xl font-bold text-orange-600 bg-orange-100 rounded", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-orange-700", children: "Individual padding properties animate independently" }), _jsx("div", { className: "mt-3 text-xs bg-orange-100 px-3 py-2 rounded", children: _jsx("code", { children: `paddingTop + paddingLeft effects` }) })] })] }), _jsxs("div", { className: "p-6 bg-gradient-to-r from-teal-50 to-cyan-50 rounded-xl border border-teal-200", children: [_jsx("h3", { className: "text-lg font-medium mb-4 text-center text-teal-900", children: "Container Morphing Showcase" }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "COMPLETE TRANSFORMATION", animation: "block", align: "center", blockEffect: [
                                'fadeIn',
                                'slide-up',
                                { type: 'padding', from: '8px 16px', to: '24px 48px' },
                                { type: 'margin', from: '0', to: '20px auto' },
                                { type: 'borderRadius', from: '4px', to: '16px' }
                            ], blockDuration: 1500, className: "text-xl md:text-2xl lg:text-3xl font-bold text-teal-600 bg-teal-100", showReplay: true, showConfig: true }) }), _jsx("p", { className: "mt-4 text-sm text-teal-700 text-center", children: "Complete container transformation: padding, margin, and border radius all animate together" }), _jsx("div", { className: "mt-3 text-xs bg-teal-100 px-3 py-2 rounded text-center", children: _jsx("code", { children: `[fadeIn, slide-up, padding, margin, borderRadius]` }) })] }), _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 Layout Effects" }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "Each word gets container effects", animation: "word", align: "center", wordEffect: [
                                'fadeIn',
                                'slide-up',
                                { type: 'padding', from: '4px 8px', to: '12px 20px' },
                                { type: 'borderRadius', from: '0px', to: '8px' }
                            ], wordDuration: 600, wordSpacing: 300, wordEasing: "ease-out", className: "text-xl md:text-2xl lg:text-3xl font-bold text-slate-700 bg-slate-100", showReplay: true, showConfig: true }) }), _jsx("p", { className: "mt-4 text-sm text-slate-700 text-center", children: "Word-by-word animation where each word gets individual container morphing" })] }), _jsxs("div", { className: "mt-6 p-4 bg-indigo-50 border border-indigo-200 rounded-xl", children: [_jsx("h4", { className: "text-base font-medium mb-3 text-indigo-800", children: "\uD83D\uDCD0 Layout Effects API" }), _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-indigo-900 mb-2", children: "Padding Effects:" }), _jsx("code", { className: "bg-indigo-100 px-2 py-1 rounded text-xs block mb-1", children: `{ type: 'padding', from: '10px', to: '20px' }` }), _jsx("code", { className: "bg-indigo-100 px-2 py-1 rounded text-xs block", children: `{ type: 'paddingTop', from: '5px', to: '15px' }` })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-indigo-900 mb-2", children: "Margin Effects:" }), _jsx("code", { className: "bg-indigo-100 px-2 py-1 rounded text-xs block mb-1", children: `{ type: 'margin', from: '0', to: '10px auto' }` }), _jsx("code", { className: "bg-indigo-100 px-2 py-1 rounded text-xs block", children: `{ type: 'marginLeft', from: '0', to: '20px' }` })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-indigo-900 mb-2", children: "Border Effects:" }), _jsx("code", { className: "bg-indigo-100 px-2 py-1 rounded text-xs block mb-1", children: `{ type: 'borderRadius', from: '0', to: '12px' }` }), _jsx("code", { className: "bg-indigo-100 px-2 py-1 rounded text-xs block", children: `{ type: 'borderRadius', from: '4px', to: '50%' }` })] })] })] })] }));
};
export default LayoutEffectsSection;