@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
51 lines (50 loc) • 6.61 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import AnimatedText from '../../../';
import { DemoSection } from '../../components';
const BorderEffectsSection = () => {
return (_jsxs(DemoSection, { id: "border-effects", title: "Border Effects", description: "Dynamic border animations including composite and individual border property transitions.", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Composite Border Animation" }), _jsx("div", { className: "bg-gray-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Border Transformation", animation: "block", blockEffect: [
'fadeIn',
'slide-up',
{
type: 'border',
from: '1px solid #e5e7eb',
to: '4px solid #3b82f6'
}
], blockDuration: 1200, className: "text-xl text-gray-800 p-4", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `{ type: 'border', from: '1px solid #e5e7eb', to: '4px solid #3b82f6' }` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Border Width Animation" }), _jsx("div", { className: "bg-blue-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Growing Border Width", animation: "block", blockEffect: ['fadeIn', { type: 'borderWidth', from: '1px', to: '8px' }], blockDuration: 1000, className: "text-blue-700 text-lg p-4 border border-blue-500", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `{ type: 'borderWidth', from: '1px', to: '8px' }` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Border Color Animation" }), _jsx("div", { className: "bg-green-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Color Shifting Border", animation: "block", blockEffect: ['fadeIn', 'slide-up', { type: 'borderColor', from: '#10b981', to: '#ef4444' }], blockDuration: 1500, className: "text-green-700 text-lg p-4 border-4 border-green-500", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `{ type: 'borderColor', from: '#10b981', to: '#ef4444' }` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Border Style Animation" }), _jsx("div", { className: "bg-purple-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Style Changing Border", animation: "block", blockEffect: ['fadeIn', { type: 'borderStyle', from: 'solid', to: 'dashed' }], blockDuration: 800, className: "text-purple-700 text-lg p-4 border-4 border-purple-500", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `{ type: 'borderStyle', from: 'solid', to: 'dashed' }` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Multi-Border Effect Combination" }), _jsx("div", { className: "bg-orange-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Ultimate Border Animation", animation: "block", blockEffect: [
'fadeIn',
'slide-up',
{ type: 'borderWidth', from: '1px', to: '6px' },
{ type: 'borderColor', from: '#f97316', to: '#8b5cf6' },
{ type: 'borderRadius', from: '0', to: '16px' }
], blockDuration: 1800, className: "text-orange-700 text-lg p-4 border border-orange-500", showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `Multi-effect: borderWidth + borderColor + borderRadius` })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold text-gray-900", children: "Phrase-Based Border Animation" }), _jsx("div", { className: "bg-gray-50 p-6 rounded-lg", children: _jsx(AnimatedText, { content: "Each|Phrase|Different|Border", animation: "phrases", phraseStyles: [
{
phrase: 1,
className: 'text-red-600 p-2 border border-red-300',
effect: ['fadeIn', { type: 'borderWidth', from: '1px', to: '3px' }],
duration: 600,
delayBefore: 0
},
{
phrase: 2,
className: 'text-blue-600 p-2 border-2 border-blue-300',
effect: ['fadeIn', { type: 'borderColor', from: '#93c5fd', to: '#1d4ed8' }],
duration: 600,
delayBefore: 400
},
{
phrase: 3,
className: 'text-green-600 p-2 border-2 border-green-300',
effect: ['fadeIn', { type: 'borderStyle', from: 'solid', to: 'dotted' }],
duration: 600,
delayBefore: 800
},
{
phrase: 4,
className: 'text-purple-600 p-2 border border-purple-300',
effect: ['fadeIn', { type: 'border', from: '2px solid #c084fc', to: '4px dashed #7c3aed' }],
duration: 600,
delayBefore: 1200
}
], showReplay: true, showConfig: true }) }), _jsx("div", { className: "text-sm text-gray-600 font-mono bg-gray-100 p-3 rounded", children: `Different border effects per phrase: width, color, style, composite` })] })] }));
};
export default BorderEffectsSection;