@launchui/launch-ui 1.0.1 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchui/launch-ui",
-  "version": "1.0.1",
+  "version": "1.0.7",
   "description": "A shadcn/ui inspired CLI component installer for Next, Vite, React, Astro.",
   "type": "module",
   "main": "./dist/index.js",

package/registry/components/3d-card/3d-card-2.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import React, { createContext, useState, useContext, useRef, useEffect } from "react";
+import { motion, useMotionValue, useSpring, useTransform } from "motion/react";
+
+const MouseEnterContext = createContext<[boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined>(undefined);
+
+/**
+ * The main provider managing the perspective grid and mouse rotation values.
+ */
+export const CardContainer = ({
+  children,
+  className,
+  containerClassName,
+  style,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+  style?: React.CSSProperties;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isMouseEntered, setIsMouseEntered] = useState(false);
+
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  const springX = useSpring(x, { stiffness: 150, damping: 15 });
+  const springY = useSpring(y, { stiffness: 150, damping: 15 });
+
+  const rotateX = useTransform(springY, [-0.5, 0.5], [15, -15]);
+  const rotateY = useTransform(springX, [-0.5, 0.5], [-15, 15]);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return;
+    const { left, top, width, height } = containerRef.current.getBoundingClientRect();
+    
+    const currentX = (e.clientX - left) / width - 0.5;
+    const currentY = (e.clientY - top) / height - 0.5;
+    
+    x.set(currentX);
+    y.set(currentY);
+  };
+
+  const handleMouseEnter = () => {
+    setIsMouseEntered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsMouseEntered(false);
+    x.set(0);
+    y.set(0);
+  };
+
+  return (
+    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
+      <div
+        className={`flex items-center justify-center ${containerClassName}`}
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <motion.div
+          ref={containerRef}
+          onMouseEnter={handleMouseEnter}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          style={{
+            transformStyle: "preserve-3d",
+            rotateX,
+            rotateY,
+            ...style
+          }}
+          className={`flex items-center justify-center relative transition-all duration-200 ease-linear ${className}`}
+        >
+          {children}
+        </motion.div>
+      </div>
+    </MouseEnterContext.Provider>
+  );
+};
+
+/**
+ * The inner canvas preserving standard layout properties while inheriting perspective physics.
+ */
+export const CardBody = ({
+  children,
+  className,
+  style,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}) => {
+  return (
+    <div
+      style={{
+        transformStyle: "preserve-3d",
+        ...style
+      }}
+      className={`[transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d] ${className}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+/**
+ * High level utility granting elements elevation along the Z axis dynamically triggered on hover.
+ */
+export const CardItem = ({
+  as: Tag = "div",
+  children,
+  className,
+  translateX = 0,
+  translateY = 0,
+  translateZ = 0,
+  rotateX = 0,
+  rotateY = 0,
+  rotateZ = 0,
+  ...rest
+}: {
+  as?: any;
+  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]: any;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const context = useContext(MouseEnterContext);
+  const isMouseEntered = context ? context[0] : false;
+
+  useEffect(() => {
+    handleAnimations();
+  }, [isMouseEntered]);
+
+  const handleAnimations = () => {
+    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)`;
+    }
+  };
+
+  return (
+    <Tag
+      ref={ref}
+      className={`transition duration-200 ease-out ${className}`}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+/**
+ * SECOND VARIANT: Implements complex rotation offsets on inner components.
+ */
+interface ThreeDCard2Props {
+  title?: string;
+  description?: string;
+  imageUrl?: string;
+  ctaText?: string;
+  ctaHref?: string;
+  actionText?: string;
+  actionHref?: string;
+  className?: string;
+  containerClassName?: string;
+  style?: React.CSSProperties;
+}
+
+export function ThreeDCard2({
+  title = "Make things float in air",
+  description = "Hover over this card to unleash the power of CSS perspective",
+  imageUrl = "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop",
+  ctaText = "Try now \u2192",
+  ctaHref = "#",
+  actionText = "Sign up",
+  actionHref = "#",
+  className,
+  containerClassName,
+  style
+}: ThreeDCard2Props) {
+  return (
+    <CardContainer className={`inter-var w-full flex justify-center items-center ${containerClassName}`}>
+      <CardBody 
+        style={style}
+        className={`bg-gray-50 relative group/card dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-full max-w-[22rem] sm:max-w-[30rem] h-auto rounded-xl p-6 border ${className}`}
+      >
+        
+        {/* Title Elevated */}
+        <CardItem
+          translateZ="50"
+          className="text-xl font-bold text-neutral-600 dark:text-white"
+        >
+          {title}
+        </CardItem>
+
+        {/* Description Elevated slightly less */}
+        <CardItem
+          as="p"
+          translateZ="60"
+          className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
+        >
+          {description}
+        </CardItem>
+
+        {/* ADVANCED VARIANT: imagery uses explicit rotateX and rotateZ defaults on top of Z depth */}
+        <CardItem 
+          translateZ="100" 
+          rotateX={20}
+          rotateZ={-10}
+          className="w-full mt-4"
+        >
+          <img
+            src={imageUrl}
+            height="1000"
+            width="1000"
+            className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl"
+            alt="thumbnail"
+          />
+        </CardItem>
+
+        {/* Footer actions stack */}
+        <div className="flex justify-between items-center mt-20">
+          
+          {/* ADVANCED VARIANT: uses negative horizontal translation on trigger */}
+          <CardItem
+            translateZ={20}
+            translateX={-40}
+            as="a"
+            href={ctaHref}
+            className="px-4 py-2 rounded-xl text-xs font-normal text-black dark:text-white hover:underline underline-offset-4 cursor-pointer inline-block"
+          >
+            {ctaText}
+          </CardItem>
+
+          {/* ADVANCED VARIANT: uses positive horizontal translation on trigger */}
+          <CardItem
+            translateZ={20}
+            translateX={40}
+            as="a"
+            href={actionHref}
+            className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold shadow-md transition-all active:scale-95 cursor-pointer inline-block"
+          >
+            {actionText}
+          </CardItem>
+        </div>
+      </CardBody>
+    </CardContainer>
+  );
+}

package/registry/components/3d-pin-card/3d-pin-card.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import React, { useState } from "react";
+import { motion } from "motion/react";
+
+/**
+ * Internal utility replacing external lib requirements ensuring zero-friction installations.
+ */
+const cn = (...classes: any[]) => {
+  return classes.filter(Boolean).join(" ");
+};
+
+export const PinContainer = ({
+  children,
+  title,
+  href,
+  className,
+  containerClassName,
+}: {
+  children: React.ReactNode;
+  title?: string;
+  href?: string;
+  className?: string;
+  containerClassName?: string;
+}) => {
+  const [transform, setTransform] = useState(
+    "translate(-50%,-50%) rotateX(0deg)"
+  );
+
+  const onMouseEnter = () => {
+    setTransform("translate(-50%,-50%) rotateX(40deg) scale(0.8)");
+  };
+  const onMouseLeave = () => {
+    setTransform("translate(-50%,-50%) rotateX(0deg) scale(1)");
+  };
+
+  return (
+    <a
+      className={cn(
+        "relative group/pin z-50  cursor-pointer",
+        containerClassName
+      )}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      href={href || "/"}
+    >
+      <div
+        style={{
+          perspective: "1000px",
+          transform: "rotateX(70deg) translateZ(0deg)",
+        }}
+        className="absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2"
+      >
+        <div
+          style={{
+            transform: transform,
+          }}
+          className="absolute left-1/2 p-4 top-1/2  flex justify-start items-start  rounded-2xl  shadow-[0_8px_16px_rgb(0_0_0/0.4)] bg-black border border-white/[0.1] group-hover/pin:border-white/[0.2] transition duration-700 overflow-hidden"
+        >
+          <div className={cn(" relative z-50 ", className)}>{children}</div>
+        </div>
+      </div>
+      <PinPerspective title={title} href={href} />
+    </a>
+  );
+};
+
+export const PinPerspective = ({
+  title,
+  href,
+}: {
+  title?: string;
+  href?: string;
+}) => {
+  return (
+    <motion.div className="pointer-events-none  w-96 h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500">
+      <div className=" w-full h-full -mt-7 flex-none  inset-0">
+        <div className="absolute top-0 inset-x-0  flex justify-center">
+          <a
+            href={href}
+            target={"_blank"}
+            className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 "
+          >
+            <span className="relative z-20 text-white text-xs font-bold inline-block py-0.5">
+              {title}
+            </span>
+
+            <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40"></span>
+          </a>
+        </div>
+
+        <div
+          style={{
+            perspective: "1000px",
+            transform: "rotateX(70deg) translateZ(0)",
+          }}
+          className="absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2"
+        >
+          <>
+            <motion.div
+              initial={{
+                opacity: 0,
+                scale: 0,
+                x: "-50%",
+                y: "-50%",
+              }}
+              animate={{
+                opacity: [0, 1, 0.5, 0],
+                scale: 1,
+
+                z: 0,
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                delay: 0,
+              }}
+              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+            ></motion.div>
+            <motion.div
+              initial={{
+                opacity: 0,
+                scale: 0,
+                x: "-50%",
+                y: "-50%",
+              }}
+              animate={{
+                opacity: [0, 1, 0.5, 0],
+                scale: 1,
+
+                z: 0,
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                delay: 2,
+              }}
+              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+            ></motion.div>
+            <motion.div
+              initial={{
+                opacity: 0,
+                scale: 0,
+                x: "-50%",
+                y: "-50%",
+              }}
+              animate={{
+                opacity: [0, 1, 0.5, 0],
+                scale: 1,
+
+                z: 0,
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                delay: 4,
+              }}
+              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+            ></motion.div>
+          </>
+        </div>
+
+        <>
+          <motion.div className="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40 blur-[2px]" />
+          <motion.div className="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40  " />
+          <motion.div className="absolute right-1/2 translate-x-[1.5px] bottom-1/2 bg-cyan-600 translate-y-[14px] w-[4px] h-[4px] rounded-full z-40 blur-[3px]" />
+          <motion.div className="absolute right-1/2 translate-x-[0.5px] bottom-1/2 bg-cyan-300 translate-y-[14px] w-[2px] h-[2px] rounded-full z-40 " />
+        </>
+      </div>
+    </motion.div>
+  );
+};