@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
30 lines (29 loc) • 4.96 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText from '../../../';
import { DemoSection } from '../../components';
const FontWeightEffectsSection = () => {
return (_jsxs(DemoSection, { id: "font-weight-effects", title: "Font Weight Effects", description: "Dynamic font weight transitions for variable fonts and progressive weight changes.", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Simple Font Weight Animation" }), _jsx("div", { className: "bg-gray-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "From Light to Bold Weight Transformation", animation: "block", blockEffect: ['fadeIn', 'slide-up', { type: 'fontWeight', from: '100', to: '900' }], blockDuration: 1500, className: "text-2xl text-gray-800", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `{ type: 'fontWeight', from: '100', to: '900' }` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Named Font Weight Values" }), _jsx("div", { className: "bg-blue-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "NORMAL TO BOLD|BOLD TO BLACK", animation: "phrases", phraseStyles: [
{
phrase: 1,
className: 'text-blue-600 text-xl',
effect: ['fadeIn', { type: 'fontWeight', from: 'normal', to: 'bold' }],
duration: 1000,
delayBefore: 0
},
{
phrase: 2,
className: 'text-blue-800 text-lg',
effect: ['fadeIn', 'slide-up', { type: 'fontWeight', from: 'bold', to: '900' }],
duration: 800,
delayBefore: 600
}
], showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `from: 'normal', to: 'bold' | from: 'bold', to: '900'` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Word-by-Word Font Weight Animation" }), _jsx("div", { className: "bg-green-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Each word becomes progressively bolder creating visual hierarchy", animation: "word", wordEffect: ['fadeIn', 'slide-up', { type: 'fontWeight', from: '300', to: '700' }], wordDuration: 400, wordSpacing: 200, className: "text-green-700 text-lg", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `wordEffect={['fadeIn', 'slide-up', { type: 'fontWeight', from: '300', to: '700' }]}` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Multi-Typography with Font Weight" }), _jsx("div", { className: "bg-purple-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Ultimate Typography Experience", animation: "block", blockEffect: [
'fadeIn',
'slide-up',
{ type: 'fontSize', from: '16px', to: '36px' },
{ type: 'fontWeight', from: '100', to: '900' },
{ type: 'letterSpacing', from: '8px', to: '2px' },
{ type: 'textShadow', from: 'none', to: '0 4px 8px rgba(147, 51, 234, 0.4)' }
], blockDuration: 2000, className: "text-purple-600 text-center", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `Multi-effect: fontSize + fontWeight + letterSpacing + textShadow` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Typewriter + Font Weight" }), _jsx("div", { className: "bg-orange-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Bold letter by letter animation!", animation: "typewriter", typewriterEffect: ['fadeIn', { type: 'fontWeight', from: '200', to: '800' }], typewriterDuration: 150, typewriterDelay: 40, className: "text-orange-700 font-medium text-lg", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `typewriterEffect={['fadeIn', { type: 'fontWeight', from: '200', to: '800' }]}` })] })] }));
};
export default FontWeightEffectsSection;