feat: add Badge component and implement MomentumLines and FlashlightTabs animations

Author: code-env

src/components/animations/component-preview.tsx

@@ -1,18 +1,21 @@
 import { cn } from "@/lib/utils";
+import { ExternalLink } from "lucide-react";
 import React, { useState } from "react";
 
 interface ComponentPreviewProps {
   children: React.ReactNode;
   height?: number;
   notReady?: boolean;
   className?: string;
+  href?: string;
 }
 
 const ComponentPreview = ({
   children,
   height,
   notReady,
   className,
+  href,
 }: ComponentPreviewProps) => {
   const [minHeight] = useState<number>(500);
 
@@ -23,14 +26,32 @@ const ComponentPreview = ({
       <div className="w-full border-y relative flex items-center justify-center">
         <div
           className={cn(
-            "max-w-screen-lg w-full flex items-center justify-center relative p-2 bg-muted border-x",
-            className,
+            "max-w-screen-lg w-full flex items-center justify-center relative p-2 bg-muted border-x group",
+            className
           )}
           style={{
-            height: `${Math.max(100, height ? minHeight + height : minHeight)}px`,
+            height: `${Math.max(
+              100,
+              height ? minHeight + height : minHeight
+            )}px`,
           }}
         >
           {children}
+          {href && (
+            <a
+              href={href}
+              target="_blank"
+              className={cn(
+                "absolute top-0 right-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 border border-t-0 border-r-0 bg-red-50 px-2 py-0.5",
+                "flex items-center gap-2"
+              )}
+            >
+              <p className="flex items-center gap-2 text-sm">
+                <span>Inspiration </span>
+                <ExternalLink className="size-4 " />
+              </p>
+            </a>
+          )}
         </div>
       </div>
     </div>

src/components/animations/light.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { motion } from "motion/react";
+import { Fragment, useState } from "react";
+
+const tabs = [
+  { id: "home", label: "Home" },
+  { id: "blog", label: "Blog" },
+  { id: "about", label: "About" },
+  { id: "work", label: "Work" },
+  { id: "contact", label: "Contact" },
+];
+
+const FlashlightTabs = () => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  return (
+    <article className="grid aspect-video place-items-center rounded-xl border border-white/10 bg-white/5">
+      <nav className="relative isolate">
+        <ul className="flex overflow-hidden rounded-full border border-white/30 bg-text-light-accent p-1.5">
+          {tabs.map((tab, index) => (
+            <li key={tab.id} className="group relative isolate">
+              <button
+                onClick={() => setActiveTab(index)}
+                className={`relative z-10 px-4 py-2 text-sm font-medium transition-all duration-300 ${
+                  activeTab === index
+                    ? "text-white [text-shadow:rgba(255,255,255,0.5)_1px_1px_12px]"
+                    : "text-white/70 hover:text-white"
+                }`}
+              >
+                {tab.label}
+              </button>
+              {activeTab === index && (
+                <Fragment>
+                  <motion.div
+                    layoutId="active-pill"
+                    className="absolute inset-0 rounded-full bg-white/5 group-first-of-type:rounded-l-3xl group-first-of-type:rounded-r-md group-last-of-type:rounded-l-md group-last-of-type:rounded-r-3xl"
+                    style={{ zIndex: -1 }}
+                    transition={{
+                      type: "spring",
+                      duration: 0.7,
+                    }}
+                  />
+                  <motion.div
+                    layoutId="active-shade"
+                    className="absolute -bottom-[90px] left-0 h-[100px] w-full rounded-full bg-white/10 blur-[7px]"
+                    style={{ zIndex: -2 }}
+                    transition={{
+                      type: "spring",
+                      duration: 0.7,
+                    }}
+                  />
+                </Fragment>
+              )}
+            </li>
+          ))}
+        </ul>
+        <div className="absolute -top-px z-10 h-px w-full bg-linear-to-r from-transparent from-20% via-white/60 via-50% to-transparent to-80%"></div>
+
+        <div className="absolute inset-0 -bottom-px -z-10 overflow-hidden rounded-full">
+          <motion.div
+            className="absolute inset-0 w-1/5"
+            animate={{
+              x: `${100 * activeTab}%`,
+            }}
+            transition={{
+              type: "spring",
+              duration: 0.7,
+            }}
+          >
+            <div className="h-full w-full scale-x-150 bg-linear-to-r from-transparent via-white/60 via-40% to-transparent"></div>
+          </motion.div>
+        </div>
+      </nav>
+    </article>
+  );
+};
+
+export default FlashlightTabs;

src/components/animations/momentum.tsx

@@ -0,0 +1,75 @@
+"use client";
+import { motion } from "motion/react";
+import { MouseEvent, useRef } from "react";
+
+const THRESHOLD = 200;
+const ARRAY_LENGTH = 17;
+
+export default function MomentumLines() {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!containerRef.current) return;
+    const mouseX = e.nativeEvent.offsetX;
+    const containerWidth = containerRef.current.offsetWidth;
+    const lines = containerRef.current.querySelectorAll(".line");
+
+    lines.forEach((line, index) => {
+      const lineDiv = line as HTMLDivElement;
+      const relativeLeft =
+        lineDiv.offsetLeft - containerRef.current!.offsetLeft;
+      const xPercentage = mouseX / containerWidth;
+      const linePercentage = relativeLeft / containerWidth;
+      const gapPercentage = Math.abs(xPercentage - linePercentage);
+      const isLastOrFirst = !index || index === lines.length - 1;
+      const threshold = isLastOrFirst ? THRESHOLD / 2 : THRESHOLD;
+
+      const gapDiff = Math.min(
+        Math.max(mouseX - relativeLeft, -threshold),
+        threshold
+      );
+
+      lineDiv.style.setProperty(
+        "--x-position",
+        `${gapDiff * (1 - gapPercentage)}px`
+      );
+      lineDiv.style.setProperty("--opacity-value", `${1 - gapPercentage}`);
+    });
+  };
+
+  const onMouseOut = () => {
+    const lines = containerRef.current?.querySelectorAll(".line");
+    lines?.forEach((line) => {
+      const lineDiv = line as HTMLDivElement;
+      lineDiv.style.setProperty("--x-position", "0px");
+      lineDiv.style.setProperty("--opacity-value", "1");
+    });
+  };
+
+  return (
+    <article className="grid aspect-video place-items-center rounded-xl border border-white/10 bg-white/5">
+      <div
+        onMouseMove={onMouseMove}
+        onMouseOut={onMouseOut}
+        className="flex h-full w-full justify-between p-10"
+        ref={containerRef}
+      >
+        {[...new Array(ARRAY_LENGTH).fill(0)].map((_, index) => (
+          <motion.div
+            key={index}
+            className="line pointer-events-none h-full w-px bg-white"
+            animate={{
+              x: "var(--x-position, 0px)",
+              opacity: "var(--opacity-value, 1)",
+            }}
+            transition={{
+              type: "spring",
+              duration: 0.8,
+              bounce: 0,
+            }}
+          />
+        ))}
+      </div>
+    </article>
+  );
+}

src/components/animations/toolbar.tsx

@@ -0,0 +1,118 @@
+// "use client";
+
+// import { useRef, useState } from "react";
+// import { DocumentIcon, HomeIcon } from "@heroicons/react/24/outline";
+// import WorkIcon from "@/app/_components/Icons/WorkIcon";
+// import PlaygroundIcon from "@/app/_components/Icons/PlaygroundIcon";
+// import clsx from "clsx";
+
+// interface NavLink {
+//   name: string;
+//   slug: string;
+//   icon: React.ReactNode;
+// }
+
+// const navLinks: NavLink[] = [
+//   { name: "Home", slug: "/", icon: <HomeIcon /> },
+//   { name: "Work", slug: "/work", icon: <WorkIcon /> },
+//   { name: "Colophon", slug: "/colophon", icon: <DocumentIcon /> },
+//   { name: "Playground", slug: "/playground", icon: <PlaygroundIcon /> },
+// ];
+
+// interface TooltipSetting {
+//   left: number;
+//   x: number;
+//   width: number;
+//   offsetLeft: number;
+//   id: string | null;
+// }
+
+// export default function SpatialTooltip() {
+//   const [tooltipSetting, setTooltipSetting] = useState<TooltipSetting>({
+//     left: 0,
+//     x: 0,
+//     width: 0,
+//     offsetLeft: 0,
+//     id: null,
+//   });
+//   const toolTipRef = useRef<HTMLDivElement>(null);
+
+//   const handleMouseEnter = (index: number) => {
+//     const listItems = toolTipRef.current?.querySelectorAll("li");
+//     if (listItems) {
+//       const itemWidth = listItems[index].clientWidth;
+//       const offsetLeft = -listItems[index].offsetLeft;
+//       const x = (itemWidth - 36) / 2; //36 is the size of the button
+
+//       setTooltipSetting({
+//         left: (index / navLinks.length) * 100,
+//         x: -x,
+//         width: itemWidth,
+//         offsetLeft,
+//         id: navLinks[index].slug,
+//       });
+//     }
+//   };
+
+//   const handleOnMouseLeave = () => {
+//     setTooltipSetting({
+//       ...tooltipSetting,
+//       id: null,
+//     });
+//   };
+
+//   return (
+//     <article className="relative grid min-h-96 place-items-center rounded-xl border border-white/10 bg-white/5 p-3 md:aspect-8/3 md:min-h-0">
+//       <nav className="grid place-items-center text-black">
+//         <div className="relative isolate">
+//           <div
+//             ref={toolTipRef}
+//             className="absolute bottom-[calc(100%+10px)] overflow-hidden rounded-2xl bg-black/50 transition-all duration-300"
+//             style={{
+//               left: `${tooltipSetting.left}%`,
+//               transform: `translateX(${tooltipSetting.x}px)`,
+//               width: `${tooltipSetting.width}px`,
+//               opacity: tooltipSetting.id ? 1 : 0,
+//             }}
+//           >
+//             <ul
+//               className="flex transition-all duration-300"
+//               style={{
+//                 transform: `translateX(${tooltipSetting.offsetLeft}px)`,
+//               }}
+//             >
+//               {navLinks.map(({ name, slug }) => (
+//                 <li key={slug} className="relative isolate grid px-3 py-2">
+//                   <span
+//                     className={clsx(
+//                       "text-white transition-all duration-300",
+//                       tooltipSetting.id === slug ? "delay-75" : "blur-xs"
+//                     )}
+//                   >
+//                     {name}
+//                   </span>
+//                 </li>
+//               ))}
+//             </ul>
+//           </div>
+//           <ul className="flex">
+//             {navLinks.map(({ icon, name, slug }, index) => (
+//               <li key={slug} className="grid">
+//                 <button
+//                   className="group relative inline-block size-9 rounded-xl p-2 text-white transition duration-300 hover:bg-background-medium-accent hover:text-white"
+//                   onMouseEnter={() => handleMouseEnter(index)}
+//                   onMouseLeave={handleOnMouseLeave}
+//                 >
+//                   {icon}
+//                   <span className="sr-only">{name}</span>
+//                 </button>
+//               </li>
+//             ))}
+//           </ul>
+
+//           <div className="absolute -inset-2 -z-10 rounded-[20px] bg-black/50"></div>
+//         </div>
+//       </nav>
+//     </article>
+//   );
+// }

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }