@erosnicolau/animated-text/dist/demo/sections/StaticStyling/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 StaticStylingSection = () => {
    return (_jsxs(DemoSection, { id: "static-styling", title: "Static Styling Props & Performance Optimization", description: "Foundation props for controlling base styling and transform behavior without animation. Built-in virtualization provides automatic performance optimization.", children: [_jsxs("div", { className: "mb-8 p-6 bg-gradient-to-r from-green-50 to-blue-50 rounded-xl border border-green-200", children: [_jsx("h3", { className: "text-lg font-medium mb-4 text-center text-green-900", children: "\uD83D\uDE80 Built-in Performance Features" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 text-sm", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold text-green-800", children: "Performance Mode" }), _jsx("p", { className: "text-green-700", children: "When enabled: Complex effects simplified to fadeIn, durations reduced to 300ms max, replay/config buttons hidden." }), _jsx("div", { className: "bg-green-100 px-3 py-2 rounded font-mono text-xs", children: "Automatic global performance detection active" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold text-blue-800", children: "Virtual Scrolling (Built-in)" }), _jsx("p", { className: "text-blue-700", children: "Always enabled: Off-screen components automatically replaced with transparent placeholders, eliminating React calculations for invisible elements. 60-80% CPU reduction for off-screen components." }), _jsx("div", { className: "bg-blue-100 px-3 py-2 rounded font-mono text-xs", children: "Built-in optimization - always active" })] })] })] }), _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-slate-50 to-gray-50 rounded-xl text-center border border-slate-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-slate-900", children: "Transform Origin Control" }), _jsx(AnimatedText, { content: "Scale from Top Left", animation: "block", align: "center", transformOrigin: "top left", blockEffect: ['fadeIn', { type: 'scale', from: 0.3, to: 1 }], blockDuration: 1000, className: "text-xl md:text-2xl lg:text-3xl font-bold", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-slate-700", children: "Transform origin set to \"top left\" - scale animation starts from top-left corner" }), _jsx("div", { className: "mt-3 text-xs bg-slate-100 px-3 py-2 rounded", children: _jsx("code", { children: `transformOrigin="top left"` }) })] }), _jsxs("div", { className: "p-6 bg-gradient-to-br from-violet-50 to-indigo-50 rounded-xl text-center border border-violet-200", children: [_jsx("h4", { className: "text-base font-medium mb-4 text-violet-900", children: "Text Shadow Styling" }), _jsx(AnimatedText, { content: "Beautiful Text Shadow", animation: "block", align: "center", textShadow: "0 4px 12px rgba(79, 70, 229, 0.4)", blockEffect: ['fadeIn', 'slide-up'], blockDuration: 800, 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: "Static text shadow applied regardless of animation state" }), _jsx("div", { className: "mt-3 text-xs bg-violet-100 px-3 py-2 rounded", children: _jsx("code", { children: `textShadow="0 4px 12px rgba(79, 70, 229, 0.4)"` }) })] })] }), _jsxs("div", { className: "p-6 bg-gradient-to-r from-cyan-50 to-blue-50 rounded-xl border border-cyan-200", children: [_jsx("h3", { className: "text-lg font-medium mb-4 text-center text-cyan-900", children: "Combined Static + Animation Effects" }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "Advanced|Styling|Control", animation: "phrases", align: "center", transformOrigin: "center bottom", textShadow: "0 2px 8px rgba(0, 0, 0, 0.2)", className: "text-2xl md:text-3xl lg:text-4xl font-bold", phraseStyles: [
                                {
                                    phrase: 1,
                                    effect: ['fadeIn', { type: 'scale', from: 0.5, to: 1 }, { type: 'rotate', from: -10, to: 0 }],
                                    delayBefore: 0,
                                    duration: 800,
                                    className: 'text-cyan-600'
                                },
                                {
                                    phrase: 2,
                                    effect: ['fadeIn', { type: 'scale', from: 0.5, to: 1 }, { type: 'rotate', from: 10, to: 0 }],
                                    delayBefore: 600,
                                    duration: 800,
                                    className: 'text-blue-500'
                                },
                                {
                                    phrase: 3,
                                    effect: ['fadeIn', { type: 'scale', from: 0.5, to: 1 }],
                                    delayBefore: 1200,
                                    duration: 800,
                                    className: 'text-indigo-600'
                                }
                            ], showReplay: true, showConfig: true }) }), _jsx("p", { className: "mt-4 text-sm text-cyan-700 text-center", children: "Static transform origin \"center bottom\" + text shadow combined with dynamic scale and rotation effects" })] }), _jsxs("div", { className: "mt-6 p-4 bg-green-50 border border-green-200 rounded-xl", children: [_jsx("h4", { className: "text-base font-medium mb-3 text-green-800", children: "\u2728 Static Styling API" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("p", { className: "font-medium text-green-900 mb-2", children: "Transform Origin:" }), _jsx("code", { className: "bg-green-100 px-2 py-1 rounded text-xs block mb-1", children: `transformOrigin="center"` }), _jsx("code", { className: "bg-green-100 px-2 py-1 rounded text-xs block mb-1", children: `transformOrigin="top left"` }), _jsx("code", { className: "bg-green-100 px-2 py-1 rounded text-xs block", children: `transformOrigin="50% 0%"` })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-green-900 mb-2", children: "Text Shadow:" }), _jsx("code", { className: "bg-green-100 px-2 py-1 rounded text-xs block mb-1", children: `textShadow="0 2px 4px rgba(0,0,0,0.1)"` }), _jsx("code", { className: "bg-green-100 px-2 py-1 rounded text-xs block mb-1", children: `textShadow="2px 2px 8px #3b82f6"` }), _jsx("code", { className: "bg-green-100 px-2 py-1 rounded text-xs block", children: `textShadow="0 0 10px currentColor"` })] })] })] })] }));
};
export default StaticStylingSection;