glintkit 0.1.0

package/dist/index.js

@@ -0,0 +1,4846 @@
+#!/usr/bin/env node
+
+// src/cli/index.ts
+import { Command as Command4 } from "commander";
+
+// src/cli/commands/init.ts
+import { Command } from "commander";
+import prompts from "prompts";
+
+// src/utils/logger.ts
+import pc from "picocolors";
+var logger = {
+  info: (msg) => console.log(pc.cyan("\u2139"), msg),
+  success: (msg) => console.log(pc.green("\u2714"), msg),
+  warn: (msg) => console.log(pc.yellow("\u26A0"), msg),
+  error: (msg) => console.log(pc.red("\u2716"), msg),
+  break: () => console.log(""),
+  title: (msg) => console.log(pc.bold(pc.cyan(msg)))
+};
+
+// src/utils/config.ts
+import fs from "fs-extra";
+import path from "path";
+var CONFIG_FILE = "glintkit.json";
+function getConfigPath(cwd = process.cwd()) {
+  return path.join(cwd, CONFIG_FILE);
+}
+function configExists(cwd = process.cwd()) {
+  return fs.existsSync(getConfigPath(cwd));
+}
+function readConfig(cwd = process.cwd()) {
+  const configPath = getConfigPath(cwd);
+  if (!fs.existsSync(configPath)) {
+    throw new Error("glintkit.json not found. Run `glintkit init` first.");
+  }
+  return fs.readJSONSync(configPath);
+}
+function writeConfig(config, cwd = process.cwd()) {
+  fs.writeJSONSync(getConfigPath(cwd), config, { spaces: 2 });
+}
+function detectAliasFromTsconfig(cwd = process.cwd()) {
+  const tsconfigPath = path.join(cwd, "tsconfig.json");
+  if (!fs.existsSync(tsconfigPath)) return null;
+  try {
+    const raw = fs.readFileSync(tsconfigPath, "utf-8");
+    const cleaned = raw.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
+    const tsconfig = JSON.parse(cleaned);
+    const paths = tsconfig?.compilerOptions?.paths;
+    if (!paths) return null;
+    for (const [alias, targets] of Object.entries(paths)) {
+      if (alias.endsWith("/*") && Array.isArray(targets) && targets.length > 0) {
+        const prefix = alias.slice(0, -2);
+        return prefix;
+      }
+    }
+  } catch {
+  }
+  return null;
+}
+
+// src/cli/commands/init.ts
+var initCommand = new Command("init").description("Initialize glintkit configuration").option("-y, --yes", "Skip prompts and use defaults").action(async (options) => {
+  const cwd = process.cwd();
+  if (configExists(cwd)) {
+    logger.warn("glintkit.json already exists. Overwriting...");
+  }
+  logger.title("\n  glintkit init\n");
+  const detectedAlias = detectAliasFromTsconfig(cwd);
+  const aliasPrefix = detectedAlias || "@";
+  let config;
+  if (options.yes) {
+    config = {
+      aliases: {
+        components: `${aliasPrefix}/components/ui`,
+        hooks: `${aliasPrefix}/hooks`,
+        utils: `${aliasPrefix}/lib`
+      },
+      tailwind: {
+        css: "src/app/globals.css"
+      }
+    };
+  } else {
+    const response = await prompts([
+      {
+        type: "text",
+        name: "components",
+        message: "Components directory alias:",
+        initial: `${aliasPrefix}/components/ui`
+      },
+      {
+        type: "text",
+        name: "hooks",
+        message: "Hooks directory alias:",
+        initial: `${aliasPrefix}/hooks`
+      },
+      {
+        type: "text",
+        name: "utils",
+        message: "Utils directory alias:",
+        initial: `${aliasPrefix}/lib`
+      },
+      {
+        type: "text",
+        name: "css",
+        message: "Tailwind CSS file path:",
+        initial: "src/app/globals.css"
+      }
+    ]);
+    if (!response.components) {
+      logger.error("Init cancelled.");
+      process.exit(1);
+    }
+    config = {
+      aliases: {
+        components: response.components,
+        hooks: response.hooks,
+        utils: response.utils
+      },
+      tailwind: {
+        css: response.css
+      }
+    };
+  }
+  writeConfig(config, cwd);
+  logger.success("Created glintkit.json");
+  logger.break();
+  logger.info("Now you can add components:");
+  logger.info("  glintkit add 3d-card");
+  logger.info("  glintkit add --category 3d");
+  logger.info("  glintkit add --all");
+  logger.break();
+});
+
+// src/cli/commands/add.ts
+import { Command as Command2 } from "commander";
+import prompts2 from "prompts";
+import path4 from "path";
+import ora from "ora";
+import pc2 from "picocolors";
+
+// src/registry/components.ts
+var REGISTRY = [
+  // Category: 3d
+  {
+    name: "3d-card",
+    category: "3d",
+    description: "3D tilt card with mouse/touch tracking and depth layers",
+    files: [
+      {
+        templateKey: "components/3d/3d-card",
+        fileName: "3d-card.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: [],
+    registryDependencies: ["cn"],
+    cssPresets: []
+  },
+  {
+    name: "prismatic-burst",
+    category: "3d",
+    description: "WebGL prismatic light effect with customizable colors and animations",
+    files: [
+      {
+        templateKey: "components/3d/prismatic-burst",
+        fileName: "prismatic-burst.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: ["ogl"],
+    registryDependencies: [],
+    cssPresets: []
+  },
+  {
+    name: "glass-surface",
+    category: "3d",
+    description: "SVG-based glass refraction and distortion surface",
+    files: [
+      {
+        templateKey: "components/3d/glass-surface",
+        fileName: "glass-surface.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: [],
+    registryDependencies: ["cn"],
+    cssPresets: []
+  },
+  {
+    name: "dome-gallery",
+    category: "3d",
+    description: "3D dome/sphere photo gallery with drag and inertia",
+    files: [
+      {
+        templateKey: "components/3d/dome-gallery",
+        fileName: "dome-gallery.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: ["@use-gesture/react"],
+    registryDependencies: [],
+    cssPresets: []
+  },
+  {
+    name: "holo-card",
+    category: "3d",
+    description: "Holographic card with rainbow shine and flip animation",
+    files: [
+      {
+        templateKey: "components/3d/holo-card",
+        fileName: "holo-card.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: [],
+    registryDependencies: ["cn"],
+    cssPresets: ["holo-card"]
+  },
+  {
+    name: "flip-card",
+    category: "3d",
+    description: "3D flip card with tilt effect and customizable content",
+    files: [
+      {
+        templateKey: "components/3d/flip-card",
+        fileName: "flip-card.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: [],
+    registryDependencies: ["cn", "3d-card"],
+    cssPresets: []
+  },
+  // Category: motion
+  {
+    name: "counter",
+    category: "motion",
+    description: "Cyberpunk scramble counter that reveals numbers with matrix-style animation",
+    files: [
+      {
+        templateKey: "components/motion/counter",
+        fileName: "counter.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: [],
+    registryDependencies: ["cn", "use-scroll-animation"],
+    cssPresets: []
+  },
+  {
+    name: "countdown-timer",
+    category: "motion",
+    description: "Countdown timer with multiple visual states (normal, approaching, live)",
+    files: [
+      {
+        templateKey: "components/motion/countdown-timer",
+        fileName: "countdown-timer.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: [],
+    registryDependencies: ["cn", "use-countdown"],
+    cssPresets: ["glass", "gradient-text", "animations"]
+  },
+  {
+    name: "shiny-text",
+    category: "motion",
+    description: "Animated shiny/glossy text with customizable sweep direction",
+    files: [
+      {
+        templateKey: "components/motion/shiny-text",
+        fileName: "shiny-text.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: ["motion"],
+    registryDependencies: [],
+    cssPresets: []
+  },
+  {
+    name: "light-rays",
+    category: "motion",
+    description: "WebGL volumetric light rays from configurable origin",
+    files: [
+      {
+        templateKey: "components/motion/light-rays",
+        fileName: "light-rays.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: ["ogl"],
+    registryDependencies: [],
+    cssPresets: []
+  },
+  // Category: glass
+  {
+    name: "button",
+    category: "glass",
+    description: "Multi-variant button with glow border, gradient, and glass styles",
+    files: [
+      {
+        templateKey: "components/glass/button",
+        fileName: "button.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["cn"],
+    cssPresets: ["glow-border"]
+  },
+  {
+    name: "card",
+    category: "glass",
+    description: "Glass card with default, strong, gradient, and outline variants",
+    files: [
+      {
+        templateKey: "components/glass/card",
+        fileName: "card.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["cn"],
+    cssPresets: ["glass"]
+  },
+  {
+    name: "modal",
+    category: "glass",
+    description: "Modal dialog with glass backdrop, mobile handle bar, and portal rendering",
+    files: [
+      {
+        templateKey: "components/glass/modal",
+        fileName: "modal.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: [],
+    registryDependencies: ["cn"],
+    cssPresets: ["glass", "animations"]
+  },
+  {
+    name: "music-player",
+    category: "glass",
+    description: "Audio player with soundwave visualization and glass surface",
+    files: [
+      {
+        templateKey: "components/glass/music-player",
+        fileName: "music-player.tsx",
+        type: "component"
+      }
+    ],
+    npmDependencies: [],
+    registryDependencies: ["glass-surface"],
+    cssPresets: ["animations"]
+  },
+  // Category: hooks
+  {
+    name: "use-countdown",
+    category: "hooks",
+    description: "Countdown timer hook that calculates days, hours, minutes, seconds",
+    files: [
+      {
+        templateKey: "hooks/use-countdown",
+        fileName: "use-countdown.ts",
+        type: "hook"
+      }
+    ],
+    npmDependencies: [],
+    registryDependencies: [],
+    cssPresets: []
+  },
+  {
+    name: "use-scroll-animation",
+    category: "hooks",
+    description: "IntersectionObserver-based scroll trigger hook",
+    files: [
+      {
+        templateKey: "hooks/use-scroll-animation",
+        fileName: "use-scroll-animation.ts",
+        type: "hook"
+      }
+    ],
+    npmDependencies: [],
+    registryDependencies: [],
+    cssPresets: []
+  },
+  {
+    name: "use-media-query",
+    category: "hooks",
+    description: "Responsive breakpoint detection with predefined mobile/tablet/desktop helpers",
+    files: [
+      {
+        templateKey: "hooks/use-media-query",
+        fileName: "use-media-query.ts",
+        type: "hook"
+      }
+    ],
+    npmDependencies: [],
+    registryDependencies: [],
+    cssPresets: []
+  },
+  // Category: utils
+  {
+    name: "cn",
+    category: "utils",
+    description: "Tailwind CSS class merge utility (clsx + tailwind-merge)",
+    files: [
+      {
+        templateKey: "utils/cn",
+        fileName: "cn.ts",
+        type: "util"
+      }
+    ],
+    npmDependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: [],
+    cssPresets: []
+  }
+];
+function getComponent(name) {
+  return REGISTRY.find((c) => c.name === name);
+}
+function getComponentsByCategory(category) {
+  return REGISTRY.filter((c) => c.category === category);
+}
+function getAllCategories() {
+  return [...new Set(REGISTRY.map((c) => c.category))];
+}
+
+// src/utils/detect-pm.ts
+import fs2 from "fs-extra";
+import path2 from "path";
+function detectPackageManager(cwd = process.cwd()) {
+  if (fs2.existsSync(path2.join(cwd, "bun.lockb")) || fs2.existsSync(path2.join(cwd, "bun.lock"))) return "bun";
+  if (fs2.existsSync(path2.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if (fs2.existsSync(path2.join(cwd, "yarn.lock"))) return "yarn";
+  return "npm";
+}
+
+// src/utils/installer.ts
+import { execSync } from "child_process";
+function installDependencies(deps, pm, cwd = process.cwd()) {
+  if (deps.length === 0) return;
+  const commands = {
+    npm: `npm install ${deps.join(" ")}`,
+    pnpm: `pnpm add ${deps.join(" ")}`,
+    yarn: `yarn add ${deps.join(" ")}`,
+    bun: `bun add ${deps.join(" ")}`
+  };
+  const cmd = commands[pm];
+  logger.info(`Installing dependencies with ${pm}...`);
+  try {
+    execSync(cmd, { cwd, stdio: "pipe" });
+  } catch (error) {
+    throw new Error(`Failed to install dependencies: ${error.message}`);
+  }
+}
+
+// src/utils/file-writer.ts
+import fs3 from "fs-extra";
+import path3 from "path";
+
+// src/registry/__generated__/templates.ts
+var TEMPLATES = {
+  "components/3d/3d-card": `"use client";
+
+import { cn } from "__UTILS_ALIAS__/cn";
+import React, {
+  createContext,
+  useState,
+  useContext,
+  useRef,
+  useEffect,
+} from "react";
+
+const MouseEnterContext = createContext<
+  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined
+>(undefined);
+
+export const CardContainer = ({
+  children,
+  className,
+  containerClassName,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isMouseEntered, setIsMouseEntered] = useState(false);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return;
+    const { left, top, width, height } =
+      containerRef.current.getBoundingClientRect();
+    const x = (e.clientX - left - width / 2) / 25;
+    const y = (e.clientY - top - height / 2) / 25;
+    containerRef.current.style.transform = \`rotateY(\${x}deg) rotateX(\${y}deg)\`;
+  };
+
+  const handleMouseEnter = () => {
+    setIsMouseEntered(true);
+  };
+
+  const handleMouseLeave = () => {
+    if (!containerRef.current) return;
+    setIsMouseEntered(false);
+    containerRef.current.style.transform = \`rotateY(0deg) rotateX(0deg)\`;
+  };
+
+  // Touch event handlers for mobile
+  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    // Don't preventDefault here - it blocks touch events on some mobile browsers
+    // Instead, use CSS touch-action: none on the element
+    setIsMouseEntered(true);
+
+    // Initial tilt based on touch position
+    if (!containerRef.current || !e.touches[0]) return;
+    const { left, top, width, height } =
+      containerRef.current.getBoundingClientRect();
+    const touch = e.touches[0];
+    const x = (touch.clientX - left - width / 2) / 15;
+    const y = (touch.clientY - top - height / 2) / 15;
+    containerRef.current.style.transform = \`rotateY(\${x}deg) rotateX(\${y}deg)\`;
+  };
+
+  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+    // Only prevent default if we're actively interacting with the card
+    // This allows the initial touch to register properly
+    if (isMouseEntered && e.cancelable) {
+      e.preventDefault();
+    }
+    if (!containerRef.current || !e.touches[0]) return;
+    const { left, top, width, height } =
+      containerRef.current.getBoundingClientRect();
+    const touch = e.touches[0];
+    const x = (touch.clientX - left - width / 2) / 15; // Increased sensitivity for touch
+    const y = (touch.clientY - top - height / 2) / 15;
+    containerRef.current.style.transform = \`rotateY(\${x}deg) rotateX(\${y}deg)\`;
+  };
+
+  const handleTouchEnd = () => {
+    if (!containerRef.current) return;
+    setIsMouseEntered(false);
+    containerRef.current.style.transform = \`rotateY(0deg) rotateX(0deg)\`;
+  };
+
+  return (
+    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
+      <div
+        className={cn(
+          "py-20 flex items-center justify-center",
+          containerClassName
+        )}
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <div
+          ref={containerRef}
+          onMouseEnter={handleMouseEnter}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+          className={cn(
+            "flex items-center justify-center relative transition-all duration-200 ease-linear",
+            className
+          )}
+          style={{
+            transformStyle: "preserve-3d",
+            touchAction: "none", // Prevent browser touch handling for reliable tilt
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </MouseEnterContext.Provider>
+  );
+};
+
+export const CardBody = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  // Clone children to add transform-style: preserve-3d
+  const childrenWithPreserve3d = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child as React.ReactElement<{ style?: React.CSSProperties }>, {
+        style: {
+          ...(child.props as { style?: React.CSSProperties }).style,
+          transformStyle: "preserve-3d",
+        },
+      });
+    }
+    return child;
+  });
+
+  return (
+    <div
+      className={cn("h-96 w-96", className)}
+      style={{
+        transformStyle: "preserve-3d",
+      }}
+    >
+      {childrenWithPreserve3d}
+    </div>
+  );
+};
+
+export const CardItem = ({
+  as: Tag = "div",
+  children,
+  className,
+  translateX = 0,
+  translateY = 0,
+  translateZ = 0,
+  rotateX = 0,
+  rotateY = 0,
+  rotateZ = 0,
+  ...rest
+}: {
+  as?: React.ElementType;
+  children: React.ReactNode;
+  className?: string;
+  translateX?: number | string;
+  translateY?: number | string;
+  translateZ?: number | string;
+  rotateX?: number | string;
+  rotateY?: number | string;
+  rotateZ?: number | string;
+  [key: string]: unknown;
+}) => {
+  const ref = useRef<HTMLElement>(null);
+  const [isMouseEntered] = useMouseEnter();
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    if (isMouseEntered) {
+      ref.current.style.transform = \`translateX(\${translateX}px) translateY(\${translateY}px) translateZ(\${translateZ}px) rotateX(\${rotateX}deg) rotateY(\${rotateY}deg) rotateZ(\${rotateZ}deg)\`;
+    } else {
+      ref.current.style.transform = \`translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)\`;
+    }
+  }, [isMouseEntered, translateX, translateY, translateZ, rotateX, rotateY, rotateZ]);
+
+  return (
+    <Tag
+      ref={ref as React.RefObject<never>}
+      className={cn("w-fit transition duration-200 ease-linear", className)}
+      style={{ transformStyle: "preserve-3d" }}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+export const useMouseEnter = () => {
+  const context = useContext(MouseEnterContext);
+  if (context === undefined) {
+    throw new Error("useMouseEnter must be used within a MouseEnterProvider");
+  }
+  return context;
+};
+`,
+  "components/3d/dome-gallery": `"use client";
+
+import { useEffect, useMemo, useRef, useCallback } from 'react';
+import { useGesture } from '@use-gesture/react';
+
+type ImageItem = string | { src: string; alt?: string };
+
+type DomeGalleryProps = {
+  images?: ImageItem[];
+  fit?: number;
+  fitBasis?: 'auto' | 'min' | 'max' | 'width' | 'height';
+  minRadius?: number;
+  maxRadius?: number;
+  padFactor?: number;
+  overlayBlurColor?: string;
+  maxVerticalRotationDeg?: number;
+  dragSensitivity?: number;
+  enlargeTransitionMs?: number;
+  segments?: number;
+  dragDampening?: number;
+  openedImageWidth?: string;
+  openedImageHeight?: string;
+  imageBorderRadius?: string;
+  openedImageBorderRadius?: string;
+  grayscale?: boolean;
+  autoRotate?: boolean;
+  autoRotateSpeed?: number;
+  disableInteraction?: boolean;
+};
+
+type ItemDef = {
+  src: string;
+  alt: string;
+  x: number;
+  y: number;
+  sizeX: number;
+  sizeY: number;
+};
+
+const DEFAULTS = {
+  maxVerticalRotationDeg: 5,
+  dragSensitivity: 20,
+  enlargeTransitionMs: 300,
+  segments: 35
+};
+
+const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max);
+const normalizeAngle = (d: number) => ((d % 360) + 360) % 360;
+const wrapAngleSigned = (deg: number) => {
+  const a = (((deg + 180) % 360) + 360) % 360;
+  return a - 180;
+};
+const getDataNumber = (el: HTMLElement, name: string, fallback: number) => {
+  const attr = el.dataset[name] ?? el.getAttribute(\`data-\${name}\`);
+  const n = attr == null ? NaN : parseFloat(attr);
+  return Number.isFinite(n) ? n : fallback;
+};
+
+function buildItems(pool: ImageItem[], seg: number): ItemDef[] {
+  const xCols = Array.from({ length: seg }, (_, i) => -37 + i * 2);
+  const evenYs = [-4, -2, 0, 2, 4];
+  const oddYs = [-3, -1, 1, 3, 5];
+
+  const coords = xCols.flatMap((x, c) => {
+    const ys = c % 2 === 0 ? evenYs : oddYs;
+    return ys.map(y => ({ x, y, sizeX: 2, sizeY: 2 }));
+  });
+
+  const totalSlots = coords.length;
+  if (pool.length === 0) {
+    return coords.map(c => ({ ...c, src: '', alt: '' }));
+  }
+  if (pool.length > totalSlots) {
+    console.warn(
+      \`[DomeGallery] Provided image count (\${pool.length}) exceeds available tiles (\${totalSlots}). Some images will not be shown.\`
+    );
+  }
+
+  const normalizedImages = pool.map(image => {
+    if (typeof image === 'string') {
+      return { src: image, alt: '' };
+    }
+    return { src: image.src || '', alt: image.alt || '' };
+  });
+
+  const usedImages = Array.from({ length: totalSlots }, (_, i) => normalizedImages[i % normalizedImages.length]);
+
+  for (let i = 1; i < usedImages.length; i++) {
+    if (usedImages[i].src === usedImages[i - 1].src) {
+      for (let j = i + 1; j < usedImages.length; j++) {
+        if (usedImages[j].src !== usedImages[i].src) {
+          const tmp = usedImages[i];
+          usedImages[i] = usedImages[j];
+          usedImages[j] = tmp;
+          break;
+        }
+      }
+    }
+  }
+
+  return coords.map((c, i) => ({
+    ...c,
+    src: usedImages[i].src,
+    alt: usedImages[i].alt
+  }));
+}
+
+function computeItemBaseRotation(offsetX: number, offsetY: number, sizeX: number, sizeY: number, segments: number) {
+  const unit = 360 / segments / 2;
+  const rotateY = unit * (offsetX + (sizeX - 1) / 2);
+  const rotateX = unit * (offsetY - (sizeY - 1) / 2);
+  return { rotateX, rotateY };
+}
+
+export default function DomeGallery({
+  images = [],
+  fit = 0.8,
+  fitBasis = 'auto',
+  minRadius = 600,
+  maxRadius = Infinity,
+  padFactor = 0.25,
+  overlayBlurColor = '#060010',
+  maxVerticalRotationDeg = DEFAULTS.maxVerticalRotationDeg,
+  dragSensitivity = DEFAULTS.dragSensitivity,
+  enlargeTransitionMs = DEFAULTS.enlargeTransitionMs,
+  segments = DEFAULTS.segments,
+  dragDampening = 2,
+  openedImageWidth = '400px',
+  openedImageHeight = '400px',
+  imageBorderRadius = '30px',
+  openedImageBorderRadius = '30px',
+  grayscale = false,
+  autoRotate = false,
+  autoRotateSpeed = 0.3,
+  disableInteraction = false
+}: DomeGalleryProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const mainRef = useRef<HTMLDivElement>(null);
+  const sphereRef = useRef<HTMLDivElement>(null);
+  const frameRef = useRef<HTMLDivElement>(null);
+  const viewerRef = useRef<HTMLDivElement>(null);
+  const scrimRef = useRef<HTMLDivElement>(null);
+  const focusedElRef = useRef<HTMLElement | null>(null);
+  const originalTilePositionRef = useRef<{
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const rotationRef = useRef({ x: 0, y: 0 });
+  const startRotRef = useRef({ x: 0, y: 0 });
+  const startPosRef = useRef<{ x: number; y: number } | null>(null);
+  const draggingRef = useRef(false);
+  const cancelTapRef = useRef(false);
+  const movedRef = useRef(false);
+  const inertiaRAF = useRef<number | null>(null);
+  const pointerTypeRef = useRef<'mouse' | 'pen' | 'touch'>('mouse');
+  const tapTargetRef = useRef<HTMLElement | null>(null);
+  const openingRef = useRef(false);
+  const openStartedAtRef = useRef(0);
+  const lastDragEndAt = useRef(0);
+
+  const scrollLockedRef = useRef(false);
+  const lockScroll = useCallback(() => {
+    if (scrollLockedRef.current) return;
+    scrollLockedRef.current = true;
+    document.body.classList.add('dg-scroll-lock');
+  }, []);
+  const unlockScroll = useCallback(() => {
+    if (!scrollLockedRef.current) return;
+    if (rootRef.current?.getAttribute('data-enlarging') === 'true') return;
+    scrollLockedRef.current = false;
+    document.body.classList.remove('dg-scroll-lock');
+  }, []);
+
+  const items = useMemo(() => buildItems(images, segments), [images, segments]);
+
+  const applyTransform = (xDeg: number, yDeg: number) => {
+    const el = sphereRef.current;
+    if (el) {
+      el.style.transform = \`translateZ(calc(var(--radius) * -1)) rotateX(\${xDeg}deg) rotateY(\${yDeg}deg)\`;
+    }
+  };
+
+  const lockedRadiusRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const ro = new ResizeObserver(entries => {
+      const cr = entries[0].contentRect;
+      const w = Math.max(1, cr.width),
+        h = Math.max(1, cr.height);
+      const minDim = Math.min(w, h),
+        maxDim = Math.max(w, h),
+        aspect = w / h;
+      let basis: number;
+      switch (fitBasis) {
+        case 'min':
+          basis = minDim;
+          break;
+        case 'max':
+          basis = maxDim;
+          break;
+        case 'width':
+          basis = w;
+          break;
+        case 'height':
+          basis = h;
+          break;
+        default:
+          basis = aspect >= 1.3 ? w : minDim;
+      }
+      let radius = basis * fit;
+      const heightGuard = h * 1.35;
+      radius = Math.min(radius, heightGuard);
+      radius = clamp(radius, minRadius, maxRadius);
+      lockedRadiusRef.current = Math.round(radius);
+
+      const viewerPad = Math.max(8, Math.round(minDim * padFactor));
+      root.style.setProperty('--radius', \`\${lockedRadiusRef.current}px\`);
+      root.style.setProperty('--viewer-pad', \`\${viewerPad}px\`);
+      root.style.setProperty('--overlay-blur-color', overlayBlurColor);
+      root.style.setProperty('--tile-radius', imageBorderRadius);
+      root.style.setProperty('--enlarge-radius', openedImageBorderRadius);
+      root.style.setProperty('--image-filter', grayscale ? 'grayscale(1)' : 'none');
+      applyTransform(rotationRef.current.x, rotationRef.current.y);
+
+      const enlargedOverlay = viewerRef.current?.querySelector('.enlarge') as HTMLElement;
+      if (enlargedOverlay && frameRef.current && mainRef.current) {
+        const frameR = frameRef.current.getBoundingClientRect();
+        const mainR = mainRef.current.getBoundingClientRect();
+
+        const hasCustomSize = openedImageWidth && openedImageHeight;
+        if (hasCustomSize) {
+          const tempDiv = document.createElement('div');
+          tempDiv.style.cssText = \`position: absolute; width: \${openedImageWidth}; height: \${openedImageHeight}; visibility: hidden;\`;
+          document.body.appendChild(tempDiv);
+          const tempRect = tempDiv.getBoundingClientRect();
+          document.body.removeChild(tempDiv);
+
+          const centeredLeft = frameR.left - mainR.left + (frameR.width - tempRect.width) / 2;
+          const centeredTop = frameR.top - mainR.top + (frameR.height - tempRect.height) / 2;
+
+          enlargedOverlay.style.left = \`\${centeredLeft}px\`;
+          enlargedOverlay.style.top = \`\${centeredTop}px\`;
+        } else {
+          enlargedOverlay.style.left = \`\${frameR.left - mainR.left}px\`;
+          enlargedOverlay.style.top = \`\${frameR.top - mainR.top}px\`;
+          enlargedOverlay.style.width = \`\${frameR.width}px\`;
+          enlargedOverlay.style.height = \`\${frameR.height}px\`;
+        }
+      }
+    });
+    ro.observe(root);
+    return () => ro.disconnect();
+  }, [
+    fit,
+    fitBasis,
+    minRadius,
+    maxRadius,
+    padFactor,
+    overlayBlurColor,
+    grayscale,
+    imageBorderRadius,
+    openedImageBorderRadius,
+    openedImageWidth,
+    openedImageHeight
+  ]);
+
+  useEffect(() => {
+    applyTransform(rotationRef.current.x, rotationRef.current.y);
+  }, []);
+
+  const stopInertia = useCallback(() => {
+    if (inertiaRAF.current) {
+      cancelAnimationFrame(inertiaRAF.current);
+      inertiaRAF.current = null;
+    }
+  }, []);
+
+  const startInertia = useCallback(
+    (vx: number, vy: number) => {
+      const MAX_V = 1.4;
+      let vX = clamp(vx, -MAX_V, MAX_V) * 80;
+      let vY = clamp(vy, -MAX_V, MAX_V) * 80;
+      let frames = 0;
+      const d = clamp(dragDampening ?? 0.6, 0, 1);
+      const frictionMul = 0.94 + 0.055 * d;
+      const stopThreshold = 0.015 - 0.01 * d;
+      const maxFrames = Math.round(90 + 270 * d);
+      const step = () => {
+        vX *= frictionMul;
+        vY *= frictionMul;
+        if (Math.abs(vX) < stopThreshold && Math.abs(vY) < stopThreshold) {
+          inertiaRAF.current = null;
+          return;
+        }
+        if (++frames > maxFrames) {
+          inertiaRAF.current = null;
+          return;
+        }
+        const nextX = clamp(rotationRef.current.x - vY / 200, -maxVerticalRotationDeg, maxVerticalRotationDeg);
+        const nextY = wrapAngleSigned(rotationRef.current.y + vX / 200);
+        rotationRef.current = { x: nextX, y: nextY };
+        applyTransform(nextX, nextY);
+        inertiaRAF.current = requestAnimationFrame(step);
+      };
+      stopInertia();
+      inertiaRAF.current = requestAnimationFrame(step);
+    },
+    [dragDampening, maxVerticalRotationDeg, stopInertia]
+  );
+
+  // Auto-rotation effect with visibility optimization
+  const autoRotateRAF = useRef<number | null>(null);
+  const isVisibleRef = useRef(false);
+  const isScrollingRef = useRef(false);
+
+  // IntersectionObserver to pause animation when not visible
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        isVisibleRef.current = entries[0].isIntersecting;
+      },
+      { threshold: 0.1 }
+    );
+
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, []);
+
+  // Pause animation during scroll for better performance
+  useEffect(() => {
+    let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    const handleScroll = () => {
+      isScrollingRef.current = true;
+      if (scrollTimeout) clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        isScrollingRef.current = false;
+      }, 150);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (scrollTimeout) clearTimeout(scrollTimeout);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!autoRotate) {
+      if (autoRotateRAF.current) {
+        cancelAnimationFrame(autoRotateRAF.current);
+        autoRotateRAF.current = null;
+      }
+      return;
+    }
+
+    const animate = () => {
+      // Don't rotate while dragging, scrolling, when an image is focused, or when not visible
+      if (draggingRef.current || focusedElRef.current || inertiaRAF.current || !isVisibleRef.current || isScrollingRef.current) {
+        autoRotateRAF.current = requestAnimationFrame(animate);
+        return;
+      }
+
+      const nextY = wrapAngleSigned(rotationRef.current.y + autoRotateSpeed);
+      rotationRef.current = { x: rotationRef.current.x, y: nextY };
+      applyTransform(rotationRef.current.x, nextY);
+      autoRotateRAF.current = requestAnimationFrame(animate);
+    };
+
+    autoRotateRAF.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (autoRotateRAF.current) {
+        cancelAnimationFrame(autoRotateRAF.current);
+        autoRotateRAF.current = null;
+      }
+    };
+  }, [autoRotate, autoRotateSpeed]);
+
+  useGesture(
+    {
+      onDragStart: ({ event }) => {
+        if (disableInteraction) return;
+        if (focusedElRef.current) return;
+        stopInertia();
+
+        const evt = event as PointerEvent;
+        pointerTypeRef.current = (evt.pointerType as 'mouse' | 'pen' | 'touch') || 'mouse';
+        if (pointerTypeRef.current === 'touch') evt.preventDefault();
+        if (pointerTypeRef.current === 'touch') lockScroll();
+        draggingRef.current = true;
+        cancelTapRef.current = false;
+        movedRef.current = false;
+        startRotRef.current = { ...rotationRef.current };
+        startPosRef.current = { x: evt.clientX, y: evt.clientY };
+        const potential = (evt.target as Element).closest?.('.item__image') as HTMLElement | null;
+        tapTargetRef.current = potential || null;
+      },
+      onDrag: ({ event, last, velocity: velArr = [0, 0], direction: dirArr = [0, 0], movement }) => {
+        if (focusedElRef.current || !draggingRef.current || !startPosRef.current) return;
+
+        const evt = event as PointerEvent;
+        if (pointerTypeRef.current === 'touch') evt.preventDefault();
+
+        const dxTotal = evt.clientX - startPosRef.current.x;
+        const dyTotal = evt.clientY - startPosRef.current.y;
+
+        if (!movedRef.current) {
+          const dist2 = dxTotal * dxTotal + dyTotal * dyTotal;
+          if (dist2 > 16) movedRef.current = true;
+        }
+
+        const nextX = clamp(
+          startRotRef.current.x - dyTotal / dragSensitivity,
+          -maxVerticalRotationDeg,
+          maxVerticalRotationDeg
+        );
+        const nextY = startRotRef.current.y + dxTotal / dragSensitivity;
+
+        const cur = rotationRef.current;
+        if (cur.x !== nextX || cur.y !== nextY) {
+          rotationRef.current = { x: nextX, y: nextY };
+          applyTransform(nextX, nextY);
+        }
+
+        if (last) {
+          draggingRef.current = false;
+          let isTap = false;
+
+          if (startPosRef.current) {
+            const dx = evt.clientX - startPosRef.current.x;
+            const dy = evt.clientY - startPosRef.current.y;
+            const dist2 = dx * dx + dy * dy;
+            const TAP_THRESH_PX = pointerTypeRef.current === 'touch' ? 10 : 6;
+            if (dist2 <= TAP_THRESH_PX * TAP_THRESH_PX) {
+              isTap = true;
+            }
+          }
+
+          let [vMagX, vMagY] = velArr;
+          const [dirX, dirY] = dirArr;
+          let vx = vMagX * dirX;
+          let vy = vMagY * dirY;
+
+          if (!isTap && Math.abs(vx) < 0.001 && Math.abs(vy) < 0.001 && Array.isArray(movement)) {
+            const [mx, my] = movement;
+            vx = (mx / dragSensitivity) * 0.02;
+            vy = (my / dragSensitivity) * 0.02;
+          }
+
+          if (!isTap && (Math.abs(vx) > 0.005 || Math.abs(vy) > 0.005)) {
+            startInertia(vx, vy);
+          }
+          startPosRef.current = null;
+          cancelTapRef.current = !isTap;
+
+          if (isTap && tapTargetRef.current && !focusedElRef.current) {
+            openItemFromElement(tapTargetRef.current);
+          }
+          tapTargetRef.current = null;
+
+          if (cancelTapRef.current) setTimeout(() => (cancelTapRef.current = false), 120);
+          if (pointerTypeRef.current === 'touch') unlockScroll();
+          if (movedRef.current) lastDragEndAt.current = performance.now();
+          movedRef.current = false;
+        }
+      }
+    },
+    { target: mainRef, eventOptions: { passive: false } }
+  );
+
+  useEffect(() => {
+    const scrim = scrimRef.current;
+    if (!scrim) return;
+
+    const close = () => {
+      if (performance.now() - openStartedAtRef.current < 250) return;
+      const el = focusedElRef.current;
+      if (!el) return;
+      const parent = el.parentElement as HTMLElement;
+      const overlay = viewerRef.current?.querySelector('.enlarge') as HTMLElement | null;
+      if (!overlay) return;
+
+      const refDiv = parent.querySelector('.item__image--reference') as HTMLElement | null;
+
+      const originalPos = originalTilePositionRef.current;
+      if (!originalPos) {
+        overlay.remove();
+        if (refDiv) refDiv.remove();
+        parent.style.setProperty('--rot-y-delta', \`0deg\`);
+        parent.style.setProperty('--rot-x-delta', \`0deg\`);
+        el.style.visibility = '';
+        el.style.zIndex = '0';
+        focusedElRef.current = null;
+        rootRef.current?.removeAttribute('data-enlarging');
+        openingRef.current = false;
+        return;
+      }
+
+      const currentRect = overlay.getBoundingClientRect();
+      const rootRect = rootRef.current!.getBoundingClientRect();
+
+      const originalPosRelativeToRoot = {
+        left: originalPos.left - rootRect.left,
+        top: originalPos.top - rootRect.top,
+        width: originalPos.width,
+        height: originalPos.height
+      };
+
+      const overlayRelativeToRoot = {
+        left: currentRect.left - rootRect.left,
+        top: currentRect.top - rootRect.top,
+        width: currentRect.width,
+        height: currentRect.height
+      };
+
+      const animatingOverlay = document.createElement('div');
+      animatingOverlay.className = 'enlarge-closing';
+      animatingOverlay.style.cssText = \`
+        position: absolute;
+        left: \${overlayRelativeToRoot.left}px;
+        top: \${overlayRelativeToRoot.top}px;
+        width: \${overlayRelativeToRoot.width}px;
+        height: \${overlayRelativeToRoot.height}px;
+        z-index: 9999;
+        border-radius: \${openedImageBorderRadius};
+        overflow: hidden;
+        box-shadow: 0 10px 30px rgba(0,0,0,.35);
+        transition: all \${enlargeTransitionMs}ms ease-out;
+        pointer-events: none;
+        margin: 0;
+        transform: none;
+        filter: \${grayscale ? 'grayscale(1)' : 'none'};
+      \`;
+
+      const originalImg = overlay.querySelector('img');
+      if (originalImg) {
+        const img = originalImg.cloneNode() as HTMLImageElement;
+        img.style.cssText = 'width: 100%; height: 100%; object-fit: cover;';
+        animatingOverlay.appendChild(img);
+      }
+
+      overlay.remove();
+      rootRef.current!.appendChild(animatingOverlay);
+
+      void animatingOverlay.getBoundingClientRect();
+
+      requestAnimationFrame(() => {
+        animatingOverlay.style.left = originalPosRelativeToRoot.left + 'px';
+        animatingOverlay.style.top = originalPosRelativeToRoot.top + 'px';
+        animatingOverlay.style.width = originalPosRelativeToRoot.width + 'px';
+        animatingOverlay.style.height = originalPosRelativeToRoot.height + 'px';
+        animatingOverlay.style.opacity = '0';
+      });
+
+      const cleanup = () => {
+        animatingOverlay.remove();
+        originalTilePositionRef.current = null;
+
+        if (refDiv) refDiv.remove();
+        parent.style.transition = 'none';
+        el.style.transition = 'none';
+
+        parent.style.setProperty('--rot-y-delta', \`0deg\`);
+        parent.style.setProperty('--rot-x-delta', \`0deg\`);
+
+        requestAnimationFrame(() => {
+          el.style.visibility = '';
+          el.style.opacity = '0';
+          el.style.zIndex = '0';
+          focusedElRef.current = null;
+          rootRef.current?.removeAttribute('data-enlarging');
+
+          requestAnimationFrame(() => {
+            parent.style.transition = '';
+            el.style.transition = 'opacity 300ms ease-out';
+
+            requestAnimationFrame(() => {
+              el.style.opacity = '1';
+              setTimeout(() => {
+                el.style.transition = '';
+                el.style.opacity = '';
+                openingRef.current = false;
+                if (!draggingRef.current && rootRef.current?.getAttribute('data-enlarging') !== 'true') {
+                  document.body.classList.remove('dg-scroll-lock');
+                }
+              }, 300);
+            });
+          });
+        });
+      };
+
+      animatingOverlay.addEventListener('transitionend', cleanup, {
+        once: true
+      });
+    };
+
+    scrim.addEventListener('click', close);
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close();
+    };
+    window.addEventListener('keydown', onKey);
+
+    return () => {
+      scrim.removeEventListener('click', close);
+      window.removeEventListener('keydown', onKey);
+    };
+  }, [enlargeTransitionMs, openedImageBorderRadius, grayscale]);
+
+  const openItemFromElement = (el: HTMLElement) => {
+    if (openingRef.current) return;
+    openingRef.current = true;
+    openStartedAtRef.current = performance.now();
+    lockScroll();
+    const parent = el.parentElement as HTMLElement;
+    focusedElRef.current = el;
+    el.setAttribute('data-focused', 'true');
+    const offsetX = getDataNumber(parent, 'offsetX', 0);
+    const offsetY = getDataNumber(parent, 'offsetY', 0);
+    const sizeX = getDataNumber(parent, 'sizeX', 2);
+    const sizeY = getDataNumber(parent, 'sizeY', 2);
+    const parentRot = computeItemBaseRotation(offsetX, offsetY, sizeX, sizeY, segments);
+    const parentY = normalizeAngle(parentRot.rotateY);
+    const globalY = normalizeAngle(rotationRef.current.y);
+    let rotY = -(parentY + globalY) % 360;
+    if (rotY < -180) rotY += 360;
+    const rotX = -parentRot.rotateX - rotationRef.current.x;
+    parent.style.setProperty('--rot-y-delta', \`\${rotY}deg\`);
+    parent.style.setProperty('--rot-x-delta', \`\${rotX}deg\`);
+    const refDiv = document.createElement('div');
+    refDiv.className = 'item__image item__image--reference opacity-0';
+    refDiv.style.transform = \`rotateX(\${-parentRot.rotateX}deg) rotateY(\${-parentRot.rotateY}deg)\`;
+    parent.appendChild(refDiv);
+
+    void refDiv.offsetHeight;
+
+    const tileR = refDiv.getBoundingClientRect();
+    const mainR = mainRef.current?.getBoundingClientRect();
+    const frameR = frameRef.current?.getBoundingClientRect();
+
+    if (!mainR || !frameR || tileR.width <= 0 || tileR.height <= 0) {
+      openingRef.current = false;
+      focusedElRef.current = null;
+      parent.removeChild(refDiv);
+      unlockScroll();
+      return;
+    }
+
+    originalTilePositionRef.current = {
+      left: tileR.left,
+      top: tileR.top,
+      width: tileR.width,
+      height: tileR.height
+    };
+    el.style.visibility = 'hidden';
+    el.style.zIndex = '0';
+    const overlay = document.createElement('div');
+    overlay.className = 'enlarge';
+    overlay.style.cssText = \`position:absolute; left:\${frameR.left - mainR.left}px; top:\${frameR.top - mainR.top}px; width:\${frameR.width}px; height:\${frameR.height}px; opacity:0; z-index:30; will-change:transform,opacity; transform-origin:top left; transition:transform \${enlargeTransitionMs}ms ease, opacity \${enlargeTransitionMs}ms ease; border-radius:\${openedImageBorderRadius}; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35);\`;
+    const rawSrc = parent.dataset.src || (el.querySelector('img') as HTMLImageElement)?.src || '';
+    const rawAlt = parent.dataset.alt || (el.querySelector('img') as HTMLImageElement)?.alt || '';
+    const img = document.createElement('img');
+    img.src = rawSrc;
+    img.alt = rawAlt;
+    img.style.cssText = \`width:100%; height:100%; object-fit:cover; filter:\${grayscale ? 'grayscale(1)' : 'none'};\`;
+    overlay.appendChild(img);
+    viewerRef.current!.appendChild(overlay);
+    const tx0 = tileR.left - frameR.left;
+    const ty0 = tileR.top - frameR.top;
+    const sx0 = tileR.width / frameR.width;
+    const sy0 = tileR.height / frameR.height;
+
+    const validSx0 = isFinite(sx0) && sx0 > 0 ? sx0 : 1;
+    const validSy0 = isFinite(sy0) && sy0 > 0 ? sy0 : 1;
+
+    overlay.style.transform = \`translate(\${tx0}px, \${ty0}px) scale(\${validSx0}, \${validSy0})\`;
+    setTimeout(() => {
+      if (!overlay.parentElement) return;
+      overlay.style.opacity = '1';
+      overlay.style.transform = 'translate(0px, 0px) scale(1, 1)';
+      rootRef.current?.setAttribute('data-enlarging', 'true');
+    }, 16);
+    const wantsResize = openedImageWidth || openedImageHeight;
+    if (wantsResize) {
+      const onFirstEnd = (ev: TransitionEvent) => {
+        if (ev.propertyName !== 'transform') return;
+        overlay.removeEventListener('transitionend', onFirstEnd);
+        const prevTransition = overlay.style.transition;
+        overlay.style.transition = 'none';
+        const tempWidth = openedImageWidth || \`\${frameR.width}px\`;
+        const tempHeight = openedImageHeight || \`\${frameR.height}px\`;
+        overlay.style.width = tempWidth;
+        overlay.style.height = tempHeight;
+        const newRect = overlay.getBoundingClientRect();
+        overlay.style.width = frameR.width + 'px';
+        overlay.style.height = frameR.height + 'px';
+        void overlay.offsetWidth;
+        overlay.style.transition = \`left \${enlargeTransitionMs}ms ease, top \${enlargeTransitionMs}ms ease, width \${enlargeTransitionMs}ms ease, height \${enlargeTransitionMs}ms ease\`;
+        const centeredLeft = frameR.left - mainR.left + (frameR.width - newRect.width) / 2;
+        const centeredTop = frameR.top - mainR.top + (frameR.height - newRect.height) / 2;
+        requestAnimationFrame(() => {
+          overlay.style.left = \`\${centeredLeft}px\`;
+          overlay.style.top = \`\${centeredTop}px\`;
+          overlay.style.width = tempWidth;
+          overlay.style.height = tempHeight;
+        });
+        const cleanupSecond = () => {
+          overlay.removeEventListener('transitionend', cleanupSecond);
+          overlay.style.transition = prevTransition;
+        };
+        overlay.addEventListener('transitionend', cleanupSecond, {
+          once: true
+        });
+      };
+      overlay.addEventListener('transitionend', onFirstEnd);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      document.body.classList.remove('dg-scroll-lock');
+    };
+  }, []);
+
+  const cssStyles = \`
+    .sphere-root {
+      --radius: 520px;
+      --viewer-pad: 72px;
+      --circ: calc(var(--radius) * 3.14);
+      --rot-y: calc((360deg / var(--segments-x)) / 2);
+      --rot-x: calc((360deg / var(--segments-y)) / 2);
+      --item-width: calc(var(--circ) / var(--segments-x));
+      --item-height: calc(var(--circ) / var(--segments-y));
+    }
+
+    .sphere-root * { box-sizing: border-box; }
+    .sphere, .sphere-item, .item__image { transform-style: preserve-3d; }
+
+    .stage {
+      width: 100%;
+      height: 100%;
+      display: grid;
+      place-items: center;
+      position: absolute;
+      inset: 0;
+      margin: auto;
+      perspective: calc(var(--radius) * 2);
+      perspective-origin: 50% 50%;
+    }
+
+    .sphere {
+      transform: translateZ(calc(var(--radius) * -1));
+      will-change: transform;
+      position: absolute;
+    }
+
+    .sphere-item {
+      width: calc(var(--item-width) * var(--item-size-x));
+      height: calc(var(--item-height) * var(--item-size-y));
+      position: absolute;
+      top: -999px;
+      bottom: -999px;
+      left: -999px;
+      right: -999px;
+      margin: auto;
+      transform-origin: 50% 50%;
+      backface-visibility: hidden;
+      transition: transform 300ms;
+      transform: rotateY(calc(var(--rot-y) * (var(--offset-x) + ((var(--item-size-x) - 1) / 2)) + var(--rot-y-delta, 0deg)))
+                 rotateX(calc(var(--rot-x) * (var(--offset-y) - ((var(--item-size-y) - 1) / 2)) + var(--rot-x-delta, 0deg)))
+                 translateZ(var(--radius));
+    }
+
+    .sphere-root[data-enlarging="true"] .scrim {
+      opacity: 1 !important;
+      pointer-events: all !important;
+    }
+
+    @media (max-aspect-ratio: 1/1) {
+      .viewer-frame {
+        height: auto !important;
+        width: 100% !important;
+      }
+    }
+
+    .item__image {
+      position: absolute;
+      inset: 10px;
+      border-radius: var(--tile-radius, 12px);
+      overflow: hidden;
+      cursor: pointer;
+      backface-visibility: hidden;
+      -webkit-backface-visibility: hidden;
+      transition: transform 300ms;
+      pointer-events: auto;
+      -webkit-transform: translateZ(0);
+      transform: translateZ(0);
+    }
+    .item__image--reference {
+      position: absolute;
+      inset: 10px;
+      pointer-events: none;
+    }
+  \`;
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: cssStyles }} />
+      <div
+        ref={rootRef}
+        className="sphere-root relative w-full h-full"
+        style={
+          {
+            ['--segments-x' as string]: segments,
+            ['--segments-y' as string]: segments,
+            ['--overlay-blur-color' as string]: overlayBlurColor,
+            ['--tile-radius' as string]: imageBorderRadius,
+            ['--enlarge-radius' as string]: openedImageBorderRadius,
+            ['--image-filter' as string]: grayscale ? 'grayscale(1)' : 'none'
+          } as React.CSSProperties
+        }
+      >
+        <main
+          ref={mainRef}
+          className="absolute inset-0 grid place-items-center overflow-hidden select-none bg-transparent"
+          style={{
+            touchAction: 'none',
+            WebkitUserSelect: 'none'
+          }}
+        >
+          <div className="stage">
+            <div ref={sphereRef} className="sphere">
+              {items.map((it, i) => (
+                <div
+                  key={\`\${it.x},\${it.y},\${i}\`}
+                  className="sphere-item absolute m-auto"
+                  data-src={it.src}
+                  data-alt={it.alt}
+                  data-offset-x={it.x}
+                  data-offset-y={it.y}
+                  data-size-x={it.sizeX}
+                  data-size-y={it.sizeY}
+                  style={
+                    {
+                      ['--offset-x' as string]: it.x,
+                      ['--offset-y' as string]: it.y,
+                      ['--item-size-x' as string]: it.sizeX,
+                      ['--item-size-y' as string]: it.sizeY,
+                      top: '-999px',
+                      bottom: '-999px',
+                      left: '-999px',
+                      right: '-999px'
+                    } as React.CSSProperties
+                  }
+                >
+                  <div
+                    className={\`item__image absolute block overflow-hidden bg-gray-200 transition-transform duration-300 \${disableInteraction ? 'pointer-events-none' : 'cursor-pointer'}\`}
+                    role={disableInteraction ? undefined : "button"}
+                    tabIndex={disableInteraction ? -1 : 0}
+                    aria-label={disableInteraction ? undefined : (it.alt || 'Open image')}
+                    onClick={disableInteraction ? undefined : (e => {
+                      if (draggingRef.current) return;
+                      if (movedRef.current) return;
+                      if (performance.now() - lastDragEndAt.current < 80) return;
+                      if (openingRef.current) return;
+                      openItemFromElement(e.currentTarget as HTMLElement);
+                    })}
+                    onPointerUp={disableInteraction ? undefined : (e => {
+                      if ((e.nativeEvent as PointerEvent).pointerType !== 'touch') return;
+                      if (draggingRef.current) return;
+                      if (movedRef.current) return;
+                      if (performance.now() - lastDragEndAt.current < 80) return;
+                      if (openingRef.current) return;
+                      openItemFromElement(e.currentTarget as HTMLElement);
+                    })}
+                    style={{
+                      inset: '10px',
+                      borderRadius: \`var(--tile-radius, \${imageBorderRadius})\`,
+                      backfaceVisibility: 'hidden'
+                    }}
+                  >
+                    <img
+                      src={it.src}
+                      draggable={false}
+                      alt={it.alt}
+                      className="w-full h-full object-cover pointer-events-none"
+                      style={{
+                        backfaceVisibility: 'hidden',
+                        filter: \`var(--image-filter, \${grayscale ? 'grayscale(1)' : 'none'})\`
+                      }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div
+            className="absolute inset-0 m-auto z-[3] pointer-events-none"
+            style={{
+              backgroundImage: \`radial-gradient(rgba(235, 235, 235, 0) 65%, var(--overlay-blur-color, \${overlayBlurColor}) 100%)\`
+            }}
+          />
+
+          <div
+            className="absolute inset-0 m-auto z-[3] pointer-events-none"
+            style={{
+              WebkitMaskImage: \`radial-gradient(rgba(235, 235, 235, 0) 70%, var(--overlay-blur-color, \${overlayBlurColor}) 90%)\`,
+              maskImage: \`radial-gradient(rgba(235, 235, 235, 0) 70%, var(--overlay-blur-color, \${overlayBlurColor}) 90%)\`,
+              backdropFilter: 'blur(3px)'
+            }}
+          />
+
+          <div
+            className="absolute left-0 right-0 top-0 h-[120px] z-[5] pointer-events-none rotate-180"
+            style={{
+              background: \`linear-gradient(to bottom, transparent, var(--overlay-blur-color, \${overlayBlurColor}))\`
+            }}
+          />
+          <div
+            className="absolute left-0 right-0 bottom-0 h-[120px] z-[5] pointer-events-none"
+            style={{
+              background: \`linear-gradient(to bottom, transparent, var(--overlay-blur-color, \${overlayBlurColor}))\`
+            }}
+          />
+
+          <div
+            ref={viewerRef}
+            className="absolute inset-0 z-20 pointer-events-none flex items-center justify-center"
+            style={{ padding: 'var(--viewer-pad)' }}
+          >
+            <div
+              ref={scrimRef}
+              className="scrim absolute inset-0 z-10 pointer-events-none opacity-0 transition-opacity duration-500"
+              style={{
+                background: 'rgba(0, 0, 0, 0.4)',
+                backdropFilter: 'blur(3px)'
+              }}
+            />
+            <div
+              ref={frameRef}
+              className="viewer-frame h-full aspect-square flex"
+              style={{
+                borderRadius: \`var(--enlarge-radius, \${openedImageBorderRadius})\`
+              }}
+            />
+          </div>
+        </main>
+      </div>
+    </>
+  );
+}
+`,
+  "components/3d/flip-card": `"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { cn } from "__UTILS_ALIAS__/cn";
+import { CardContainer, CardBody, CardItem } from "__COMPONENTS_ALIAS__/3d-card";
+
+interface FlipCardProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  subtitle?: string;
+  image?: string;
+  badges?: Array<{ label: string; color?: string }>;
+  quote?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function FlipCard({ isOpen, onClose, title, subtitle, image, badges, quote, children, className }: FlipCardProps) {
+  const [isExiting, setIsExiting] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isFlipped, setIsFlipped] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsVisible(true);
+      setIsExiting(false);
+      setIsFlipped(false);
+      document.body.style.overflow = "hidden";
+      const flipTimer = setTimeout(() => setIsFlipped(true), 50);
+      return () => clearTimeout(flipTimer);
+    } else if (!isOpen && isVisible) {
+      setIsExiting(true);
+      setIsFlipped(false);
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+        setIsExiting(false);
+        document.body.style.overflow = "";
+      }, 400);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, isVisible]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isOpen) onClose();
+    };
+    if (isOpen) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [isOpen, onClose]);
+
+  const handleOverlayClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.target === e.currentTarget) onClose();
+    },
+    [onClose]
+  );
+
+  if (!isVisible) return null;
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-50 flex items-center justify-center",
+        "bg-black/80 backdrop-blur-sm",
+        "transition-opacity duration-300",
+        isExiting ? "opacity-0" : "opacity-100"
+      )}
+      onClick={handleOverlayClick}
+      role="dialog"
+      aria-modal="true"
+      style={{ perspective: "1200px" }}
+    >
+      <div
+        className="transition-transform duration-500 ease-out"
+        style={{
+          transformStyle: "preserve-3d",
+          transform: isFlipped
+            ? "rotateY(0deg)"
+            : isExiting
+            ? "rotateY(-90deg)"
+            : "rotateY(180deg)",
+          touchAction: "none",
+        }}
+      >
+        <CardContainer
+          containerClassName={cn("!py-0", "transition-opacity duration-300", isExiting ? "opacity-0" : "opacity-100")}
+        >
+          <CardBody className={cn(
+            "relative group/card w-[320px] sm:w-[380px] h-auto rounded-2xl p-6 sm:p-8 border border-white/20 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl shadow-2xl",
+            className
+          )}>
+            <CardItem translateZ={40} className="absolute top-3 right-3 z-10">
+              <button onClick={onClose} className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors" aria-label="Close">
+                <svg className="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </CardItem>
+
+            {image && (
+              <CardItem translateZ={100} className="w-full flex justify-center mb-4">
+                <div
+                  className="w-24 h-24 sm:w-28 sm:h-28 rounded-full bg-cover bg-center border-2 border-white/20 shadow-lg"
+                  style={{ backgroundImage: \`url(\${image})\` }}
+                  onContextMenu={(e) => e.preventDefault()}
+                />
+              </CardItem>
+            )}
+
+            <CardItem translateZ={60} className="w-full text-center">
+              <h3 className="text-xl sm:text-2xl font-bold text-white mb-2">{title}</h3>
+            </CardItem>
+
+            {badges && badges.length > 0 && (
+              <CardItem translateZ={50} className="w-full flex flex-wrap justify-center gap-2 mb-3">
+                {badges.map((badge, i) => (
+                  <span key={i} className="px-3 py-1 rounded-full text-xs font-medium border"
+                    style={{
+                      backgroundColor: \`\${badge.color || '#00E5A0'}20\`,
+                      color: badge.color || '#00E5A0',
+                      borderColor: \`\${badge.color || '#00E5A0'}30\`,
+                    }}>
+                    {badge.label}
+                  </span>
+                ))}
+              </CardItem>
+            )}
+
+            {subtitle && (
+              <CardItem translateZ={40} className="w-full flex justify-center items-center gap-3 mb-6">
+                <p className="text-sm font-medium text-white/90 text-center">{subtitle}</p>
+              </CardItem>
+            )}
+
+            <CardItem translateZ={20} className="w-full mb-6">
+              <div className="w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
+            </CardItem>
+
+            {quote && (
+              <CardItem translateZ={80} className="w-full">
+                <div className="relative">
+                  <svg className="absolute -top-2 -left-1 w-8 h-8 text-[#00E5A0]/30" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
+                  </svg>
+                  <p className="text-sm sm:text-base text-white/80 leading-relaxed pl-6 italic">{quote}</p>
+                </div>
+              </CardItem>
+            )}
+
+            {children}
+          </CardBody>
+        </CardContainer>
+      </div>
+    </div>
+  );
+}
+`,
+  "components/3d/glass-surface": `"use client";
+
+import React, { useEffect, useRef, useState, useId, useCallback } from "react";
+import { cn } from "__UTILS_ALIAS__/cn";
+
+export interface GlassSurfaceProps {
+  children?: React.ReactNode;
+  width?: number | string;
+  height?: number | string;
+  borderRadius?: number;
+  borderWidth?: number;
+  brightness?: number;
+  opacity?: number;
+  blur?: number;
+  displace?: number;
+  backgroundOpacity?: number;
+  saturation?: number;
+  distortionScale?: number;
+  redOffset?: number;
+  greenOffset?: number;
+  blueOffset?: number;
+  xChannel?: "R" | "G" | "B";
+  yChannel?: "R" | "G" | "B";
+  mixBlendMode?:
+    | "normal"
+    | "multiply"
+    | "screen"
+    | "overlay"
+    | "darken"
+    | "lighten"
+    | "color-dodge"
+    | "color-burn"
+    | "hard-light"
+    | "soft-light"
+    | "difference"
+    | "exclusion"
+    | "hue"
+    | "saturation"
+    | "color"
+    | "luminosity"
+    | "plus-darker"
+    | "plus-lighter";
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const GlassSurface: React.FC<GlassSurfaceProps> = ({
+  children,
+  width = "auto",
+  height = "auto",
+  borderRadius = 20,
+  borderWidth = 0.07,
+  brightness = 50,
+  opacity = 0.93,
+  blur = 11,
+  displace = 0,
+  backgroundOpacity = 0.08,
+  saturation = 1,
+  distortionScale = -180,
+  redOffset = 0,
+  greenOffset = 10,
+  blueOffset = 20,
+  xChannel = "R",
+  yChannel = "G",
+  mixBlendMode = "difference",
+  className = "",
+  style = {},
+}) => {
+  const uniqueId = useId().replace(/:/g, "-");
+  const filterId = \`glass-filter-\${uniqueId}\`;
+  const redGradId = \`red-grad-\${uniqueId}\`;
+  const blueGradId = \`blue-grad-\${uniqueId}\`;
+
+  const [svgSupported, setSvgSupported] = useState<boolean>(false);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const feImageRef = useRef<SVGFEImageElement>(null);
+  const redChannelRef = useRef<SVGFEDisplacementMapElement>(null);
+  const greenChannelRef = useRef<SVGFEDisplacementMapElement>(null);
+  const blueChannelRef = useRef<SVGFEDisplacementMapElement>(null);
+  const gaussianBlurRef = useRef<SVGFEGaussianBlurElement>(null);
+
+  const generateDisplacementMap = () => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    const actualWidth = rect?.width || 400;
+    const actualHeight = rect?.height || 200;
+    const edgeSize = Math.min(actualWidth, actualHeight) * (borderWidth * 0.5);
+
+    const svgContent = \`
+      <svg viewBox="0 0 \${actualWidth} \${actualHeight}" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="\${redGradId}" x1="100%" y1="0%" x2="0%" y2="0%">
+            <stop offset="0%" stop-color="#0000"/>
+            <stop offset="100%" stop-color="red"/>
+          </linearGradient>
+          <linearGradient id="\${blueGradId}" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stop-color="#0000"/>
+            <stop offset="100%" stop-color="blue"/>
+          </linearGradient>
+        </defs>
+        <rect x="0" y="0" width="\${actualWidth}" height="\${actualHeight}" fill="black"></rect>
+        <rect x="0" y="0" width="\${actualWidth}" height="\${actualHeight}" rx="\${borderRadius}" fill="url(#\${redGradId})" />
+        <rect x="0" y="0" width="\${actualWidth}" height="\${actualHeight}" rx="\${borderRadius}" fill="url(#\${blueGradId})" style="mix-blend-mode: \${mixBlendMode}" />
+        <rect x="\${edgeSize}" y="\${edgeSize}" width="\${actualWidth - edgeSize * 2}" height="\${actualHeight - edgeSize * 2}" rx="\${borderRadius}" fill="hsl(0 0% \${brightness}% / \${opacity})" style="filter:blur(\${blur}px)" />
+      </svg>
+    \`;
+
+    return \`data:image/svg+xml,\${encodeURIComponent(svgContent)}\`;
+  };
+
+  const updateDisplacementMap = () => {
+    feImageRef.current?.setAttribute("href", generateDisplacementMap());
+  };
+
+  useEffect(() => {
+    updateDisplacementMap();
+    [
+      { ref: redChannelRef, offset: redOffset },
+      { ref: greenChannelRef, offset: greenOffset },
+      { ref: blueChannelRef, offset: blueOffset },
+    ].forEach(({ ref, offset }) => {
+      if (ref.current) {
+        ref.current.setAttribute("scale", (distortionScale + offset).toString());
+        ref.current.setAttribute("xChannelSelector", xChannel);
+        ref.current.setAttribute("yChannelSelector", yChannel);
+      }
+    });
+
+    gaussianBlurRef.current?.setAttribute("stdDeviation", displace.toString());
+  }, [
+    width,
+    height,
+    borderRadius,
+    borderWidth,
+    brightness,
+    opacity,
+    blur,
+    displace,
+    distortionScale,
+    redOffset,
+    greenOffset,
+    blueOffset,
+    xChannel,
+    yChannel,
+    mixBlendMode,
+  ]);
+
+  useEffect(() => {
+    setSvgSupported(supportsSVGFilters());
+  }, []);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+    const resizeObserver = new ResizeObserver(() => {
+      // Debounce resize updates (150ms)
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(updateDisplacementMap, 150);
+    });
+
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      if (debounceTimer) clearTimeout(debounceTimer);
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    setTimeout(updateDisplacementMap, 0);
+  }, [width, height]);
+
+  const supportsSVGFilters = () => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return false;
+    }
+
+    const isWebkit =
+      /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+    const isFirefox = /Firefox/.test(navigator.userAgent);
+
+    if (isWebkit || isFirefox) {
+      return false;
+    }
+
+    const div = document.createElement("div");
+    div.style.backdropFilter = \`url(#\${filterId})\`;
+
+    return div.style.backdropFilter !== "";
+  };
+
+  const supportsBackdropFilter = () => {
+    if (typeof window === "undefined") return false;
+    return CSS.supports("backdrop-filter", "blur(10px)");
+  };
+
+  const getContainerStyles = (): React.CSSProperties => {
+    const baseStyles: React.CSSProperties = {
+      ...style,
+      width: typeof width === "number" ? \`\${width}px\` : width,
+      height: typeof height === "number" ? \`\${height}px\` : height,
+      borderRadius: \`\${borderRadius}px\`,
+    };
+
+    const backdropFilterSupported = supportsBackdropFilter();
+
+    if (svgSupported) {
+      // Full glass effect with SVG filters (Chrome/Edge desktop)
+      return {
+        ...baseStyles,
+        background: \`hsl(0 0% 0% / \${backgroundOpacity})\`,
+        backdropFilter: \`url(#\${filterId}) saturate(\${saturation})\`,
+        boxShadow: \`0 0 2px 1px color-mix(in oklch, white, transparent 65%) inset,
+             0 0 10px 4px color-mix(in oklch, white, transparent 85%) inset,
+             0px 4px 16px rgba(17, 17, 26, 0.05),
+             0px 8px 24px rgba(17, 17, 26, 0.05),
+             0px 16px 56px rgba(17, 17, 26, 0.05),
+             0px 4px 16px rgba(17, 17, 26, 0.05) inset,
+             0px 8px 24px rgba(17, 17, 26, 0.05) inset,
+             0px 16px 56px rgba(17, 17, 26, 0.05) inset\`,
+      };
+    } else {
+      // Fallback for Safari, Firefox, mobile
+      if (!backdropFilterSupported) {
+        return {
+          ...baseStyles,
+          background: "rgba(0, 0, 0, 0.4)",
+          border: "1px solid rgba(255, 255, 255, 0.08)",
+          boxShadow: \`inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
+                      inset 0 -1px 0 0 rgba(255, 255, 255, 0.05)\`,
+        };
+      } else {
+        return {
+          ...baseStyles,
+          background: \`rgba(255, 255, 255, \${backgroundOpacity})\`,
+          backdropFilter: "blur(20px) saturate(1.8) brightness(1.1)",
+          WebkitBackdropFilter: "blur(20px) saturate(1.8) brightness(1.1)",
+          border: "1px solid rgba(255, 255, 255, 0.08)",
+          boxShadow: \`inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
+                      inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
+                      0 4px 24px rgba(0, 0, 0, 0.1)\`,
+        };
+      }
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "relative overflow-hidden transition-opacity duration-[260ms] ease-out",
+        className
+      )}
+      style={getContainerStyles()}
+    >
+      <svg
+        className="w-full h-full pointer-events-none absolute inset-0 opacity-0 -z-10"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <filter
+            id={filterId}
+            colorInterpolationFilters="sRGB"
+            x="0%"
+            y="0%"
+            width="100%"
+            height="100%"
+          >
+            <feImage
+              ref={feImageRef}
+              x="0"
+              y="0"
+              width="100%"
+              height="100%"
+              preserveAspectRatio="none"
+              result="map"
+            />
+
+            <feDisplacementMap
+              ref={redChannelRef}
+              in="SourceGraphic"
+              in2="map"
+              id="redchannel"
+              result="dispRed"
+            />
+            <feColorMatrix
+              in="dispRed"
+              type="matrix"
+              values="1 0 0 0 0
+                      0 0 0 0 0
+                      0 0 0 0 0
+                      0 0 0 1 0"
+              result="red"
+            />
+
+            <feDisplacementMap
+              ref={greenChannelRef}
+              in="SourceGraphic"
+              in2="map"
+              id="greenchannel"
+              result="dispGreen"
+            />
+            <feColorMatrix
+              in="dispGreen"
+              type="matrix"
+              values="0 0 0 0 0
+                      0 1 0 0 0
+                      0 0 0 0 0
+                      0 0 0 1 0"
+              result="green"
+            />
+
+            <feDisplacementMap
+              ref={blueChannelRef}
+              in="SourceGraphic"
+              in2="map"
+              id="bluechannel"
+              result="dispBlue"
+            />
+            <feColorMatrix
+              in="dispBlue"
+              type="matrix"
+              values="0 0 0 0 0
+                      0 0 0 0 0
+                      0 0 1 0 0
+                      0 0 0 1 0"
+              result="blue"
+            />
+
+            <feBlend in="red" in2="green" mode="screen" result="rg" />
+            <feBlend in="rg" in2="blue" mode="screen" result="output" />
+            <feGaussianBlur ref={gaussianBlurRef} in="output" stdDeviation="0.7" />
+          </filter>
+        </defs>
+      </svg>
+
+      {children}
+    </div>
+  );
+};
+
+export { GlassSurface };
+`,
+  "components/3d/holo-card": `"use client";
+
+import { useEffect, useRef, useCallback, useState } from "react";
+import { cn } from "__UTILS_ALIAS__/cn";
+
+export interface HoloCardItem {
+  title: string;
+  description?: string;
+  thumbnail?: string;
+  category?: string;
+  categoryColor?: string;
+  tags?: string[];
+  badge?: string;
+}
+
+interface HoloCardProps {
+  item: HoloCardItem | null;
+  isOpen: boolean;
+  onClose: () => void;
+  backLogo?: string;
+  backSubtitle?: string;
+  footer?: string;
+  className?: string;
+}
+
+export function HoloCard({
+  item,
+  isOpen,
+  onClose,
+  backLogo = "SPARK",
+  backSubtitle = "UI COMPONENT",
+  footer,
+}: HoloCardProps) {
+  const cardRef = useRef<HTMLDivElement>(null);
+  const rafRef = useRef<number | null>(null);
+  const pendingUpdateRef = useRef<{
+    mx: number; my: number; rx: number; ry: number; hyp: number;
+  } | null>(null);
+  const [isExiting, setIsExiting] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && item) {
+      setIsVisible(true);
+      setIsExiting(false);
+      setIsAnimating(true);
+      document.body.style.overflow = "hidden";
+      const animTimer = setTimeout(() => setIsAnimating(false), 700);
+      return () => clearTimeout(animTimer);
+    } else if (!isOpen && isVisible) {
+      setIsExiting(true);
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+        setIsExiting(false);
+        document.body.style.overflow = "";
+      }, 600);
+      return () => clearTimeout(timer);
+    }
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [isOpen, item, isVisible]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isOpen) onClose();
+    };
+    if (isOpen) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [isOpen, onClose]);
+
+  const applyStyleUpdates = useCallback(() => {
+    const card = cardRef.current;
+    const update = pendingUpdateRef.current;
+    if (!card || !update) return;
+    card.style.setProperty("--mx", \`\${update.mx}%\`);
+    card.style.setProperty("--my", \`\${update.my}%\`);
+    card.style.setProperty("--posx", \`\${update.mx}%\`);
+    card.style.setProperty("--posy", \`\${update.my}%\`);
+    card.style.setProperty("--rx", \`\${update.ry}deg\`);
+    card.style.setProperty("--ry", \`\${update.rx}deg\`);
+    card.style.setProperty("--hyp", \`\${update.hyp}\`);
+    card.style.setProperty("--o", "1");
+    pendingUpdateRef.current = null;
+    rafRef.current = null;
+  }, []);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const card = cardRef.current;
+    if (!card) return;
+    const rect = card.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const mx = (x / rect.width) * 100;
+    const my = (y / rect.height) * 100;
+    const px = mx - 50;
+    const py = my - 50;
+    const hyp = Math.sqrt(px * px + py * py) / 50;
+    const rx = (py / 50) * -15;
+    const ry = (px / 50) * 15;
+    pendingUpdateRef.current = { mx, my, rx, ry, hyp };
+    if (rafRef.current === null) {
+      rafRef.current = requestAnimationFrame(applyStyleUpdates);
+    }
+  }, [applyStyleUpdates]);
+
+  const handleMouseLeave = useCallback(() => {
+    const card = cardRef.current;
+    if (!card) return;
+    card.style.setProperty("--mx", "50%");
+    card.style.setProperty("--my", "50%");
+    card.style.setProperty("--rx", "0deg");
+    card.style.setProperty("--ry", "0deg");
+    card.style.setProperty("--hyp", "0.5");
+  }, []);
+
+  const handleTouchMove = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
+    const card = cardRef.current;
+    if (!card || !e.touches[0]) return;
+    const rect = card.getBoundingClientRect();
+    const touch = e.touches[0];
+    const x = touch.clientX - rect.left;
+    const y = touch.clientY - rect.top;
+    const mx = Math.max(0, Math.min(100, (x / rect.width) * 100));
+    const my = Math.max(0, Math.min(100, (y / rect.height) * 100));
+    const px = mx - 50;
+    const py = my - 50;
+    const hyp = Math.sqrt(px * px + py * py) / 50;
+    const rx = (py / 50) * -10;
+    const ry = (px / 50) * 10;
+    pendingUpdateRef.current = { mx, my, rx, ry, hyp };
+    if (rafRef.current === null) {
+      rafRef.current = requestAnimationFrame(applyStyleUpdates);
+    }
+  }, [applyStyleUpdates]);
+
+  const handleOverlayClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.target === e.currentTarget) onClose();
+    },
+    [onClose]
+  );
+
+  if (!isVisible || !item) return null;
+
+  const glowColor = item.categoryColor || "#69d1e9";
+
+  return (
+    <div
+      className={cn(
+        "holo-card-overlay",
+        isExiting ? "holo-card-overlay--exiting" : "holo-card-overlay--entering"
+      )}
+      onClick={handleOverlayClick}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="holo-card-title"
+    >
+      <div className="holo-card-container">
+        <div
+          ref={cardRef}
+          className={cn(
+            "holo-card",
+            isExiting && "holo-card--exiting",
+            isAnimating && !isExiting && "holo-card--entering"
+          )}
+          style={{ "--glow": glowColor } as React.CSSProperties}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleMouseLeave}
+        >
+          <div className="holo-card__back">
+            <div className="holo-card__back-content">
+              <div className="holo-card__back-logo">{backLogo}</div>
+              <div className="holo-card__back-subtitle">{backSubtitle}</div>
+            </div>
+          </div>
+          <div className="holo-card__front">
+            <div className="holo-card__shine" />
+            <div className="holo-card__glare" />
+            <div className="holo-card__inner-frame" />
+            <div className="holo-card__content">
+              {item.thumbnail && (
+                <div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <img src={item.thumbnail} alt="" className="w-64 h-64 object-contain blur-[60px] opacity-40 saturate-150" aria-hidden="true" />
+                  </div>
+                </div>
+              )}
+              <div className="relative z-10 p-6 sm:p-8 h-full flex flex-col">
+                <div className="flex items-center justify-between flex-shrink-0">
+                  {item.category && (
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs sm:text-sm font-bold uppercase tracking-wide border"
+                      style={{ color: glowColor, borderColor: \`\${glowColor}30\`, backgroundColor: \`\${glowColor}20\` }}>
+                      <span className="relative flex h-2 w-2">
+                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" style={{ backgroundColor: glowColor }} />
+                        <span className="relative inline-flex rounded-full h-2 w-2" style={{ backgroundColor: glowColor }} />
+                      </span>
+                      {item.category}
+                    </span>
+                  )}
+                  {item.badge && (
+                    <span className="text-xs sm:text-sm font-mono text-white/70">{item.badge}</span>
+                  )}
+                </div>
+                <div className="flex-1 flex flex-col justify-center items-center py-4">
+                  {item.thumbnail && (
+                    <div className="relative flex-shrink-0 mb-3 flex justify-center">
+                      <div className="relative w-32 h-32 sm:w-36 sm:h-36 rounded-lg overflow-hidden flex items-center justify-center">
+                        <img src={item.thumbnail} alt={item.title} className="w-full h-full object-contain" />
+                      </div>
+                    </div>
+                  )}
+                  <div className="text-center mb-2">
+                    <h3 id="holo-card-title" className="text-lg sm:text-xl font-bold text-white leading-tight">{item.title}</h3>
+                  </div>
+                  {item.description && (
+                    <div className="mb-2">
+                      <p className="text-[11px] sm:text-xs text-white/60 leading-relaxed text-center">{item.description}</p>
+                    </div>
+                  )}
+                  {item.tags && item.tags.length > 0 && (
+                    <div className="flex flex-wrap justify-center gap-1.5">
+                      {item.tags.slice(0, 4).map((tag) => (
+                        <span key={tag} className="px-2 py-0.5 bg-white/10 rounded text-[10px] sm:text-xs text-white/70 border border-white/20">{tag}</span>
+                      ))}
+                      {item.tags.length > 4 && (
+                        <span className="px-2 py-0.5 text-[10px] sm:text-xs text-white/50">+{item.tags.length - 4}</span>
+                      )}
+                    </div>
+                  )}
+                </div>
+                {footer && (
+                  <div className="pt-2 border-t border-white/20 text-center flex-shrink-0">
+                    <p className="text-[10px] sm:text-xs text-white/50 tracking-wider">{footer}</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+`,
+  "components/3d/prismatic-burst": `"use client";
+
+import React, { useEffect, useRef } from "react";
+import { Renderer, Program, Mesh, Triangle, Texture } from "ogl";
+
+type Offset = { x?: number | string; y?: number | string };
+type AnimationType = "rotate" | "rotate3d" | "hover";
+
+export type PrismaticBurstProps = {
+  intensity?: number;
+  speed?: number;
+  animationType?: AnimationType;
+  colors?: string[];
+  distort?: number;
+  paused?: boolean;
+  offset?: Offset;
+  hoverDampness?: number;
+  rayCount?: number;
+  mixBlendMode?: React.CSSProperties["mixBlendMode"] | "none";
+};
+
+const vertexShader = \`#version 300 es
+in vec2 position;
+in vec2 uv;
+out vec2 vUv;
+void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 0.0, 1.0);
+}
+\`;
+
+const fragmentShader = \`#version 300 es
+precision highp float;
+precision highp int;
+
+out vec4 fragColor;
+
+uniform vec2  uResolution;
+uniform float uTime;
+
+uniform float uIntensity;
+uniform float uSpeed;
+uniform int   uAnimType;
+uniform vec2  uMouse;
+uniform int   uColorCount;
+uniform float uDistort;
+uniform vec2  uOffset;
+uniform sampler2D uGradient;
+uniform float uNoiseAmount;
+uniform int   uRayCount;
+
+float hash21(vec2 p){
+    p = floor(p);
+    float f = 52.9829189 * fract(dot(p, vec2(0.065, 0.005)));
+    return fract(f);
+}
+
+mat2 rot30(){ return mat2(0.8, -0.5, 0.5, 0.8); }
+
+float layeredNoise(vec2 fragPx){
+    vec2 p = mod(fragPx + vec2(uTime * 30.0, -uTime * 21.0), 1024.0);
+    vec2 q = rot30() * p;
+    float n = 0.0;
+    n += 0.40 * hash21(q);
+    n += 0.25 * hash21(q * 2.0 + 17.0);
+    n += 0.20 * hash21(q * 4.0 + 47.0);
+    n += 0.10 * hash21(q * 8.0 + 113.0);
+    n += 0.05 * hash21(q * 16.0 + 191.0);
+    return n;
+}
+
+vec3 rayDir(vec2 frag, vec2 res, vec2 offset, float dist){
+    float focal = res.y * max(dist, 1e-3);
+    return normalize(vec3(2.0 * (frag - offset) - res, focal));
+}
+
+float edgeFade(vec2 frag, vec2 res, vec2 offset){
+    vec2 toC = frag - 0.5 * res - offset;
+    float r = length(toC) / (0.5 * min(res.x, res.y));
+    float x = clamp(r, 0.0, 1.0);
+    float q = x * x * x * (x * (x * 6.0 - 15.0) + 10.0);
+    float s = q * 0.5;
+    s = pow(s, 1.5);
+    float tail = 1.0 - pow(1.0 - s, 2.0);
+    s = mix(s, tail, 0.2);
+    float dn = (layeredNoise(frag * 0.15) - 0.5) * 0.0015 * s;
+    return clamp(s + dn, 0.0, 1.0);
+}
+
+mat3 rotX(float a){ float c = cos(a), s = sin(a); return mat3(1.0,0.0,0.0, 0.0,c,-s, 0.0,s,c); }
+mat3 rotY(float a){ float c = cos(a), s = sin(a); return mat3(c,0.0,s, 0.0,1.0,0.0, -s,0.0,c); }
+mat3 rotZ(float a){ float c = cos(a), s = sin(a); return mat3(c,-s,0.0, s,c,0.0, 0.0,0.0,1.0); }
+
+vec3 sampleGradient(float t){
+    t = clamp(t, 0.0, 1.0);
+    return texture(uGradient, vec2(t, 0.5)).rgb;
+}
+
+vec2 rot2(vec2 v, float a){
+    float s = sin(a), c = cos(a);
+    return mat2(c, -s, s, c) * v;
+}
+
+float bendAngle(vec3 q, float t){
+    float a = 0.8 * sin(q.x * 0.55 + t * 0.6)
+            + 0.7 * sin(q.y * 0.50 - t * 0.5)
+            + 0.6 * sin(q.z * 0.60 + t * 0.7);
+    return a;
+}
+
+void main(){
+    vec2 frag = gl_FragCoord.xy;
+    float t = uTime * uSpeed;
+    float jitterAmp = 0.1 * clamp(uNoiseAmount, 0.0, 1.0);
+    vec3 dir = rayDir(frag, uResolution, uOffset, 1.0);
+    float marchT = 0.0;
+    vec3 col = vec3(0.0);
+    float n = layeredNoise(frag);
+    vec4 c = cos(t * 0.2 + vec4(0.0, 33.0, 11.0, 0.0));
+    mat2 M2 = mat2(c.x, c.y, c.z, c.w);
+    float amp = clamp(uDistort, 0.0, 50.0) * 0.15;
+
+    mat3 rot3dMat = mat3(1.0);
+    if(uAnimType == 1){
+      vec3 ang = vec3(t * 0.31, t * 0.21, t * 0.17);
+      rot3dMat = rotZ(ang.z) * rotY(ang.y) * rotX(ang.x);
+    }
+    mat3 hoverMat = mat3(1.0);
+    if(uAnimType == 2){
+      vec2 m = uMouse * 2.0 - 1.0;
+      vec3 ang = vec3(m.y * 0.6, m.x * 0.6, 0.0);
+      hoverMat = rotY(ang.y) * rotX(ang.x);
+    }
+
+    for (int i = 0; i < 44; ++i) {
+        vec3 P = marchT * dir;
+        P.z -= 2.0;
+        float rad = length(P);
+        vec3 Pl = P * (10.0 / max(rad, 1e-6));
+
+        if(uAnimType == 0){
+            Pl.xz *= M2;
+        } else if(uAnimType == 1){
+      Pl = rot3dMat * Pl;
+        } else {
+      Pl = hoverMat * Pl;
+        }
+
+        float stepLen = min(rad - 0.3, n * jitterAmp) + 0.1;
+
+        float grow = smoothstep(0.35, 3.0, marchT);
+        float a1 = amp * grow * bendAngle(Pl * 0.6, t);
+        float a2 = 0.5 * amp * grow * bendAngle(Pl.zyx * 0.5 + 3.1, t * 0.9);
+        vec3 Pb = Pl;
+        Pb.xz = rot2(Pb.xz, a1);
+        Pb.xy = rot2(Pb.xy, a2);
+
+        float rayPattern = smoothstep(
+            0.5, 0.7,
+            sin(Pb.x + cos(Pb.y) * cos(Pb.z)) *
+            sin(Pb.z + sin(Pb.y) * cos(Pb.x + t))
+        );
+
+        if (uRayCount > 0) {
+            float ang = atan(Pb.y, Pb.x);
+            float comb = 0.5 + 0.5 * cos(float(uRayCount) * ang);
+            comb = pow(comb, 3.0);
+            rayPattern *= smoothstep(0.15, 0.95, comb);
+        }
+
+        vec3 spectralDefault = 1.0 + vec3(
+            cos(marchT * 3.0 + 0.0),
+            cos(marchT * 3.0 + 1.0),
+            cos(marchT * 3.0 + 2.0)
+        );
+
+        float saw = fract(marchT * 0.25);
+        float tRay = saw * saw * (3.0 - 2.0 * saw);
+        vec3 userGradient = 2.0 * sampleGradient(tRay);
+        vec3 spectral = (uColorCount > 0) ? userGradient : spectralDefault;
+        vec3 base = (0.05 / (0.4 + stepLen))
+                  * smoothstep(5.0, 0.0, rad)
+                  * spectral;
+
+        col += base * rayPattern;
+        marchT += stepLen;
+    }
+
+    col *= edgeFade(frag, uResolution, uOffset);
+    col *= uIntensity;
+
+    fragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+}\`;
+
+const hexToRgb01 = (hex: string): [number, number, number] => {
+  let h = hex.trim();
+  if (h.startsWith("#")) h = h.slice(1);
+  if (h.length === 3) {
+    const r = h[0],
+      g = h[1],
+      b = h[2];
+    h = r + r + g + g + b + b;
+  }
+  const intVal = parseInt(h, 16);
+  if (isNaN(intVal) || (h.length !== 6 && h.length !== 8)) return [1, 1, 1];
+  const r = ((intVal >> 16) & 255) / 255;
+  const g = ((intVal >> 8) & 255) / 255;
+  const b = (intVal & 255) / 255;
+  return [r, g, b];
+};
+
+const toPx = (v: number | string | undefined): number => {
+  if (v == null) return 0;
+  if (typeof v === "number") return v;
+  const s = String(v).trim();
+  const num = parseFloat(s.replace("px", ""));
+  return isNaN(num) ? 0 : num;
+};
+
+const PrismaticBurst = ({
+  intensity = 2,
+  speed = 0.5,
+  animationType = "rotate3d",
+  colors,
+  distort = 0,
+  paused = false,
+  offset = { x: 0, y: 0 },
+  hoverDampness = 0,
+  rayCount,
+  mixBlendMode = "lighten",
+}: PrismaticBurstProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const programRef = useRef<Program | null>(null);
+  const rendererRef = useRef<Renderer | null>(null);
+  const mouseTargetRef = useRef<[number, number]>([0.5, 0.5]);
+  const mouseSmoothRef = useRef<[number, number]>([0.5, 0.5]);
+  const pausedRef = useRef<boolean>(paused);
+  const gradTexRef = useRef<Texture | null>(null);
+  const hoverDampRef = useRef<number>(hoverDampness);
+  const isVisibleRef = useRef<boolean>(true);
+  const isScrollingRef = useRef<boolean>(false);
+  const meshRef = useRef<Mesh | null>(null);
+  const triRef = useRef<Triangle | null>(null);
+
+  useEffect(() => {
+    pausedRef.current = paused;
+  }, [paused]);
+  useEffect(() => {
+    hoverDampRef.current = hoverDampness;
+  }, [hoverDampness]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    // Respect user's motion preferences
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (prefersReducedMotion) {
+      // Skip WebGL rendering entirely for users who prefer reduced motion
+      return;
+    }
+
+    // Performance optimization: Use DPR of 1 for all devices
+    // Background effects don't need high resolution
+    const dpr = 1;
+    const renderer = new Renderer({ dpr, alpha: false, antialias: false });
+    rendererRef.current = renderer;
+
+    const gl = renderer.gl;
+    gl.canvas.style.position = "absolute";
+    gl.canvas.style.inset = "0";
+    gl.canvas.style.width = "100%";
+    gl.canvas.style.height = "100%";
+    gl.canvas.style.mixBlendMode =
+      mixBlendMode && mixBlendMode !== "none" ? mixBlendMode : "";
+    container.appendChild(gl.canvas);
+
+    const white = new Uint8Array([255, 255, 255, 255]);
+    const gradientTex = new Texture(gl, {
+      image: white,
+      width: 1,
+      height: 1,
+      generateMipmaps: false,
+      flipY: false,
+    });
+
+    gradientTex.minFilter = gl.LINEAR;
+    gradientTex.magFilter = gl.LINEAR;
+    gradientTex.wrapS = gl.CLAMP_TO_EDGE;
+    gradientTex.wrapT = gl.CLAMP_TO_EDGE;
+    gradTexRef.current = gradientTex;
+
+    const program = new Program(gl, {
+      vertex: vertexShader,
+      fragment: fragmentShader,
+      uniforms: {
+        uResolution: { value: [1, 1] as [number, number] },
+        uTime: { value: 0 },
+
+        uIntensity: { value: 1 },
+        uSpeed: { value: 1 },
+        uAnimType: { value: 0 },
+        uMouse: { value: [0.5, 0.5] as [number, number] },
+        uColorCount: { value: 0 },
+        uDistort: { value: 0 },
+        uOffset: { value: [0, 0] as [number, number] },
+        uGradient: { value: gradientTex },
+        uNoiseAmount: { value: 0.8 },
+        uRayCount: { value: 0 },
+      },
+    });
+
+    programRef.current = program;
+
+    const triangle = new Triangle(gl);
+    const mesh = new Mesh(gl, { geometry: triangle, program });
+    triRef.current = triangle;
+    meshRef.current = mesh;
+
+    const resize = () => {
+      const w = container.clientWidth || 1;
+      const h = container.clientHeight || 1;
+      renderer.setSize(w, h);
+      program.uniforms.uResolution.value = [
+        gl.drawingBufferWidth,
+        gl.drawingBufferHeight,
+      ];
+    };
+
+    let ro: ResizeObserver | null = null;
+    if ("ResizeObserver" in window) {
+      ro = new ResizeObserver(resize);
+      ro.observe(container);
+    } else {
+      (window as Window).addEventListener("resize", resize);
+    }
+    resize();
+
+    const onPointer = (e: PointerEvent) => {
+      const rect = container.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / Math.max(rect.width, 1);
+      const y = (e.clientY - rect.top) / Math.max(rect.height, 1);
+      mouseTargetRef.current = [
+        Math.min(Math.max(x, 0), 1),
+        Math.min(Math.max(y, 0), 1),
+      ];
+    };
+    container.addEventListener("pointermove", onPointer, { passive: true });
+
+    let raf = 0;
+    let last = performance.now();
+    let accumTime = 0;
+    let isRunning = false;
+
+    const update = (now: number) => {
+      if (!isRunning) return;
+      const dt = Math.max(0, now - last) * 0.001;
+      last = now;
+      if (!pausedRef.current) accumTime += dt;
+      const tau = 0.02 + Math.max(0, Math.min(1, hoverDampRef.current)) * 0.5;
+      const alpha = 1 - Math.exp(-dt / tau);
+      const tgt = mouseTargetRef.current;
+      const sm = mouseSmoothRef.current;
+      sm[0] += (tgt[0] - sm[0]) * alpha;
+      sm[1] += (tgt[1] - sm[1]) * alpha;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      program.uniforms.uMouse.value = sm as any;
+      program.uniforms.uTime.value = accumTime;
+      renderer.render({ scene: meshRef.current! });
+      raf = requestAnimationFrame(update);
+    };
+
+    const startLoop = () => {
+      if (isRunning) return;
+      isRunning = true;
+      last = performance.now();
+      raf = requestAnimationFrame(update);
+    };
+
+    const stopLoop = () => {
+      isRunning = false;
+      if (raf) {
+        cancelAnimationFrame(raf);
+        raf = 0;
+      }
+    };
+
+    // Start/stop based on visibility and scroll state
+    const checkVisibility = () => {
+      const shouldRun = isVisibleRef.current && !document.hidden && !isScrollingRef.current;
+      if (shouldRun) {
+        startLoop();
+      } else {
+        stopLoop();
+      }
+    };
+
+    // Pause during scroll for better performance
+    let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
+    const onScroll = () => {
+      isScrollingRef.current = true;
+      checkVisibility();
+      if (scrollTimeout) clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        isScrollingRef.current = false;
+        checkVisibility();
+      }, 150);
+    };
+    window.addEventListener('scroll', onScroll, { passive: true });
+
+    let io: IntersectionObserver | null = null;
+    if ("IntersectionObserver" in window) {
+      io = new IntersectionObserver(
+        (entries) => {
+          if (entries[0]) {
+            isVisibleRef.current = entries[0].isIntersecting;
+            checkVisibility();
+          }
+        },
+        { root: null, threshold: 0.01 }
+      );
+      io.observe(container);
+    }
+
+    const onVis = () => checkVisibility();
+    document.addEventListener("visibilitychange", onVis);
+
+    // Start loop if initially visible
+    checkVisibility();
+
+    return () => {
+      stopLoop();
+      container.removeEventListener("pointermove", onPointer);
+      ro?.disconnect();
+      if (!ro) window.removeEventListener("resize", resize);
+      io?.disconnect();
+      document.removeEventListener("visibilitychange", onVis);
+      window.removeEventListener('scroll', onScroll);
+      if (scrollTimeout) clearTimeout(scrollTimeout);
+      try {
+        container.removeChild(gl.canvas);
+      } catch (e) {
+        void e;
+      }
+      meshRef.current = null;
+      triRef.current = null;
+      programRef.current = null;
+      try {
+        const glCtx = rendererRef.current?.gl;
+        if (glCtx && gradTexRef.current?.texture)
+          glCtx.deleteTexture(gradTexRef.current.texture);
+      } catch (e) {
+        void e;
+      }
+      rendererRef.current = null;
+      gradTexRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const canvas = rendererRef.current?.gl?.canvas as
+      | HTMLCanvasElement
+      | undefined;
+    if (canvas) {
+      canvas.style.mixBlendMode =
+        mixBlendMode && mixBlendMode !== "none" ? mixBlendMode : "";
+    }
+  }, [mixBlendMode]);
+
+  useEffect(() => {
+    const program = programRef.current;
+    const renderer = rendererRef.current;
+    const gradTex = gradTexRef.current;
+    if (!program || !renderer || !gradTex) return;
+
+    program.uniforms.uIntensity.value = intensity ?? 1;
+    program.uniforms.uSpeed.value = speed ?? 1;
+
+    const animTypeMap: Record<AnimationType, number> = {
+      rotate: 0,
+      rotate3d: 1,
+      hover: 2,
+    };
+    program.uniforms.uAnimType.value = animTypeMap[animationType ?? "rotate"];
+
+    program.uniforms.uDistort.value = typeof distort === "number" ? distort : 0;
+
+    const ox = toPx(offset?.x);
+    const oy = toPx(offset?.y);
+    program.uniforms.uOffset.value = [ox, oy];
+    program.uniforms.uRayCount.value = Math.max(0, Math.floor(rayCount ?? 0));
+
+    let count = 0;
+    if (Array.isArray(colors) && colors.length > 0) {
+      const gl = renderer.gl;
+      const capped = colors.slice(0, 64);
+      count = capped.length;
+      const data = new Uint8Array(count * 4);
+      for (let i = 0; i < count; i++) {
+        const [r, g, b] = hexToRgb01(capped[i]);
+        data[i * 4 + 0] = Math.round(r * 255);
+        data[i * 4 + 1] = Math.round(g * 255);
+        data[i * 4 + 2] = Math.round(b * 255);
+        data[i * 4 + 3] = 255;
+      }
+      gradTex.image = data;
+      gradTex.width = count;
+      gradTex.height = 1;
+      gradTex.minFilter = gl.LINEAR;
+      gradTex.magFilter = gl.LINEAR;
+      gradTex.wrapS = gl.CLAMP_TO_EDGE;
+      gradTex.wrapT = gl.CLAMP_TO_EDGE;
+      gradTex.flipY = false;
+      gradTex.generateMipmaps = false;
+      gradTex.format = gl.RGBA;
+      gradTex.type = gl.UNSIGNED_BYTE;
+      gradTex.needsUpdate = true;
+    } else {
+      count = 0;
+    }
+    program.uniforms.uColorCount.value = count;
+  }, [intensity, speed, animationType, colors, distort, offset, rayCount]);
+
+  return (
+    <div className="w-full h-full relative overflow-hidden" ref={containerRef} />
+  );
+};
+
+export default PrismaticBurst;
+`,
+  "components/glass/button": `import { cn } from "__UTILS_ALIAS__/cn";
+import { ButtonHTMLAttributes, forwardRef } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "ghost" | "gradient" | "glow-border";
+  size?: "sm" | "md" | "lg";
+  children: React.ReactNode;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "primary", size = "md", children, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          "inline-flex items-center justify-center gap-2 font-semibold transition-all duration-300 rounded-full focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed relative overflow-hidden",
+          {
+            "bg-gradient-to-r from-[#00D4FF] to-[#00FF88] text-black hover:shadow-[0_0_30px_rgba(0,229,160,0.4)] hover:-translate-y-0.5":
+              variant === "gradient",
+            "bg-[#00E5A0] text-black hover:bg-[#00C488] hover:shadow-[0_0_20px_rgba(0,229,160,0.4)] hover:-translate-y-0.5":
+              variant === "primary",
+            "bg-transparent text-white border border-white/10 hover:border-[#00D4FF]/50 hover:text-[#00E5A0] hover:shadow-[0_0_20px_rgba(0,212,255,0.2)] hover:-translate-y-0.5":
+              variant === "secondary",
+            "bg-transparent text-white hover:bg-white/5 hover:text-[#00E5A0]":
+              variant === "ghost",
+            "btn-glow-border text-white hover:-translate-y-0.5":
+              variant === "glow-border",
+          },
+          {
+            "px-4 py-2 text-sm": size === "sm",
+            "px-6 py-3 text-base": size === "md",
+            "px-8 py-4 text-lg": size === "lg",
+          },
+          className
+        )}
+        {...props}
+      >
+        <span className="relative z-10 flex items-center gap-2">{children}</span>
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export { Button };
+`,
+  "components/glass/card": `import { cn } from "__UTILS_ALIAS__/cn";
+import { HTMLAttributes, forwardRef } from "react";
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "strong" | "gradient" | "outline";
+  hover?: boolean;
+  children: React.ReactNode;
+}
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = "default", hover = false, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "rounded-2xl transition-all duration-300",
+          {
+            "bg-white/[0.06] backdrop-blur-xl border border-white/[0.08] shadow-lg shadow-black/10":
+              variant === "default",
+            "bg-white/[0.1] backdrop-blur-xl border border-white/[0.1] shadow-lg shadow-black/15":
+              variant === "strong",
+            "bg-gradient-to-br from-[#00D4FF]/[0.08] to-[#00FF88]/[0.05] backdrop-blur-xl border border-white/[0.1] shadow-lg shadow-black/15":
+              variant === "gradient",
+            "bg-transparent backdrop-blur-sm border border-white/[0.1] hover:border-[#00D4FF]/30":
+              variant === "outline",
+          },
+          hover && "hover:bg-white/[0.1] hover:border-[#00D4FF]/20 hover:shadow-[0_8px_32px_rgba(0,212,255,0.1)] hover:-translate-y-1 cursor-pointer",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = "Card";
+
+export { Card };
+`,
+  "components/glass/modal": `"use client";
+
+import { cn } from "__UTILS_ALIAS__/cn";
+import { useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Modal({ isOpen, onClose, children, className }: ModalProps) {
+  const handleEscape = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, handleEscape]);
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4">
+      <div className="absolute inset-0 bg-black/80 backdrop-blur-sm animate-fade-in" onClick={onClose} />
+      <div className={cn(
+        "relative z-10 w-full sm:max-w-2xl max-h-[85vh] sm:max-h-[90vh] overflow-auto bg-[#0a0a0a] sm:glass-strong animate-slide-up rounded-t-2xl sm:rounded-2xl",
+        className
+      )}>
+        <button
+          onClick={onClose}
+          className="absolute top-3 sm:top-4 right-3 sm:right-4 w-9 sm:w-10 h-9 sm:h-10 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition-colors text-gray-400 hover:text-white z-10"
+          aria-label="Close modal"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+        <div className="sm:hidden flex justify-center pt-3 pb-1">
+          <div className="w-10 h-1 rounded-full bg-white/20" />
+        </div>
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+}
+`,
+  "components/glass/music-player": `"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { GlassSurface } from "__COMPONENTS_ALIAS__/glass-surface";
+
+interface MusicPlayerProps {
+  src: string;
+  initialVolume?: number;
+}
+
+export function MusicPlayer({ src, initialVolume = 0.5 }: MusicPlayerProps) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isDesktop, setIsDesktop] = useState(false);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.volume = initialVolume;
+    }
+  }, [initialVolume]);
+
+  useEffect(() => {
+    const handleResize = () => setIsDesktop(window.innerWidth >= 768);
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const togglePlay = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  const buttonContent = (
+    <>
+      <div className="flex items-center gap-[3px] h-5">
+        {[0, 1, 2, 3, 4].map((i) => (
+          <div
+            key={i}
+            className={\`w-[3px] bg-gradient-to-t from-[#00D4FF] to-[#00FF88] rounded-full transition-all \${
+              isPlaying ? "animate-soundwave" : "h-1"
+            }\`}
+            style={{ animationDelay: isPlaying ? \`\${i * 0.1}s\` : undefined }}
+          />
+        ))}
+      </div>
+      <span className="text-sm text-white/60 hidden sm:inline">
+        {isPlaying ? "ON" : "OFF"}
+      </span>
+    </>
+  );
+
+  return (
+    <>
+      <audio ref={audioRef} src={src} loop />
+      {!isDesktop && (
+        <button
+          onClick={togglePlay}
+          className={\`h-14 sm:h-16 w-14 sm:w-auto sm:px-4 flex items-center justify-center sm:justify-start gap-2 rounded-full bg-white/[0.08] backdrop-blur-xl border border-white/[0.08] hover:bg-white/[0.12] transition-all shadow-lg shadow-black/10 \${
+            !isPlaying ? "animate-attention-ring" : ""
+          }\`}
+          aria-label={isPlaying ? "Pause music" : "Play music"}
+        >
+          {buttonContent}
+        </button>
+      )}
+      {isDesktop && (
+        <GlassSurface
+          borderRadius={9999}
+          backgroundOpacity={0.1}
+          brightness={50}
+          blur={11}
+          displace={0.5}
+          distortionScale={-180}
+          redOffset={0}
+          greenOffset={10}
+          blueOffset={20}
+          className={\`cursor-pointer hover:scale-105 transition-transform \${
+            !isPlaying ? "animate-attention-ring" : ""
+          }\`}
+        >
+          <button
+            onClick={togglePlay}
+            className="h-14 sm:h-16 w-14 sm:w-auto sm:px-4 flex items-center justify-center sm:justify-start gap-2"
+            aria-label={isPlaying ? "Pause music" : "Play music"}
+          >
+            {buttonContent}
+          </button>
+        </GlassSurface>
+      )}
+    </>
+  );
+}
+`,
+  "components/motion/countdown-timer": `"use client";
+
+import { cn } from "__UTILS_ALIAS__/cn";
+import { useCountdown } from "__HOOKS_ALIAS__/use-countdown";
+import { useMemo } from "react";
+
+interface CountdownTimerProps {
+  targetDate: Date;
+  endDate?: Date;
+  className?: string;
+  labels?: {
+    days?: string;
+    hours?: string;
+    mins?: string;
+    secs?: string;
+  };
+  endedText?: [string, string];
+  liveText?: string;
+  todayText?: [string, string]; // [title, subtitle template with {time}]
+}
+
+type CountdownState = "normal" | "approaching" | "imminent" | "today-waiting" | "live" | "ended";
+
+function getCountdownState(targetDate: Date, endDate?: Date): CountdownState {
+  const now = new Date();
+  const msUntilStart = targetDate.getTime() - now.getTime();
+  const msUntilEnd = endDate ? endDate.getTime() - now.getTime() : msUntilStart;
+
+  const oneDayMs = 24 * 60 * 60 * 1000;
+  const sevenDaysMs = 7 * oneDayMs;
+
+  if (msUntilEnd <= 0) return "ended";
+  if (msUntilStart <= 0 && msUntilEnd > 0) return "live";
+
+  const isSameDay =
+    now.getFullYear() === targetDate.getFullYear() &&
+    now.getMonth() === targetDate.getMonth() &&
+    now.getDate() === targetDate.getDate();
+
+  if (isSameDay && msUntilStart > 0) return "today-waiting";
+  if (msUntilStart > 0 && msUntilStart <= oneDayMs) return "imminent";
+  if (msUntilStart > 0 && msUntilStart <= sevenDaysMs) return "approaching";
+
+  return "normal";
+}
+
+function TimeUnit({ value, label, state }: { value: number; label: string; state: CountdownState }) {
+  const stateStyles = {
+    normal: { text: "gradient-text glow-text-gradient", glass: "glass" },
+    approaching: { text: "animate-ember", glass: "glass animate-ember-glow" },
+    imminent: { text: "text-rose-400 drop-shadow-[0_0_25px_rgba(251,113,133,0.8)] animate-pulse", glass: "glass border-rose-500/40 shadow-[0_0_40px_rgba(251,113,133,0.3)] animate-shake" },
+    "today-waiting": { text: "text-emerald-400 drop-shadow-[0_0_20px_rgba(52,211,153,0.7)]", glass: "glass border-emerald-500/30 shadow-[0_0_30px_rgba(52,211,153,0.2)]" },
+    live: { text: "gradient-text", glass: "glass" },
+    ended: { text: "gradient-text", glass: "glass" },
+  };
+  const styles = stateStyles[state];
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className={cn("px-3 py-2 sm:px-5 sm:py-3 md:px-6 md:py-4 min-w-[56px] sm:min-w-[72px] md:min-w-[90px] transition-all duration-300", styles.glass)}>
+        <span className={cn("text-2xl sm:text-4xl md:text-5xl font-bold tabular-nums transition-all duration-300", styles.text)} suppressHydrationWarning>
+          {value.toString().padStart(2, "0")}
+        </span>
+      </div>
+      <span className={cn("text-[10px] sm:text-xs md:text-sm mt-1.5 sm:mt-2 uppercase tracking-wider transition-colors duration-300",
+        state === "approaching" ? "text-orange-500/80" :
+        state === "imminent" ? "text-rose-400/70" :
+        state === "today-waiting" ? "text-emerald-400/70" :
+        "text-gray-400"
+      )}>
+        {label}
+      </span>
+    </div>
+  );
+}
+
+function Separator({ state }: { state: CountdownState }) {
+  const colorClass =
+    state === "approaching" ? "text-orange-500 animate-ember" :
+    state === "imminent" ? "text-rose-400 animate-pulse" :
+    state === "today-waiting" ? "text-emerald-400" :
+    "gradient-text";
+
+  return (
+    <div className={cn("flex items-center text-xl sm:text-3xl md:text-4xl self-start mt-3 sm:mt-4 transition-colors duration-300", colorClass)}>:</div>
+  );
+}
+
+function LiveIndicator({ text }: { text: string }) {
+  return (
+    <div className="flex items-center justify-center gap-4 sm:gap-6">
+      <span className="relative flex h-5 w-5 sm:h-6 sm:w-6 md:h-8 md:w-8">
+        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75"></span>
+        <span className="relative inline-flex rounded-full h-5 w-5 sm:h-6 sm:w-6 md:h-8 md:w-8 bg-red-500 shadow-[0_0_20px_rgba(239,68,68,0.9)]"></span>
+      </span>
+      <span className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-red-400 tracking-wider animate-pulse drop-shadow-[0_0_30px_rgba(239,68,68,0.8)]">
+        {text}
+      </span>
+      <span className="relative flex h-5 w-5 sm:h-6 sm:w-6 md:h-8 md:w-8">
+        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75"></span>
+        <span className="relative inline-flex rounded-full h-5 w-5 sm:h-6 sm:w-6 md:h-8 md:w-8 bg-red-500 shadow-[0_0_20px_rgba(239,68,68,0.9)]"></span>
+      </span>
+    </div>
+  );
+}
+
+export function CountdownTimer({
+  targetDate,
+  endDate,
+  className,
+  labels = {},
+  endedText = ["Event", "Ended"],
+  liveText = "LIVE NOW",
+  todayText,
+}: CountdownTimerProps) {
+  const timeLeft = useCountdown(targetDate);
+  const daysLabel = labels.days ?? "Days";
+  const hoursLabel = labels.hours ?? "Hours";
+  const minsLabel = labels.mins ?? "Mins";
+  const secsLabel = labels.secs ?? "Secs";
+
+  const state = useMemo(
+    () => getCountdownState(targetDate, endDate),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [targetDate, endDate, timeLeft.total]
+  );
+
+  if (state === "ended") {
+    return (
+      <div className={cn("text-center flex flex-col items-center gap-1 sm:gap-2", className)}>
+        <span className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-wide"
+          style={{ background: "linear-gradient(135deg, #FFD700, #FFA500, #FFE066)", backgroundClip: "text", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", filter: "drop-shadow(0 0 20px rgba(255,215,0,0.5))" }}>
+          {endedText[0]}
+        </span>
+        <span className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-wide"
+          style={{ background: "linear-gradient(135deg, #FFD700, #FFA500, #FFE066)", backgroundClip: "text", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", filter: "drop-shadow(0 0 20px rgba(255,215,0,0.5))" }}>
+          {endedText[1]}
+        </span>
+      </div>
+    );
+  }
+
+  if (state === "live") {
+    return (
+      <div className={cn("text-center", className)}>
+        <LiveIndicator text={liveText} />
+      </div>
+    );
+  }
+
+  if (state === "today-waiting") {
+    return (
+      <div className={cn("flex gap-1.5 sm:gap-3 md:gap-4 flex-wrap", className)}>
+        <TimeUnit value={timeLeft.hours} label={hoursLabel} state={state} />
+        <Separator state={state} />
+        <TimeUnit value={timeLeft.minutes} label={minsLabel} state={state} />
+        <Separator state={state} />
+        <TimeUnit value={timeLeft.seconds} label={secsLabel} state={state} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col items-center", className)}>
+      <div className="flex gap-1.5 sm:gap-3 md:gap-4 flex-wrap justify-center">
+        <TimeUnit value={timeLeft.days} label={daysLabel} state={state} />
+        <Separator state={state} />
+        <TimeUnit value={timeLeft.hours} label={hoursLabel} state={state} />
+        <Separator state={state} />
+        <TimeUnit value={timeLeft.minutes} label={minsLabel} state={state} />
+        <Separator state={state} />
+        <TimeUnit value={timeLeft.seconds} label={secsLabel} state={state} />
+      </div>
+    </div>
+  );
+}
+`,
+  "components/motion/counter": `"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { useScrollAnimation } from "__HOOKS_ALIAS__/use-scroll-animation";
+import { cn } from "__UTILS_ALIAS__/cn";
+
+interface CounterProps {
+  end: number;
+  suffix?: string;
+  duration?: number;
+  className?: string;
+}
+
+const CYBER_CHARS = "\u30A2 \u30A4 \u30A6 \u30A8 \u30AA \u30AB \u30AD \u30AF \u30B1 \u30B3 0 1 2 3 4 5 6 7 8 9 A B C D E F # $ % & @".split(" ");
+
+export function Counter({ end, suffix = "", duration = 2500, className }: CounterProps) {
+  const [displayText, setDisplayText] = useState("");
+  const [ref, isInView] = useScrollAnimation<HTMLSpanElement>({ threshold: 0.5 });
+  const hasAnimated = useRef(false);
+
+  useEffect(() => {
+    if (isInView && !hasAnimated.current) {
+      hasAnimated.current = true;
+
+      const targetText = end.toString();
+      const totalLength = targetText.length;
+
+      const lockedChars: boolean[] = new Array(totalLength).fill(false);
+      const currentChars: string[] = new Array(totalLength).fill("");
+
+      for (let i = 0; i < totalLength; i++) {
+        currentChars[i] = CYBER_CHARS[Math.floor(Math.random() * CYBER_CHARS.length)];
+      }
+      setDisplayText(currentChars.join(""));
+
+      const intervals: ReturnType<typeof setInterval>[] = [];
+      const timeouts: ReturnType<typeof setTimeout>[] = [];
+
+      const scrambleInterval = setInterval(() => {
+        for (let i = 0; i < totalLength; i++) {
+          if (!lockedChars[i]) {
+            currentChars[i] = CYBER_CHARS[Math.floor(Math.random() * CYBER_CHARS.length)];
+          }
+        }
+        setDisplayText(currentChars.join(""));
+      }, 50);
+      intervals.push(scrambleInterval);
+
+      const lockDelay = duration / (totalLength + 1);
+
+      for (let i = 0; i < totalLength; i++) {
+        const lockTimeout = setTimeout(() => {
+          let findCount = 0;
+          const findInterval = setInterval(() => {
+            currentChars[i] = CYBER_CHARS[Math.floor(Math.random() * CYBER_CHARS.length)];
+            setDisplayText(currentChars.join(""));
+            findCount++;
+            if (findCount >= 5) {
+              clearInterval(findInterval);
+              lockedChars[i] = true;
+              currentChars[i] = targetText[i];
+              setDisplayText(currentChars.join(""));
+            }
+          }, 60);
+          intervals.push(findInterval);
+        }, lockDelay * (i + 1));
+        timeouts.push(lockTimeout);
+      }
+
+      const finalTimeout = setTimeout(() => {
+        clearInterval(scrambleInterval);
+        setDisplayText(targetText);
+      }, duration + 100);
+      timeouts.push(finalTimeout);
+
+      return () => {
+        intervals.forEach(clearInterval);
+        timeouts.forEach(clearTimeout);
+      };
+    }
+  }, [isInView, end, duration]);
+
+  return (
+    <span ref={ref} className={cn("tabular-nums", className)}>
+      {displayText}{suffix}
+    </span>
+  );
+}
+`,
+  "components/motion/light-rays": `"use client";
+
+import { useRef, useEffect, useState } from 'react';
+import { Renderer, Program, Triangle, Mesh } from 'ogl';
+
+export type RaysOrigin =
+  | 'top-center'
+  | 'top-left'
+  | 'top-right'
+  | 'right'
+  | 'left'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'bottom-left';
+
+interface LightRaysProps {
+  raysOrigin?: RaysOrigin;
+  raysColor?: string;
+  raysSpeed?: number;
+  lightSpread?: number;
+  rayLength?: number;
+  pulsating?: boolean;
+  fadeDistance?: number;
+  saturation?: number;
+  followMouse?: boolean;
+  mouseInfluence?: number;
+  noiseAmount?: number;
+  distortion?: number;
+  className?: string;
+}
+
+const DEFAULT_COLOR = '#ffffff';
+
+const hexToRgb = (hex: string): [number, number, number] => {
+  const m = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);
+  return m ? [parseInt(m[1], 16) / 255, parseInt(m[2], 16) / 255, parseInt(m[3], 16) / 255] : [1, 1, 1];
+};
+
+const getAnchorAndDir = (
+  origin: RaysOrigin,
+  w: number,
+  h: number
+): { anchor: [number, number]; dir: [number, number] } => {
+  const outside = 0.2;
+  switch (origin) {
+    case 'top-left':
+      return { anchor: [0, -outside * h], dir: [0, 1] };
+    case 'top-right':
+      return { anchor: [w, -outside * h], dir: [0, 1] };
+    case 'left':
+      return { anchor: [-outside * w, 0.5 * h], dir: [1, 0] };
+    case 'right':
+      return { anchor: [(1 + outside) * w, 0.5 * h], dir: [-1, 0] };
+    case 'bottom-left':
+      return { anchor: [0, (1 + outside) * h], dir: [0, -1] };
+    case 'bottom-center':
+      return { anchor: [0.5 * w, (1 + outside) * h], dir: [0, -1] };
+    case 'bottom-right':
+      return { anchor: [w, (1 + outside) * h], dir: [0, -1] };
+    default: // "top-center"
+      return { anchor: [0.5 * w, -outside * h], dir: [0, 1] };
+  }
+};
+
+type Vec2 = [number, number];
+type Vec3 = [number, number, number];
+
+interface Uniforms {
+  iTime: { value: number };
+  iResolution: { value: Vec2 };
+  rayPos: { value: Vec2 };
+  rayDir: { value: Vec2 };
+  raysColor: { value: Vec3 };
+  raysSpeed: { value: number };
+  lightSpread: { value: number };
+  rayLength: { value: number };
+  pulsating: { value: number };
+  fadeDistance: { value: number };
+  saturation: { value: number };
+  mousePos: { value: Vec2 };
+  mouseInfluence: { value: number };
+  noiseAmount: { value: number };
+  distortion: { value: number };
+}
+
+const LightRays: React.FC<LightRaysProps> = ({
+  raysOrigin = 'top-center',
+  raysColor = DEFAULT_COLOR,
+  raysSpeed = 1,
+  lightSpread = 1,
+  rayLength = 2,
+  pulsating = false,
+  fadeDistance = 1.0,
+  saturation = 1.0,
+  followMouse = true,
+  mouseInfluence = 0.1,
+  noiseAmount = 0.0,
+  distortion = 0.0,
+  className = ''
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const uniformsRef = useRef<Uniforms | null>(null);
+  const rendererRef = useRef<Renderer | null>(null);
+  const mouseRef = useRef({ x: 0.5, y: 0.5 });
+  const smoothMouseRef = useRef({ x: 0.5, y: 0.5 });
+  const animationIdRef = useRef<number | null>(null);
+  const meshRef = useRef<Mesh | null>(null);
+  const cleanupFunctionRef = useRef<(() => void) | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    observerRef.current = new IntersectionObserver(
+      entries => {
+        const entry = entries[0];
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold: 0.1 }
+    );
+
+    observerRef.current.observe(containerRef.current);
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isVisible || !containerRef.current) return;
+
+    if (cleanupFunctionRef.current) {
+      cleanupFunctionRef.current();
+      cleanupFunctionRef.current = null;
+    }
+
+    const initializeWebGL = async () => {
+      if (!containerRef.current) return;
+
+      await new Promise(resolve => setTimeout(resolve, 10));
+
+      if (!containerRef.current) return;
+
+      const renderer = new Renderer({
+        dpr: Math.min(window.devicePixelRatio, 2),
+        alpha: true
+      });
+      rendererRef.current = renderer;
+
+      const gl = renderer.gl;
+      gl.canvas.style.width = '100%';
+      gl.canvas.style.height = '100%';
+
+      while (containerRef.current.firstChild) {
+        containerRef.current.removeChild(containerRef.current.firstChild);
+      }
+      containerRef.current.appendChild(gl.canvas);
+
+      const vert = \`
+attribute vec2 position;
+varying vec2 vUv;
+void main() {
+  vUv = position * 0.5 + 0.5;
+  gl_Position = vec4(position, 0.0, 1.0);
+}\`;
+
+      const frag = \`precision highp float;
+
+uniform float iTime;
+uniform vec2  iResolution;
+
+uniform vec2  rayPos;
+uniform vec2  rayDir;
+uniform vec3  raysColor;
+uniform float raysSpeed;
+uniform float lightSpread;
+uniform float rayLength;
+uniform float pulsating;
+uniform float fadeDistance;
+uniform float saturation;
+uniform vec2  mousePos;
+uniform float mouseInfluence;
+uniform float noiseAmount;
+uniform float distortion;
+
+varying vec2 vUv;
+
+float noise(vec2 st) {
+  return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+}
+
+float rayStrength(vec2 raySource, vec2 rayRefDirection, vec2 coord,
+                  float seedA, float seedB, float speed) {
+  vec2 sourceToCoord = coord - raySource;
+  vec2 dirNorm = normalize(sourceToCoord);
+  float cosAngle = dot(dirNorm, rayRefDirection);
+
+  float distortedAngle = cosAngle + distortion * sin(iTime * 2.0 + length(sourceToCoord) * 0.01) * 0.2;
+
+  float spreadFactor = pow(max(distortedAngle, 0.0), 1.0 / max(lightSpread, 0.001));
+
+  float distance = length(sourceToCoord);
+  float maxDistance = iResolution.x * rayLength;
+  float lengthFalloff = clamp((maxDistance - distance) / maxDistance, 0.0, 1.0);
+
+  float fadeFalloff = clamp((iResolution.x * fadeDistance - distance) / (iResolution.x * fadeDistance), 0.5, 1.0);
+  float pulse = pulsating > 0.5 ? (0.8 + 0.2 * sin(iTime * speed * 3.0)) : 1.0;
+
+  float baseStrength = clamp(
+    (0.45 + 0.15 * sin(distortedAngle * seedA + iTime * speed)) +
+    (0.3 + 0.2 * cos(-distortedAngle * seedB + iTime * speed)),
+    0.0, 1.0
+  );
+
+  return baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 coord = vec2(fragCoord.x, iResolution.y - fragCoord.y);
+
+  vec2 finalRayDir = rayDir;
+  if (mouseInfluence > 0.0) {
+    vec2 mouseScreenPos = mousePos * iResolution.xy;
+    vec2 mouseDirection = normalize(mouseScreenPos - rayPos);
+    finalRayDir = normalize(mix(rayDir, mouseDirection, mouseInfluence));
+  }
+
+  vec4 rays1 = vec4(1.0) *
+               rayStrength(rayPos, finalRayDir, coord, 36.2214, 21.11349,
+                           1.5 * raysSpeed);
+  vec4 rays2 = vec4(1.0) *
+               rayStrength(rayPos, finalRayDir, coord, 22.3991, 18.0234,
+                           1.1 * raysSpeed);
+
+  fragColor = rays1 * 0.5 + rays2 * 0.4;
+
+  if (noiseAmount > 0.0) {
+    float n = noise(coord * 0.01 + iTime * 0.1);
+    fragColor.rgb *= (1.0 - noiseAmount + noiseAmount * n);
+  }
+
+  float brightness = 1.0 - (coord.y / iResolution.y);
+  fragColor.x *= 0.1 + brightness * 0.8;
+  fragColor.y *= 0.3 + brightness * 0.6;
+  fragColor.z *= 0.5 + brightness * 0.5;
+
+  if (saturation != 1.0) {
+    float gray = dot(fragColor.rgb, vec3(0.299, 0.587, 0.114));
+    fragColor.rgb = mix(vec3(gray), fragColor.rgb, saturation);
+  }
+
+  fragColor.rgb *= raysColor;
+}
+
+void main() {
+  vec4 color;
+  mainImage(color, gl_FragCoord.xy);
+  gl_FragColor  = color;
+}\`;
+
+      const uniforms: Uniforms = {
+        iTime: { value: 0 },
+        iResolution: { value: [1, 1] },
+
+        rayPos: { value: [0, 0] },
+        rayDir: { value: [0, 1] },
+
+        raysColor: { value: hexToRgb(raysColor) },
+        raysSpeed: { value: raysSpeed },
+        lightSpread: { value: lightSpread },
+        rayLength: { value: rayLength },
+        pulsating: { value: pulsating ? 1.0 : 0.0 },
+        fadeDistance: { value: fadeDistance },
+        saturation: { value: saturation },
+        mousePos: { value: [0.5, 0.5] },
+        mouseInfluence: { value: mouseInfluence },
+        noiseAmount: { value: noiseAmount },
+        distortion: { value: distortion }
+      };
+      uniformsRef.current = uniforms;
+
+      const geometry = new Triangle(gl);
+      const program = new Program(gl, {
+        vertex: vert,
+        fragment: frag,
+        uniforms
+      });
+      const mesh = new Mesh(gl, { geometry, program });
+      meshRef.current = mesh;
+
+      const updatePlacement = () => {
+        if (!containerRef.current || !renderer) return;
+
+        renderer.dpr = Math.min(window.devicePixelRatio, 2);
+
+        const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current;
+        renderer.setSize(wCSS, hCSS);
+
+        const dpr = renderer.dpr;
+        const w = wCSS * dpr;
+        const h = hCSS * dpr;
+
+        uniforms.iResolution.value = [w, h];
+
+        const { anchor, dir } = getAnchorAndDir(raysOrigin, w, h);
+        uniforms.rayPos.value = anchor;
+        uniforms.rayDir.value = dir;
+      };
+
+      const loop = (t: number) => {
+        if (!rendererRef.current || !uniformsRef.current || !meshRef.current) {
+          return;
+        }
+
+        uniforms.iTime.value = t * 0.001;
+
+        if (followMouse && mouseInfluence > 0.0) {
+          const smoothing = 0.92;
+
+          smoothMouseRef.current.x = smoothMouseRef.current.x * smoothing + mouseRef.current.x * (1 - smoothing);
+          smoothMouseRef.current.y = smoothMouseRef.current.y * smoothing + mouseRef.current.y * (1 - smoothing);
+
+          uniforms.mousePos.value = [smoothMouseRef.current.x, smoothMouseRef.current.y];
+        }
+
+        try {
+          renderer.render({ scene: mesh });
+          animationIdRef.current = requestAnimationFrame(loop);
+        } catch (error) {
+          console.warn('WebGL rendering error:', error);
+          return;
+        }
+      };
+
+      window.addEventListener('resize', updatePlacement);
+      updatePlacement();
+      animationIdRef.current = requestAnimationFrame(loop);
+
+      cleanupFunctionRef.current = () => {
+        if (animationIdRef.current) {
+          cancelAnimationFrame(animationIdRef.current);
+          animationIdRef.current = null;
+        }
+
+        window.removeEventListener('resize', updatePlacement);
+
+        if (renderer) {
+          try {
+            const canvas = renderer.gl.canvas;
+            const loseContextExt = renderer.gl.getExtension('WEBGL_lose_context');
+            if (loseContextExt) {
+              loseContextExt.loseContext();
+            }
+
+            if (canvas && canvas.parentNode) {
+              canvas.parentNode.removeChild(canvas);
+            }
+          } catch (error) {
+            console.warn('Error during WebGL cleanup:', error);
+          }
+        }
+
+        rendererRef.current = null;
+        uniformsRef.current = null;
+        meshRef.current = null;
+      };
+    };
+
+    initializeWebGL();
+
+    return () => {
+      if (cleanupFunctionRef.current) {
+        cleanupFunctionRef.current();
+        cleanupFunctionRef.current = null;
+      }
+    };
+  }, [
+    isVisible,
+    raysOrigin,
+    raysColor,
+    raysSpeed,
+    lightSpread,
+    rayLength,
+    pulsating,
+    fadeDistance,
+    saturation,
+    followMouse,
+    mouseInfluence,
+    noiseAmount,
+    distortion
+  ]);
+
+  useEffect(() => {
+    if (!uniformsRef.current || !containerRef.current || !rendererRef.current) return;
+
+    const u = uniformsRef.current;
+    const renderer = rendererRef.current;
+
+    u.raysColor.value = hexToRgb(raysColor);
+    u.raysSpeed.value = raysSpeed;
+    u.lightSpread.value = lightSpread;
+    u.rayLength.value = rayLength;
+    u.pulsating.value = pulsating ? 1.0 : 0.0;
+    u.fadeDistance.value = fadeDistance;
+    u.saturation.value = saturation;
+    u.mouseInfluence.value = mouseInfluence;
+    u.noiseAmount.value = noiseAmount;
+    u.distortion.value = distortion;
+
+    const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current;
+    const dpr = renderer.dpr;
+    const { anchor, dir } = getAnchorAndDir(raysOrigin, wCSS * dpr, hCSS * dpr);
+    u.rayPos.value = anchor;
+    u.rayDir.value = dir;
+  }, [
+    raysColor,
+    raysSpeed,
+    lightSpread,
+    raysOrigin,
+    rayLength,
+    pulsating,
+    fadeDistance,
+    saturation,
+    mouseInfluence,
+    noiseAmount,
+    distortion
+  ]);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!containerRef.current || !rendererRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width;
+      const y = (e.clientY - rect.top) / rect.height;
+      mouseRef.current = { x, y };
+    };
+
+    if (followMouse) {
+      window.addEventListener('mousemove', handleMouseMove);
+      return () => window.removeEventListener('mousemove', handleMouseMove);
+    }
+  }, [followMouse]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={\`w-full h-full pointer-events-none z-[3] overflow-hidden relative \${className}\`.trim()}
+    />
+  );
+};
+
+export default LightRays;
+`,
+  "components/motion/shiny-text": `"use client";
+
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { motion, useMotionValue, useAnimationFrame, useTransform } from 'motion/react';
+
+interface ShinyTextProps {
+  text: string;
+  disabled?: boolean;
+  speed?: number;
+  className?: string;
+  color?: string;
+  shineColor?: string;
+  spread?: number;
+  yoyo?: boolean;
+  pauseOnHover?: boolean;
+  direction?: 'left' | 'right';
+  delay?: number;
+}
+
+const ShinyText: React.FC<ShinyTextProps> = ({
+  text,
+  disabled = false,
+  speed = 2,
+  className = '',
+  color = '#b5b5b5',
+  shineColor = '#ffffff',
+  spread = 120,
+  yoyo = false,
+  pauseOnHover = false,
+  direction = 'left',
+  delay = 0
+}) => {
+  const [isPaused, setIsPaused] = useState(false);
+  const progress = useMotionValue(0);
+  const elapsedRef = useRef(0);
+  const lastTimeRef = useRef<number | null>(null);
+  const directionRef = useRef(direction === 'left' ? 1 : -1);
+
+  const animationDuration = speed * 1000;
+  const delayDuration = delay * 1000;
+
+  useAnimationFrame(time => {
+    if (disabled || isPaused) {
+      lastTimeRef.current = null;
+      return;
+    }
+
+    if (lastTimeRef.current === null) {
+      lastTimeRef.current = time;
+      return;
+    }
+
+    const deltaTime = time - lastTimeRef.current;
+    lastTimeRef.current = time;
+
+    elapsedRef.current += deltaTime;
+
+    if (yoyo) {
+      const cycleDuration = animationDuration + delayDuration;
+      const fullCycle = cycleDuration * 2;
+      const cycleTime = elapsedRef.current % fullCycle;
+
+      if (cycleTime < animationDuration) {
+        const p = (cycleTime / animationDuration) * 100;
+        progress.set(directionRef.current === 1 ? p : 100 - p);
+      } else if (cycleTime < cycleDuration) {
+        progress.set(directionRef.current === 1 ? 100 : 0);
+      } else if (cycleTime < cycleDuration + animationDuration) {
+        const reverseTime = cycleTime - cycleDuration;
+        const p = 100 - (reverseTime / animationDuration) * 100;
+        progress.set(directionRef.current === 1 ? p : 100 - p);
+      } else {
+        progress.set(directionRef.current === 1 ? 0 : 100);
+      }
+    } else {
+      const cycleDuration = animationDuration + delayDuration;
+      const cycleTime = elapsedRef.current % cycleDuration;
+
+      if (cycleTime < animationDuration) {
+        const p = (cycleTime / animationDuration) * 100;
+        progress.set(directionRef.current === 1 ? p : 100 - p);
+      } else {
+        progress.set(directionRef.current === 1 ? 100 : 0);
+      }
+    }
+  });
+
+  useEffect(() => {
+    directionRef.current = direction === 'left' ? 1 : -1;
+    elapsedRef.current = 0;
+    progress.set(0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [direction]);
+
+  const backgroundPosition = useTransform(progress, p => \`\${150 - p * 2}% center\`);
+
+  const handleMouseEnter = useCallback(() => {
+    if (pauseOnHover) setIsPaused(true);
+  }, [pauseOnHover]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (pauseOnHover) setIsPaused(false);
+  }, [pauseOnHover]);
+
+  const gradientStyle: React.CSSProperties = {
+    backgroundImage: \`linear-gradient(\${spread}deg, \${color} 0%, \${color} 35%, \${shineColor} 50%, \${color} 65%, \${color} 100%)\`,
+    backgroundSize: '200% auto',
+    WebkitBackgroundClip: 'text',
+    backgroundClip: 'text',
+    WebkitTextFillColor: 'transparent'
+  };
+
+  return (
+    <motion.span
+      className={\`inline-block \${className}\`}
+      style={{ ...gradientStyle, backgroundPosition }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {text}
+    </motion.span>
+  );
+};
+
+export default ShinyText;
+`,
+  "hooks/use-countdown": `"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+interface TimeLeft {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  total: number;
+}
+
+export function useCountdown(targetDate: Date): TimeLeft {
+  const calculateTimeLeft = useCallback((): TimeLeft => {
+    const difference = targetDate.getTime() - new Date().getTime();
+
+    if (difference <= 0) {
+      return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
+    }
+
+    return {
+      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+      minutes: Math.floor((difference / 1000 / 60) % 60),
+      seconds: Math.floor((difference / 1000) % 60),
+      total: difference,
+    };
+  }, [targetDate]);
+
+  const [timeLeft, setTimeLeft] = useState<TimeLeft>(calculateTimeLeft);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [calculateTimeLeft]);
+
+  return timeLeft;
+}
+`,
+  "hooks/use-media-query": `"use client";
+
+import { useState, useEffect } from "react";
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+
+    const listener = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+
+  return matches;
+}
+
+export function useIsMobile(): boolean {
+  return useMediaQuery("(max-width: 767px)");
+}
+
+export function useIsTablet(): boolean {
+  return useMediaQuery("(min-width: 768px) and (max-width: 1023px)");
+}
+
+export function useIsDesktop(): boolean {
+  return useMediaQuery("(min-width: 1024px)");
+}
+`,
+  "hooks/use-scroll-animation": `"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+interface UseScrollAnimationOptions {
+  threshold?: number;
+  rootMargin?: string;
+  triggerOnce?: boolean;
+}
+
+export function useScrollAnimation<T extends HTMLElement>(
+  options: UseScrollAnimationOptions = {}
+): [React.RefObject<T | null>, boolean] {
+  const { threshold = 0.1, rootMargin = "0px", triggerOnce = true } = options;
+  const ref = useRef<T | null>(null);
+  const [isInView, setIsInView] = useState(false);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsInView(true);
+          if (triggerOnce) {
+            observer.unobserve(element);
+          }
+        } else if (!triggerOnce) {
+          setIsInView(false);
+        }
+      },
+      { threshold, rootMargin }
+    );
+
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, [threshold, rootMargin, triggerOnce]);
+
+  return [ref, isInView];
+}
+`,
+  "utils/cn": `import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`
+};
+
+// src/utils/file-writer.ts
+var ALIAS_MAP = {
+  __COMPONENTS_ALIAS__: "components",
+  __HOOKS_ALIAS__: "hooks",
+  __UTILS_ALIAS__: "utils"
+};
+function replaceAliases(content, config) {
+  let result = content;
+  for (const [placeholder, key] of Object.entries(ALIAS_MAP)) {
+    result = result.replaceAll(placeholder, config.aliases[key]);
+  }
+  return result;
+}
+function writeTemplateFile(options) {
+  const { templateKey, targetDir, fileName, config, overwrite = false } = options;
+  const template = TEMPLATES[templateKey];
+  if (!template) {
+    throw new Error(`Template not found: ${templateKey}`);
+  }
+  const targetPath = path3.join(targetDir, fileName);
+  if (fs3.existsSync(targetPath) && !overwrite) {
+    return { written: false, path: targetPath };
+  }
+  fs3.ensureDirSync(targetDir);
+  const content = replaceAliases(template, config);
+  fs3.writeFileSync(targetPath, content, "utf-8");
+  return { written: true, path: targetPath };
+}
+
+// src/utils/css-injector.ts
+import fs4 from "fs-extra";
+var MARKER_START = (name) => `/* glintkit:${name} - start */`;
+var MARKER_END = (name) => `/* glintkit:${name} - end */`;
+function injectCSSPreset(cssFilePath, presetName, presetContent) {
+  if (!fs4.existsSync(cssFilePath)) {
+    logger.warn(`CSS file not found: ${cssFilePath}. Skipping CSS injection.`);
+    return;
+  }
+  let css = fs4.readFileSync(cssFilePath, "utf-8");
+  const startMarker = MARKER_START(presetName);
+  const endMarker = MARKER_END(presetName);
+  if (css.includes(startMarker)) {
+    const startIdx = css.indexOf(startMarker);
+    const endIdx = css.indexOf(endMarker);
+    if (endIdx !== -1) {
+      css = css.slice(0, startIdx) + startMarker + "\n" + presetContent + "\n" + endMarker + css.slice(endIdx + endMarker.length);
+      fs4.writeFileSync(cssFilePath, css, "utf-8");
+      return;
+    }
+  }
+  const block = `
+${startMarker}
+${presetContent}
+${endMarker}
+`;
+  css += block;
+  fs4.writeFileSync(cssFilePath, css, "utf-8");
+}
+
+// src/registry/css-presets.ts
+var CSS_PRESETS = {
+  glass: `:root {
+  --glass-bg: rgba(255, 255, 255, 0.06);
+  --glass-bg-strong: rgba(255, 255, 255, 0.1);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-shadow: rgba(0, 0, 0, 0.2);
+}
+
+.glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+}
+
+.glass-strong {
+  background: var(--glass-bg-strong);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+  border-radius: 1rem;
+  box-shadow: 0 8px 32px var(--glass-shadow);
+}
+
+.glass-gradient {
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(0, 255, 136, 0.05));
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 1rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+
+@media (max-width: 768px) {
+  .glass {
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+  }
+  .glass-strong {
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+  .glass-gradient {
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+}`,
+  "gradient-text": `.gradient-text {
+  background: linear-gradient(135deg, #00D4FF, #00FF88);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+@keyframes text-flow {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
+}
+
+.gradient-text-animated {
+  background: linear-gradient(90deg, #00D4FF, #00FF88, #00D4FF, #00FF88);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: text-flow 3s linear infinite;
+}`,
+  "glow-border": `@keyframes border-flow {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
+}
+
+.btn-glow-border {
+  position: relative;
+  background: var(--background, #000);
+  z-index: 1;
+}
+
+.btn-glow-border::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: 9999px;
+  background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1), #00D4FF, #00FF88, rgba(255,255,255,0.1), rgba(255,255,255,0.1));
+  background-size: 200% 100%;
+  z-index: -2;
+  animation: border-flow 3s linear infinite;
+}
+
+.btn-glow-border::after {
+  content: '';
+  position: absolute;
+  inset: 1px;
+  border-radius: 9999px;
+  background: var(--background, #000);
+  z-index: -1;
+}
+
+.btn-glow-border:hover::before {
+  animation-duration: 1.5s;
+  filter: blur(3px);
+}
+
+.btn-glow-border:hover {
+  box-shadow: 0 0 30px rgba(0, 212, 255, 0.4), 0 0 60px rgba(0, 255, 136, 0.2);
+}`,
+  animations: `@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
+@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), 0 0 40px rgba(0, 255, 136, 0.2); } 50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.6), 0 0 60px rgba(0, 255, 136, 0.4); } }
+@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes soundwave { 0%, 100% { height: 4px; } 50% { height: 16px; } }
+@keyframes attention-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4), 0 0 0 0 rgba(0, 255, 136, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(0, 212, 255, 0), 0 0 0 12px rgba(0, 255, 136, 0); } }
+@keyframes countdown-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-1px); } 20%, 40%, 60%, 80% { transform: translateX(1px); } }
+
+.animate-float { animation: float 3s ease-in-out infinite; }
+.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
+.animate-slide-up { animation: slide-up 0.6s ease-out forwards; }
+.animate-fade-in { animation: fade-in 0.6s ease-out forwards; }
+.animate-soundwave { animation: soundwave 0.6s ease-in-out infinite; }
+.animate-attention-ring { animation: attention-ring 2s ease-in-out infinite; }
+.animate-shake { animation: countdown-shake 0.5s ease-in-out infinite; }`,
+  "holo-card": `/* Overlay Background */
+.holo-card-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(12px);
+}
+
+/* Card Container - 3D \uACF5\uAC04 \uC124\uC815 */
+.holo-card-container {
+  perspective: 600px;
+  transform-origin: center;
+}
+
+/* Card Rotator - 3D \uD68C\uC804 + \uAE00\uB85C\uC6B0 */
+.holo-card {
+  --glow: #69d1e9;
+  --mx: 50%;
+  --my: 50%;
+  --rx: 0deg;
+  --ry: 0deg;
+  --posx: 50%;
+  --posy: 50%;
+  --hyp: 0.5;
+  --o: 1;
+
+  position: relative;
+  width: 320px;
+  max-width: 85vw;
+  aspect-ratio: 2.5/3.5;
+  border-radius: 16px;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-transform: rotateY(var(--rx)) rotateX(var(--ry));
+  transform: rotateY(var(--rx)) rotateX(var(--ry));
+  transition: transform 0.15s ease-out;
+  will-change: transform;
+
+  /* Active glow effect */
+  box-shadow:
+    0 0 10px 0px var(--glow),
+    0 0 10px 0px var(--glow),
+    0 0 30px 0px var(--glow),
+    0px 10px 20px -5px rgba(0, 0, 0, 0.5);
+}
+
+@media (min-width: 640px) {
+  .holo-card {
+    width: 360px;
+  }
+}
+
+@media (min-width: 768px) {
+  .holo-card {
+    width: 400px;
+  }
+}
+
+/* Card Content Layer */
+.holo-card__content {
+  position: relative;
+  z-index: 10;
+  border-radius: 16px;
+  overflow: hidden;
+  background: linear-gradient(135deg, rgba(20, 20, 30, 0.95), rgba(10, 10, 20, 0.98));
+  width: 100%;
+  height: 100%;
+  /* Fix for iOS Safari - ensure content is visible */
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+}
+
+/* Inner Frame Border - Pokemon Card Style */
+.holo-card__inner-frame {
+  --frame-color: #C0C0C0;
+
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  pointer-events: none;
+  z-index: 50;
+
+  /* Thick inner border - inset shadow draws inside */
+  box-shadow:
+    inset 0 0 0 10px var(--frame-color),
+    inset 0 0 20px 5px var(--frame-color);
+}
+
+@keyframes frame-shimmer {
+  0%, 100% {
+    background-position: -200% 0;
+  }
+  50% {
+    background-position: 200% 0;
+  }
+}
+
+/* Shine Layer - \uD640\uB85C\uADF8\uB798\uD53D \uBB34\uC9C0\uAC1C \uD6A8\uACFC */
+.holo-card__shine {
+  --space: 5%;
+  --angle: 133deg;
+
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  pointer-events: none;
+  z-index: 20;
+
+  background-image:
+    /* Rainbow gradient */
+    repeating-linear-gradient(
+      0deg,
+      rgb(255, 119, 115) calc(var(--space) * 1),
+      rgba(255, 237, 95, 1) calc(var(--space) * 2),
+      rgba(168, 255, 95, 1) calc(var(--space) * 3),
+      rgba(131, 255, 247, 1) calc(var(--space) * 4),
+      rgba(120, 148, 255, 1) calc(var(--space) * 5),
+      rgb(216, 117, 255) calc(var(--space) * 6),
+      rgb(255, 119, 115) calc(var(--space) * 7)
+    ),
+    /* Diagonal shine lines */
+    repeating-linear-gradient(
+      var(--angle),
+      #0e152e 0%,
+      hsl(180, 10%, 60%) 3.8%,
+      hsl(180, 29%, 66%) 4.5%,
+      hsl(180, 10%, 60%) 5.2%,
+      #0e152e 10%,
+      #0e152e 12%
+    ),
+    /* Radial highlight following mouse */
+    radial-gradient(
+      farthest-corner circle at var(--mx) var(--my),
+      rgba(255, 255, 255, 0.8) 10%,
+      rgba(200, 200, 200, 0.3) 20%,
+      rgba(0, 0, 0, 0.5) 90%
+    );
+
+  background-blend-mode: hue, hard-light, normal;
+  background-size: 200% 700%, 300% 300%, 200% 200%;
+  background-position:
+    0% var(--posy),
+    var(--posx) var(--posy),
+    var(--posx) var(--posy);
+
+  filter: brightness(calc((var(--hyp) * 0.3) + 0.5)) contrast(2.5) saturate(0.65);
+  mix-blend-mode: color-dodge;
+  opacity: var(--o);
+}
+
+/* Glare Layer - \uBE5B \uBC18\uC0AC \uD6A8\uACFC */
+.holo-card__glare {
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  pointer-events: none;
+  z-index: 25;
+
+  background-image: radial-gradient(
+    farthest-corner circle at var(--mx) var(--my),
+    rgba(255, 255, 255, 0.8) 0%,
+    rgba(255, 255, 255, 0.4) 15%,
+    rgba(0, 0, 0, 0.5) 50%,
+    rgba(0, 0, 0, 0.7) 90%
+  );
+
+  mix-blend-mode: overlay;
+  opacity: calc(var(--o) * 0.7);
+}
+
+/* Card flip animation - \uCE74\uB4DC \uB4A4\uC9D1\uAE30 \uD6A8\uACFC */
+@keyframes holo-card-flip-in {
+  0% {
+    transform: rotateY(180deg) scale(0.6);
+  }
+  100% {
+    transform: rotateY(0deg) scale(1);
+  }
+}
+
+@keyframes holo-card-flip-out {
+  0% {
+    transform: rotateY(0deg) scale(1);
+  }
+  100% {
+    transform: rotateY(-180deg) scale(0.6);
+  }
+}
+
+/* Animation states */
+.holo-card--entering {
+  animation: holo-card-flip-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.holo-card--exiting {
+  animation: holo-card-flip-out 0.6s ease-in-out !important;
+}
+
+/* Card back side - \uCE74\uB4DC \uB4B7\uBA74 */
+.holo-card__back {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform: rotateY(180deg) translateZ(0);
+  transform: rotateY(180deg) translateZ(0);
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+/* Back pattern - \uD640\uB85C\uADF8\uB798\uD53D \uD328\uD134 */
+.holo-card__back::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 10px,
+      rgba(0, 212, 255, 0.03) 10px,
+      rgba(0, 212, 255, 0.03) 20px
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 10px,
+      rgba(0, 255, 136, 0.03) 10px,
+      rgba(0, 255, 136, 0.03) 20px
+    );
+}
+
+/* Back logo/text */
+.holo-card__back-content {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+}
+
+.holo-card__back-logo {
+  font-size: 3rem;
+  font-weight: bold;
+  background: linear-gradient(135deg, #00D4FF, #00FF88);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  opacity: 0.8;
+  letter-spacing: 0.1em;
+}
+
+.holo-card__back-subtitle {
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.4);
+  margin-top: 0.5rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+/* Front side needs backface-visibility */
+.holo-card__front {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  border-radius: 16px;
+  /* Fix iOS Safari rendering issue */
+  -webkit-transform: translateZ(1px);
+  transform: translateZ(1px);
+}
+
+/* Overlay fade */
+@keyframes holo-overlay-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes holo-overlay-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.holo-card-overlay--entering {
+  animation: holo-overlay-in 0.3s ease-out forwards;
+}
+
+.holo-card-overlay--exiting {
+  animation: holo-overlay-out 0.3s ease-in forwards;
+}
+
+/* Accessibility: Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+  .holo-card {
+    transition: none !important;
+  }
+  .holo-card--entering,
+  .holo-card--exiting {
+    animation: none !important;
+  }
+  .holo-card-overlay--entering,
+  .holo-card-overlay--exiting {
+    animation: none !important;
+  }
+}`
+};
+
+// src/cli/commands/add.ts
+function resolveAllDependencies(names) {
+  const resolved = /* @__PURE__ */ new Map();
+  const queue = [...names];
+  while (queue.length > 0) {
+    const name = queue.shift();
+    if (resolved.has(name)) continue;
+    const comp = getComponent(name);
+    if (!comp) {
+      logger.warn(`Component "${name}" not found in registry. Skipping.`);
+      continue;
+    }
+    resolved.set(name, comp);
+    for (const dep of comp.registryDependencies) {
+      if (!resolved.has(dep)) {
+        queue.push(dep);
+      }
+    }
+  }
+  return Array.from(resolved.values());
+}
+function resolveTargetDir(config, fileType, cwd) {
+  const aliasMap = {
+    component: config.aliases.components,
+    hook: config.aliases.hooks,
+    util: config.aliases.utils
+  };
+  const alias = aliasMap[fileType];
+  if (!alias) return path4.join(cwd, "src", "components", "ui");
+  const match = alias.match(/^@\/(.*)/);
+  if (match) {
+    return path4.join(cwd, "src", match[1]);
+  }
+  const match2 = alias.match(/^~\/(.*)/);
+  if (match2) {
+    return path4.join(cwd, match2[1]);
+  }
+  return path4.join(cwd, alias);
+}
+var addCommand = new Command2("add").description("Add components to your project").argument("[components...]", "Component names to add").option("-c, --category <category>", "Add all components in a category").option("-a, --all", "Add all components").option("-y, --yes", "Skip confirmation prompt").option("--overwrite", "Overwrite existing files").action(async (componentNames, options) => {
+  const cwd = process.cwd();
+  if (!configExists(cwd)) {
+    logger.warn("glintkit.json not found. Running init first...");
+    const { execSync: execSync2 } = await import("child_process");
+    execSync2("npx glintkit init -y", { cwd, stdio: "inherit" });
+  }
+  const config = readConfig(cwd);
+  let requestedNames = [];
+  if (options.all) {
+    requestedNames = REGISTRY.map((c) => c.name);
+  } else if (options.category) {
+    const cats = options.category.split(",");
+    for (const cat of cats) {
+      const comps = getComponentsByCategory(cat.trim());
+      requestedNames.push(...comps.map((c) => c.name));
+    }
+    if (requestedNames.length === 0) {
+      logger.error(`No components found in category "${options.category}"`);
+      logger.info(`Available categories: ${getAllCategories().join(", ")}`);
+      process.exit(1);
+    }
+  } else if (componentNames.length > 0) {
+    requestedNames = componentNames;
+  } else {
+    const response = await prompts2({
+      type: "multiselect",
+      name: "components",
+      message: "Select components to add:",
+      choices: REGISTRY.map((c) => ({
+        title: `${c.name} ${pc2.dim(`(${c.category})`)}`,
+        value: c.name,
+        description: c.description
+      }))
+    });
+    if (!response.components || response.components.length === 0) {
+      logger.error("No components selected.");
+      process.exit(1);
+    }
+    requestedNames = response.components;
+  }
+  for (const name of requestedNames) {
+    if (!getComponent(name)) {
+      logger.error(`Component "${name}" not found.`);
+      logger.info("Run `glintkit list` to see available components.");
+      process.exit(1);
+    }
+  }
+  const allComponents = resolveAllDependencies(requestedNames);
+  const npmDeps = [...new Set(allComponents.flatMap((c) => c.npmDependencies))];
+  const cssPresets = [...new Set(allComponents.flatMap((c) => c.cssPresets))];
+  logger.title("\n  Components to install:\n");
+  for (const comp of allComponents) {
+    const isRequested = requestedNames.includes(comp.name);
+    const marker = isRequested ? pc2.green("\u25CF") : pc2.dim("\u25CB");
+    console.log(`    ${marker} ${comp.name} ${!isRequested ? pc2.dim("(dependency)") : ""}`);
+  }
+  if (npmDeps.length > 0) {
+    logger.break();
+    logger.info(`npm dependencies: ${npmDeps.join(", ")}`);
+  }
+  if (cssPresets.length > 0) {
+    logger.info(`CSS presets: ${cssPresets.join(", ")}`);
+  }
+  if (!options.yes) {
+    logger.break();
+    const confirm = await prompts2({
+      type: "confirm",
+      name: "proceed",
+      message: "Proceed with installation?",
+      initial: true
+    });
+    if (!confirm.proceed) {
+      logger.error("Cancelled.");
+      process.exit(0);
+    }
+  }
+  const spinner = ora("Installing components...").start();
+  let filesWritten = 0;
+  let filesSkipped = 0;
+  for (const comp of allComponents) {
+    for (const file of comp.files) {
+      const targetDir = resolveTargetDir(config, file.type, cwd);
+      const result = writeTemplateFile({
+        templateKey: file.templateKey,
+        targetDir,
+        fileName: file.fileName,
+        config,
+        overwrite: options.overwrite ?? false
+      });
+      if (result.written) {
+        filesWritten++;
+      } else {
+        filesSkipped++;
+      }
+    }
+  }
+  spinner.succeed(`${filesWritten} file(s) written${filesSkipped > 0 ? `, ${filesSkipped} skipped (already exist)` : ""}`);
+  if (npmDeps.length > 0) {
+    const pmSpinner = ora("Installing npm dependencies...").start();
+    try {
+      const pm = detectPackageManager(cwd);
+      installDependencies(npmDeps, pm, cwd);
+      pmSpinner.succeed(`Installed: ${npmDeps.join(", ")}`);
+    } catch (error) {
+      pmSpinner.fail(`Failed to install dependencies: ${error.message}`);
+      logger.info(`You can manually install: ${npmDeps.join(" ")}`);
+    }
+  }
+  if (cssPresets.length > 0) {
+    const cssSpinner = ora("Injecting CSS presets...").start();
+    const cssPath = path4.join(cwd, config.tailwind.css);
+    for (const presetName of cssPresets) {
+      const presetContent = CSS_PRESETS[presetName];
+      if (presetContent) {
+        injectCSSPreset(cssPath, presetName, presetContent);
+      } else {
+        logger.warn(`CSS preset "${presetName}" not found.`);
+      }
+    }
+    cssSpinner.succeed(`Injected ${cssPresets.length} CSS preset(s)`);
+  }
+  logger.break();
+  logger.success("Done! Components are ready to use.");
+  if (filesSkipped > 0) {
+    logger.info(`Use --overwrite to replace existing files.`);
+  }
+  logger.break();
+});
+
+// src/cli/commands/list.ts
+import { Command as Command3 } from "commander";
+import pc3 from "picocolors";
+var listCommand = new Command3("list").description("List all available components").option("-c, --category <category>", "Filter by category").action((options) => {
+  logger.title("\n  glintkit components\n");
+  const categories = options.category ? [options.category] : getAllCategories();
+  for (const category of categories) {
+    const components = getComponentsByCategory(category);
+    if (components.length === 0) continue;
+    console.log(pc3.bold(pc3.yellow(`  ${category.toUpperCase()}`)));
+    for (const comp of components) {
+      const deps = comp.npmDependencies.length > 0 ? pc3.dim(` (${comp.npmDependencies.join(", ")})`) : "";
+      console.log(`    ${pc3.green(comp.name)}${deps}`);
+      console.log(`      ${pc3.dim(comp.description)}`);
+    }
+    console.log();
+  }
+  console.log(pc3.dim(`  Total: ${REGISTRY.length} components
+`));
+});
+
+// src/cli/index.ts
+var program = new Command4();
+program.name("glintkit").description("Add beautiful 3D, glass, and motion components to your project").version("0.1.0");
+program.addCommand(initCommand);
+program.addCommand(addCommand);
+program.addCommand(listCommand);
+program.parse();
+//# sourceMappingURL=index.js.map