Merge branch 'main' into production

Author: hari

.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_APP_URL=https://animata.design

.gitignore

@@ -39,5 +39,9 @@ next-env.d.ts
 
 *storybook.log
 public/preview
+public/r
+public/docs
+public/llms.txt
+public/llms-full.txt
 _internal/
 .superset/

app/(main)/_landing/stats-bento.tsx

@@ -126,7 +126,7 @@ function OrbitItem({
 function FrameworkOrbit() {
   return (
     <div className="relative flex h-40 w-full items-center justify-center overflow-hidden rounded-xl border border-border bg-[hsl(var(--surface-alt))] sm:h-48">
-      <Icons.logo className="z-10 h-8 w-8 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 p-1.5 shadow-lg sm:h-10 sm:w-10 sm:p-2" />
+      <Icons.logo className="z-10 h-8 w-8 rounded-full bg-linear-to-br from-violet-500 to-indigo-600 p-1.5 shadow-lg sm:h-10 sm:w-10 sm:p-2" />
       {frameworkItems.map((item, i) => (
         <OrbitItem key={item.key} index={i} total={frameworkItems.length} duration={35}>
           {item.icon}
@@ -161,11 +161,11 @@ export default function StatsBento() {
               Loved by developers worldwide
             </span>
             <div className="mt-3">
-              <strong className="font-[family-name:var(--font-mono)] text-2xl font-bold tabular-nums text-foreground sm:text-3xl lg:text-4xl">
+              <strong className="font-(family-name:--font-mono) text-2xl font-bold tabular-nums text-foreground sm:text-3xl lg:text-4xl">
                 <RemountOnMouseIn>
                   <Ticker
                     value="2,392+"
-                    className="font-[family-name:var(--font-mono)] font-bold tabular-nums"
+                    className="font-(family-name:--font-mono) font-bold tabular-nums"
                   />
                 </RemountOnMouseIn>
               </strong>
@@ -228,10 +228,10 @@ export default function StatsBento() {
                     direction="up"
                     delay={0}
                     format={Formatter.number}
-                    className="font-[family-name:var(--font-mono)] text-5xl font-bold leading-[1] tabular-nums tracking-[-0.03em] text-foreground sm:text-6xl lg:text-7xl"
+                    className="font-(family-name:--font-mono) text-5xl font-bold leading-none tabular-nums tracking-[-0.03em] text-foreground sm:text-6xl lg:text-7xl"
                   />
                 </RemountOnMouseIn>
-                <span className="font-[family-name:var(--font-mono)] text-2xl font-bold text-muted-foreground sm:text-3xl">
+                <span className="font-(family-name:--font-mono) text-2xl font-bold text-muted-foreground sm:text-3xl">
                   +
                 </span>
               </div>
@@ -270,11 +270,11 @@ export default function StatsBento() {
                 </Marquee>
               </div>
             </div>
-            <div className="-mx-4 -mb-4 mt-auto flex items-center justify-between border-t border-border bg-foreground/[0.03] px-4 py-3 sm:-mx-5 sm:-mb-5 sm:px-5 sm:py-4 lg:-mx-6 lg:-mb-6 lg:px-6">
+            <div className="-mx-4 -mb-4 mt-auto flex items-center justify-between border-t border-border bg-foreground/3 px-4 py-3 sm:-mx-5 sm:-mb-5 sm:px-5 sm:py-4 lg:-mx-6 lg:-mb-6 lg:px-6">
               <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-[11px]">
                 Categories
               </p>
-              <span className="font-[family-name:var(--font-mono)] text-2xl font-bold tabular-nums text-foreground sm:text-3xl">
+              <span className="font-(family-name:--font-mono) text-2xl font-bold tabular-nums text-foreground sm:text-3xl">
                 {categories.length}
               </span>
             </div>
@@ -313,18 +313,18 @@ export default function StatsBento() {
             <div className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
               {/* Left — statement */}
               <div>
-                <h3 className="font-[family-name:var(--font-display)] text-[clamp(1.5rem,4vw,2.25rem)] leading-[1.1] text-foreground">
+                <h2 className="font-(family-name:--font-display) text-[clamp(1.5rem,4vw,2.25rem)] leading-[1.1] text-foreground">
                   We did the hard part.
-                </h3>
-                <p className="mt-1 text-[clamp(1.5rem,4vw,2.25rem)] leading-[1.1] text-muted-foreground font-[family-name:var(--font-display)]">
+                </h2>
+                <p className="mt-1 text-[clamp(1.5rem,4vw,2.25rem)] leading-[1.1] text-muted-foreground font-(family-name:--font-display)">
                   So you don&apos;t have to.
                 </p>
               </div>
               {/* Right — numbers */}
               <div className="flex gap-8 sm:gap-10">
                 <div>
                   <div className="flex items-baseline gap-0.5">
-                    <span className="font-[family-name:var(--font-mono)] text-3xl font-bold leading-[1] tabular-nums text-foreground sm:text-4xl">
+                    <span className="font-(family-name:--font-mono) text-3xl font-bold leading-none tabular-nums text-foreground sm:text-4xl">
                       1,100
                     </span>
                     <span className="text-lg text-muted-foreground">+</span>
@@ -335,7 +335,7 @@ export default function StatsBento() {
                 </div>
                 <div>
                   <div className="flex items-baseline gap-0.5">
-                    <span className="font-[family-name:var(--font-mono)] text-3xl font-bold leading-[1] tabular-nums text-foreground sm:text-4xl">
+                    <span className="font-(family-name:--font-mono) text-3xl font-bold leading-none tabular-nums text-foreground sm:text-4xl">
                       300
                     </span>
                     <span className="text-lg text-muted-foreground">+</span>

components/mdx-components.tsx

@@ -26,6 +26,7 @@ import { CopyProxy } from "@/components/copy-proxy";
 import { AnimataRenderer } from "@/components/dynamic-animata";
 import { FrameworkDocs } from "@/components/framework-docs";
 import PreviewContainer from "@/components/preview-container";
+import { RegistryInstall } from "@/components/registry-install";
 import {
   Accordion,
   AccordionContent,
@@ -199,6 +200,7 @@ const components = {
   ComponentPreview,
   ComponentExample,
   ComponentSource,
+  RegistryInstall,
   AspectRatio,
   CodeBlockWrapper: ({ ...props }) => <CodeBlockWrapper className="rounded-md border" {...props} />,
   Step: ({ className, ...props }: ComponentProps<"h3">) => (

components/registry-install.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { CopyNpmCommandButton } from "@/components/copy-button";
+import { siteConfig } from "@/config/site";
+import { cn } from "@/lib/utils";
+
+type PackageManager = "pnpm" | "npm" | "yarn" | "bun";
+
+const REGISTRY_BASE_URL = (process.env.NEXT_PUBLIC_APP_URL || siteConfig.url).replace(/\/$/, "");
+
+interface RegistryInstallProps {
+  category: string;
+  name: string;
+  className?: string;
+}
+
+export function RegistryInstall({ category, name, className }: RegistryInstallProps) {
+  const url = `${REGISTRY_BASE_URL}/r/${category}/${name}.json`;
+  const commands: Record<PackageManager, string> = {
+    pnpm: `pnpm dlx shadcn@latest add ${url}`,
+    npm: `npx shadcn@latest add ${url}`,
+    yarn: `yarn dlx shadcn@latest add ${url}`,
+    bun: `bunx shadcn@latest add ${url}`,
+  };
+
+  return (
+    <pre
+      className={cn(
+        "w-full grid grid-cols-[1fr_auto] mt-4 rounded-lg bg-zinc-800 p-4 [&_code]:bg-transparent",
+        className,
+      )}
+    >
+      <code
+        className={cn(
+          "relative rounded max-w-full overflow-x-auto bg-zinc-800 px-2 py-[0.2rem] font-mono text-sm text-white",
+          className,
+        )}
+      >
+        {commands.pnpm}
+      </code>
+
+      <CopyNpmCommandButton
+        commands={{
+          __npmCommand__: commands.npm,
+          __yarnCommand__: commands.yarn,
+          __pnpmCommand__: commands.pnpm,
+          __bunCommand__: commands.bun,
+        }}
+      />
+    </pre>
+  );
+}

content/docs/accordion/faq.mdx

@@ -9,11 +9,17 @@ published: false
 
 ## Installation
 
+### CLI
+
+<RegistryInstall category="accordion" name="faq" />
+
+### Manual
+
 <Steps>
 <Step>Install dependencies</Step>
 
 ```bash
-npm install framer-motion lucide-react
+npm install motion lucide-react
 ```
 
 <Step>Run the following command</Step>

content/docs/background/animated-beam.mdx

@@ -8,6 +8,12 @@ author: harimanok_
 
 ## Installation
 
+### CLI
+
+<RegistryInstall category="background" name="animated-beam" />
+
+### Manual
+
 <Steps>
 
 <Step>Add to your CSS</Step>

content/docs/background/blurry-blob.mdx

@@ -8,6 +8,12 @@ author: ll4xmii
 
 ## Installation
 
+### CLI
+
+<RegistryInstall category="background" name="blurry-blob" />
+
+### Manual
+
 <Steps>
 <Step>Add to your CSS</Step>
 ```css

content/docs/background/diagonal-lines.mdx

@@ -8,6 +8,12 @@ author: harimanok_
 
 ## Installation
 
+### CLI
+
+<RegistryInstall category="background" name="diagonal-lines" />
+
+### Manual
+
 <Steps>
 <Step>Run the following command</Step>
 

content/docs/background/dot.mdx

@@ -8,6 +8,12 @@ author: harimanok_
 
 ## Installation
 
+### CLI
+
+<RegistryInstall category="background" name="dot" />
+
+### Manual
+
 <Steps>
 <Step>Run the following command</Step>