@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
6 lines (5 loc) • 7.39 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const EffectsTab = () => {
return (_jsxs("div", { className: "space-y-8", children: [_jsx("h3", { className: "text-xl font-bold text-orange-600 mb-6", children: "43+ Animation Effects" }), _jsxs("div", { children: [_jsxs("div", { className: "border-l-4 border-orange-500 pl-4 mb-4", children: [_jsx("h4", { className: "font-semibold text-orange-700 text-lg mb-1", children: "Predefined Effects (9)" }), _jsx("p", { className: "text-sm text-gray-600 mb-2", children: "Simple string values - no customization needed" }), _jsx("div", { className: "text-xs text-orange-700 font-medium font-mono", children: "Usage: blockEffect=\"fadeIn\"" })] }), _jsx("div", { className: "bg-orange-50 rounded-lg p-6", children: _jsxs("div", { className: "grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3", children: [_jsx("div", { className: "font-mono text-sm bg-white px-3 py-2 rounded shadow-sm text-center", children: "fadeIn" }), _jsx("div", { className: "font-mono text-sm bg-white px-3 py-2 rounded shadow-sm text-center", children: "slide-up" }), _jsx("div", { className: "font-mono text-sm bg-white px-3 py-2 rounded shadow-sm text-center", children: "slide-down" }), _jsx("div", { className: "font-mono text-sm bg-white px-3 py-2 rounded shadow-sm text-center", children: "slide-left" }), _jsx("div", { className: "font-mono text-sm bg-white px-3 py-2 rounded shadow-sm text-center", children: "slide-right" }), _jsx("div", { className: "font-mono text-sm bg-white px-3 py-2 rounded shadow-sm text-center", children: "slide-up-left" }), _jsx("div", { className: "font-mono text-sm bg-white px-3 py-2 rounded shadow-sm text-center", children: "slide-up-right" }), _jsx("div", { className: "font-mono text-sm bg-white px-3 py-2 rounded shadow-sm text-center", children: "slide-down-left" }), _jsx("div", { className: "font-mono text-sm bg-white px-3 py-2 rounded shadow-sm text-center", children: "slide-down-right" })] }) })] }), _jsxs("div", { children: [_jsxs("div", { className: "border-l-4 border-orange-600 pl-4 mb-4", children: [_jsx("h4", { className: "font-semibold text-orange-700 text-lg mb-1", children: "Parameterized Effects (34+)" }), _jsx("p", { className: "text-sm text-gray-600 mb-2", children: "Object syntax - fully customizable values" }), _jsxs("div", { className: "text-xs text-orange-700 font-medium font-mono", children: ["Usage: blockEffect=", `{{ type: 'scale', from: 0.5, to: 1 }}`] })] }), _jsx("div", { className: "bg-orange-50 rounded-lg p-6", children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: [_jsxs("div", { className: "bg-white rounded p-4 shadow-sm", children: [_jsx("h5", { className: "font-medium text-sm mb-3 text-orange-800 border-b border-orange-200 pb-1", children: "TRANSFORM" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "scale" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "rotate" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "slide" })] })] }), _jsxs("div", { className: "bg-white rounded p-4 shadow-sm", children: [_jsx("h5", { className: "font-medium text-sm mb-3 text-orange-800 border-b border-orange-200 pb-1", children: "TYPOGRAPHY" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "textShadow" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "fontSize" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "letterSpacing" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "lineHeight" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "fontWeight" })] })] }), _jsxs("div", { className: "bg-white rounded p-4 shadow-sm", children: [_jsx("h5", { className: "font-medium text-sm mb-3 text-orange-800 border-b border-orange-200 pb-1", children: "LAYOUT" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "padding" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "paddingTop / Right / Bottom / Left" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "margin" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "marginTop / Right / Bottom / Left" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "borderRadius" })] })] }), _jsxs("div", { className: "bg-white rounded p-4 shadow-sm", children: [_jsx("h5", { className: "font-medium text-sm mb-3 text-orange-800 border-b border-orange-200 pb-1", children: "VISUAL" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "backdropFilter" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "boxShadow" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "filter" })] })] }), _jsxs("div", { className: "bg-white rounded p-4 shadow-sm", children: [_jsx("h5", { className: "font-medium text-sm mb-3 text-orange-800 border-b border-orange-200 pb-1", children: "COLOR" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "color" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "backgroundColor" })] })] }), _jsxs("div", { className: "bg-white rounded p-4 shadow-sm", children: [_jsx("h5", { className: "font-medium text-sm mb-3 text-orange-800 border-b border-orange-200 pb-1", children: "BORDER" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "border" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "borderWidth" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "borderColor" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "borderStyle" })] })] }), _jsxs("div", { className: "bg-white rounded p-4 shadow-sm", children: [_jsx("h5", { className: "font-medium text-sm mb-3 text-orange-800 border-b border-orange-200 pb-1", children: "SIZE" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "width" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "minWidth" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "maxWidth" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "height" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "minHeight" }), _jsx("div", { className: "font-mono text-xs bg-orange-50 px-2 py-1 rounded", children: "maxHeight" })] })] })] }) })] })] }));
};
export default EffectsTab;