From 8f44b9693b9e3f135d6e332d3f42326479a1b0eb Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 17 Feb 2026 12:36:24 +0000
Subject: [PATCH 1/8] fix: remove unused StarIcon import from GitHub link
 component

---
 apps/website/src/components/github-link.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/website/src/components/github-link.tsx b/apps/website/src/components/github-link.tsx
index b8646b6..6801919 100644
--- a/apps/website/src/components/github-link.tsx
+++ b/apps/website/src/components/github-link.tsx
@@ -4,7 +4,6 @@ import useSWR from "swr";
 
 import { cn } from "@/utils/cn";
 import { globals } from "@/globals";
-import { StarIcon } from "lucide-react";
 
 import { GitHub } from "@/components/ui/svgs/github";
 import { buttonVariants } from "@/components/ui/button";

From 9836b4eb79883ad41bee08f4d29a50989fb9dc05 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 17 Feb 2026 12:39:56 +0000
Subject: [PATCH 2/8] feat: add withGenerals option to getDocument, fixed og
 image for homepage

---
 apps/website/src/app/api/docs/og/route.tsx |  1 +
 apps/website/src/utils/docs.ts             | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/website/src/app/api/docs/og/route.tsx b/apps/website/src/app/api/docs/og/route.tsx
index c19db4f..d1c494c 100644
--- a/apps/website/src/app/api/docs/og/route.tsx
+++ b/apps/website/src/app/api/docs/og/route.tsx
@@ -27,6 +27,7 @@ export async function GET(request: Request) {
   const docData = getDocument({
     folder: folder,
     document: document,
+    withGenerals: true,
   });
 
   if (!docData) {
diff --git a/apps/website/src/utils/docs.ts b/apps/website/src/utils/docs.ts
index b117042..bc62229 100644
--- a/apps/website/src/utils/docs.ts
+++ b/apps/website/src/utils/docs.ts
@@ -28,6 +28,7 @@ type Doc = Document &
 interface GetDocument {
   folder: string;
   document: string;
+  withGenerals?: boolean;
 }
 
 const normalizePath = (path: string): string => {
@@ -42,12 +43,19 @@ const allDocs = allDocsArray.filter(
     ),
 );
 
-const getDocument = ({ folder, document }: GetDocument): Doc | undefined => {
+const getDocument = ({
+  folder,
+  document,
+  withGenerals,
+}: GetDocument): Doc | undefined => {
   const normalizedDocument = normalizePath(document);
   const doc = allDocs.find((doc) => {
     const normalizedPath = normalizePath(doc._meta.path);
     return doc.folder === folder && normalizedPath === normalizedDocument;
   });
+  if (!doc && withGenerals) {
+    return getGeneralDocument(document);
+  }
   if (!doc) {
     return undefined;
   }

From b8e3b4cae1428586ec90dcd8fbaf3d586b1bcb5b Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 17 Feb 2026 12:46:49 +0000
Subject: [PATCH 3/8] fix: update sidebar width to 57.5 for consistency across
 components

---
 apps/website/src/components/ui/sidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/components/ui/sidebar.tsx b/apps/website/src/components/ui/sidebar.tsx
index f12c798..8147653 100644
--- a/apps/website/src/components/ui/sidebar.tsx
+++ b/apps/website/src/components/ui/sidebar.tsx
@@ -26,7 +26,7 @@ const Sidebar = ({ children, position }: SidebarProps) => {
   return (
     <aside
       className={cn(
-        "fixed w-56",
+        "fixed w-57.5",
         "h-[calc(100vh-3.5rem)]",
         "hidden md:block",
         "overflow-x-hidden overflow-y-auto",
@@ -72,7 +72,7 @@ const SidebarPageContent = ({
   className,
 }: SidebarPageContentProps) => {
   return (
-    <main className={cn("ml-0 md:ml-56 lg:ml-56 xl:mx-56", className)}>
+    <main className={cn("ml-0 md:ml-57.5 lg:ml-57.5 xl:mx-57.5", className)}>
       {children}
     </main>
   );

From d297f3559c9e82cccbeb49cc1861ee1761cd0fc9 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 17 Feb 2026 15:09:38 +0000
Subject: [PATCH 4/8] feat: add copy-text-morph block + example + docs +
 registry

---
 .../code-block/blocks/copy-text-morph.tsx     | 136 ++++++++++++++++++
 .../src/components/docs/sidebar-data.ts       |   4 +
 .../previews/copy-text-morph-example.tsx      |  37 +++++
 apps/website/src/components/registry/data.tsx |  17 +++
 .../src/docs/react/blocks/copy-text-morph.mdx |  76 ++++++++++
 5 files changed, 270 insertions(+)
 create mode 100644 apps/website/src/components/code-block/blocks/copy-text-morph.tsx
 create mode 100644 apps/website/src/components/previews/copy-text-morph-example.tsx
 create mode 100644 apps/website/src/docs/react/blocks/copy-text-morph.mdx

diff --git a/apps/website/src/components/code-block/blocks/copy-text-morph.tsx b/apps/website/src/components/code-block/blocks/copy-text-morph.tsx
new file mode 100644
index 0000000..effd651
--- /dev/null
+++ b/apps/website/src/components/code-block/blocks/copy-text-morph.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import {
+  useMemo,
+  useId,
+  useEffect,
+  useState,
+  type ComponentProps,
+} from "react";
+
+import {
+  motion,
+  AnimatePresence,
+  type Transition,
+  type Variants,
+} from "motion/react";
+
+import { cn } from "@/utils/cn";
+import { copyToClipboard } from "@/utils/copy";
+
+interface CopyTextAnimatedProps extends ComponentProps<"button"> {
+  content: string;
+  iconSize?: number;
+}
+
+export type TextMorphProps = {
+  children: string;
+  as?: React.ElementType;
+  className?: string;
+  style?: React.CSSProperties;
+  variants?: Variants;
+  transition?: Transition;
+};
+
+export function TextMorph({
+  children,
+  as: Component = "p",
+  className,
+  style,
+  variants,
+  transition,
+}: TextMorphProps) {
+  const uniqueId = useId();
+
+  const characters = useMemo(() => {
+    const charCounts: Record<string, number> = {};
+
+    return children.split("").map((char) => {
+      const lowerChar = char.toLowerCase();
+      charCounts[lowerChar] = (charCounts[lowerChar] || 0) + 1;
+
+      return {
+        id: `${uniqueId}-${lowerChar}${charCounts[lowerChar]}`,
+        label: char === " " ? "\u00A0" : char,
+      };
+    });
+  }, [children, uniqueId]);
+
+  const defaultVariants: Variants = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  };
+
+  const defaultTransition: Transition = {
+    type: "spring",
+    stiffness: 280,
+    damping: 18,
+    mass: 0.3,
+  };
+
+  return (
+    <Component className={cn(className)} aria-label={children} style={style}>
+      <AnimatePresence mode="popLayout" initial={false}>
+        {characters.map((character) => (
+          <motion.span
+            key={character.id}
+            layoutId={character.id}
+            className="inline-block"
+            aria-hidden="true"
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            variants={variants || defaultVariants}
+            transition={transition || defaultTransition}
+          >
+            {character.label}
+          </motion.span>
+        ))}
+      </AnimatePresence>
+    </Component>
+  );
+}
+
+const CopyTextMorph = ({
+  content,
+  className,
+  ...props
+}: CopyTextAnimatedProps) => {
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!isCopied) return;
+
+    const timeout = setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  }, [isCopied]);
+
+  const handleCopy = async () => {
+    await copyToClipboard(content);
+    setIsCopied(true);
+  };
+
+  return (
+    <button
+      title="Copy to clipboard"
+      className={cn(
+        "cursor-pointer",
+        "transition-colors duration-200 ease-in-out",
+        "text-xs text-neutral-700 dark:text-neutral-300 hover:text-neutral-950 dark:hover:text-neutral-50",
+        "rounded-md bg-neutral-300/60 px-1.5 py-1 dark:bg-neutral-700/60",
+        "border border-transparent hover:border-neutral-400/60 dark:hover:border-neutral-600/60",
+        isCopied && "text-neutral-950 dark:text-neutral-50",
+        className,
+      )}
+      onClick={handleCopy}
+      {...props}
+    >
+      <TextMorph>{isCopied ? `Copied` : `Copy`}</TextMorph>
+    </button>
+  );
+};
+
+export { CopyTextMorph };
diff --git a/apps/website/src/components/docs/sidebar-data.ts b/apps/website/src/components/docs/sidebar-data.ts
index c1e22b3..b3f9d17 100644
--- a/apps/website/src/components/docs/sidebar-data.ts
+++ b/apps/website/src/components/docs/sidebar-data.ts
@@ -90,6 +90,10 @@ export const SidebarLinksData: SidebarLinks[] = [
             title: "Multi Tabs",
             href: "/docs/react/blocks/multi-tabs",
           },
+          {
+            title: "Copy with Text Morph",
+            href: "/docs/react/blocks/copy-text-morph",
+          },
           {
             title: "Persist Package Manager",
             href: "/docs/react/blocks/persist-package-manager",
diff --git a/apps/website/src/components/previews/copy-text-morph-example.tsx b/apps/website/src/components/previews/copy-text-morph-example.tsx
new file mode 100644
index 0000000..a00b8a6
--- /dev/null
+++ b/apps/website/src/components/previews/copy-text-morph-example.tsx
@@ -0,0 +1,37 @@
+import {
+  CodeBlock,
+  CodeBlockContent,
+  CodeBlockGroup,
+  CodeBlockHeader,
+  CodeBlockIcon,
+} from "@/components/code-block/code-block";
+import { CodeblockShiki } from "@/components/code-block/client/shiki";
+import { CopyTextMorph } from "@/components/code-block/blocks/copy-text-morph";
+
+const code = `const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    console.log("Text copied to clipboard");
+  } catch (err) {
+    console.error("Failed to copy text: ", err);
+  }
+};`;
+
+const CopyMorphExample = () => {
+  return (
+    <CodeBlock>
+      <CodeBlockHeader>
+        <CodeBlockGroup>
+          <CodeBlockIcon language="js" />
+          <span>Copy with Text Morph</span>
+        </CodeBlockGroup>
+        <CopyTextMorph content={code} />
+      </CodeBlockHeader>
+      <CodeBlockContent>
+        <CodeblockShiki language="ts" code={code} />
+      </CodeBlockContent>
+    </CodeBlock>
+  );
+};
+
+export default CopyMorphExample;
diff --git a/apps/website/src/components/registry/data.tsx b/apps/website/src/components/registry/data.tsx
index 37f1da5..ea328d3 100644
--- a/apps/website/src/components/registry/data.tsx
+++ b/apps/website/src/components/registry/data.tsx
@@ -295,6 +295,23 @@ const Blocks: RegistryComponent[] = [
       target: "src/components/code-block/blocks/inline-code.tsx",
     },
   },
+  {
+    title: "Blocks - Copy + Text Morph",
+    fileType: "tsx",
+    group: "blocks",
+    fileSource: `${codeblockComponent}/blocks/copy-text-morph.tsx`,
+    exampleFileSource: `${componentsFolder}/previews/copy-text-morph-example.tsx`,
+    reactComponent: lazy(
+      () => import("@/components/previews/copy-text-morph-example"),
+    ),
+    shadcnRegistry: {
+      name: "block-copy-text-morph",
+      type: "registry:block",
+      dependencies: ["motion"],
+      registryDependencies: ["shiki-highlighter", "code-block", "client-shiki"],
+      target: "src/components/code-block/blocks/copy-text-morph.tsx",
+    },
+  },
   {
     title: "Blocks - Select Package Manager",
     fileType: "tsx",
diff --git a/apps/website/src/docs/react/blocks/copy-text-morph.mdx b/apps/website/src/docs/react/blocks/copy-text-morph.mdx
new file mode 100644
index 0000000..3c76c98
--- /dev/null
+++ b/apps/website/src/docs/react/blocks/copy-text-morph.mdx
@@ -0,0 +1,76 @@
+---
+title: Copy with Text Morph
+description: Copy Button with animated text using Motion-Primitives.
+category: [React, Motion, Shiki, Blocks]
+---
+
+<ComponentPreview component="block-copy-text-morph" />
+
+## Introduction
+
+In this block, we'll create a copy button that not only copies text to the clipboard but also provides animated feedback using [Motion-Primitives](https://motion-primitives.com/) created by [ibelick](https://github.com/ibelick).
+
+## Installation
+
+### shadcn/ui
+
+<CopyShadcnCommand name="block-copy-text-morph" />
+
+### Manual
+
+1. Install [motion](https://motion.dev/):
+
+<CodeBlockSelectPkg type="install" title="Motion" command="motion" />
+
+2. Create the basic Code Block structure:
+
+<DocCard folder="react" document="code-block" />
+
+3. Create the `CodeblockShiki` client component:
+
+<DocCard folder="react" document="code-block-client-shiki" />
+
+4. Finally, create the `CopyTextAnimated` component:
+
+<ShowSource component="block-copy-text-morph" />
+
+## Usage
+
+```tsx
+import { CopyTextMorph } from "@/components/code-block/blocks/copy-text-morph";
+
+const Example = () => {
+  return <CopyTextMorph content="Text to be copied" />;
+};
+
+export default Example;
+```
+
+Or with [`<CodeBlock>`](/docs/react/code-block) component:
+
+```tsx {6,16}
+import {
+  CodeBlock,
+  CodeBlockHeader,
+  CodeBlockContent,
+} from "@/components/code-block/code-block";
+import { CopyTextMorph } from "@/components/code-block/blocks/copy-text-morph";
+
+const code = `const greet = () => {
+  console.log("Hello, World!");
+};`;
+
+const Example = () => {
+  return (
+    <CodeBlock>
+      <CodeBlockHeader>
+        <CopyTextMorph content={code} />
+      </CodeBlockHeader>
+      <CodeBlockContent>
+        <CodeblockShiki language="ts" code={code} />
+      </CodeBlockContent>
+    </CodeBlock>
+  );
+};
+export default Example;
+```

From 950ed84c99ceaace4b4c841a3c953c173e032b5b Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 17 Feb 2026 15:09:58 +0000
Subject: [PATCH 5/8] fix: update sidebar width for consistency across
 components

---
 apps/website/src/components/ui/sidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/components/ui/sidebar.tsx b/apps/website/src/components/ui/sidebar.tsx
index 8147653..aa848ad 100644
--- a/apps/website/src/components/ui/sidebar.tsx
+++ b/apps/website/src/components/ui/sidebar.tsx
@@ -26,7 +26,7 @@ const Sidebar = ({ children, position }: SidebarProps) => {
   return (
     <aside
       className={cn(
-        "fixed w-57.5",
+        "fixed w-60",
         "h-[calc(100vh-3.5rem)]",
         "hidden md:block",
         "overflow-x-hidden overflow-y-auto",
@@ -72,7 +72,7 @@ const SidebarPageContent = ({
   className,
 }: SidebarPageContentProps) => {
   return (
-    <main className={cn("ml-0 md:ml-57.5 lg:ml-57.5 xl:mx-57.5", className)}>
+    <main className={cn("ml-0 md:ml-60 lg:ml-60 xl:mx-60", className)}>
       {children}
     </main>
   );

From d2d59e659e427829bdbf504acf83d6b8c7c878e8 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 17 Feb 2026 15:10:05 +0000
Subject: [PATCH 6/8] feat: add Motion SVG component and update React SVG
 styles

---
 apps/website/src/components/ui/svgs/motion.tsx | 12 ++++++++++++
 apps/website/src/components/ui/svgs/react.tsx  |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 apps/website/src/components/ui/svgs/motion.tsx

diff --git a/apps/website/src/components/ui/svgs/motion.tsx b/apps/website/src/components/ui/svgs/motion.tsx
new file mode 100644
index 0000000..bfda0e7
--- /dev/null
+++ b/apps/website/src/components/ui/svgs/motion.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const Motion = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 1103 386">
+    <path
+      className="fill-yellow-500 dark:fill-yellow-300"
+      d="M416.473 0 198.54 385.66H0L170.17 84.522C196.549 37.842 262.377 0 317.203 0Zm486.875 96.415c0-53.249 44.444-96.415 99.27-96.415 54.826 0 99.27 43.166 99.27 96.415 0 53.248-44.444 96.415-99.27 96.415-54.826 0-99.27-43.167-99.27-96.415ZM453.699 0h198.54L434.306 385.66h-198.54Zm234.492 0h198.542L716.56 301.138c-26.378 46.68-92.207 84.522-147.032 84.522h-99.27Z"
+    />
+  </svg>
+);
+
+export { Motion };
diff --git a/apps/website/src/components/ui/svgs/react.tsx b/apps/website/src/components/ui/svgs/react.tsx
index 896cdd3..d19a52c 100644
--- a/apps/website/src/components/ui/svgs/react.tsx
+++ b/apps/website/src/components/ui/svgs/react.tsx
@@ -9,8 +9,8 @@ const React = (props: SVGProps<SVGSVGElement>) => (
     <g fill="none" fillRule="evenodd">
       <g
         transform="translate(-227, -256)"
-        fill="currentColor"
         fillRule="nonzero"
+        className="fill-blue-600 dark:fill-blue-400"
       >
         <g transform="translate(227, 256)">
           <path

From a6fd9ef60b3044c78c31fc660309f30ac8aeacec Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 17 Feb 2026 15:10:13 +0000
Subject: [PATCH 7/8] feat: add Motion SVG icon and update imports in
 ShowCategories component

---
 .../src/components/docs/show-categories.tsx     | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/website/src/components/docs/show-categories.tsx b/apps/website/src/components/docs/show-categories.tsx
index 0672912..ed2f053 100644
--- a/apps/website/src/components/docs/show-categories.tsx
+++ b/apps/website/src/components/docs/show-categories.tsx
@@ -12,12 +12,18 @@ import {
   TagIcon,
 } from "lucide-react";
 
+import {
+  Shiki,
+  SugarHigh,
+  React,
+  RadixUI,
+  BaseUI,
+  Motion,
+} from "@/components/ui/svgs";
+
 import { cn } from "@/utils/cn";
 import { Badge, badgeVariants } from "@/components/ui/badge";
 import { ExternalLink } from "@/components/ui/external-link";
-import { Shiki, SugarHigh, React } from "@/components/ui/svgs";
-import { RadixUI } from "../ui/svgs/radix-ui";
-import { BaseUI } from "../ui/svgs/base-ui";
 
 const categorySvgs = [
   {
@@ -65,6 +71,11 @@ const categorySvgs = [
     icon: BaseUI,
     url: "https://base-ui.com/",
   },
+  {
+    name: "Motion",
+    icon: Motion,
+    url: "https://motion.dev/",
+  },
   {
     name: "Blocks",
     icon: BoxIcon,

From 813c24951945f085a78f862331d007102e084f5b Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 17 Feb 2026 15:10:25 +0000
Subject: [PATCH 8/8] fix: export additional SVG components

---
 apps/website/src/components/ui/svgs/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/website/src/components/ui/svgs/index.tsx b/apps/website/src/components/ui/svgs/index.tsx
index 8aeec60..4e609c0 100644
--- a/apps/website/src/components/ui/svgs/index.tsx
+++ b/apps/website/src/components/ui/svgs/index.tsx
@@ -8,3 +8,6 @@ export * from "./shiki";
 export * from "./sugar-high";
 export * from "./twitter";
 export * from "./vite";
+export * from "./radix-ui";
+export * from "./base-ui";
+export * from "./motion";
\ No newline at end of file