@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
6 lines (5 loc) • 1.77 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const AnimationTypesTab = () => {
return (_jsxs("div", { className: "space-y-6", children: [_jsx("h3", { className: "text-xl font-bold text-blue-600 mb-4", children: "5 Animation Types" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "p-4 bg-blue-50 rounded border", children: [_jsx("h4", { className: "font-semibold text-blue-700 mb-2", children: "block" }), _jsx("p", { className: "text-sm text-gray-600", children: "Animate the entire component at once as a single unit" })] }), _jsxs("div", { className: "p-4 bg-blue-50 rounded border", children: [_jsx("h4", { className: "font-semibold text-blue-700 mb-2", children: "phrases" }), _jsx("p", { className: "text-sm text-gray-600", children: "Animate phrase by phrase (separated by \"|\" in content)" })] }), _jsxs("div", { className: "p-4 bg-blue-50 rounded border", children: [_jsx("h4", { className: "font-semibold text-blue-700 mb-2", children: "word" }), _jsx("p", { className: "text-sm text-gray-600", children: "Animate word by word sequentially" })] }), _jsxs("div", { className: "p-4 bg-blue-50 rounded border", children: [_jsx("h4", { className: "font-semibold text-blue-700 mb-2", children: "typewriter" }), _jsx("p", { className: "text-sm text-gray-600", children: "Animate letter by letter like a typewriter" })] }), _jsxs("div", { className: "p-4 bg-blue-50 rounded border md:col-span-2", children: [_jsx("h4", { className: "font-semibold text-blue-700 mb-2", children: "word-typewriter" }), _jsx("p", { className: "text-sm text-gray-600", children: "Animate word by word, with each word appearing in typewriter style" })] })] })] }));
};
export default AnimationTypesTab;