xlibs-components/dist/components/aceternity/colourful-text-demo.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ColourfulText } from './colourful-text';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card.js';
export function ColourfulTextDemo() {
    return (_jsxs(Card, { className: "w-full", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Colourful Text Animation" }), _jsx(CardDescription, { children: "Animated text with changing colors, motion effects, and character-by-character animations" })] }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-2xl font-bold mb-2", children: _jsx(ColourfulText, { text: "Welcome to the Future" }) }), _jsx("p", { className: "text-muted-foreground", children: "Watch the colors change every 5 seconds with smooth animations" })] }), _jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "text-xl font-semibold mb-2", children: _jsx(ColourfulText, { text: "Interactive Animations" }) }), _jsx("p", { className: "text-muted-foreground", children: "Each character animates independently with staggered delays" })] }), _jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "text-lg font-medium mb-2", children: _jsx(ColourfulText, { text: "Smooth Transitions" }) }), _jsx("p", { className: "text-muted-foreground", children: "Motion effects include scaling, blur, and opacity changes" })] })] }), _jsx("div", { className: "p-4 bg-muted/50 rounded-lg", children: _jsxs("div", { className: "text-sm text-muted-foreground space-y-2", children: [_jsx("p", { children: _jsx("strong", { children: "Animation Features:" }) }), _jsxs("ul", { className: "list-disc list-inside space-y-1 ml-4", children: [_jsx("li", { children: "Character-by-character color cycling" }), _jsx("li", { children: "Vertical bounce animation (y-axis movement)" }), _jsx("li", { children: "Subtle scale effects (1.01x)" }), _jsx("li", { children: "Blur filter transitions" }), _jsx("li", { children: "Opacity pulsing effects" }), _jsx("li", { children: "Staggered animation delays (0.05s per character)" }), _jsx("li", { children: "Color palette shuffling every 5 seconds" })] })] }) }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-2 text-xs", children: [_jsx("div", { className: "p-2 rounded bg-green-100 text-green-800", children: "Green" }), _jsx("div", { className: "p-2 rounded bg-blue-100 text-blue-800", children: "Blue" }), _jsx("div", { className: "p-2 rounded bg-purple-100 text-purple-800", children: "Purple" }), _jsx("div", { className: "p-2 rounded bg-pink-100 text-pink-800", children: "Pink" }), _jsx("div", { className: "p-2 rounded bg-orange-100 text-orange-800", children: "Orange" })] })] })] }));
}