@nehal712521/inprogress 0.2.0

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+"use strict";var C=Object.create;var h=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var P=(n,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of I(t))!D.call(n,r)&&r!==s&&h(n,r,{get:()=>t[r],enumerable:!(i=R(t,r))||i.enumerable});return n};var g=(n,t,s)=>(s=n!=null?C(E(n)):{},P(t||!n||!n.__esModule?h(s,"default",{value:n,enumerable:!0}):s,n));var b=require("commander"),o=g(require("chalk")),c=g(require("fs-extra")),l=g(require("path")),$=g(require("readline")),S=c.default.readJsonSync(l.default.join(__dirname,"../package.json")),j=l.default.join(__dirname,"../registry"),w=l.default.join(j,"registry.json"),N=l.default.join(j,"components"),e={info:n=>console.log(o.default.cyan("  \u2139 "),n),success:n=>console.log(o.default.green("  \u2714 "),n),warn:n=>console.log(o.default.yellow("  \u26A0 "),n),error:n=>console.log(o.default.red("  \u2716 "),n),step:n=>console.log(o.default.cyan("  \u2192 "),n),blank:()=>console.log()};function k(n){let t=$.createInterface({input:process.stdin,output:process.stdout});return new Promise(s=>{t.question(n,i=>{t.close(),s(i.trim())})})}async function v(){if(!await c.default.pathExists(w))throw new Error(`Registry not found at ${w}`);return c.default.readJson(w)}function x(){console.log(),console.log(o.default.cyan.bold("  \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557")),console.log(o.default.cyan.bold("  \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D")),console.log(o.default.cyan.bold("  \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557")),console.log(o.default.cyan.bold("  \u2588\u2588\u2554\u2550\u2550\u2550\u255D \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u255D  \u255A\u2550\u2550\u2550\u2550\u2588\u2588\u2551\u255A\u2550\u2550\u2550\u2550\u2588\u2588\u2551")),console.log(o.default.cyan.bold("  \u2588\u2588\u2551     \u2588\u2588\u2551  \u2588\u2588\u2551\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551")),console.log(o.default.cyan.bold("  \u255A\u2550\u255D     \u255A\u2550\u255D  \u255A\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D  \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u255D  \u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D")),console.log(),console.log(o.default.dim("  UI Components for React & Next.js \u2014 zero config, just copy & use")),console.log()}async function O(n){x();let t=process.cwd(),s=n.path||"components/ui",i=l.default.resolve(t,s);e.step(`Initializing your-ui in ${o.default.dim(s)}...`),await c.default.ensureDir(i),e.success(`Created directory ${o.default.dim(s)}`);let r=l.default.join(t,"components.json"),a={$schema:"https://ui.shadcn.com/schema.json",style:"default",rsc:!0,tsx:!0,tailwind:{config:"tailwind.config.ts",css:"app/globals.css",baseColor:"zinc",cssVariables:!0},aliases:{components:"@/components",utils:"@/lib/utils"}};if(await c.default.pathExists(r)&&!n.yes&&(await k(`  ${o.default.yellow("\u26A0")}  components.json already exists. Overwrite? ${o.default.dim("(y/N)")} `)).toLowerCase()!=="y"){e.warn("Skipped overwriting components.json");return}await c.default.writeJson(r,a,{spaces:2}),e.success("Created components.json"),e.blank(),e.success("Initialization complete!"),e.info(`Add components with: ${o.default.cyan("npx progress-ui add <component>")}`),e.blank()}async function T(n,t){console.log(),console.log(o.default.bold(`Adding ${o.default.cyan(n)} to your project...`)),e.blank();let s;try{s=await v()}catch(p){e.error(`Failed to load registry: ${p.message}`),process.exit(1)}let i=s.components[n];i||(e.error(`Component "${n}" not found.`),e.info(`Run ${o.default.cyan("npx progress-ui list")} to see available components.`),process.exit(1)),e.success(`Found ${o.default.white(i.displayName)}`),i.dependencies&&i.dependencies.length>0&&(e.blank(),e.warn(`This component has dependencies: ${o.default.white(i.dependencies.join(", "))}`),e.info(`Install them with: ${o.default.cyan(`npm install ${i.dependencies.join(" ")}`)}`));let r=process.cwd(),a=t.path||"components/ui",m=l.default.resolve(r,a);await c.default.ensureDir(m),e.blank();for(let p of i.files){let u=l.default.join(N,p),y=l.default.join(m,p),f=l.default.relative(r,y);if(!await c.default.pathExists(u)){e.error(`Source file not found: ${o.default.dim(u)}`);continue}if(await c.default.pathExists(y)&&!t.overwrite&&(await k(`  ${o.default.yellow("\u26A0")}  ${o.default.white(f)} already exists. Overwrite? ${o.default.dim("(y/N)")} `)).toLowerCase()!=="y"){e.warn(`Skipped ${f}`);continue}await c.default.copy(u,y),e.success(`Created ${o.default.white(f)}`)}e.blank(),console.log(o.default.green.bold("  Done!"),"Import it in your code:"),e.blank(),console.log(o.default.dim(`  import ${i.displayName.replace(/\s/g,"")} from "@/${a}/${i.files[0].replace(".tsx","")}";`)),e.blank()}async function _(){var i,r;e.step("Fetching available components..."),e.blank();let n;try{n=await v()}catch(a){e.error(`Failed to load registry: ${a.message}`),process.exit(1)}let t=Object.values(n.components),s={};for(let a of t)((r=s[i=a.category])!=null?r:s[i]=[]).push(a);for(let[a,m]of Object.entries(s)){console.log(o.default.bold.white(`  ${a}`));for(let p of m)console.log(`    ${o.default.cyan(p.name.padEnd(20))}${o.default.dim(p.description)}`);e.blank()}console.log(o.default.dim(`  Run ${o.default.cyan("npx progress-ui add <name>")} to install any component.`)),e.blank()}var d=new b.Command;d.name("progress-ui").description("CLI to add beautiful UI components to your project").version(S.version);d.command("init").description("Initialize your-ui in your project").option("-p, --path <path>","Target directory for components","components/ui").option("-y, --yes","Skip confirmation prompts").action(O);d.command("add <component>").description("Add a component to your project").option("-p, --path <path>","Target directory for components","components/ui").option("-o, --overwrite","Overwrite existing files without prompting").action(T);d.command("list").alias("ls").description("List all available components").action(_);d.argument("[command]","command to run").action(n=>{n||(x(),d.help())});d.parse();

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@nehal712521/inprogress",
+  "version": "0.2.0",
+  "description": "CLI to add beautiful UI components to your project",
+  "keywords": [
+    "inprogress",
+    "cli",
+    "components",
+    "react",
+    "nextjs",
+    "aceternity",
+    "shadcn",
+    "animations"
+  ],
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "bin": {
+    "inprogress": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "registry"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs --dts --clean --minify",
+    "dev": "tsup src/index.ts --format cjs --dts --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "commander": "^14.0.3",
+    "fs-extra": "^11.3.4"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.19.35",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

package/registry/components/badge.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+
+type BadgeVariant = "default" | "secondary" | "outline" | "destructive";
+
+interface BadgeProps {
+    children: React.ReactNode;
+    variant?: BadgeVariant;
+    className?: string;
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+    default: "bg-zinc-100 text-zinc-900 hover:bg-zinc-200",
+    secondary: "bg-zinc-800 text-zinc-100 hover:bg-zinc-700",
+    outline: "border border-zinc-700 text-zinc-100 hover:bg-zinc-800",
+    destructive: "bg-red-500/10 text-red-500 hover:bg-red-500/20",
+};
+
+export function Badge({ children, variant = "default", className = "" }: BadgeProps) {
+    return (
+        <span
+            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors ${variantStyles[variant]} ${className}`}
+        >
+            {children}
+        </span>
+    );
+}

package/registry/components/button.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import React, { useRef, MouseEvent, CSSProperties } from "react";
+
+type ButtonVariant = "shimmer" | "glow" | "pulse" | "ripple";
+type ButtonSize = "sm" | "md" | "lg";
+
+interface AnimatedButtonProps {
+    children: React.ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+    style?: CSSProperties;
+    type?: "button" | "submit" | "reset";
+    fullWidth?: boolean;
+}
+
+const sizeMap: Record<ButtonSize, string> = {
+    sm: "px-4 py-1.5 text-sm",
+    md: "px-6 py-2.5 text-sm",
+    lg: "px-8 py-3.5 text-base",
+};
+
+export default function AnimatedButton({
+    children,
+    variant = "shimmer",
+    size = "md",
+    disabled = false,
+    onClick,
+    className = "",
+    style,
+    type = "button",
+    fullWidth = false,
+}: AnimatedButtonProps) {
+    const btnRef = useRef<HTMLButtonElement>(null);
+    const rippleRef = useRef<HTMLSpanElement>(null);
+
+    const handleRipple = (e: MouseEvent<HTMLButtonElement>) => {
+        if (variant !== "ripple" || !btnRef.current || !rippleRef.current) return;
+
+        const btn = btnRef.current;
+        const ripple = rippleRef.current;
+        const rect = btn.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height) * 2;
+
+        ripple.style.width = `${size}px`;
+        ripple.style.height = `${size}px`;
+        ripple.style.left = `${e.clientX - rect.left - size / 2}px`;
+        ripple.style.top = `${e.clientY - rect.top - size / 2}px`;
+
+        ripple.classList.remove("animate-ripple");
+        void ripple.offsetWidth;
+        ripple.classList.add("animate-ripple");
+    };
+
+    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+        handleRipple(e);
+        onClick?.(e);
+    };
+
+    const base = `animated-btn relative inline-flex items-center justify-center font-semibold tracking-tight overflow-hidden rounded-xl cursor-pointer select-none transition-transform duration-150 active:scale-[0.97] disabled:opacity-40 disabled:pointer-events-none ${fullWidth ? "w-full" : ""} ${sizeMap[size]} ${className}`;
+
+    return (
+        <>
+            <style>{`
+        .animated-btn { outline: none; border: none; }
+
+        /* SHIMMER */
+        .btn-shimmer {
+          background: #0ea5e9;
+          color: #fff;
+          box-shadow: 0 0 20px rgba(14,165,233,0.35), 0 2px 8px rgba(0,0,0,0.4);
+        }
+        .btn-shimmer::before {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(
+            105deg,
+            transparent 30%,
+            rgba(255,255,255,0.55) 50%,
+            transparent 70%
+          );
+          transform: translateX(-100%);
+          animation: shimmer-slide 2.4s ease-in-out infinite;
+        }
+        .btn-shimmer:hover {
+          box-shadow: 0 0 30px rgba(14,165,233,0.6), 0 4px 16px rgba(0,0,0,0.5);
+        }
+        @keyframes shimmer-slide {
+          0%   { transform: translateX(-120%); }
+          60%  { transform: translateX(120%); }
+          100% { transform: translateX(120%); }
+        }
+
+        /* GLOW */
+        .btn-glow {
+          background: transparent;
+          color: #0ea5e9;
+          border: 1.5px solid rgba(14,165,233,0.5);
+          box-shadow: 0 0 10px rgba(14,165,233,0.2) inset;
+          animation: glow-pulse 3s ease-in-out infinite;
+        }
+        .btn-glow:hover {
+          background: rgba(14,165,233,0.12);
+          border-color: #0ea5e9;
+          box-shadow: 0 0 24px rgba(14,165,233,0.55), 0 0 8px rgba(14,165,233,0.3) inset;
+          animation: none;
+          color: #fff;
+        }
+        @keyframes glow-pulse {
+          0%, 100% { box-shadow: 0 0 8px rgba(14,165,233,0.2) inset, 0 0 6px rgba(14,165,233,0.15); }
+          50%       { box-shadow: 0 0 18px rgba(14,165,233,0.45) inset, 0 0 18px rgba(14,165,233,0.4); }
+        }
+
+        /* PULSE */
+        .btn-pulse {
+          background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
+          color: #fff;
+          box-shadow: 0 0 0 0 rgba(14,165,233,0.7);
+          animation: pulse-ring 2s ease-out infinite;
+        }
+        .btn-pulse:hover { animation: none; box-shadow: 0 0 0 6px rgba(14,165,233,0); }
+        @keyframes pulse-ring {
+          0%   { box-shadow: 0 0 0 0 rgba(14,165,233,0.65); }
+          70%  { box-shadow: 0 0 0 10px rgba(14,165,233,0); }
+          100% { box-shadow: 0 0 0 0 rgba(14,165,233,0); }
+        }
+
+        /* RIPPLE */
+        .btn-ripple {
+          background: #18181b;
+          color: #fff;
+          border: 1.5px solid rgba(255,255,255,0.08);
+        }
+        .btn-ripple:hover { background: #27272a; }
+        .ripple-dot {
+          position: absolute;
+          border-radius: 50%;
+          background: rgba(255,255,255,0.25);
+          pointer-events: none;
+          transform: scale(0);
+          opacity: 1;
+        }
+        .animate-ripple {
+          animation: ripple-expand 0.55s linear forwards;
+        }
+        @keyframes ripple-expand {
+          to { transform: scale(1); opacity: 0; }
+        }
+      `}</style>
+
+            <button
+                ref={btnRef}
+                type={type}
+                disabled={disabled}
+                onClick={handleClick}
+                style={style}
+                className={`${base} btn-${variant}`}
+            >
+                {variant === "ripple" && (
+                    <span ref={rippleRef} className="ripple-dot" />
+                )}
+                <span className="relative z-10 flex items-center gap-2">{children}</span>
+            </button>
+        </>
+    );
+}

package/registry/components/card.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import React from "react";
+
+interface CardProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function Card({ children, className = "" }: CardProps) {
+    return (
+        <div className={`rounded-xl border border-zinc-800 bg-zinc-900/50 p-6 ${className}`}>
+            {children}
+        </div>
+    );
+}
+
+export function CardHeader({ children, className = "" }: CardProps) {
+    return <div className={`mb-4 ${className}`}>{children}</div>;
+}
+
+export function CardTitle({ children, className = "" }: CardProps) {
+    return <h3 className={`text-lg font-semibold text-white ${className}`}>{children}</h3>;
+}
+
+export function CardDescription({ children, className = "" }: CardProps) {
+    return <p className={`text-sm text-zinc-400 ${className}`}>{children}</p>;
+}
+
+export function CardContent({ children, className = "" }: CardProps) {
+    return <div className={className}>{children}</div>;
+}
+
+export function CardFooter({ children, className = "" }: CardProps) {
+    return <div className={`mt-4 flex items-center gap-2 ${className}`}>{children}</div>;
+}

package/registry/components/flip-card.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+
+interface FlipCardProps {
+    front: React.ReactNode;
+    back: React.ReactNode;
+    className?: string;
+    width?: string;
+    height?: string;
+}
+
+export function FlipCard({ 
+    front, 
+    back, 
+    className = "",
+    width = "300px",
+    height = "400px"
+}: FlipCardProps) {
+    const [isFlipped, setIsFlipped] = useState(false);
+
+    return (
+        <div
+            className={`relative cursor-pointer group ${className}`}
+            style={{ width, height, perspective: "1000px" }}
+            onClick={() => setIsFlipped(!isFlipped)}
+        >
+            <motion.div
+                className="w-full h-full relative preserve-3d"
+                animate={{ rotateY: isFlipped ? 180 : 0 }}
+                transition={{ duration: 0.6, type: "spring", stiffness: 260, damping: 20 }}
+                style={{ transformStyle: "preserve-3d" }}
+            >
+                {/* Front */}
+                <div
+                    className="absolute inset-0 backface-hidden rounded-2xl overflow-hidden"
+                    style={{ backfaceVisibility: "hidden" }}
+                >
+                    {front}
+                </div>
+
+                {/* Back */}
+                <div
+                    className="absolute inset-0 backface-hidden rounded-2xl overflow-hidden"
+                    style={{ 
+                        backfaceVisibility: "hidden",
+                        transform: "rotateY(180deg)"
+                    }}
+                >
+                    {back}
+                </div>
+            </motion.div>
+
+            {/* Flip hint */}
+            <div className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                <span className="text-xs text-zinc-500 bg-zinc-900/80 px-2 py-1 rounded">
+                    Click to flip
+                </span>
+            </div>
+        </div>
+    );
+}
+
+// Pre-styled card faces
+export function FlipCardFront({ 
+    title, 
+    subtitle, 
+    image,
+    className = "" 
+}: { 
+    title: string; 
+    subtitle?: string; 
+    image?: string;
+    className?: string;
+}) {
+    return (
+        <div className={`w-full h-full bg-gradient-to-br from-zinc-800 to-zinc-900 p-6 flex flex-col justify-end relative overflow-hidden ${className}`}>
+            {image && (
+                <div 
+                    className="absolute inset-0 bg-cover bg-center opacity-50"
+                    style={{ backgroundImage: `url(${image})` }}
+                />
+            )}
+            <div className="relative z-10">
+                <h3 className="text-2xl font-bold text-white mb-1">{title}</h3>
+                {subtitle && <p className="text-zinc-400 text-sm">{subtitle}</p>}
+            </div>
+        </div>
+    );
+}
+
+export function FlipCardBack({ 
+    title, 
+    description, 
+    action,
+    className = "" 
+}: { 
+    title: string; 
+    description: string; 
+    action?: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <div className={`w-full h-full bg-gradient-to-br from-zinc-900 to-zinc-950 p-6 flex flex-col justify-center border border-zinc-800 ${className}`}>
+            <h3 className="text-xl font-bold text-white mb-3">{title}</h3>
+            <p className="text-zinc-400 text-sm leading-relaxed mb-4">{description}</p>
+            {action && <div className="mt-auto">{action}</div>}
+        </div>
+    );
+}

package/registry/components/floating-dock.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+
+interface DockItem {
+    icon: React.ReactNode;
+    label: string;
+    onClick?: () => void;
+    href?: string;
+}
+
+interface FloatingDockProps {
+    items: DockItem[];
+    className?: string;
+}
+
+export function FloatingDock({ items, className = "" }: FloatingDockProps) {
+    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+    return (
+        <div className={`fixed bottom-8 left-1/2 -translate-x-1/2 z-50 ${className}`}>
+            <motion.div
+                className="flex items-end gap-2 px-4 py-3 bg-zinc-900/80 backdrop-blur-xl rounded-2xl border border-zinc-800/50 shadow-2xl"
+                initial={{ y: 100, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ type: "spring", stiffness: 300, damping: 30 }}
+            >
+                {items.map((item, index) => {
+                    const isHovered = hoveredIndex === index;
+                    const isNeighbor = hoveredIndex !== null && Math.abs(hoveredIndex - index) === 1;
+                    const isFar = hoveredIndex !== null && Math.abs(hoveredIndex - index) === 2;
+
+                    const scale = isHovered ? 1.5 : isNeighbor ? 1.2 : isFar ? 1.05 : 1;
+                    const y = isHovered ? -20 : isNeighbor ? -10 : 0;
+
+                    const content = (
+                        <motion.button
+                            onClick={item.onClick}
+                            onMouseEnter={() => setHoveredIndex(index)}
+                            onMouseLeave={() => setHoveredIndex(null)}
+                            animate={{ scale, y }}
+                            transition={{ type: "spring", stiffness: 400, damping: 25 }}
+                            className="relative flex items-center justify-center w-12 h-12 rounded-xl bg-zinc-800/50 hover:bg-zinc-700/50 transition-colors group"
+                        >
+                            <span className="text-zinc-300 group-hover:text-white transition-colors">
+                                {item.icon}
+                            </span>
+                            
+                            {/* Tooltip */}
+                            <motion.span
+                                initial={{ opacity: 0, y: 10 }}
+                                animate={{ 
+                                    opacity: isHovered ? 1 : 0, 
+                                    y: isHovered ? -40 : -30 
+                                }}
+                                className="absolute -top-2 left-1/2 -translate-x-1/2 px-2 py-1 bg-zinc-800 text-zinc-200 text-xs rounded-md whitespace-nowrap pointer-events-none"
+                            >
+                                {item.label}
+                            </motion.span>
+                        </motion.button>
+                    );
+
+                    if (item.href) {
+                        return (
+                            <a key={index} href={item.href}>
+                                {content}
+                            </a>
+                        );
+                    }
+
+                    return <div key={index}>{content}</div>;
+                })}
+            </motion.div>
+        </div>
+    );
+}

package/registry/components/gradient-text.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+
+interface GradientTextProps {
+    children: React.ReactNode;
+    className?: string;
+    animate?: boolean;
+    colors?: string[];
+}
+
+export function GradientText({ 
+    children, 
+    className = "",
+    animate = true,
+    colors = ["#3b82f6", "#8b5cf6", "#ec4899", "#3b82f6"]
+}: GradientTextProps) {
+    const gradientStyle = {
+        backgroundImage: `linear-gradient(90deg, ${colors.join(", ")})`,
+        backgroundSize: animate ? "300% 100%" : "100% 100%",
+    };
+
+    return (
+        <motion.span
+            className={`bg-clip-text text-transparent inline-block ${className}`}
+            style={gradientStyle}
+            animate={animate ? {
+                backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
+            } : undefined}
+            transition={animate ? {
+                duration: 5,
+                repeat: Infinity,
+                ease: "linear",
+            } : undefined}
+        >
+            {children}
+        </motion.span>
+    );
+}
+
+// Shimmer effect text
+export function ShimmerText({ 
+    children, 
+    className = "" 
+}: { 
+    children: React.ReactNode; 
+    className?: string;
+}) {
+    return (
+        <span className={`relative inline-block ${className}`}>
+            <span className="bg-gradient-to-r from-zinc-400 via-white to-zinc-400 bg-clip-text text-transparent bg-[length:200%_100%] animate-shimmer">
+                {children}
+            </span>
+            <style jsx>{`
+                @keyframes shimmer {
+                    0% { background-position: 200% 0; }
+                    100% { background-position: -200% 0; }
+                }
+                .animate-shimmer {
+                    animation: shimmer 3s ease-in-out infinite;
+                }
+            `}</style>
+        </span>
+    );
+}

package/registry/components/input.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import React, { InputHTMLAttributes, forwardRef } from "react";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+    ({ className, type, ...props }, ref) => {
+        return (
+            <input
+                type={type}
+                className={`flex h-10 w-full rounded-lg border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-700 focus:border-zinc-700 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Input.displayName = "Input";
+
+export { Input };

package/registry/components/spotlight-card.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import React, { useState, useRef } from "react";
+import { motion } from "framer-motion";
+
+interface SpotlightCardProps {
+    children: React.ReactNode;
+    className?: string;
+    spotlightColor?: string;
+}
+
+export function SpotlightCard({ 
+    children, 
+    className = "",
+    spotlightColor = "rgba(255, 255, 255, 0.1)"
+}: SpotlightCardProps) {
+    const divRef = useRef<HTMLDivElement>(null);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [opacity, setOpacity] = useState(0);
+
+    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!divRef.current) return;
+
+        const rect = divRef.current.getBoundingClientRect();
+        setPosition({
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+        });
+    };
+
+    const handleFocus = () => {
+        setOpacity(1);
+    };
+
+    const handleBlur = () => {
+        setOpacity(0);
+    };
+
+    const handleMouseEnter = () => {
+        setOpacity(1);
+    };
+
+    const handleMouseLeave = () => {
+        setOpacity(0);
+    };
+
+    return (
+        <motion.div
+            ref={divRef}
+            onMouseMove={handleMouseMove}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            className={`relative overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900/50 p-8 ${className}`}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+        >
+            {/* Spotlight effect */}
+            <div
+                className="pointer-events-none absolute -inset-px transition-opacity duration-300"
+                style={{
+                    opacity,
+                    background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 40%)`,
+                }}
+            />
+            
+            {/* Border spotlight */}
+            <div
+                className="pointer-events-none absolute inset-0 rounded-2xl transition-opacity duration-300"
+                style={{
+                    opacity,
+                    background: `radial-gradient(300px circle at ${position.x}px ${position.y}px, rgba(255,255,255,0.2), transparent 40%)`,
+                    WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+                    WebkitMaskComposite: "xor",
+                    maskComposite: "exclude",
+                    padding: "1px",
+                }}
+            />
+            
+            <div className="relative z-10">
+                {children}
+            </div>
+        </motion.div>
+    );
+}

package/registry/components/text-reveal.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+
+interface TextRevealProps {
+    text: string;
+    className?: string;
+    delay?: number;
+}
+
+export function TextReveal({ text, className = "", delay = 0 }: TextRevealProps) {
+    const words = text.split(" ");
+
+    const container = {
+        hidden: { opacity: 0 },
+        visible: (i = 1) => ({
+            opacity: 1,
+            transition: { staggerChildren: 0.12, delayChildren: delay },
+        }),
+    };
+
+    const child = {
+        hidden: {
+            opacity: 0,
+            y: 20,
+            rotateX: -90,
+        },
+        visible: {
+            opacity: 1,
+            y: 0,
+            rotateX: 0,
+            transition: {
+                type: "spring" as const,
+                damping: 12,
+                stiffness: 100,
+            },
+        },
+    };
+
+    return (
+        <motion.div
+            className={`overflow-hidden ${className}`}
+            variants={container}
+            initial="hidden"
+            animate="visible"
+        >
+            {words.map((word, index) => (
+                <motion.span
+                    key={index}
+                    className="inline-block mr-[0.25em]"
+                    style={{ perspective: "1000px" }}
+                >
+                    <motion.span
+                        className="inline-block"
+                        variants={child}
+                        style={{ transformOrigin: "center bottom" }}
+                    >
+                        {word}
+                    </motion.span>
+                </motion.span>
+            ))}
+        </motion.div>
+    );
+}
+
+// Character by character reveal
+export function TextRevealByChar({ text, className = "", delay = 0 }: TextRevealProps) {
+    const characters = text.split("");
+
+    const container = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { staggerChildren: 0.03, delayChildren: delay },
+        },
+    };
+
+    const child = {
+        hidden: { opacity: 0, y: 50 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+                type: "spring" as const,
+                damping: 15,
+                stiffness: 200,
+            },
+        },
+    };
+
+    return (
+        <motion.span
+            className={`inline-block ${className}`}
+            variants={container}
+            initial="hidden"
+            animate="visible"
+        >
+            {characters.map((char, index) => (
+                <motion.span
+                    key={index}
+                    className="inline-block"
+                    variants={child}
+                >
+                    {char === " " ? "\u00A0" : char}
+                </motion.span>
+            ))}
+        </motion.span>
+    );
+}

package/registry/components/timeline.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+
+interface TimelineItem {
+    title: string;
+    description?: string;
+    date?: string;
+    icon?: React.ReactNode;
+}
+
+interface TimelineProps {
+    items: TimelineItem[];
+    className?: string;
+}
+
+export function Timeline({ items, className = "" }: TimelineProps) {
+    return (
+        <div className={`relative ${className}`}>
+            {/* Vertical line */}
+            <div className="absolute left-4 top-0 bottom-0 w-px bg-gradient-to-b from-zinc-700 via-zinc-800 to-transparent" />
+            
+            <div className="space-y-8">
+                {items.map((item, index) => (
+                    <motion.div
+                        key={index}
+                        className="relative flex gap-6"
+                        initial={{ opacity: 0, x: -20 }}
+                        whileInView={{ opacity: 1, x: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ delay: index * 0.1, duration: 0.5 }}
+                    >
+                        {/* Dot */}
+                        <div className="relative z-10 flex-shrink-0">
+                            <motion.div
+                                className="w-8 h-8 rounded-full bg-zinc-900 border-2 border-zinc-700 flex items-center justify-center"
+                                whileHover={{ scale: 1.1, borderColor: "#3b82f6" }}
+                                transition={{ type: "spring", stiffness: 400, damping: 20 }}
+                            >
+                                {item.icon ? (
+                                    <span className="text-zinc-400 text-sm">{item.icon}</span>
+                                ) : (
+                                    <div className="w-2 h-2 rounded-full bg-zinc-500" />
+                                )}
+                            </motion.div>
+                        </div>
+                        
+                        {/* Content */}
+                        <div className="flex-1 pt-1">
+                            <div className="flex items-center gap-3 mb-1">
+                                <h3 className="text-white font-semibold">{item.title}</h3>
+                                {item.date && (
+                                    <span className="text-xs text-zinc-500 bg-zinc-900 px-2 py-0.5 rounded">
+                                        {item.date}
+                                    </span>
+                                )}
+                            </div>
+                            {item.description && (
+                                <p className="text-zinc-400 text-sm leading-relaxed">
+                                    {item.description}
+                                </p>
+                            )}
+                        </div>
+                    </motion.div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+// Alternative horizontal timeline
+export function TimelineHorizontal({ items, className = "" }: TimelineProps) {
+    return (
+        <div className={`relative ${className}`}>
+            <div className="flex items-start justify-between">
+                {items.map((item, index) => (
+                    <motion.div
+                        key={index}
+                        className="relative flex-1 flex flex-col items-center text-center"
+                        initial={{ opacity: 0, y: 20 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ delay: index * 0.15, duration: 0.5 }}
+                    >
+                        {/* Connector line */}
+                        {index < items.length - 1 && (
+                            <div className="absolute top-4 left-1/2 w-full h-px bg-zinc-800" />
+                        )}
+                        
+                        {/* Dot */}
+                        <motion.div
+                            className="relative z-10 w-8 h-8 rounded-full bg-zinc-900 border-2 border-zinc-700 flex items-center justify-center mb-3"
+                            whileHover={{ scale: 1.1, borderColor: "#3b82f6" }}
+                        >
+                            <div className="w-2 h-2 rounded-full bg-zinc-500" />
+                        </motion.div>
+                        
+                        {/* Content */}
+                        <h3 className="text-white font-semibold text-sm mb-1">{item.title}</h3>
+                        {item.date && (
+                            <span className="text-xs text-zinc-500 mb-1">{item.date}</span>
+                        )}
+                        {item.description && (
+                            <p className="text-zinc-400 text-xs max-w-[150px]">
+                                {item.description}
+                            </p>
+                        )}
+                    </motion.div>
+                ))}
+            </div>
+        </div>
+    );
+}

package/registry/registry.json

@@ -0,0 +1,85 @@
+{
+  "name": "your-ui",
+  "components": {
+    "button": {
+      "name": "button",
+      "displayName": "Animated Button",
+      "description": "A highly customisable animated button with shimmer, glow, pulse, and ripple effects",
+      "category": "Components",
+      "dependencies": [],
+      "files": ["button.tsx"]
+    },
+    "card": {
+      "name": "card",
+      "displayName": "Card",
+      "description": "A card component with header, title, description, content, and footer",
+      "category": "Components",
+      "dependencies": [],
+      "files": ["card.tsx"]
+    },
+    "input": {
+      "name": "input",
+      "displayName": "Input",
+      "description": "A styled input component with focus states",
+      "category": "Components",
+      "dependencies": [],
+      "files": ["input.tsx"]
+    },
+    "badge": {
+      "name": "badge",
+      "displayName": "Badge",
+      "description": "A badge component with multiple variants",
+      "category": "Components",
+      "dependencies": [],
+      "files": ["badge.tsx"]
+    },
+    "floating-dock": {
+      "name": "floating-dock",
+      "displayName": "Floating Dock",
+      "description": "A macOS-style floating dock with hover animations and tooltips",
+      "category": "Animations",
+      "dependencies": ["framer-motion"],
+      "files": ["floating-dock.tsx"]
+    },
+    "text-reveal": {
+      "name": "text-reveal",
+      "displayName": "Text Reveal",
+      "description": "Animated text reveal with word-by-word or character-by-character animation",
+      "category": "Animations",
+      "dependencies": ["framer-motion"],
+      "files": ["text-reveal.tsx"]
+    },
+    "flip-card": {
+      "name": "flip-card",
+      "displayName": "Flip Card",
+      "description": "A 3D flip card with front and back faces, perfect for showcasing content",
+      "category": "Animations",
+      "dependencies": ["framer-motion"],
+      "files": ["flip-card.tsx"]
+    },
+    "gradient-text": {
+      "name": "gradient-text",
+      "displayName": "Gradient Text",
+      "description": "Animated gradient text with shimmer and color shift effects",
+      "category": "Animations",
+      "dependencies": ["framer-motion"],
+      "files": ["gradient-text.tsx"]
+    },
+    "spotlight-card": {
+      "name": "spotlight-card",
+      "displayName": "Spotlight Card",
+      "description": "A card with a spotlight effect that follows the mouse cursor",
+      "category": "Animations",
+      "dependencies": ["framer-motion"],
+      "files": ["spotlight-card.tsx"]
+    },
+    "timeline": {
+      "name": "timeline",
+      "displayName": "Timeline",
+      "description": "A vertical or horizontal timeline component with animations",
+      "category": "Components",
+      "dependencies": ["framer-motion"],
+      "files": ["timeline.tsx"]
+    }
+  }
+}