@erosnicolau/animated-text/dist/demo/sections/FontSizeEffects/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 FontSizeEffectsSection = () => {
    return (_jsxs(DemoSection, { id: "font-size-effects", title: "Dynamic Font Size Effects", description: "Animate font sizes for dramatic scaling effects, perfect for emphasis and visual hierarchy.", 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: "Font Size Scaling" }), _jsx(AnimatedText, { content: "Growing Text", animation: "block", align: "center", blockEffect: ['fadeIn', 'slide-up', { type: 'fontSize', from: '14px', to: '36px' }], blockDuration: 1200, className: "font-bold text-emerald-600", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-emerald-700", children: "Text grows from small to large with smooth scaling animation" }), _jsx("div", { className: "mt-3 text-xs bg-emerald-100 px-3 py-2 rounded", children: _jsx("code", { children: `{ type: 'fontSize', from: '14px', to: '36px' }` }) })] }), _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: "Dramatic Size Change" }), _jsx(AnimatedText, { content: "MASSIVE TEXT", animation: "block", align: "center", blockEffect: [
                                    'fadeIn',
                                    { type: 'scale', from: 0.8, to: 1 },
                                    { type: 'fontSize', from: '12px', to: '48px' }
                                ], blockDuration: 1500, className: "font-black text-purple-600", showReplay: true, showConfig: true }), _jsx("p", { className: "mt-4 text-sm text-purple-700", children: "Combines font size scaling with transform scaling for maximum impact" }), _jsx("div", { className: "mt-3 text-xs bg-purple-100 px-3 py-2 rounded", children: _jsx("code", { children: `fontSize + scale effects combined` }) })] })] }), _jsxs("div", { className: "p-6 bg-gradient-to-r from-orange-50 to-yellow-50 rounded-xl border border-orange-200", children: [_jsx("h3", { className: "text-lg font-medium mb-4 text-center text-orange-900", children: "Word-by-Word Font Size Animation" }), _jsx("div", { className: "text-center", children: _jsx(AnimatedText, { content: "Each word grows bigger", animation: "word", align: "center", wordEffect: ['fadeIn', { type: 'fontSize', from: '16px', to: '28px' }], wordDuration: 600, wordSpacing: 300, wordEasing: "ease-out", className: "font-bold text-orange-600", showReplay: true, showConfig: true }) }), _jsx("p", { className: "mt-4 text-sm text-orange-700 text-center", children: "Each word individually scales up in font size with staggered timing" })] }), _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\uDCCF Font Size Effects 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-indigo-900 mb-2", children: "Basic Usage:" }), _jsx("code", { className: "bg-indigo-100 px-2 py-1 rounded text-xs block mb-1", children: `{ type: 'fontSize', from: '16px', to: '32px' }` }), _jsx("code", { className: "bg-indigo-100 px-2 py-1 rounded text-xs block", children: `{ type: 'fontSize', from: '1rem', to: '3rem' }` })] }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-indigo-900 mb-2", children: "Supported Units:" }), _jsxs("div", { className: "text-xs text-indigo-700 space-y-1", children: [_jsxs("div", { children: ["\u2022 ", _jsx("code", { children: "px" }), ": Absolute pixel values"] }), _jsxs("div", { children: ["\u2022 ", _jsx("code", { children: "rem" }), ": Relative to root font size"] }), _jsxs("div", { children: ["\u2022 ", _jsx("code", { children: "em" }), ": Relative to parent font size"] }), _jsxs("div", { children: ["\u2022 ", _jsx("code", { children: "%" }), ": Percentage of parent font size"] })] })] })] })] })] }));
};
export default FontSizeEffectsSection;