@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog/data/metrics.js

@@ -0,0 +1,136 @@
+"use client";
+import {
+  getInstallCommand
+} from "../../catalog-chunks/chunk-VMGI6CMO.js";
+import "../../catalog-chunks/chunk-FXF53HPE.js";
+
+// .generated/catalog/data/metrics.ts
+var metricsData = [
+  // --- INFRASTRUCTURE ---
+  {
+    id: "m-cache-bandwidth",
+    label: "Cacheable Bandwidth Usage & Cost Card",
+    interactionType: "cacheable-bandwidth-cost",
+    description: "CDN cacheable bandwidth breakdown card with cached vs non-cacheable segments and monthly cost.",
+    cliCommand: getInstallCommand("cacheable-bandwidth-cost"),
+    category: "Infrastructure"
+  },
+  {
+    id: "m-net-matrix",
+    label: "Network Telemetry Matrix Dashboard",
+    interactionType: "network-telemetry-matrix",
+    description: "Matrix telemetry dashboard with finality times, intents count, and testnet pixel activity grid.",
+    cliCommand: getInstallCommand("network-telemetry-matrix"),
+    category: "Infrastructure"
+  },
+  {
+    id: "m-progress-piano",
+    label: "Progress Indicator Piano Bar Card",
+    interactionType: "progress-indicator-piano",
+    description: "Piano key progress bar widget with percentage goal readout and completion prediction.",
+    cliCommand: getInstallCommand("progress-indicator-piano"),
+    category: "Infrastructure"
+  },
+  {
+    id: "m-server-step",
+    label: "Server Performance Metrics Step Bar",
+    interactionType: "server-performance-step-bars",
+    description: "Staircase step bar chart with top cap highlights and growth readout.",
+    cliCommand: getInstallCommand("server-performance-step-bars"),
+    category: "Infrastructure"
+  },
+  // --- MARKET & FINANCE ---
+  {
+    id: "m-overview-scrubber",
+    label: "Overview Bar Scrubber Tooltip Card",
+    interactionType: "overview-bar-scrubber-card",
+    description: "Monthly diagonal-stripe bar chart card with active scrubber highlight and interactive tooltip bubble.",
+    cliCommand: getInstallCommand("overview-bar-scrubber-card"),
+    category: "Market & Finance"
+  },
+  {
+    id: "m-sales-dual",
+    label: "Sales Analytics Dual Bar Card",
+    interactionType: "sales-analytics-dual-bars",
+    description: "Dual bar chart card with units sold readout, sales vs earnings legend pills, and monthly active bars.",
+    cliCommand: getInstallCommand("sales-analytics-dual-bars"),
+    category: "Market & Finance"
+  },
+  {
+    id: "m-sales-arc",
+    label: "Sales Target Arc Segment Gauge",
+    interactionType: "sales-target-segmented-arc",
+    description: "Semi-circle segmented radial arc gauge with dual property status blocks and percentage target achieved.",
+    cliCommand: getInstallCommand("sales-target-segmented-arc"),
+    category: "Market & Finance"
+  },
+  {
+    id: "m-sales-radial-dash",
+    label: "Sales Overview Arc & Cards Dashboard",
+    interactionType: "sales-overview-radial-dashboard",
+    description: "Sales overview radial arc gauge dashboard with performer rank banner and dual metric stat cards.",
+    cliCommand: getInstallCommand("sales-overview-radial-dashboard"),
+    category: "Market & Finance"
+  },
+  {
+    id: "m-credit-barcode",
+    label: "Credit Score Vertical Barcode Meter",
+    interactionType: "credit-score-barcode-meter",
+    description: "Credit score meter widget with vertical stroke lines progress bar and timeframe dropdown.",
+    cliCommand: getInstallCommand("credit-score-barcode-meter"),
+    category: "Market & Finance"
+  },
+  {
+    id: "m-mono-stock",
+    label: "Monochrome Stock Ticker",
+    interactionType: "mono-stock",
+    description: "Minimalist black & white stock ticker curve with time filters (1D, 1W, 1M, 1Y).",
+    cliCommand: getInstallCommand("mono-stock"),
+    category: "Market & Finance"
+  },
+  // --- AUDIENCE & GROWTH ---
+  {
+    id: "m-users-pill",
+    label: "Users Growth Pill Progress Widget",
+    interactionType: "users-growth-pill-progress",
+    description: "Dark user acquisition growth widget with star badge, avatar profile, and stacked pill progress bars.",
+    cliCommand: getInstallCommand("users-growth-pill-progress"),
+    category: "Audience & Growth"
+  },
+  {
+    id: "m-views-wave",
+    label: "Views Hourly Wave Chart",
+    interactionType: "views-hourly-wave-chart",
+    description: "Smooth hourly wave curve chart with period filter pills and average reference line.",
+    cliCommand: getInstallCommand("views-hourly-wave-chart"),
+    category: "Audience & Growth"
+  },
+  {
+    id: "m-mono-heatmap",
+    label: "Monochrome Activity Heatmap",
+    interactionType: "mono-heatmap",
+    description: "28-day activity matrix calendar with grayscale commit intensity.",
+    cliCommand: getInstallCommand("mono-heatmap"),
+    category: "Audience & Growth"
+  },
+  // --- PERSONAL & HEALTH ---
+  {
+    id: "m-timer-prep",
+    label: "Preparation Segmented Timer Widget",
+    interactionType: "timer-preparation-segmented",
+    description: "iOS-style preparation timer widget with segmented progress bar and step tooltip.",
+    cliCommand: getInstallCommand("timer-preparation-segmented"),
+    category: "Personal & Health"
+  },
+  {
+    id: "m-noise-level",
+    label: "Noise Decibel Level Meter Widget",
+    interactionType: "noise-decibel-level",
+    description: "Ambient decibel meter widget with signal bars and dual-pill range slider.",
+    cliCommand: getInstallCommand("noise-decibel-level"),
+    category: "Personal & Health"
+  }
+];
+export {
+  metricsData
+};

package/dist/catalog/data/supportedRegistryIds.d.ts

@@ -0,0 +1 @@
+export declare const supportedRegistryIds: readonly string[];

package/dist/catalog/data/supportedRegistryIds.js

@@ -0,0 +1,7 @@
+"use client";
+import {
+  supportedRegistryIds
+} from "../../catalog-chunks/chunk-FXF53HPE.js";
+export {
+  supportedRegistryIds
+};

package/dist/catalog/data/textAnimations.d.ts

@@ -0,0 +1,10 @@
+export type TextInteractionType = 'dia-text-reveal' | 'blur-text' | 'shimmer-text' | 'typewriter-text' | 'reveal-text' | 'fade-in-char' | 'fade-in-word' | 'fade-in-text' | 'blur-up-word' | 'blur-up-char' | 'stagger-text' | 'slide-up-char' | 'slide-up-word' | 'slide-up-text' | 'slide-down-char' | 'slide-down-word' | 'slide-left-char' | 'slide-right-char' | 'drop-in-char' | 'rise-up-word' | 'bounce-in-char' | 'scale-in-char' | 'scale-in-word' | 'scale-in-text' | 'zoom-in-text' | 'zoom-out-text' | 'flip-y-char' | 'flip-x-char' | 'rotate-in-char' | 'swing-word' | 'stretch-x-char' | 'stretch-y-char' | 'skew-x-char' | 'tracking-in-text' | 'tracking-out-text' | 'spring-text' | 'hover-lift-char' | 'hover-lift-word' | 'hover-scale-char' | 'hover-scale-word' | 'float-char' | 'float-word' | 'pulse-char' | 'pulse-word' | 'glow-text';
+export interface TextAnimationConfig {
+    id: string;
+    label: string;
+    interactionType: TextInteractionType;
+    description: string;
+    cliCommand: string;
+    category?: string;
+}
+export declare const textAnimationsData: TextAnimationConfig[];

package/dist/catalog/data/textAnimations.js

@@ -0,0 +1,65 @@
+"use client";
+import {
+  getInstallCommand
+} from "../../catalog-chunks/chunk-VMGI6CMO.js";
+import "../../catalog-chunks/chunk-FXF53HPE.js";
+
+// .generated/catalog/data/textAnimations.ts
+var textAnimationsData = [
+  // Featured
+  { id: "txt-dia", label: "Dia Text Reveal", interactionType: "dia-text-reveal", description: "Striking diagonal text reveal with mask & blur.", cliCommand: getInstallCommand("dia-text-reveal"), category: "Featured" },
+  // Reveals
+  { id: "txt-blur", label: "Blur Text", interactionType: "blur-text", description: "Smooth reveal animation using blur and scale.", cliCommand: "npx @mova-ui/react add blur-text", category: "Reveals" },
+  { id: "txt-shimmer", label: "Shimmer Text", interactionType: "shimmer-text", description: "Elegant shimmering gradient highlight effect.", cliCommand: getInstallCommand("shimmer-text"), category: "Reveals" },
+  { id: "txt-typewriter", label: "Typewriter Text", interactionType: "typewriter-text", description: "Classic typewriter effect with blinking cursor.", cliCommand: getInstallCommand("typewriter-text"), category: "Reveals" },
+  { id: "txt-reveal", label: "Reveal Text", interactionType: "reveal-text", description: "Cinematic reveal using clip-path inset.", cliCommand: getInstallCommand("reveal-text"), category: "Reveals" },
+  { id: "txt-fade-char", label: "Fade In Char", interactionType: "fade-in-char", description: "Characters fade in sequentially.", cliCommand: getInstallCommand("fade-in-char"), category: "Reveals" },
+  { id: "txt-fade-word", label: "Fade In Word", interactionType: "fade-in-word", description: "Words fade in sequentially.", cliCommand: getInstallCommand("fade-in-word"), category: "Reveals" },
+  { id: "txt-fade-text", label: "Fade In Text", interactionType: "fade-in-text", description: "Smooth whole text opacity fade.", cliCommand: getInstallCommand("fade-in-text"), category: "Reveals" },
+  { id: "txt-blurup-word", label: "Blur Up Word", interactionType: "blur-up-word", description: "Words blur and rise into focus.", cliCommand: getInstallCommand("blur-up-word"), category: "Reveals" },
+  { id: "txt-blurup-char", label: "Blur Up Char", interactionType: "blur-up-char", description: "Characters blur and rise into focus.", cliCommand: getInstallCommand("blur-up-char"), category: "Reveals" },
+  // Slide & Drop
+  { id: "txt-stagger", label: "Stagger Text", interactionType: "stagger-text", description: "Words animate up in a staggered sequence.", cliCommand: getInstallCommand("stagger-text"), category: "Slide & Drop" },
+  { id: "txt-slideup-char", label: "Slide Up Char", interactionType: "slide-up-char", description: "Characters slide up from clipping bottom.", cliCommand: getInstallCommand("slide-up-char"), category: "Slide & Drop" },
+  { id: "txt-slideup-word", label: "Slide Up Word", interactionType: "slide-up-word", description: "Words slide up into view.", cliCommand: getInstallCommand("slide-up-word"), category: "Slide & Drop" },
+  { id: "txt-slideup-text", label: "Slide Up Text", interactionType: "slide-up-text", description: "Text block slides up elegantly.", cliCommand: getInstallCommand("slide-up-text"), category: "Slide & Drop" },
+  { id: "txt-slidedown-char", label: "Slide Down Char", interactionType: "slide-down-char", description: "Characters cascade downwards.", cliCommand: getInstallCommand("slide-down-char"), category: "Slide & Drop" },
+  { id: "txt-slidedown-word", label: "Slide Down Word", interactionType: "slide-down-word", description: "Words cascade downwards.", cliCommand: getInstallCommand("slide-down-word"), category: "Slide & Drop" },
+  { id: "txt-slideleft-char", label: "Slide Left Char", interactionType: "slide-left-char", description: "Characters slide from the right.", cliCommand: getInstallCommand("slide-left-char"), category: "Slide & Drop" },
+  { id: "txt-slideright-char", label: "Slide Right Char", interactionType: "slide-right-char", description: "Characters slide from the left.", cliCommand: getInstallCommand("slide-right-char"), category: "Slide & Drop" },
+  { id: "txt-dropin-char", label: "Drop In Char", interactionType: "drop-in-char", description: "Characters drop in from above.", cliCommand: getInstallCommand("drop-in-char"), category: "Slide & Drop" },
+  { id: "txt-riseup-word", label: "Rise Up Word", interactionType: "rise-up-word", description: "Words rise up gracefully with spring.", cliCommand: getInstallCommand("rise-up-word"), category: "Slide & Drop" },
+  { id: "txt-bouncein-char", label: "Bounce In Char", interactionType: "bounce-in-char", description: "Characters bounce into position.", cliCommand: getInstallCommand("bounce-in-char"), category: "Slide & Drop" },
+  // Scale & Zoom
+  { id: "txt-scalein-char", label: "Scale In Char", interactionType: "scale-in-char", description: "Characters scale up into place.", cliCommand: getInstallCommand("scale-in-char"), category: "Scale & Zoom" },
+  { id: "txt-scalein-word", label: "Scale In Word", interactionType: "scale-in-word", description: "Words scale up into place.", cliCommand: getInstallCommand("scale-in-word"), category: "Scale & Zoom" },
+  { id: "txt-scalein-text", label: "Scale In Text", interactionType: "scale-in-text", description: "Whole text block scales up.", cliCommand: getInstallCommand("scale-in-text"), category: "Scale & Zoom" },
+  { id: "txt-zoomin-text", label: "Zoom In Text", interactionType: "zoom-in-text", description: "Text zooms in subtly from background.", cliCommand: getInstallCommand("zoom-in-text"), category: "Scale & Zoom" },
+  { id: "txt-zoomout-text", label: "Zoom Out Text", interactionType: "zoom-out-text", description: "Text zooms out subtly into focus.", cliCommand: getInstallCommand("zoom-out-text"), category: "Scale & Zoom" },
+  // 3D & Rotate
+  { id: "txt-flipy-char", label: "Flip Y Char", interactionType: "flip-y-char", description: "Characters flip on Y axis.", cliCommand: getInstallCommand("flip-y-char"), category: "3D & Rotate" },
+  { id: "txt-flipx-char", label: "Flip X Char", interactionType: "flip-x-char", description: "Characters flip on X axis.", cliCommand: getInstallCommand("flip-x-char"), category: "3D & Rotate" },
+  { id: "txt-rotatein-char", label: "Rotate In Char", interactionType: "rotate-in-char", description: "Characters rotate slightly as they enter.", cliCommand: getInstallCommand("rotate-in-char"), category: "3D & Rotate" },
+  { id: "txt-swing-word", label: "Swing Word", interactionType: "swing-word", description: "Words swing into place like a pendulum.", cliCommand: getInstallCommand("swing-word"), category: "3D & Rotate" },
+  // Distortion & Spacing
+  { id: "txt-stretchx-char", label: "Stretch X Char", interactionType: "stretch-x-char", description: "Characters stretch horizontally.", cliCommand: getInstallCommand("stretch-x-char"), category: "Distortion & Spacing" },
+  { id: "txt-stretchy-char", label: "Stretch Y Char", interactionType: "stretch-y-char", description: "Characters stretch vertically.", cliCommand: getInstallCommand("stretch-y-char"), category: "Distortion & Spacing" },
+  { id: "txt-skewx-char", label: "Skew X Char", interactionType: "skew-x-char", description: "Characters un-skew into position.", cliCommand: getInstallCommand("skew-x-char"), category: "Distortion & Spacing" },
+  { id: "txt-trackingin-text", label: "Tracking In Text", interactionType: "tracking-in-text", description: "Letter spacing tightens smoothly.", cliCommand: getInstallCommand("tracking-in-text"), category: "Distortion & Spacing" },
+  { id: "txt-trackingout-text", label: "Tracking Out Text", interactionType: "tracking-out-text", description: "Letter spacing loosens smoothly.", cliCommand: getInstallCommand("tracking-out-text"), category: "Distortion & Spacing" },
+  // Hover & Interactive
+  { id: "txt-spring-text", label: "Spring Text", interactionType: "spring-text", description: "Interactive text that springs on hover.", cliCommand: getInstallCommand("spring-text"), category: "Hover & Interactive" },
+  { id: "txt-hoverlift-char", label: "Hover Lift Char", interactionType: "hover-lift-char", description: "Characters lift vertically on hover.", cliCommand: getInstallCommand("hover-lift-char"), category: "Hover & Interactive" },
+  { id: "txt-hoverlift-word", label: "Hover Lift Word", interactionType: "hover-lift-word", description: "Words lift vertically on hover.", cliCommand: getInstallCommand("hover-lift-word"), category: "Hover & Interactive" },
+  { id: "txt-hoverscale-char", label: "Hover Scale Char", interactionType: "hover-scale-char", description: "Characters scale up on hover.", cliCommand: getInstallCommand("hover-scale-char"), category: "Hover & Interactive" },
+  { id: "txt-hoverscale-word", label: "Hover Scale Word", interactionType: "hover-scale-word", description: "Words scale up on hover.", cliCommand: getInstallCommand("hover-scale-word"), category: "Hover & Interactive" },
+  // Continuous
+  { id: "txt-float-char", label: "Float Char", interactionType: "float-char", description: "Characters float gently up and down.", cliCommand: getInstallCommand("float-char"), category: "Continuous" },
+  { id: "txt-float-word", label: "Float Word", interactionType: "float-word", description: "Words float gently up and down.", cliCommand: getInstallCommand("float-word"), category: "Continuous" },
+  { id: "txt-pulse-char", label: "Pulse Char", interactionType: "pulse-char", description: "Characters pulse in opacity continuously.", cliCommand: getInstallCommand("pulse-char"), category: "Continuous" },
+  { id: "txt-pulse-word", label: "Pulse Word", interactionType: "pulse-word", description: "Words pulse in opacity continuously.", cliCommand: getInstallCommand("pulse-word"), category: "Continuous" },
+  { id: "txt-glow-text", label: "Glow Text", interactionType: "glow-text", description: "Text glows with soft aura ambient light.", cliCommand: getInstallCommand("glow-text"), category: "Continuous" }
+];
+export {
+  textAnimationsData
+};

package/dist/catalog/data/toggles.d.ts

@@ -0,0 +1,9 @@
+export type ToggleInteractionType = 'double-bounce-toggle' | 'solid-switch' | 'rectangle-toggle' | 'circle-toggle' | 'bookmark-toggle' | 'like-toggle' | 'dislike-toggle' | 'repost-toggle' | 'pill-tabs' | 'morph-toggle' | 'checkmark-draw' | 'theme-toggle';
+export interface ToggleConfig {
+    id: string;
+    label: string;
+    interactionType: ToggleInteractionType;
+    description: string;
+    cliCommand: string;
+}
+export declare const togglesData: ToggleConfig[];

package/dist/catalog/data/toggles.js

@@ -0,0 +1,96 @@
+"use client";
+import {
+  getInstallCommand
+} from "../../catalog-chunks/chunk-VMGI6CMO.js";
+import "../../catalog-chunks/chunk-FXF53HPE.js";
+
+// .generated/catalog/data/toggles.ts
+var togglesData = [
+  {
+    id: "t-bounce",
+    label: "Double Bounce Switch",
+    interactionType: "double-bounce-toggle",
+    description: "Transitions.dev double bounce overshoot physics with custom track clock.",
+    cliCommand: getInstallCommand("double-bounce-toggle")
+  },
+  {
+    id: "t-solid",
+    label: "Solid Switch",
+    interactionType: "solid-switch",
+    description: "Crisp, high-contrast toggle with instant response.",
+    cliCommand: getInstallCommand("solid-switch")
+  },
+  {
+    id: "t-rect",
+    label: "Rectangle Toggle",
+    interactionType: "rectangle-toggle",
+    description: "Minimal squarish toggle with sharp border radiuses.",
+    cliCommand: getInstallCommand("rectangle-toggle")
+  },
+  {
+    id: "t-circle",
+    label: "Circle Curve Toggle",
+    interactionType: "circle-toggle",
+    description: "Ultra smooth circular pill switch with spring momentum.",
+    cliCommand: getInstallCommand("circle-toggle")
+  },
+  {
+    id: "t-bookmark",
+    label: "Bookmark Action",
+    interactionType: "bookmark-toggle",
+    description: "Interactive save bookmark button with color fill & pop.",
+    cliCommand: getInstallCommand("bookmark-toggle")
+  },
+  {
+    id: "t-like",
+    label: "Like Action",
+    interactionType: "like-toggle",
+    description: "Heart like button with spring burst & particle ring.",
+    cliCommand: getInstallCommand("like-toggle")
+  },
+  {
+    id: "t-dislike",
+    label: "Dislike Action",
+    interactionType: "dislike-toggle",
+    description: "Thumbs down action button with active state highlight.",
+    cliCommand: getInstallCommand("dislike-toggle")
+  },
+  {
+    id: "t-repost",
+    label: "Repost Action",
+    interactionType: "repost-toggle",
+    description: "Retweet / Repost button with 180\xB0 rotation & count update.",
+    cliCommand: getInstallCommand("repost-toggle")
+  },
+  {
+    id: "t-pill",
+    label: "Pill Tabs Switcher",
+    interactionType: "pill-tabs",
+    description: "Minimalist sliding indicator tab switcher (Daily / Weekly / Monthly).",
+    cliCommand: getInstallCommand("pill-tabs")
+  },
+  {
+    id: "t-morph",
+    label: "Morph Toggle",
+    interactionType: "morph-toggle",
+    description: "Icon morphs cleanly between locked and unlocked states.",
+    cliCommand: getInstallCommand("morph-toggle")
+  },
+  {
+    id: "t-check",
+    label: "Checkmark Draw",
+    interactionType: "checkmark-draw",
+    description: "Sharp vector SVG checkmark path animation on activation.",
+    cliCommand: getInstallCommand("checkmark-draw")
+  },
+  {
+    id: "t-theme",
+    label: "Theme Toggle",
+    interactionType: "theme-toggle",
+    description: "Minimal sun/moon swap with background transition.",
+    cliCommand: getInstallCommand("theme-toggle")
+  }
+];
+export {
+  togglesData
+};

package/dist/catalog/data/transitions.d.ts

@@ -0,0 +1,11 @@
+export type TransitionCategory = 'Spatial Doors' | 'Liquid Waves' | 'Iris & Masks' | 'Glass & Layers';
+export interface TransitionPreset {
+    id: string;
+    name: string;
+    category: TransitionCategory;
+    description: string;
+    cliCommand: string;
+    code: string;
+}
+export declare const transitionCategories: TransitionCategory[];
+export declare const transitionsData: TransitionPreset[];

package/dist/catalog/data/transitions.js

@@ -0,0 +1,198 @@
+"use client";
+import {
+  getInstallCommand
+} from "../../catalog-chunks/chunk-VMGI6CMO.js";
+import "../../catalog-chunks/chunk-FXF53HPE.js";
+
+// .generated/catalog/data/transitions.ts
+var transitionCategories = [
+  "Spatial Doors",
+  "Liquid Waves",
+  "Iris & Masks",
+  "Glass & Layers"
+];
+var transitionsData = [
+  {
+    id: "spatial-door-portal",
+    name: "3D Spatial Door Portal",
+    category: "Spatial Doors",
+    description: "Luxury 3D dual perspective door panels opening inward with smooth depth spring curves and subtle drop shadows.",
+    cliCommand: getInstallCommand("spatial-door-portal"),
+    code: `import React from 'react';
+import { motion } from 'framer-motion';
+
+export const SpatialDoorPortal = ({ isVisible }: { isVisible: boolean }) => (
+  <div className="fixed inset-0 z-50 pointer-events-none [perspective:1200px] flex overflow-hidden">
+    <motion.div
+      initial={{ rotateY: 0 }}
+      animate={isVisible ? { rotateY: -85, x: "-10%" } : { rotateY: 0, x: "0%" }}
+      transition={{ duration: 0.75, ease: [0.16, 1, 0.3, 1] }}
+      className="w-1/2 h-full bg-[#181818] origin-left border-r border-white/10 shadow-2xl"
+    />
+    <motion.div
+      initial={{ rotateY: 0 }}
+      animate={isVisible ? { rotateY: 85, x: "10%" } : { rotateY: 0, x: "0%" }}
+      transition={{ duration: 0.75, ease: [0.16, 1, 0.3, 1] }}
+      className="w-1/2 h-full bg-[#181818] origin-right border-l border-white/10 shadow-2xl"
+    />
+  </div>
+);`
+  },
+  {
+    id: "french-doors-3d",
+    name: "3D Architectural French Doors",
+    category: "Spatial Doors",
+    description: "Dual 3D origin French doors unfolding outward with realistic perspective depth and lighting.",
+    cliCommand: getInstallCommand("french-doors-3d"),
+    code: `import React from 'react';
+import { motion } from 'framer-motion';
+
+export const FrenchDoors3D = ({ isVisible }: { isVisible: boolean }) => (
+  <div className="fixed inset-0 z-50 pointer-events-none [perspective:1400px] flex overflow-hidden">
+    <motion.div
+      initial={{ rotateY: 90, opacity: 0 }}
+      animate={isVisible ? { rotateY: 0, opacity: 1 } : { rotateY: 90, opacity: 0 }}
+      transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+      className="w-1/2 h-full bg-[#1c1c1e] origin-right border-r border-white/15 shadow-2xl"
+    />
+    <motion.div
+      initial={{ rotateY: -90, opacity: 0 }}
+      animate={isVisible ? { rotateY: 0, opacity: 1 } : { rotateY: -90, opacity: 0 }}
+      transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+      className="w-1/2 h-full bg-[#1c1c1e] origin-left border-l border-white/15 shadow-2xl"
+    />
+  </div>
+);`
+  },
+  {
+    id: "obsidian-liquid-wave",
+    name: "Obsidian Liquid Bezier Wave",
+    category: "Liquid Waves",
+    description: "Multi-layered organic fluid wave wipe crafted with cubic bezier noise curves and glass gradients.",
+    cliCommand: getInstallCommand("obsidian-liquid-wave"),
+    code: `import React, { useEffect, useRef } from 'react';
+
+export const ObsidianLiquidWave = ({ isVisible }: { isVisible: boolean }) => {
+  const pathRefs = useRef<(SVGPathElement | null)[]>([]);
+
+  useEffect(() => {
+    if (!isVisible) return;
+    let animId: number;
+    const numPoints = 12;
+    const numPaths = 3;
+    const startTime = performance.now();
+
+    const delays = Array.from({ length: numPaths }, (_, i) => 
+      Array.from({ length: numPoints }, () => i * 0.08 + Math.random() * 0.15)
+    );
+
+    const animateFrame = (now: number) => {
+      const elapsedSec = (now - startTime) / 1000;
+      pathRefs.current.forEach((path, i) => {
+        if (!path) return;
+        const stepX = 100 / (numPoints - 1);
+        const pointsY = delays[i].map(delay => {
+          const rawProgress = Math.max(0, Math.min(1, (elapsedSec - delay) / 0.65));
+          const easeProgress = rawProgress < 0.5 ? 2 * rawProgress * rawProgress : 1 - Math.pow(-2 * rawProgress + 2, 2) / 2;
+          return 100 - easeProgress * 110;
+        });
+
+        let d = \`M 0 100 V \${pointsY[0]}\`;
+        for (let j = 0; j < numPoints - 1; j++) {
+          const currentX = j * stepX;
+          const nextX = (j + 1) * stepX;
+          const cpX = currentX + stepX * 0.5;
+          d += \` C \${cpX} \${pointsY[j]} \${cpX} \${pointsY[j+1]} \${nextX} \${pointsY[j+1]}\`;
+        }
+        d += \` V 100 H 0 Z\`;
+        path.setAttribute("d", d);
+      });
+
+      if ((now - startTime) < 1300) {
+        animId = requestAnimationFrame(animateFrame);
+      }
+    };
+
+    animId = requestAnimationFrame(animateFrame);
+    return () => cancelAnimationFrame(animId);
+  }, [isVisible]);
+
+  return (
+    <svg className="fixed inset-0 w-full h-full pointer-events-none z-50" viewBox="0 0 100 100" preserveAspectRatio="none">
+      <path ref={(el) => { pathRefs.current[0] = el; }} fill="#262626" style={{ opacity: 0.6 }} />
+      <path ref={(el) => { pathRefs.current[1] = el; }} fill="#1c1c1c" style={{ opacity: 0.85 }} />
+      <path ref={(el) => { pathRefs.current[2] = el; }} fill="#121212" />
+    </svg>
+  );
+};`
+  },
+  {
+    id: "radial-iris-mask",
+    name: "Radial Iris Portal",
+    category: "Iris & Masks",
+    description: "Smooth expanding circular iris portal revealing the next view from center with spring momentum.",
+    cliCommand: getInstallCommand("radial-iris-mask"),
+    code: `import React from 'react';
+import { motion } from 'framer-motion';
+
+export const RadialIrisPortal = ({ isVisible }: { isVisible: boolean }) => (
+  <motion.div 
+    className="fixed inset-0 z-50 bg-[#121212] pointer-events-none origin-center"
+    style={{ clipPath: 'circle(150% at 50% 50%)' }}
+    initial={{ clipPath: 'circle(0% at 50% 50%)' }}
+    animate={isVisible ? { clipPath: 'circle(150% at 50% 50%)' } : { clipPath: 'circle(0% at 50% 50%)' }}
+    transition={{ duration: 0.75, ease: [0.16, 1, 0.3, 1] }}
+  />
+);`
+  },
+  {
+    id: "perspective-flip-stage",
+    name: "3D Perspective Card Stage",
+    category: "Spatial Doors",
+    description: "3D spatial card flip stage with elevation depth transform and realistic drop shadow.",
+    cliCommand: getInstallCommand("perspective-flip-stage"),
+    code: `import React from 'react';
+import { motion } from 'framer-motion';
+
+export const PerspectiveCardStage = ({ isVisible }: { isVisible: boolean }) => (
+  <div className="fixed inset-0 z-50 pointer-events-none [perspective:1000px] flex items-center justify-center">
+    <motion.div
+      initial={{ rotateX: 90, scale: 0.85, opacity: 0 }}
+      animate={isVisible ? { rotateX: 0, scale: 1, opacity: 1 } : { rotateX: -90, scale: 0.85, opacity: 0 }}
+      transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
+      className="w-full h-full bg-[#181818] border border-white/10 shadow-2xl"
+    />
+  </div>
+);`
+  },
+  {
+    id: "staggered-glass-curtain",
+    name: "Layered Glass Curtain",
+    category: "Glass & Layers",
+    description: "5 staggered frosted obsidian glass columns sliding vertically with spring timing physics.",
+    cliCommand: getInstallCommand("staggered-glass-curtain"),
+    code: `import React from 'react';
+import { motion } from 'framer-motion';
+
+const COLUMNS = 5;
+const EASING = [0.83, 0, 0.17, 1];
+
+export const LayeredGlassCurtain = ({ isVisible }: { isVisible: boolean }) => (
+  <motion.div className="fixed inset-0 z-50 flex pointer-events-none overflow-hidden">
+    {[...Array(COLUMNS)].map((_, i) => (
+      <motion.div
+        key={i}
+        initial={{ y: "-100%" }}
+        animate={isVisible ? { y: "0%" } : { y: "-100%" }}
+        transition={{ duration: 0.65, ease: EASING, delay: i * 0.05 }}
+        className="h-full flex-1 bg-[#181818]/95 backdrop-blur-md border-r border-white/5 last:border-r-0"
+      />
+    ))}
+  </motion.div>
+);`
+  }
+];
+export {
+  transitionCategories,
+  transitionsData
+};

package/dist/catalog/hooks/useCanvasSetup.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from 'react';
+interface CanvasRect {
+    width: number;
+    height: number;
+}
+interface UseCanvasSetupResult {
+    canvasRef: RefObject<HTMLCanvasElement>;
+    /** Cached canvas logical size — updated by ResizeObserver, never from getBoundingClientRect inside RAF */
+    rect: RefObject<CanvasRect>;
+    /** true when the canvas is in the viewport (IntersectionObserver) */
+    isVisible: RefObject<boolean>;
+    /** true when prefers-reduced-motion is active — read once on mount */
+    reducedMotion: boolean;
+}
+/**
+ * Shared canvas performance hook.
+ *
+ * Responsibilities:
+ * - Caches logical canvas size via ResizeObserver (avoids layout reflow per frame)
+ * - Pauses animation when canvas is scrolled off-screen (IntersectionObserver)
+ * - Pauses animation when the browser tab is hidden (visibilitychange)
+ * - Reads prefers-reduced-motion ONCE on mount (not per frame)
+ */
+export declare function useCanvasSetup(): UseCanvasSetupResult;
+export {};

package/dist/catalog/hooks/useCanvasSetup.js

@@ -0,0 +1,7 @@
+"use client";
+import {
+  useCanvasSetup
+} from "../../catalog-chunks/chunk-GDCQNKP7.js";
+export {
+  useCanvasSetup
+};

package/dist/catalog/hooks/useIsMobile.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Custom hook to detect mobile viewport (< 768px by default).
+ * Used to disable heavy animations and optimize rendering on mobile devices.
+ */
+export declare function useIsMobile(breakpoint?: number): boolean;

package/dist/catalog/hooks/useIsMobile.js

@@ -0,0 +1,7 @@
+"use client";
+import {
+  useIsMobile
+} from "../../catalog-chunks/chunk-SWPGAN45.js";
+export {
+  useIsMobile
+};

package/dist/catalog/hooks/useLoopFlg.d.ts

@@ -0,0 +1 @@
+export default function useLoopFlg(enable?: boolean, interval?: number): number;

package/dist/catalog/hooks/useLoopFlg.js

@@ -0,0 +1,7 @@
+"use client";
+import {
+  useLoopFlg
+} from "../../catalog-chunks/chunk-KTP5OAIN.js";
+export {
+  useLoopFlg as default
+};

package/dist/catalog/hooks/useWebHaptics.d.ts

@@ -0,0 +1,4 @@
+export type HapticsType = 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error';
+export declare function useWebHaptics(): {
+    trigger: (type?: HapticsType) => boolean;
+};

package/dist/catalog/hooks/useWebHaptics.js

@@ -0,0 +1,7 @@
+"use client";
+import {
+  useWebHaptics
+} from "../../catalog-chunks/chunk-EC4R54F3.js";
+export {
+  useWebHaptics
+};

package/dist/catalog/utils/cn.d.ts

@@ -0,0 +1 @@
+export declare function cn(...classes: (string | boolean | undefined | null)[]): string;

package/dist/catalog/utils/cn.js

@@ -0,0 +1,7 @@
+"use client";
+import {
+  cn
+} from "../../catalog-chunks/chunk-OTFAZXKB.js";
+export {
+  cn
+};