diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index c1a16c8b..6961c0eb 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -62,6 +62,28 @@ jobs:
       - name: Lint
         run: pnpm check
 
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Typecheck
+        run: pnpm typecheck
+
   test:
     name: Test
     runs-on: ubuntu-latest
@@ -84,6 +106,10 @@ jobs:
       - name: Test
         run: pnpm test
 
+      - name: Verify registry output (no workspace import leaks)
+        working-directory: apps/docs
+        run: npx tsx scripts/verify-registry.mts
+
   build:
     name: Build
     runs-on: ubuntu-latest
diff --git a/.gitignore b/.gitignore
index 09cec6be..fccf8ca2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,7 @@ node_modules
 .yarn/install-state.gz
 
 # testing
-/coverage
+coverage/
 
 # next.js
 .next/
@@ -51,3 +51,7 @@ AGENT.md
 
 # internal planning docs (never committed)
 planning/
+.agents/
+node-compile-cache/
+skills-lock.json
+.claude/skills/
diff --git a/.ui-craft/brief.md b/.ui-craft/brief.md
new file mode 100644
index 00000000..58bc8717
--- /dev/null
+++ b/.ui-craft/brief.md
@@ -0,0 +1,63 @@
+# SmoothUI — Design Brief
+
+Surface: the SmoothUI public site (landing + docs + Theme Studio at smoothui.dev).
+Scoped to the marketing/docs surface, not the installed components themselves.
+Created 2026-06-12. Append-mostly — date every change, never delete principles.
+
+## 1. Product purpose
+
+The place where React developers and AI agents discover, preview live, and
+install animated shadcn-compatible components in one command.
+
+## 2. Primary user
+
+A React developer already using shadcn/ui, evaluating components on a desktop,
+who wants to preview the motion, then `npx shadcn add` and ship in minutes — and
+the AI coding agents that install on their behalf. Both are first-class.
+
+## 3. Principles (conflict-resolution order — higher wins)
+
+1. **Show the component, not the chrome.** The live demos are the product; site
+   UI retreats so the preview is the loudest thing on screen. Decoration loses to
+   the demo every time.
+2. **Installable beats impressive.** The install command is never more than one
+   click from the preview. Optimize for "copy and ship", not for browsing.
+3. **Machine-readable is a first-class surface.** Anything a human can find
+   (component, props, install), an agent can fetch as structured data. No
+   human-only affordance for core discovery.
+4. **Motion proves the point, never decorates.** Animation demonstrates a
+   component's behavior; site chrome animates only to communicate state or space,
+   and always honors `prefers-reduced-motion`.
+5. **One signature, applied everywhere.** The dotted-frame motif and the brand
+   pink are the identity; consistency across landing, docs and studio beats
+   per-page novelty.
+
+> Override example: if the dotted-frame motif (P5) competes with a component
+> preview for attention (P1), P1 wins — the frame retreats.
+
+## 4. Success metric
+
+A developer lands on a component page and has the install command copied (or the
+code panel open) within ~15 seconds — and an agent can resolve the same
+component's install JSON in a single request.
+
+## 5. Out of scope
+
+- Does not persist user state server-side — Theme Studio presets are URL-encoded, not accounts.
+- Does not re-explain shadcn basics — links out rather than duplicating shadcn's docs.
+- Does not gate core component discovery behind JS-only interactions.
+- Does not blur the free/Pro line — Pro content lives on pro.smoothui.dev.
+- Does not become a generic theming playground — the studio themes SmoothUI's own surface.
+
+## Visual direction (durable decisions, 2026-06-12)
+
+- **Style: Soft Modern, refined.** Evolve the current look — rounded cards, soft
+  layered shadows (ambient + direct, no heavy glow), generous whitespace, neutrals
+  with a subtle tint. Polish and consistency over reinvention.
+- **Accent: brand pink, kept.** `oklch(0.72 0.2 352.53)`. Budget it to 3–5
+  placements per above-the-fold viewport; lower chroma on secondary uses.
+- **Signature: the dotted frame** (`.frame-box`) is the recurring motif.
+- **Type: Poppins display / Inter body** — keep, but unify into a shared type
+  scale consumed by landing AND docs prose (today they diverge).
+- **Audience: humans + machines equally** — keep the AI-native surface
+  (llms.txt, skill, structured endpoints) first-class alongside the visual design.
diff --git a/.ui-craft/tokens.md b/.ui-craft/tokens.md
new file mode 100644
index 00000000..7ab75f55
--- /dev/null
+++ b/.ui-craft/tokens.md
@@ -0,0 +1,80 @@
+# SmoothUI — Token Spine
+
+Audit + decisions for the design-token spine. Anchored to `brief.md`.
+Created 2026-06-12. The project already has a Tailwind v4 `@theme inline` system
+in `apps/docs/app/smoothui.css` + `global.css` — this **extends**, never replaces.
+
+## Layer status (audit)
+
+| Category | State | Source |
+|---|---|---|
+| Neutral ramp | ✅ rebuilt, perceptually uniform, WCAG AA (f1ce982) | `smoothui.css` `--color-smooth-*` |
+| Accent (brand) | ✅ pink `oklch(0.72 0.2 352.53)` + secondary/light/lighter | `smoothui.css` `--color-brand*` |
+| Semantic color | ✅ shadcn-style (background/foreground/muted/border/input/sidebar/chart) | `smoothui.css` `@theme inline` |
+| Spacing | ✅ Tailwind v4 defaults — **no gap**, issue is uniform *usage* (py-24 everywhere) | Tailwind |
+| Radius | ⚠️ `--radius` + sm/md/lg/xl exist, but applied uniformly (`rounded-xl` everywhere) | `smoothui.css` lines 48-51 |
+| Type scale | ❌ no shared semantic roles; landing (Poppins) / docs prose / studio (13px) diverge; `prose h2` cliffs to 18px | ad-hoc |
+| Shadows | ✅ `--shadow-custom`, `--shadow-custom-brand` (layered) | `global.css` |
+| Motion | ❌ no duration/easing tokens; components hardcode (0.2-0.3s, cubic-beziers) | ad-hoc |
+| Z-index | ⚠️ ad-hoc; not tokenized | — |
+
+## Decisions
+
+### Type scale (the unification core)
+
+One scale, consumed by landing AND docs prose AND studio. Poppins = display,
+Inter = body/UI, mono for code/values. Roles (apply consistently, stop ad-hoc sizes):
+
+| Role | Size | Weight | Tracking | Use |
+|---|---|---|---|---|
+| display-xl | 60px (text-6xl) | 600 | -0.02em | hero headline |
+| display-lg | 48px (text-5xl) | 600 | -0.02em | section headlines |
+| heading | 30px (text-3xl) | 600 | -0.01em | page / prose h1 |
+| subheading | 24px (text-2xl) | 600 | -0.01em | **prose h2 (fixes 18px cliff)** |
+| title | 19px (text-lg/xl) | 600 | normal | prose h3, card titles |
+| body | 16px (text-base) | 400 | normal | prose p, descriptions |
+| label | 13px | 500 | normal | UI labels, studio inspector |
+| eyebrow | 12-13px | 600 | 0.05em, uppercase | category labels (the ONE allowed uppercase) |
+
+Prose heading scale in `global.css` is corrected to follow this (h2 → subheading,
+not text-lg).
+
+### Radius — vary by element (kill uniform `rounded-xl`)
+
+| Token | px | Element |
+|---|---|---|
+| `--radius-sm` (calc -4) | ~6px | inputs, badges, segmented controls |
+| `--radius-md` (calc -2) | ~8px | buttons, small panels, studio rows |
+| `--radius-lg` (`--radius` 10px) | 10px | cards |
+| `--radius-xl` (calc +4) | ~14px | modals, large panels, hero frame |
+| `--radius-full` | pill | tags, avatars, the float nav |
+
+Base `--radius` stays `0.625rem` (10px). Soft Modern = lean toward the larger end
+for cards (`rounded-2xl`/14px) where it reads friendly, per brief visual direction.
+
+### Motion tokens (new category)
+
+Match the existing `.cursor/rules/animations.mdc` convention — don't invent new curves.
+
+```css
+--duration-fast: 0.15s;     /* color/opacity, hover */
+--duration-normal: 0.25s;   /* standard UI: dropdowns, toggles */
+--duration-slow: 0.4s;      /* modals, drawers, page-level */
+--ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* entering */
+--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); /* moving */
+```
+
+Exit ≈ 75% of enter. Always honor `prefers-reduced-motion`. Spring bounce ≤ 0.1 for UI.
+
+### Accent budget (brief P-color)
+
+Brand pink: max 3-5 placements per above-the-fold viewport. Secondary uses drop
+chroma (`--color-brand-light/lighter`). Today the pink appears in logo + sidebar
+active + TOC active + eyebrows + CTA simultaneously — trim per viewport.
+
+## Scope boundary
+
+This spine doc + the additive **motion tokens** + the **prose type-scale fix** are
+the token-phase deliverables. Applying the full type/radius scale across every
+landing section and component is the **visual redesign phase** (next), done with
+the browser in the loop.
diff --git a/apps/docs/app/(home)/docs/page.tsx b/apps/docs/app/(home)/docs/page.tsx
index 0ba34bb6..f69b9894 100644
--- a/apps/docs/app/(home)/docs/page.tsx
+++ b/apps/docs/app/(home)/docs/page.tsx
@@ -1,7 +1,7 @@
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import { Library, Pencil } from "lucide-react";
 import type { Metadata } from "next";
 import Link, { type LinkProps } from "next/link";
+import { IconBooksFill24, IconPencilFill24 } from "nucleo-core-fill-24";
 
 export const metadata: Metadata = {
   alternates: {
@@ -23,19 +23,19 @@ export default function DocsPage() {
           {
             name: "Documentation",
             description: "The guides for SmoothUI.",
-            icon: <Library className="size-full" />,
+            icon: <IconBooksFill24 className="size-full" />,
             href: "/docs/guides",
           },
           {
             name: "Components",
             description: "The library of SmoothUI components.",
-            icon: <Pencil className="size-full" />,
+            icon: <IconPencilFill24 className="size-full" />,
             href: "/docs/components",
           },
           {
             name: "Blocks",
             description: "The library of SmoothUI blocks.",
-            icon: <Pencil className="size-full" />,
+            icon: <IconPencilFill24 className="size-full" />,
             href: "/docs/blocks",
           },
         ].map((item) => (
diff --git a/apps/docs/app/(home)/page.tsx b/apps/docs/app/(home)/page.tsx
index 3ede73e0..3d0a74aa 100644
--- a/apps/docs/app/(home)/page.tsx
+++ b/apps/docs/app/(home)/page.tsx
@@ -1,13 +1,15 @@
 import { AISection } from "@docs/components/landing/ai-section";
 import { BlockCategories } from "@docs/components/landing/block-categories";
 import { ComponentsSlideshow } from "@docs/components/landing/components-slideshow";
+import { Coverage } from "@docs/components/landing/coverage";
 import { FAQ } from "@docs/components/landing/faqs";
 import { Features } from "@docs/components/landing/features";
 import Footer from "@docs/components/landing/footer";
 import { Hero } from "@docs/components/landing/hero";
+import { LatestPosts } from "@docs/components/landing/latest-posts";
 import { SkillsSection } from "@docs/components/landing/skills-section";
+import { SocialProof } from "@docs/components/landing/social-proof";
 import { WhatTheySay } from "@docs/components/landing/what-they-say";
-import { getSmoothuiStats } from "@docs/lib/smoothui-stats";
 import type { Metadata } from "next";
 import { Suspense } from "react";
 
@@ -29,22 +31,26 @@ function SectionSkeleton({ minHeight = "400px" }: { minHeight?: string }) {
 }
 
 export default function Home() {
-  const stats = getSmoothuiStats();
   return (
     <>
       <Hero />
-      <Features />
+      <SocialProof />
       <Suspense fallback={<SectionSkeleton minHeight="600px" />}>
         <ComponentsSlideshow />
       </Suspense>
+      <Features />
       <BlockCategories />
       <AISection />
       <SkillsSection />
-      <FAQ />
       <Suspense fallback={<SectionSkeleton minHeight="700px" />}>
         <WhatTheySay />
       </Suspense>
-      <Footer componentCount={stats.componentCount} version={stats.version} />
+      <Coverage />
+      <FAQ />
+      <Suspense fallback={<SectionSkeleton minHeight="500px" />}>
+        <LatestPosts />
+      </Suspense>
+      <Footer />
     </>
   );
 }
diff --git a/apps/docs/app/(studio)/layout.tsx b/apps/docs/app/(studio)/layout.tsx
new file mode 100644
index 00000000..4d9ecdf4
--- /dev/null
+++ b/apps/docs/app/(studio)/layout.tsx
@@ -0,0 +1,14 @@
+import { FloatNav } from "@docs/components/float-nav";
+import Navbar from "@docs/components/landing/navbar/navbar";
+
+// Full-bleed layout for studio-style screens (no max-w container, unlike
+// the (home) landing layout): the canvas must reach the viewport edges.
+export default function Layout({ children }: LayoutProps<"/">) {
+  return (
+    <div className="relative isolate min-h-screen bg-primary transition">
+      <Navbar className="mx-auto max-w-7xl" />
+      {children}
+      <FloatNav />
+    </div>
+  );
+}
diff --git a/apps/docs/app/(studio)/themes/page.tsx b/apps/docs/app/(studio)/themes/page.tsx
new file mode 100644
index 00000000..402909c6
--- /dev/null
+++ b/apps/docs/app/(studio)/themes/page.tsx
@@ -0,0 +1,19 @@
+import { ThemeStudio } from "@docs/components/themes/theme-studio";
+import { createMetadata } from "@docs/lib/metadata";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = createMetadata({
+  title: "Themes — SmoothUI",
+  description:
+    "Installable SmoothUI color themes for shadcn projects. Six palettes with light and dark mode, applied with a single CLI command.",
+  alternates: {
+    canonical: "/themes",
+  },
+  openGraph: {
+    url: "/themes",
+  },
+});
+
+export default function ThemesPage() {
+  return <ThemeStudio />;
+}
diff --git a/apps/docs/app/blocks/preview/[blockId]/page.tsx b/apps/docs/app/blocks/preview/[blockId]/page.tsx
index 132ada9e..1253dfa7 100644
--- a/apps/docs/app/blocks/preview/[blockId]/page.tsx
+++ b/apps/docs/app/blocks/preview/[blockId]/page.tsx
@@ -25,6 +25,10 @@ export default async function BlockPreviewPage({ params }: PageProps) {
       (mod) => mod.default
     );
 
+    if (typeof BlockExample !== "function") {
+      notFound();
+    }
+
     return (
       <div className="flex min-h-screen w-full flex-col bg-background p-0 text-foreground">
         <ColorSync />
diff --git a/apps/docs/app/blog/[slug]/page.tsx b/apps/docs/app/blog/[slug]/page.tsx
index 4dc4fed0..8f90fe9f 100644
--- a/apps/docs/app/blog/[slug]/page.tsx
+++ b/apps/docs/app/blog/[slug]/page.tsx
@@ -1,4 +1,5 @@
 import { ArticleSchema } from "@docs/components/article-schema";
+import { PostCover } from "@docs/components/post-cover";
 import { RelatedPosts } from "@docs/components/related-posts";
 import { ShareButtons } from "@docs/components/share-buttons";
 import { createMetadata } from "@docs/lib/metadata";
@@ -43,7 +44,37 @@ export default async function BlogPostPage({ params }: PageProps) {
         title={post.data.title}
         url={post.url}
       />
-      <main className="container max-w-6xl py-12">
+      <script
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: Schema.org JSON-LD
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "BreadcrumbList",
+            itemListElement: [
+              {
+                "@type": "ListItem",
+                position: 1,
+                name: "Home",
+                item: "https://smoothui.dev",
+              },
+              {
+                "@type": "ListItem",
+                position: 2,
+                name: "Blog",
+                item: "https://smoothui.dev/blog",
+              },
+              {
+                "@type": "ListItem",
+                position: 3,
+                name: post.data.title,
+                item: `https://smoothui.dev${post.url}`,
+              },
+            ],
+          }),
+        }}
+        type="application/ld+json"
+      />
+      <main className="mx-auto w-full max-w-6xl px-6 py-12">
         <Link
           className="mb-8 inline-flex items-center gap-2 text-foreground/60 text-sm hover:text-foreground"
           href="/blog"
@@ -51,6 +82,14 @@ export default async function BlogPostPage({ params }: PageProps) {
           ← Back to Blog
         </Link>
 
+        <PostCover
+          alt={post.data.title}
+          className="mb-8 aspect-[4/1] rounded-2xl border border-border"
+          image={post.data.image as string | undefined}
+          seed={post.url}
+          sizes="(max-width: 1024px) 100vw, 1152px"
+        />
+
         <article>
           <header className="mb-8 border-b pb-8">
             <h1 className="mb-4 font-bold text-4xl">{post.data.title}</h1>
@@ -63,7 +102,11 @@ export default async function BlogPostPage({ params }: PageProps) {
                   <img
                     alt={post.data.author as string}
                     className="size-8 rounded-full object-cover"
+                    draggable={false}
+                    height={32}
+                    loading="lazy"
                     src="https://ik.imagekit.io/16u211libb/avatar-educalvolpz.jpeg?updatedAt=1765524159631&tr=w-64,h-64,q-85,f-auto"
+                    width={32}
                   />
                   <span className="font-medium text-foreground">
                     {post.data.author as string}
diff --git a/apps/docs/app/blog/layout.tsx b/apps/docs/app/blog/layout.tsx
index ccb33742..26438b6e 100644
--- a/apps/docs/app/blog/layout.tsx
+++ b/apps/docs/app/blog/layout.tsx
@@ -4,15 +4,12 @@ import { BgLines } from "@docs/components/landing/bg-lines";
 import Divider from "@docs/components/landing/divider";
 import Footer from "@docs/components/landing/footer";
 import Navbar from "@docs/components/landing/navbar/navbar";
-import { getSmoothuiStats } from "@docs/lib/smoothui-stats";
 
 export default function BlogLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const stats = getSmoothuiStats();
-
   return (
     <div className="relative isolate bg-primary transition">
       <BgLines />
@@ -37,7 +34,7 @@ export default function BlogLayout({
         />
         <BlogFloatNav />
       </main>
-      <Footer componentCount={stats.componentCount} version={stats.version} />
+      <Footer />
     </div>
   );
 }
diff --git a/apps/docs/app/blog/page.tsx b/apps/docs/app/blog/page.tsx
index f0a31889..68e9fd49 100644
--- a/apps/docs/app/blog/page.tsx
+++ b/apps/docs/app/blog/page.tsx
@@ -1,13 +1,17 @@
+import { PostCover } from "@docs/components/post-cover";
 import { createMetadata } from "@docs/lib/metadata";
 import { blogSource, formatDate, getReadingTime } from "@docs/lib/source";
-import { ChevronRight } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
+import { IconChevronRightFill24 } from "nucleo-core-fill-24";
 
 export const metadata: Metadata = createMetadata({
-  title: "Blog",
+  title: "React Animation Tutorials & Guides",
   description:
     "Tutorials, tips, and case studies on building beautiful animated React components with SmoothUI and Tailwind CSS.",
+  alternates: {
+    canonical: "/blog",
+  },
   openGraph: {
     url: "/blog",
   },
@@ -40,42 +44,14 @@ function ReadLink({ title }: { title: string }) {
       className="flex items-center gap-1 font-medium text-brand text-sm transition-colors duration-200 group-hover:text-foreground"
     >
       Read
-      <ChevronRight
+      <IconChevronRightFill24
         aria-hidden="true"
         className="size-3.5 translate-y-px transition-transform duration-200 group-hover:translate-x-0.5"
-        strokeWidth={2.5}
       />
     </span>
   );
 }
 
-/** Abstract decorative illustration for the featured post. Mesh gradient, CSS-only. */
-function FeaturedIllustration() {
-  return (
-    <div
-      aria-hidden="true"
-      className="relative aspect-video overflow-hidden rounded-[10px] border border-transparent shadow-black/10 shadow-md ring-1 ring-border"
-      style={{
-        background: [
-          "radial-gradient(ellipse 80% 60% at 20% 30%, var(--color-brand) 0%, transparent 60%)",
-          "radial-gradient(ellipse 60% 80% at 75% 70%, var(--color-brand-secondary) 0%, transparent 55%)",
-          "radial-gradient(ellipse 50% 50% at 55% 20%, var(--color-brand-light) 0%, transparent 50%)",
-          "radial-gradient(ellipse 40% 60% at 40% 80%, var(--color-brand-lighter) 0%, transparent 50%)",
-          "linear-gradient(135deg, var(--color-brand-secondary) 0%, var(--color-brand-light) 100%)",
-        ].join(", "),
-      }}
-    >
-      <div
-        className="absolute inset-0 opacity-40 mix-blend-soft-light"
-        style={{
-          backgroundImage:
-            "radial-gradient(circle at 70% 25%, white 0%, transparent 40%)",
-        }}
-      />
-    </div>
-  );
-}
-
 export default async function BlogPage() {
   const posts = blogSource.getPages().sort((a, b) => {
     const dateA = new Date(a.data.date as string);
@@ -98,7 +74,7 @@ export default async function BlogPage() {
         {/* Header */}
         <div className="mb-12 max-w-xl">
           <h1 className="text-balance font-semibold text-4xl text-foreground sm:text-5xl lg:tracking-tight">
-            Blog
+            React Animation Tutorials &amp; Guides
           </h1>
           <p className="mt-3 text-muted-foreground">
             Tutorials, deep dives, and case studies on building beautiful
@@ -111,7 +87,13 @@ export default async function BlogPage() {
           {/* Featured post */}
           <article className="group relative grid divide-x divide-border md:grid-cols-2">
             <div className="bg-card p-6 lg:p-10">
-              <FeaturedIllustration />
+              <PostCover
+                alt={featured.data.title}
+                className="aspect-video rounded-[10px] border border-transparent shadow-black/10 shadow-md ring-1 ring-border"
+                image={featured.data.image as string | undefined}
+                seed={featured.url}
+                sizes="(max-width: 768px) 100vw, 460px"
+              />
             </div>
             <div>
               <Link
@@ -144,40 +126,35 @@ export default async function BlogPage() {
           {/* Posts grid */}
           {rest.length > 0 && (
             <div className="grid divide-x divide-y divide-border border-border border-t sm:grid-cols-2 lg:grid-cols-3">
-              {rest.map(async (post) => {
-                const content = await post.data.getText("processed");
-                const readingTime = getReadingTime(content);
-
-                return (
-                  <article className="group relative" key={post.url}>
-                    <Link
-                      className="flex h-full flex-col bg-card p-6 transition-colors duration-200 hover:bg-card/80 lg:p-10"
-                      href={post.url}
-                    >
-                      <div className="flex flex-1 flex-col gap-3">
-                        <time
-                          className="text-muted-foreground text-sm"
-                          dateTime={post.data.date as string}
-                        >
-                          {formatDate(post.data.date as string)}
-                        </time>
-                        <h2 className="font-semibold text-foreground transition-colors group-hover:text-brand">
-                          {post.data.title}
-                        </h2>
-                        <p className="text-muted-foreground text-sm">
-                          {post.data.description}
-                        </p>
-                      </div>
-                      <div className="mt-auto flex items-end justify-between gap-2 pt-6">
-                        {post.data.author && (
-                          <AuthorBadge name={post.data.author as string} />
-                        )}
-                        <ReadLink title={post.data.title} />
-                      </div>
-                    </Link>
-                  </article>
-                );
-              })}
+              {rest.map((post) => (
+                <article className="group relative" key={post.url}>
+                  <Link
+                    className="flex h-full flex-col bg-card p-6 transition-colors duration-200 hover:bg-card/80 lg:p-10"
+                    href={post.url}
+                  >
+                    <div className="flex flex-1 flex-col gap-3">
+                      <time
+                        className="text-muted-foreground text-sm"
+                        dateTime={post.data.date as string}
+                      >
+                        {formatDate(post.data.date as string)}
+                      </time>
+                      <h2 className="font-semibold text-foreground transition-colors group-hover:text-brand">
+                        {post.data.title}
+                      </h2>
+                      <p className="text-muted-foreground text-sm">
+                        {post.data.description}
+                      </p>
+                    </div>
+                    <div className="mt-auto flex items-end justify-between gap-2 pt-6">
+                      {post.data.author && (
+                        <AuthorBadge name={post.data.author as string} />
+                      )}
+                      <ReadLink title={post.data.title} />
+                    </div>
+                  </Link>
+                </article>
+              ))}
             </div>
           )}
         </div>
diff --git a/apps/docs/app/docs/[...slug]/page.tsx b/apps/docs/app/docs/[...slug]/page.tsx
index db3f2dc7..b2e4119b 100644
--- a/apps/docs/app/docs/[...slug]/page.tsx
+++ b/apps/docs/app/docs/[...slug]/page.tsx
@@ -1,3 +1,4 @@
+import { AddToKitButton } from "@docs/components/add-to-kit-button";
 import { BodyText } from "@docs/components/body-text";
 import { BreadcrumbSchema } from "@docs/components/breadcrumb-schema";
 import { BundleSizeBadge } from "@docs/components/bundle-size-badge";
@@ -45,6 +46,11 @@ const AutoTypeTableWithGenerator = (
   props: React.ComponentProps<typeof AutoTypeTable>
 ) => <AutoTypeTable {...props} generator={typeGenerator} />;
 
+// Renders BodyText as div to avoid <p>-in-<p> hydration errors when MDX wraps content in <p>
+const BodyTextAsDiv = (props: React.ComponentProps<typeof BodyText>) => (
+  <BodyText as="div" {...props} />
+);
+
 export default async function Page(props: PageProps<"/docs/[...slug]">) {
   const params = await props.params;
   const page = source.getPage(params.slug);
@@ -147,7 +153,7 @@ export default async function Page(props: PageProps<"/docs/[...slug]">) {
       <BreadcrumbSchema slugs={page.slugs} title={page.data.title} />
       <DocsPage
         className="max-w-[75rem]"
-        full={page.data.full ?? page.slugs.includes("blocks")}
+        full={page.data.full ?? false}
         tableOfContent={{
           style: "clerk",
           footer: footerContent,
@@ -165,20 +171,26 @@ export default async function Page(props: PageProps<"/docs/[...slug]">) {
             markdownUrl={`${page.url}.mdx`}
           />
           {registryUrl && <OpenInV0Button url={registryUrl} />}
-          {componentName && <BundleSizeBadge slug={componentName} />}
-          {lastModified && (
-            <LastModified
-              className="order-last w-full pt-2 sm:order-0 sm:ml-auto sm:w-auto sm:pt-0"
-              lastModified={lastModified}
+          {page.data.installer && (
+            <AddToKitButton
+              size="sm"
+              slug={page.data.installer}
+              title={page.data.title}
             />
           )}
+          {(componentName || lastModified) && (
+            <div className="order-last flex w-full items-center gap-2 pt-2 sm:order-0 sm:ml-auto sm:w-auto sm:pt-0">
+              {componentName && <BundleSizeBadge slug={componentName} />}
+              {lastModified && <LastModified lastModified={lastModified} />}
+            </div>
+          )}
         </div>
         <DocsBody>
           {page.data.installer && (
             <>
               <Preview path={page.data.installer} type={type} />
               <h2 id="installation">Installation</h2>
-              <Installer packageName={page.data.installer} />
+              <Installer addToKit={false} packageName={page.data.installer} />
             </>
           )}
           <MDX
@@ -201,7 +213,7 @@ export default async function Page(props: PageProps<"/docs/[...slug]">) {
               PoweredBy,
               Reference,
               Contributor,
-              BodyText,
+              BodyText: BodyTextAsDiv,
               FeatureCard,
               FeatureCardHover,
               Divider,
@@ -228,9 +240,18 @@ export async function generateMetadata(
       title: "Not Found",
     });
 
+  // Per-page fallback so pages without a frontmatter description don't all share
+  // one generic (thin/duplicate) meta description.
+  const section = slug[0];
+  const kind =
+    section === "blocks"
+      ? "block"
+      : section === "guides"
+        ? "guide"
+        : "component";
   const description =
     page.data.description ??
-    "Beautiful React components with smooth animations";
+    `${page.data.title} — an animated React ${kind} for shadcn/ui, built with Motion and Tailwind CSS. Copy, paste, and ship.`;
 
   const image = {
     url: getPageImage(page).url,
diff --git a/apps/docs/app/docs/layout.tsx b/apps/docs/app/docs/layout.tsx
index daba429a..b53cde6f 100644
--- a/apps/docs/app/docs/layout.tsx
+++ b/apps/docs/app/docs/layout.tsx
@@ -1,29 +1,37 @@
+import DocsFooter from "@docs/components/docs-footer";
 import { FloatNav } from "@docs/components/float-nav";
-import Footer from "@docs/components/landing/footer";
 import { NavSponsorCard } from "@docs/components/nav-sponsor-card";
 import { decorateNewPages } from "@docs/lib/decorate-new";
 import { baseOptions } from "@docs/lib/layout.shared";
-import { getSmoothuiStats } from "@docs/lib/smoothui-stats";
 import { source } from "@docs/lib/source";
-import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import { DocsLayout } from "fumadocs-ui/layouts/notebook";
 
 export default function Layout({ children }: LayoutProps<"/docs">) {
   const tree = decorateNewPages(source.pageTree, source);
-  const stats = getSmoothuiStats();
+  const options = baseOptions();
 
   return (
-    <>
-      <DocsLayout
-        tree={tree}
-        {...baseOptions()}
-        sidebar={{
-          footer: <NavSponsorCard />,
-        }}
-      >
-        {children}
-        <FloatNav />
-      </DocsLayout>
-      <Footer componentCount={stats.componentCount} version={stats.version} />
-    </>
+    <DocsLayout
+      tree={tree}
+      {...options}
+      containerProps={{
+        style: { "--fd-layout-width": "100%" } as React.CSSProperties,
+      }}
+      nav={{ ...options.nav, mode: "top" }}
+      sidebar={{
+        collapsible: false,
+        footer: <NavSponsorCard key="nav-sponsor-card" />,
+      }}
+      tabMode="navbar"
+    >
+      {children}
+      <FloatNav key="float-nav" />
+      {/* SEO footer inside the scroll flow, spanning the full grid width
+          so it lands at the bottom without breaking the 100dvh layout.
+          DocsFooter constrains its content to the main column band. */}
+      <div className="[grid-column:1/-1]" key="docs-footer">
+        <DocsFooter />
+      </div>
+    </DocsLayout>
   );
 }
diff --git a/apps/docs/app/fonts.ts b/apps/docs/app/fonts.ts
index 48efc6d1..b8544abe 100644
--- a/apps/docs/app/fonts.ts
+++ b/apps/docs/app/fonts.ts
@@ -1,4 +1,4 @@
-import { Inter, Poppins } from "next/font/google";
+import { Inter, Plus_Jakarta_Sans, Poppins } from "next/font/google";
 
 export const inter = Inter({
   subsets: ["latin"],
@@ -12,3 +12,10 @@ export const poppins = Poppins({
   variable: "--font-poppins",
   weight: ["400", "500", "600", "700", "800", "900"],
 });
+
+export const plusJakartaSans = Plus_Jakarta_Sans({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-plus-jakarta-sans",
+  weight: ["400", "500", "600", "700", "800"],
+});
diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css
index 559a5abd..039fca2e 100644
--- a/apps/docs/app/global.css
+++ b/apps/docs/app/global.css
@@ -11,7 +11,7 @@
 
 @theme inline {
   --font-body: var(--font-inter);
-  --font-title: var(--font-poppins);
+  --font-title: var(--font-plus-jakarta-sans);
   --shiki-theme: var(--shiki--light);
   --shiki--light: var(--shiki-theme);
   --shiki--dark: var(--shiki-theme);
@@ -36,6 +36,13 @@
   --lines-page: url("/lines-b.png");
   --color-fd-primary: var(--color-brand);
   --color-fd-secondary: var(--color-smooth-50);
+  /* Motion spine — match .cursor/rules/animations.mdc. Exit ~75% of enter;
+     always honor prefers-reduced-motion. See .ui-craft/tokens.md. */
+  --duration-fast: 0.15s;
+  --duration-normal: 0.25s;
+  --duration-slow: 0.4s;
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .dark {
@@ -56,10 +63,12 @@
     border-color: var(--color-gray-200, currentColor);
   }
   * {
+    scrollbar-color: gray transparent;
+    scrollbar-width: thin;
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
   }
 
   .dark {
@@ -90,6 +99,16 @@
   @apply from-brand-secondary to-brand bg-gradient-to-bl;
 }
 
+/* Nucleo duo-tone: color-2 inherits parent icon color at reduced opacity */
+[data-color="color-2"] {
+  color: color-mix(in oklch, currentColor 25%, transparent);
+}
+
+/* Active sidebar items: color-2 uses brand tint */
+[data-active="true"] [data-color="color-2"] {
+  color: color-mix(in oklch, var(--color-brand) 35%, transparent);
+}
+
 .shadow-custom-btgray {
   box-shadow:
     0px 1px 2px rgba(0, 0, 0, 0.4),
@@ -128,7 +147,7 @@
 }
 
 .frame-box {
-  @apply bg-primary inset-ring-background border inset-ring-2 before:absolute before:inset-0 before:bg-[radial-gradient(var(--dots-color)_1px,transparent_1px)] before:[background-size:16px_16px] before:[--dots-color:--alpha(var(--color-foreground)/5%)];
+  @apply bg-primary inset-ring-background border inset-ring-2 before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(var(--dots-color)_1px,transparent_1px)] before:[background-size:16px_16px] before:[--dots-color:--alpha(var(--color-foreground)/5%)];
 }
 
 /* Price Flow Animations */
@@ -199,22 +218,22 @@
   @apply font-semibold text-foreground tracking-tight;
 }
 .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-  @apply -tracking-wide font-bold text-3xl;
+  @apply font-extrabold text-4xl leading-tight;
 }
 .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-  @apply font-semibold text-lg;
+  @apply font-bold text-2xl leading-tight;
 }
 .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-  @apply font-semibold text-base;
+  @apply font-semibold text-xl leading-tight;
 }
 .prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-  @apply font-semibold text-sm;
+  @apply font-semibold text-lg leading-tight;
 }
 .prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-  @apply font-semibold text-xs;
+  @apply font-semibold text-base;
 }
 .prose :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-  @apply font-medium text-xs;
+  @apply font-semibold text-sm;
 }
 .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   @apply text-base;
@@ -253,3 +272,135 @@
 .animate-accordion-up {
   animation: accordion-up 0.2s ease-out;
 }
+
+/* Center the docs content column within its (full-width) grid track,
+   mirroring ElevenLabs' `w-content-width mx-auto` article. */
+#nd-page {
+  width: 100%;
+  max-width: calc(900px + 2 * 2rem);
+  margin-inline: auto;
+}
+
+/* Full pages (no TOC) stretch to the whole main track; also lift the
+   *:max-w-[1285px] child cap fumadocs applies in full mode. Unlayered
+   rules win over the layered utilities. */
+#nd-page[data-full="true"] {
+  max-width: none;
+}
+
+#nd-page[data-full="true"] > * {
+  max-width: none;
+}
+
+/* Docs headings use the title font (Plus Jakarta Sans). */
+#nd-page :is(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--font-title);
+}
+
+/* Override fumadocs utility classes on headings — unlayered beats @layer utilities */
+#nd-page h1 {
+  font-size: var(--text-4xl);
+  font-weight: 800;
+  line-height: var(--leading-tight);
+}
+#nd-page h2 {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  line-height: var(--leading-tight);
+}
+#nd-page h3 {
+  font-size: var(--text-xl);
+  font-weight: 600;
+  line-height: var(--leading-tight);
+}
+#nd-page h4 {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  line-height: var(--leading-tight);
+}
+#nd-page h5 {
+  font-size: var(--text-base);
+  font-weight: 600;
+}
+#nd-page h6 {
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+/* ElevenLabs-style docs chrome: clean white surfaces + hairline borders,
+   built from our own tokens (no hardcoded colors). */
+#nd-notebook-layout,
+#nd-sidebar {
+  --fd-sidebar-width: 240px;
+}
+
+/* The fumadocs notebook container sets grid-template via inline style using
+   `calc(var(--fd-layout-width,97rem) - sidebar - toc)` for the main track.
+   Percentage values in CSS vars don't resolve against the grid container's
+   inline size (circular), so the outer 1fr gutter columns end up non-zero
+   even with --fd-layout-width:100%. Override the column template directly
+   to collapse them to 0px.
+
+   Mobile: sidebar is max-md:hidden but with collapsible:false collapsed=false
+   always, so --fd-sidebar-col stays at 240px. Force column 2 to 0px on mobile
+   so the hidden sidebar doesn't occupy grid space. */
+@media (max-width: 767px) {
+  #nd-notebook-layout {
+    grid-template-columns: 0px 0px 1fr 0px 0px !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 1279px) {
+  #nd-notebook-layout {
+    grid-template-columns: 0px var(--fd-sidebar-col) 1fr var(--fd-toc-width) 0px !important;
+  }
+
+  #nd-notebook-layout:has(#nd-page[data-full="true"]) {
+    grid-template-columns: 0px var(--fd-sidebar-col) 1fr 0px 0px !important;
+  }
+}
+
+/* At xl+, always reserve 268px for the toc column so content width is identical
+   on pages with and without a TOC. --fd-toc-width on #nd-notebook-layout itself
+   is overridden by the [--fd-toc-width:0px] utility class on the same element,
+   so hardcode the column value directly instead of relying on the variable.
+   Exception: full pages (no TOC by design, e.g. the components gallery)
+   collapse the toc column and let the main track take the whole width. */
+@media (min-width: 1280px) {
+  #nd-notebook-layout {
+    grid-template-columns: 0px var(--fd-sidebar-col) 1fr 240px 0px !important;
+  }
+
+  #nd-notebook-layout:has(#nd-page[data-full="true"]) {
+    grid-template-columns: 0px var(--fd-sidebar-col) 1fr 0px 0px !important;
+  }
+}
+
+/* Top nav: solid surface instead of the translucent gray. The inner
+   tabs row already carries its own border-b, so no border here. */
+#nd-subnav {
+  background-color: var(--color-background);
+}
+
+/* Sidebar: hairline separator from the content column. */
+#nd-sidebar {
+  border-inline-end: 1px solid var(--color-border);
+}
+
+/* Match TOC column width to sidebar (fumadocs default 268px → 240px).
+   xl:layout:[--fd-toc-width:268px] sets it on #nd-notebook-layout via :has();
+   this unlayered rule wins over @layer utilities. */
+#nd-notebook-layout {
+  --fd-toc-width: 240px;
+}
+
+/* Three sources of top gap in the sidebar when navMode="top" + collapsible=false:
+   1. Header div (p-4 pb-2) has no visible content → collapse it
+   2. ScrollViewport inner div has p-4 top padding → remove it
+   3. Hidden lg:hidden menu items precede the first separator so first:mt-0 never
+      fires and the separator keeps mt-6; pt-0 on the viewport absorbs that. */
+#nd-sidebar > div:first-child {
+  padding-block: 0 !important;
+}
+#nd-sidebar [data-radix-scroll-area-viewport] > div {
+  padding-top: 0 !important;
+}
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index 453175d7..ef29bc3b 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -1,10 +1,11 @@
+import { SoundProvider } from "@docs/components/sound-provider";
+import { KitProvider } from "@docs/lib/kit-context";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { RootProvider } from "fumadocs-ui/provider/next";
 import type { Metadata } from "next";
-import Script from "next/script";
 import "./global.css";
-import { inter, poppins } from "./fonts";
+import { inter, plusJakartaSans, poppins } from "./fonts";
 import { smoothUISchema } from "./utils/schema";
 
 const enableVercelAnalytics =
@@ -84,7 +85,7 @@ export const metadata: Metadata = {
 export default function Layout({ children }: LayoutProps<"/">) {
   return (
     <html
-      className={`${inter.className} ${inter.variable} ${poppins.variable}`}
+      className={`${inter.className} ${inter.variable} ${poppins.variable} ${plusJakartaSans.variable}`}
       lang="en"
       suppressHydrationWarning
     >
@@ -96,20 +97,21 @@ export default function Layout({ children }: LayoutProps<"/">) {
           title="SmoothUI Blog"
           type="application/rss+xml"
         />
-      </head>
-      <body className="flex min-h-screen flex-col">
-        <Script
-          // biome-ignore lint/security/noDangerouslySetInnerHtml: Schema.org JSON-LD structured data requires innerHTML
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(smoothUISchema),
-          }}
+        <script
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: Schema.org JSON-LD structured data
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(smoothUISchema) }}
           id="smoothui-schema"
-          strategy="beforeInteractive"
           type="application/ld+json"
         />
+      </head>
+      <body className="flex min-h-screen flex-col">
         {enableVercelAnalytics && <Analytics />}
         {enableVercelAnalytics && <SpeedInsights />}
-        <RootProvider>{children}</RootProvider>
+        <RootProvider>
+          <SoundProvider>
+            <KitProvider>{children}</KitProvider>
+          </SoundProvider>
+        </RootProvider>
       </body>
     </html>
   );
diff --git a/apps/docs/app/not-found.tsx b/apps/docs/app/not-found.tsx
index fd237ddf..345033e8 100644
--- a/apps/docs/app/not-found.tsx
+++ b/apps/docs/app/not-found.tsx
@@ -8,10 +8,10 @@ import Divider from "@docs/components/landing/divider";
 import Footer from "@docs/components/landing/footer";
 import Navbar from "@docs/components/landing/navbar/navbar";
 import { Button } from "@docs/components/smoothbutton";
-import { ArrowLeft, Home } from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { IconArrowLeftFill24, IconHouse4Fill24 } from "nucleo-core-fill-24";
 import { useMemo } from "react";
 
 const quotes = [
@@ -132,12 +132,12 @@ export default function NotFound() {
               </div>
               <div className="flex flex-wrap items-center justify-center gap-3">
                 <Button onClick={() => router.back()} variant="outline">
-                  <ArrowLeft aria-hidden className="h-4 w-4" />
+                  <IconArrowLeftFill24 aria-hidden className="h-4 w-4" />
                   Go back
                 </Button>
                 <Button asChild variant="candy">
                   <Link href="/">
-                    <Home aria-hidden className="h-4 w-4" />
+                    <IconHouse4Fill24 aria-hidden className="h-4 w-4" />
                     Take me home
                   </Link>
                 </Button>
diff --git a/apps/docs/app/r/[component]/route.ts b/apps/docs/app/r/[component]/route.ts
index 1963101e..e0c38d85 100644
--- a/apps/docs/app/r/[component]/route.ts
+++ b/apps/docs/app/r/[component]/route.ts
@@ -3,6 +3,9 @@ import {
   getAllPackageNames,
   getPackage,
 } from "@docs/lib/package";
+import { getSkill, SKILL_ITEM_NAME } from "@docs/lib/registry-skill";
+import { getAllThemeNames, getTheme } from "@docs/lib/registry-themes";
+import { getCustomTheme } from "@docs/lib/studio-preset";
 import { notFound } from "next/navigation";
 import { type NextRequest, NextResponse } from "next/server";
 
@@ -28,6 +31,22 @@ export const GET = async (_: NextRequest, { params }: RegistryParams) => {
     notFound();
   }
 
+  const theme = getTheme(shortName);
+
+  if (theme) {
+    return NextResponse.json(theme);
+  }
+
+  const customTheme = getCustomTheme(shortName);
+
+  if (customTheme) {
+    return NextResponse.json(customTheme);
+  }
+
+  if (shortName === SKILL_ITEM_NAME) {
+    return NextResponse.json(await getSkill());
+  }
+
   try {
     // Get the mapping and find the full path for this short name
     const mapping = await getAllPackageNameMapping();
@@ -52,7 +71,11 @@ export const generateStaticParams = async () => {
   const allPackageNames = await getAllPackageNames();
 
   // Return only the short names for the URL
-  return allPackageNames.map((name) => ({
-    component: name.split("/").at(-1) || name,
-  }));
+  return [
+    ...allPackageNames.map((name) => ({
+      component: name.split("/").at(-1) || name,
+    })),
+    ...getAllThemeNames().map((name) => ({ component: name })),
+    { component: SKILL_ITEM_NAME },
+  ];
 };
diff --git a/apps/docs/app/r/registry.json/route.ts b/apps/docs/app/r/registry.json/route.ts
index 8c058c97..6c6e32d7 100644
--- a/apps/docs/app/r/registry.json/route.ts
+++ b/apps/docs/app/r/registry.json/route.ts
@@ -1,4 +1,6 @@
 import { getAllPackageNames, getPackage } from "@docs/lib/package";
+import { getSkill } from "@docs/lib/registry-skill";
+import { getAllThemeNames, getTheme } from "@docs/lib/registry-themes";
 import { NextResponse } from "next/server";
 import type { Registry } from "shadcn/schema";
 
@@ -33,5 +35,15 @@ export const GET = async () => {
     }
   }
 
+  for (const themeName of getAllThemeNames()) {
+    const theme = getTheme(themeName);
+
+    if (theme) {
+      response.items.push(theme);
+    }
+  }
+
+  response.items.push(await getSkill());
+
   return NextResponse.json(response);
 };
diff --git a/apps/docs/app/sitemap.ts b/apps/docs/app/sitemap.ts
index ebbb6bda..20c9a191 100644
--- a/apps/docs/app/sitemap.ts
+++ b/apps/docs/app/sitemap.ts
@@ -1,4 +1,4 @@
-import { source } from "@docs/lib/source";
+import { blogSource, source } from "@docs/lib/source";
 import type { MetadataRoute } from "next";
 
 export const revalidate = false;
@@ -93,5 +93,26 @@ export default function sitemap(): MetadataRoute.Sitemap {
         priority: getPriority(page.url),
       } as MetadataRoute.Sitemap[number];
     }),
+    {
+      url: url("/blog"),
+      changeFrequency: "weekly",
+      priority: 0.7,
+    },
+    {
+      url: url("/themes"),
+      changeFrequency: "monthly",
+      priority: 0.6,
+    },
+    ...blogSource.getPages().map(
+      (post) =>
+        ({
+          url: url(post.url),
+          lastModified: post.data.date
+            ? new Date(post.data.date as string)
+            : undefined,
+          changeFrequency: "monthly",
+          priority: 0.6,
+        }) as MetadataRoute.Sitemap[number]
+    ),
   ];
 }
diff --git a/apps/docs/app/smoothui.css b/apps/docs/app/smoothui.css
index fe821556..8348d4ad 100644
--- a/apps/docs/app/smoothui.css
+++ b/apps/docs/app/smoothui.css
@@ -7,6 +7,15 @@
   --color-brand-secondary: var(--color-brand-secondary);
   --color-brand-light: var(--color-brand-light);
   --color-brand-lighter: var(--color-brand-lighter);
+  --color-blue: var(--color-blue);
+  --color-blue-hover: var(--color-blue-hover);
+  --color-blue-fg: var(--color-blue-fg);
+  --color-amber: var(--color-amber);
+  --color-amber-hover: var(--color-amber-hover);
+  --color-amber-fg: var(--color-amber-fg);
+  --color-green: var(--color-green);
+  --color-green-hover: var(--color-green-hover);
+  --color-green-fg: var(--color-green-fg);
   --color-smooth-50: var(--color-smooth-50);
   --color-smooth-100: var(--color-smooth-100);
   --color-smooth-200: var(--color-smooth-200);
@@ -19,7 +28,7 @@
   --color-smooth-900: var(--color-smooth-900);
   --color-smooth-950: var(--color-smooth-950);
   --color-smooth-1000: var(--color-smooth-1000);
-  --color-border: var(--color-smooth-500);
+  --color-border: var(--color-smooth-300);
   --color-sidebar-ring: var(--color-brand);
   --color-sidebar-border: var(--color-smooth-400);
   --color-sidebar-accent-foreground: var(--color-smooth-900);
@@ -29,7 +38,7 @@
   --color-sidebar-foreground: var(--color-smooth-1000);
   --color-sidebar: var(--color-smooth-100);
   --color-ring: var(--color-brand);
-  --color-input: var(--color-smooth-600);
+  --color-input: var(--color-smooth-700);
   --color-destructive: var(--destructive);
   --color-accent-foreground: #fff;
   --color-accent: var(--color-brand);
@@ -56,43 +65,68 @@
   --color-brand-secondary: oklch(0.66 0.21 354.31);
   --color-brand-light: oklch(0.78 0.15 352.53);
   --color-brand-lighter: oklch(0.85 0.1 352.53);
+  /* DS Button color families (decoupled `color` axis). Each: base / hover / fg.
+     Soft + outline tints are derived at use-site via color-mix. See design-system/components/button.md */
+  --color-blue: oklch(0.62 0.19 256);
+  --color-blue-hover: oklch(0.56 0.2 256);
+  --color-blue-fg: #fff;
+  --color-amber: oklch(0.77 0.16 75);
+  --color-amber-hover: oklch(0.71 0.17 70);
+  --color-amber-fg: var(--color-smooth-1000);
+  --color-green: oklch(0.7 0.17 152);
+  --color-green-hover: oklch(0.64 0.18 152);
+  --color-green-fg: #fff;
+  /* Perceptually uniform neutral ramp. Even oklch-L spacing so mid-tones
+     exist for legible borders and secondary text. See DS-AUDIT.md. */
   --color-smooth-50: oklch(0.99 0 0);
-  --color-smooth-100: oklch(0.98 0 0);
-  --color-smooth-200: oklch(0.96 0 0);
-  --color-smooth-300: oklch(0.95 0 0);
-  --color-smooth-400: oklch(0.93 0 0);
-  --color-smooth-500: oklch(0.91 0 0);
-  --color-smooth-600: oklch(0.89 0 0);
-  --color-smooth-700: oklch(0.83 0 0);
-  --color-smooth-800: oklch(0.65 0 0);
-  --color-smooth-900: oklch(0.62 0 0);
-  --color-smooth-950: oklch(0.54 0 0);
-  --color-smooth-1000: oklch(0.2 0 0);
-  --border: var(--color-smooth-300);
-  --text-primary: var(--color-smooth-200);
-  --text-quaternary: var(--color-smooth-1000);
+  --color-smooth-100: oklch(0.972 0 0);
+  --color-smooth-200: oklch(0.945 0 0);
+  --color-smooth-300: oklch(0.91 0 0);
+  --color-smooth-400: oklch(0.865 0 0);
+  --color-smooth-500: oklch(0.81 0 0);
+  --color-smooth-600: oklch(0.74 0 0);
+  --color-smooth-700: oklch(0.66 0 0);
+  --color-smooth-800: oklch(0.56 0 0);
+  --color-smooth-900: oklch(0.47 0 0);
+  --color-smooth-950: oklch(0.36 0 0);
+  --color-smooth-1000: oklch(0.22 0 0);
+  /* Shimmer text gradient (loading-shimmer utility below): base = outer
+     gradient stops (resting text color), highlight = animated mid-stop sweep. */
+  --shimmer-highlight: var(--color-smooth-200);
+  --shimmer-base: var(--color-smooth-1000);
   --radius: 0.625rem;
-  --color-input: var(--color-smooth-600);
+  --destructive: oklch(0.577 0.245 27.325);
+  --sidebar-accent: var(--color-smooth-200);
   --color-fd-card: var(--color-smooth-100);
 }
 
 .dark {
-  --color-smooth-50: oklch(20.02% 0 0);
-  --color-smooth-100: oklch(22.64% 0 0);
-  --color-smooth-200: oklch(25.62% 0 0);
-  --color-smooth-300: oklch(27.68% 0 0);
-  --color-smooth-400: oklch(30.12% 0 0);
-  --color-smooth-500: oklch(32.5% 0 0);
-  --color-smooth-600: oklch(36.39% 0 0);
-  --color-smooth-700: oklch(43.13% 0 0);
-  --color-smooth-800: oklch(54.52% 0 0);
-  --color-smooth-900: oklch(59.31% 0 0);
-  --color-smooth-950: oklch(70.58% 0 0);
-  --color-smooth-1000: oklch(94.61% 0 0);
-  --border: var(--color-smooth-300);
-  --text-primary: var(--color-smooth-200);
-  --text-quaternary: var(--color-smooth-1000);
-  --color-input: var(--color-smooth-700);
+  --destructive: oklch(0.704 0.191 22.216);
+  /* DS Button color families — dark mode (lift base L, amber keeps dark fg). */
+  --color-blue: oklch(0.66 0.18 256);
+  --color-blue-hover: oklch(0.72 0.16 256);
+  --color-blue-fg: #fff;
+  --color-amber: oklch(0.8 0.15 75);
+  --color-amber-hover: oklch(0.85 0.14 72);
+  --color-amber-fg: oklch(0.2 0 0);
+  --color-green: oklch(0.73 0.16 152);
+  --color-green-hover: oklch(0.79 0.15 152);
+  --color-green-fg: oklch(0.2 0 0);
+  /* Perceptually uniform dark ramp (50 darkest → 1000 lightest). */
+  --color-smooth-50: oklch(0.2 0 0);
+  --color-smooth-100: oklch(0.235 0 0);
+  --color-smooth-200: oklch(0.275 0 0);
+  --color-smooth-300: oklch(0.315 0 0);
+  --color-smooth-400: oklch(0.36 0 0);
+  --color-smooth-500: oklch(0.41 0 0);
+  --color-smooth-600: oklch(0.47 0 0);
+  --color-smooth-700: oklch(0.55 0 0);
+  --color-smooth-800: oklch(0.66 0 0);
+  --color-smooth-900: oklch(0.74 0 0);
+  --color-smooth-950: oklch(0.85 0 0);
+  --color-smooth-1000: oklch(0.96 0 0);
+  --shimmer-highlight: var(--color-smooth-200);
+  --shimmer-base: var(--color-smooth-1000);
   --color-fd-card: var(--color-smooth-100);
 }
 
@@ -164,23 +198,23 @@
   .loading-shimmer {
     display: inline-block;
     -webkit-text-fill-color: transparent;
-    background: var(--text-quaternary)
+    background: var(--shimmer-base)
       gradient(
         linear,
         100% 0,
         0 0,
-        from(var(--text-quaternary)),
-        color-stop(0.5, var(--text-primary)),
-        to(var(--text-quaternary))
+        from(var(--shimmer-base)),
+        color-stop(0.5, var(--shimmer-highlight)),
+        to(var(--shimmer-base))
       );
-    background: var(--text-quaternary)
+    background: var(--shimmer-base)
       -webkit-gradient(
         linear,
         100% 0,
         0 0,
-        from(var(--text-quaternary)),
-        color-stop(0.5, var(--text-primary)),
-        to(var(--text-quaternary))
+        from(var(--shimmer-base)),
+        color-stop(0.5, var(--shimmer-highlight)),
+        to(var(--shimmer-base))
       );
     background-repeat: no-repeat;
     -webkit-background-clip: text;
@@ -196,7 +230,7 @@
     background-position: -100% top;
   }
   .loading-shimmer:hover {
-    -webkit-text-fill-color: var(--text-quaternary);
+    -webkit-text-fill-color: var(--shimmer-base);
     background: transparent;
     animation: none;
   }
diff --git a/apps/docs/components/add-to-kit-button.tsx b/apps/docs/components/add-to-kit-button.tsx
new file mode 100644
index 00000000..b7dcd0a9
--- /dev/null
+++ b/apps/docs/components/add-to-kit-button.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { useKit } from "@docs/lib/kit-context";
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import { track } from "@vercel/analytics";
+import { IconCheckFill24 } from "nucleo-core-fill-24";
+
+export interface AddToKitButtonProps {
+  className?: string;
+  iconOnly?: boolean;
+  size?: "xs" | "sm";
+  slug: string;
+  title: string;
+}
+
+function BundleLayersIcon() {
+  return (
+    <svg aria-hidden="true" fill="none" viewBox="0 0 24 24">
+      <path
+        d="M12 4.5 19.25 8.35 12 12.2 4.75 8.35 12 4.5Z"
+        fill="var(--color-brand)"
+        opacity="0.42"
+      />
+      <path
+        d="M7 12.2 12 14.85l5-2.65v2.35L12 17.2l-5-2.65V12.2Z"
+        fill="var(--color-brand)"
+        opacity="0.24"
+      />
+      <path
+        d="M4.75 8.35 12 4.5l7.25 3.85L12 12.2 4.75 8.35Z"
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="1.6"
+      />
+      <path
+        d="m7 12.2 5 2.65 5-2.65M7 15.45l5 2.65 5-2.65"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.6"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Toggle a component in/out of the install kit. Stop event propagation so it
+ * works inside linked cards without triggering navigation.
+ */
+export function AddToKitButton({
+  slug,
+  title,
+  className,
+  iconOnly = false,
+  size = "sm",
+}: AddToKitButtonProps) {
+  const { has, toggle } = useKit();
+  const inKit = has(slug);
+
+  return (
+    <button
+      aria-label={
+        inKit ? `Remove ${title} from bundle` : `Add ${title} to bundle`
+      }
+      aria-pressed={inKit}
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md border border-transparent bg-background font-medium shadow-black/15 shadow-sm ring-1 ring-foreground/10 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:ring-foreground/15",
+        size === "sm" && "h-9 px-3 text-sm [&_svg]:size-4",
+        size === "xs" && "h-7 px-2.5 text-xs [&_svg]:size-3.5",
+        iconOnly && size === "sm" && "w-9 px-0",
+        iconOnly && size === "xs" && "w-7 px-0",
+        inKit
+          ? "border-brand/30 bg-brand/10 text-brand hover:bg-brand/15"
+          : "text-foreground hover:bg-primary",
+        className
+      )}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!inKit) {
+          track("bundle_add", { slug });
+        }
+        toggle({ slug, title });
+      }}
+      title={inKit ? "Remove from bundle" : "Add to bundle"}
+      type="button"
+    >
+      {inKit ? <IconCheckFill24 aria-hidden="true" /> : <BundleLayersIcon />}
+      {!iconOnly && (inKit ? "Added" : "Add")}
+    </button>
+  );
+}
diff --git a/apps/docs/components/blog-float-nav.tsx b/apps/docs/components/blog-float-nav.tsx
index 2a903e10..40e4c123 100644
--- a/apps/docs/components/blog-float-nav.tsx
+++ b/apps/docs/components/blog-float-nav.tsx
@@ -1,8 +1,12 @@
 "use client";
 
 import { useSearchContext } from "fumadocs-ui/contexts/search";
-import { Moon, Search, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
+import {
+  IconMagnifierFill24,
+  IconMoonFill24,
+  IconSunFill24,
+} from "nucleo-core-fill-24";
 import { ColorPickerFloatNav } from "./color-picker-float-nav";
 
 function ThemeSwitch() {
@@ -18,7 +22,11 @@ function ThemeSwitch() {
       onClick={toggleTheme}
       type="button"
     >
-      {resolvedTheme === "dark" ? <Sun size={20} /> : <Moon size={20} />}
+      {resolvedTheme === "dark" ? (
+        <IconSunFill24 size={20} />
+      ) : (
+        <IconMoonFill24 size={20} />
+      )}
     </button>
   );
 }
@@ -33,7 +41,7 @@ function SearchButton() {
       onClick={() => setOpenSearch(true)}
       type="button"
     >
-      <Search size={20} />
+      <IconMagnifierFill24 size={20} />
     </button>
   );
 }
diff --git a/apps/docs/components/blog/interactive-avatar-tutorial.tsx b/apps/docs/components/blog/interactive-avatar-tutorial.tsx
index 980ffd9e..a4ae9e01 100644
--- a/apps/docs/components/blog/interactive-avatar-tutorial.tsx
+++ b/apps/docs/components/blog/interactive-avatar-tutorial.tsx
@@ -7,8 +7,12 @@ import {
 } from "@repo/shadcn-ui/components/ui/popover";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
-import { Eye, Package, User } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  IconBoxFill24,
+  IconEyeFill24,
+  IconUserFill24,
+} from "nucleo-core-fill-24";
 import { useEffect, useRef, useState } from "react";
 
 // SmoothUI Logo Isotype
@@ -351,6 +355,7 @@ export function InteractiveAvatarTutorial({
                     <img
                       alt="User Avatar"
                       className="size-full object-cover"
+                      draggable={false}
                       height={48}
                       src={mockUser.avatar}
                       width={48}
@@ -393,7 +398,7 @@ export function InteractiveAvatarTutorial({
                               onClick={() => handleSectionClick("profile")}
                               type="button"
                             >
-                              <User className="shrink-0" size={16} />
+                              <IconUserFill24 className="shrink-0" size={16} />
                               Edit Profile
                             </button>
                             <AnimatePresence initial={false}>
@@ -487,7 +492,7 @@ export function InteractiveAvatarTutorial({
                               onClick={() => handleSectionClick("orders")}
                               type="button"
                             >
-                              <Package className="shrink-0" size={16} />
+                              <IconBoxFill24 className="shrink-0" size={16} />
                               Last Orders
                             </button>
                             <AnimatePresence initial={false}>
@@ -605,7 +610,7 @@ export function InteractiveAvatarTutorial({
                                             className="flex shrink-0 items-center justify-center rounded-md border bg-background p-2"
                                             type="button"
                                           >
-                                            <Eye
+                                            <IconEyeFill24
                                               className="text-muted-foreground"
                                               size={16}
                                             />
diff --git a/apps/docs/components/blog/interactive-rich-popover-tutorial.tsx b/apps/docs/components/blog/interactive-rich-popover-tutorial.tsx
index 7ac6d754..489337cd 100644
--- a/apps/docs/components/blog/interactive-rich-popover-tutorial.tsx
+++ b/apps/docs/components/blog/interactive-rich-popover-tutorial.tsx
@@ -7,8 +7,12 @@ import {
 } from "@repo/shadcn-ui/components/ui/popover";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
-import { Clock, ExternalLink, Play } from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
+import {
+  IconClockFill24,
+  IconExternalLinkFill24,
+  IconMediaPlayFill24,
+} from "nucleo-core-fill-24";
 import { useEffect, useRef, useState } from "react";
 
 // SmoothUI Logo Isotype
@@ -87,7 +91,7 @@ const CODE_SNIPPETS: Record<StepId, string> = {
     <div className="flex-1">
       <h3 className="font-semibold text-white">
         Video Title
-        <ExternalLink className="ml-1 inline" />
+        <IconExternalLinkFill24 className="ml-1 inline" />
       </h3>
       <p className="text-white/70 text-sm">
         Description text here...
@@ -368,7 +372,7 @@ export function InteractiveRichPopoverTutorial({
                                 target="_blank"
                               >
                                 Introducing GPT-5
-                                <ExternalLink className="size-3.5" />
+                                <IconExternalLinkFill24 className="size-3.5" />
                               </a>
                               <p className="mt-1 max-w-[220px] text-pretty text-sm text-white/70">
                                 OpenAI announces their most capable model yet
@@ -379,14 +383,14 @@ export function InteractiveRichPopoverTutorial({
                             {/* Meta & Action */}
                             <div className="flex items-center justify-between pt-1">
                               <div className="flex items-center gap-1.5 text-white/50 text-xs">
-                                <Clock className="size-3.5" />
+                                <IconClockFill24 className="size-3.5" />
                                 <span>12:34</span>
                               </div>
                               <button
                                 className="flex items-center gap-1.5 rounded-md bg-white px-3 py-1.5 font-medium text-black text-xs transition-colors hover:bg-white/90"
                                 type="button"
                               >
-                                <Play className="size-3.5" />
+                                <IconMediaPlayFill24 className="size-3.5" />
                                 Play
                               </button>
                             </div>
diff --git a/apps/docs/components/bundle-size-badge.tsx b/apps/docs/components/bundle-size-badge.tsx
index f525efc4..79c9bed9 100644
--- a/apps/docs/components/bundle-size-badge.tsx
+++ b/apps/docs/components/bundle-size-badge.tsx
@@ -26,7 +26,7 @@ export const BundleSizeBadge = ({ slug, className }: BundleSizeBadgeProps) => {
       )}
       title={`Minified: ${formatSize(size.minified)} / Gzipped: ${formatSize(size.gzipped)}`}
     >
-      <Package aria-hidden="true" className="h-3 w-3" />
+      <Package aria-hidden="true" className="h-3.5 w-3.5" />
       {formatSize(size.gzipped)}
     </span>
   );
diff --git a/apps/docs/components/changelog-popover.tsx b/apps/docs/components/changelog-popover.tsx
new file mode 100644
index 00000000..c0e36077
--- /dev/null
+++ b/apps/docs/components/changelog-popover.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import { CHANGELOG } from "@docs/lib/changelog-data";
+import { buttonVariants } from "fumadocs-ui/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "fumadocs-ui/components/ui/popover";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+// Tracks the newest changelog entry the user has seen, so the bell trigger
+// can show an unread dot without a hydration mismatch (state starts empty
+// and is only populated client-side in an effect).
+const SEEN_STORAGE_KEY = "smoothui-changelog-seen";
+
+const getNewestChangelogDate = () => CHANGELOG[0]?.date;
+
+function useChangelogUnread() {
+  const [hasUnread, setHasUnread] = useState(false);
+
+  useEffect(() => {
+    const newestDate = getNewestChangelogDate();
+    if (!newestDate || typeof window === "undefined") {
+      return;
+    }
+    try {
+      const seen = window.localStorage.getItem(SEEN_STORAGE_KEY);
+      const newestTime = Date.parse(newestDate);
+      const seenTime = seen ? Date.parse(seen) : 0;
+      if (Number.isNaN(newestTime)) {
+        return;
+      }
+      setHasUnread(!seenTime || newestTime > seenTime);
+    } catch {
+      // localStorage unavailable (privacy mode, etc.) — skip the indicator.
+    }
+  }, []);
+
+  const markAsSeen = () => {
+    const newestDate = getNewestChangelogDate();
+    if (!(newestDate && typeof window !== "undefined")) {
+      return;
+    }
+    try {
+      window.localStorage.setItem(SEEN_STORAGE_KEY, newestDate);
+    } catch {
+      // Ignore write failures — worst case the dot reappears next visit.
+    }
+    setHasUnread(false);
+  };
+
+  return { hasUnread, markAsSeen };
+}
+
+function BellIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      height="18"
+      viewBox="0 0 20 20"
+      width="18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.875 13.5367C16.875 13.9997 16.4997 14.375 16.0368 14.375H3.96327C3.50031 14.375 3.125 13.9997 3.125 13.5367C3.125 13.4031 3.15696 13.2713 3.21822 13.1526L4.1665 11.3134C4.32966 10.997 4.42335 10.6494 4.44131 10.2938L4.58626 7.42413C4.7305 4.54901 7.11155 2.29166 10 2.29166C12.8884 2.29166 15.2695 4.54901 15.4137 7.42413L15.5587 10.2938C15.5767 10.6494 15.6703 10.997 15.8335 11.3134L16.7817 13.1526C16.843 13.2713 16.875 13.4031 16.875 13.5367Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M13.3332 14.375C13.3332 16.2159 11.8408 17.7083 9.99984 17.7083C8.15889 17.7083 6.6665 16.2159 6.6665 14.375"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
+
+function ArrowIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="-mt-0.5 ml-1 inline h-3 w-3 -translate-x-1 opacity-0 transition duration-200 group-hover:translate-x-0 group-hover:opacity-100 group-focus:translate-x-0 group-focus:opacity-100"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function ChangelogPopover() {
+  const { hasUnread, markAsSeen } = useChangelogUnread();
+
+  return (
+    <Popover
+      onOpenChange={(open) => {
+        if (open) {
+          markAsSeen();
+        }
+      }}
+    >
+      <PopoverTrigger asChild>
+        <button
+          aria-label="Changelog"
+          className={buttonVariants({
+            color: "ghost",
+            size: "icon-sm",
+            className: "relative text-fd-muted-foreground",
+          })}
+          type="button"
+        >
+          <BellIcon />
+          {hasUnread && (
+            <span
+              aria-hidden="true"
+              className="absolute top-0.5 right-0.5 size-1.5 rounded-full bg-brand"
+            />
+          )}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        className="w-[340px] overflow-hidden rounded-2xl p-0"
+        sideOffset={8}
+      >
+        <div className="flex items-center justify-between border-b px-4 py-3">
+          <span className="font-semibold text-sm">What's new</span>
+          <Link
+            className="text-muted-foreground text-xs transition-colors hover:text-foreground"
+            href="/docs/guides/changelog"
+          >
+            View all →
+          </Link>
+        </div>
+        <ul className="max-h-[420px] divide-y overflow-y-auto">
+          {CHANGELOG.map((entry) => (
+            <li
+              className="group relative px-4 py-3.5 transition-colors hover:bg-fd-accent"
+              key={entry.id}
+            >
+              <div className="flex items-center gap-2">
+                <span className="rounded-full bg-brand/10 px-1.5 py-0.5 font-mono text-[10px] text-brand">
+                  v{entry.version}
+                </span>
+                <span className="text-muted-foreground/60 text-xs">
+                  {entry.date}
+                </span>
+              </div>
+              <h3 className="mt-1.5 font-semibold text-sm leading-snug">
+                <Link
+                  className="outline-none focus-visible:ring-2 focus-visible:ring-brand"
+                  href={entry.href}
+                >
+                  <span className="absolute inset-0 z-10" />
+                  {entry.title}
+                  <ArrowIcon />
+                </Link>
+              </h3>
+              <p className="mt-1 text-muted-foreground text-xs leading-relaxed">
+                {entry.description}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/components/color-picker-float-nav.tsx b/apps/docs/components/color-picker-float-nav.tsx
index 6629d65d..3c98d4ee 100644
--- a/apps/docs/components/color-picker-float-nav.tsx
+++ b/apps/docs/components/color-picker-float-nav.tsx
@@ -6,13 +6,24 @@ import {
   persistColorPalette,
   resetColorPalette,
 } from "@docs/app/lib/color-palette";
-import { Button } from "@repo/shadcn-ui/components/ui/button";
-import { Check, CheckCheck, RotateCcw, Save } from "lucide-react";
+import { Button } from "@docs/components/smoothbutton";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  IconArrowRightFill24,
+  IconCheckDoubleFill24,
+  IconCheckFill24,
+  IconCopy2Fill24,
+  IconFloppyDiskFill24,
+  IconRefresh2Fill24,
+} from "nucleo-core-fill-24";
 import { useEffect, useRef, useState } from "react";
 
 const CLOSE_DELAY = 200;
 const SAVE_MESSAGE_DURATION = 1200;
+const COPY_MESSAGE_DURATION = 1200;
+
+const themeInstallCommand = (paletteName: string) =>
+  `npx shadcn@latest add https://smoothui.dev/r/theme-${paletteName.toLowerCase()}.json`;
 
 const PALETTES = [
   {
@@ -54,8 +65,25 @@ export function ColorPickerFloatNav() {
   const pickerRef = useRef<HTMLDivElement>(null);
   const [show, setShow] = useState(false);
   const [saved, setSaved] = useState(false);
+  const [copied, setCopied] = useState(false);
   const shouldReduceMotion = useReducedMotion();
 
+  const selectedPalette = PALETTES.find(
+    (palette) =>
+      palette.candy === candy && palette.candySecondary === candySecondary
+  );
+
+  async function handleCopyInstall() {
+    if (!selectedPalette) {
+      return;
+    }
+    await navigator.clipboard.writeText(
+      themeInstallCommand(selectedPalette.name)
+    );
+    setCopied(true);
+    setTimeout(() => setCopied(false), COPY_MESSAGE_DURATION);
+  }
+
   useEffect(() => {
     const savedColors = localStorage.getItem(COLOR_STORAGE_KEY);
     if (savedColors) {
@@ -238,7 +266,7 @@ export function ColorPickerFloatNav() {
                           }
                         >
                           <span className="rounded-full bg-white/40 p-0.5">
-                            <Check className="h-4 w-4 text-white" />
+                            <IconCheckFill24 className="h-4 w-4 text-white" />
                           </span>
                         </motion.span>
                       )}
@@ -246,6 +274,27 @@ export function ColorPickerFloatNav() {
                 </motion.button>
               ))}
             </div>
+            {selectedPalette && (
+              <Button
+                aria-label={`Copy install command for the ${selectedPalette.name} theme`}
+                className="w-full font-mono text-xs"
+                onClick={handleCopyInstall}
+                size="sm"
+                type="button"
+                variant="candy"
+              >
+                {copied ? (
+                  <>
+                    <IconCheckDoubleFill24 className="h-3.5 w-3.5" /> Copied!
+                  </>
+                ) : (
+                  <>
+                    <IconCopy2Fill24 className="h-3.5 w-3.5" /> Install{" "}
+                    {selectedPalette.name} theme
+                  </>
+                )}
+              </Button>
+            )}
             <div className="mt-2 flex justify-end gap-2">
               <Button
                 aria-label="Reset to original colors"
@@ -254,7 +303,7 @@ export function ColorPickerFloatNav() {
                 type="button"
                 variant="outline"
               >
-                <RotateCcw className="mr-1 h-4 w-4" />
+                <IconRefresh2Fill24 className="mr-1 h-4 w-4" />
                 Reset
               </Button>
               <Button
@@ -262,18 +311,26 @@ export function ColorPickerFloatNav() {
                 onClick={handleSave}
                 size="sm"
                 type="button"
+                variant="candy"
               >
                 {saved ? (
                   <>
-                    <CheckCheck className="h-4 w-4" /> Saved!
+                    <IconCheckDoubleFill24 className="h-4 w-4" /> Saved!
                   </>
                 ) : (
                   <>
-                    <Save className="h-4 w-4" /> Save
+                    <IconFloppyDiskFill24 className="h-4 w-4" /> Save
                   </>
                 )}
               </Button>
             </div>
+            <a
+              className="mt-3 flex items-center gap-1 text-muted-foreground text-xs transition-colors hover:text-foreground"
+              href="/themes"
+            >
+              Browse installable themes
+              <IconArrowRightFill24 className="h-3 w-3" />
+            </a>
           </motion.div>
         )}
       </AnimatePresence>
diff --git a/apps/docs/components/contributor.tsx b/apps/docs/components/contributor.tsx
index 444974c3..a882e914 100644
--- a/apps/docs/components/contributor.tsx
+++ b/apps/docs/components/contributor.tsx
@@ -4,8 +4,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@repo/shadcn-ui/components/ui/tooltip";
-import { GitBranch, UserIcon } from "lucide-react";
 import Image from "next/image";
+import { IconBranchOutFill24, IconUserFill24 } from "nucleo-core-fill-24";
 
 interface ContributorProps {
   contributors?: ContributorInfo[];
@@ -27,10 +27,10 @@ export const Contributor = ({
       {/* Created by section */}
       <div className="flex flex-col gap-2">
         <div className="flex items-center gap-2">
-          <UserIcon className="size-4 text-muted-foreground" />
+          <IconUserFill24 className="size-4 text-muted-foreground" />
           <p className="text-muted-foreground text-sm">Created by</p>
         </div>
-        <div className="pl-[14px]">
+        <div className="pl-3.5">
           {/* Creator - more prominent */}
           {creator.url ? (
             <a
@@ -44,6 +44,7 @@ export const Contributor = ({
                   <Image
                     alt={`${creator.name}'s avatar`}
                     className="object-cover"
+                    draggable={false}
                     height={24}
                     src={creator.avatar}
                     width={24}
@@ -51,7 +52,7 @@ export const Contributor = ({
                 </div>
               ) : (
                 <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full border border-border bg-muted">
-                  <UserIcon className="h-3 w-3 text-muted-foreground" />
+                  <IconUserFill24 className="h-3 w-3 text-muted-foreground" />
                 </div>
               )}
               <span className="font-normal text-muted-foreground text-sm">
@@ -65,6 +66,7 @@ export const Contributor = ({
                   <Image
                     alt={`${creator.name}'s avatar`}
                     className="object-cover"
+                    draggable={false}
                     height={24}
                     src={creator.avatar}
                     width={24}
@@ -72,7 +74,7 @@ export const Contributor = ({
                 </div>
               ) : (
                 <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full border border-border bg-muted">
-                  <UserIcon className="h-3 w-3 text-muted-foreground" />
+                  <IconUserFill24 className="h-3 w-3 text-muted-foreground" />
                 </div>
               )}
               <span className="font-light text-muted-foreground text-sm">
@@ -87,10 +89,10 @@ export const Contributor = ({
       {otherContributors.length > 0 && (
         <div className="mt-6 flex flex-col gap-2">
           <div className="flex items-center gap-2">
-            <GitBranch className="size-4 text-muted-foreground" />
+            <IconBranchOutFill24 className="size-4 text-muted-foreground" />
             <p className="text-muted-foreground text-sm">Improved by</p>
           </div>
-          <div className="flex flex-wrap items-center gap-2 pl-[14px]">
+          <div className="flex flex-wrap items-center gap-2 pl-3.5">
             {otherContributors.map((contributor, index) => (
               <Tooltip key={`${contributor.email}-${index}`}>
                 <TooltipTrigger asChild>
@@ -109,13 +111,14 @@ export const Contributor = ({
                         <Image
                           alt={`${contributor.name}'s avatar`}
                           className="object-cover"
+                          draggable={false}
                           height={24}
                           src={contributor.avatar}
                           width={24}
                         />
                       ) : (
                         <div className="flex h-full w-full items-center justify-center bg-muted">
-                          <UserIcon className="h-3 w-3 text-muted-foreground" />
+                          <IconUserFill24 className="h-3 w-3 text-muted-foreground" />
                         </div>
                       )}
                     </a>
@@ -131,13 +134,14 @@ export const Contributor = ({
                         <Image
                           alt={`${contributor.name}'s avatar`}
                           className="object-cover"
+                          draggable={false}
                           height={24}
                           src={contributor.avatar}
                           width={24}
                         />
                       ) : (
                         <div className="flex h-full w-full items-center justify-center bg-muted">
-                          <UserIcon className="h-3 w-3 text-muted-foreground" />
+                          <IconUserFill24 className="h-3 w-3 text-muted-foreground" />
                         </div>
                       )}
                     </div>
diff --git a/apps/docs/components/docs-footer.tsx b/apps/docs/components/docs-footer.tsx
new file mode 100644
index 00000000..0d93f267
--- /dev/null
+++ b/apps/docs/components/docs-footer.tsx
@@ -0,0 +1,11 @@
+import { FooterBody } from "@docs/components/landing/footer";
+
+export default function DocsFooter() {
+  return (
+    <footer className="py-12 sm:py-16 md:ps-60 xl:pe-[268px]">
+      <div className="mx-auto w-full max-w-[calc(56.25rem+4rem)]">
+        <FooterBody />
+      </div>
+    </footer>
+  );
+}
diff --git a/apps/docs/components/feature-card.tsx b/apps/docs/components/feature-card.tsx
index 988c7c32..acafc9c2 100644
--- a/apps/docs/components/feature-card.tsx
+++ b/apps/docs/components/feature-card.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from "react";
 import { BgLines } from "./landing/bg-lines";
 
 const featureCardVariants = cva(
-  "frame-box relative grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg bg-linear-to-br from-background via-background p-4",
+  "frame-box relative grid grid-cols-[4px_1fr] items-start gap-2 rounded-md bg-linear-to-br from-background via-background px-3 py-2.5",
   {
     variants: {
       variant: {
@@ -48,15 +48,17 @@ export function FeatureCard({
   variant,
 }: FeatureCardProps) {
   return (
-    <div className={cn(featureCardVariants({ variant }), className)}>
+    <div
+      className={cn(featureCardVariants({ variant }), "not-prose", className)}
+    >
       <BgLines />
       <div
         className={featureCardBarVariants({ variant })}
         role="presentation"
       />
       <div className="relative z-10">
-        <p>{title}</p>
-        <div className="text-foreground/70 text-sm leading-relaxed">
+        <p className="m-0 mb-1 font-medium text-xs">{title}</p>
+        <div className="text-foreground/70 text-xs leading-normal [&_p]:m-0">
           {children}
         </div>
       </div>
diff --git a/apps/docs/components/float-nav.tsx b/apps/docs/components/float-nav.tsx
index e407baa6..1b9853f1 100644
--- a/apps/docs/components/float-nav.tsx
+++ b/apps/docs/components/float-nav.tsx
@@ -1,23 +1,93 @@
 "use client";
 
-import { Moon, Sun } from "lucide-react";
+import { useSoundToggle, useUiSound } from "@docs/components/sound-provider";
 import { useTheme } from "next-themes";
+import { IconMoonFill24, IconSunFill24 } from "nucleo-core-fill-24";
 import { ColorPickerFloatNav } from "./color-picker-float-nav";
+import { KitFloatNav } from "./kit-float-nav";
+import { PmFloatNav } from "./pm-float-nav";
 
 function ThemeSwitch() {
   const { resolvedTheme, setTheme } = useTheme();
+  const playToggle = useUiSound("/sounds/toggle_on.wav", 0.4);
 
-  const toggleTheme = () =>
+  const toggleTheme = () => {
+    playToggle();
     setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
 
   return (
     <button
       aria-label="Theme Switcher"
-      className="float-trigger h-auto w-auto p-2!"
+      className="float-trigger grid h-11! w-11! place-items-center p-0!"
       onClick={toggleTheme}
       type="button"
     >
-      {resolvedTheme === "dark" ? <Sun size={20} /> : <Moon size={20} />}
+      {resolvedTheme === "dark" ? (
+        <IconSunFill24 size={20} />
+      ) : (
+        <IconMoonFill24 size={20} />
+      )}
+    </button>
+  );
+}
+
+function SoundToggle() {
+  const { enabled, setEnabled, suppressed } = useSoundToggle();
+  const playOn = useUiSound("/sounds/toggle_on.wav", 0.4);
+
+  // Coarse-pointer devices duck media to play cues — hide the control there.
+  if (suppressed) {
+    return null;
+  }
+
+  const toggle = () => {
+    const next = !enabled;
+    setEnabled(next);
+    if (next) {
+      playOn({ forceSoundEnabled: true });
+    }
+  };
+
+  return (
+    <button
+      aria-label={enabled ? "Mute interface sounds" : "Enable interface sounds"}
+      aria-pressed={enabled}
+      className="float-trigger grid h-11! w-11! place-items-center p-0!"
+      onClick={toggle}
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11 5 6 9H3v6h3l5 4V5Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="2"
+        />
+        {enabled ? (
+          <path
+            d="M15.5 8.5a5 5 0 0 1 0 7M18 6a8.5 8.5 0 0 1 0 12"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+          />
+        ) : (
+          <path
+            d="m16 9 5 6m0-6-5 6"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+          />
+        )}
+      </svg>
     </button>
   );
 }
@@ -26,11 +96,18 @@ export function FloatNav() {
   return (
     <nav
       aria-label="Floating Navigation"
-      className="fixed bottom-5 left-1/2 z-50 flex w-fit -translate-x-1/2 flex-row items-center justify-center whitespace-nowrap rounded-full border bg-background/70 px-1 py-1 text-foreground bg-blend-luminosity shadow-xs backdrop-blur-xl transition"
+      className="fixed bottom-5 left-1/2 z-50 flex w-fit max-w-[calc(100vw-2rem)] -translate-x-1/2 flex-row items-center justify-center whitespace-nowrap rounded-full border bg-background/70 px-1 py-1 text-foreground bg-blend-luminosity shadow-xs backdrop-blur-xl transition"
     >
-      <div className="flex items-center">
+      <div className="flex items-center gap-0.5">
+        {/* Site options */}
         <ThemeSwitch />
+        <SoundToggle />
         <ColorPickerFloatNav />
+        {/* Divider */}
+        <div aria-hidden className="mx-1 h-5 w-px bg-border" />
+        {/* Install configurator */}
+        <PmFloatNav />
+        <KitFloatNav />
       </div>
     </nav>
   );
diff --git a/apps/docs/components/gallery/component-card.tsx b/apps/docs/components/gallery/component-card.tsx
index 0fdffc72..14ca4856 100644
--- a/apps/docs/components/gallery/component-card.tsx
+++ b/apps/docs/components/gallery/component-card.tsx
@@ -1,151 +1,56 @@
 "use client";
 
+import { AddToKitButton } from "@docs/components/add-to-kit-button";
+import { InstallCopyButton } from "@docs/components/landing/install-copy-button";
 import type { GalleryComponentMeta } from "@docs/lib/gallery";
-import { cn } from "@repo/shadcn-ui/lib/utils";
-import SmoothButton from "@repo/smoothui/components/smooth-button";
-import { Check, Copy, Package } from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
 import Link from "next/link";
-import { useCallback, useEffect, useState } from "react";
 
 import { GalleryPreview } from "./gallery-preview";
 
-const formatSize = (bytes: number): string => {
-  const kb = bytes / 1024;
-  return `~${kb.toFixed(1)} kB`;
-};
-
-export type ComponentCardProps = {
+export interface ComponentCardProps {
   component: GalleryComponentMeta;
-};
+}
 
 export const ComponentCard = ({ component }: ComponentCardProps) => {
   const shouldReduceMotion = useReducedMotion();
-  const [copied, setCopied] = useState(false);
-  const [isHoverDevice, setIsHoverDevice] = useState(false);
-
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(hover: hover) and (pointer: fine)");
-    setIsHoverDevice(mediaQuery.matches);
-
-    const handleChange = (e: MediaQueryListEvent) => {
-      setIsHoverDevice(e.matches);
-    };
-
-    mediaQuery.addEventListener("change", handleChange);
-    return () => {
-      mediaQuery.removeEventListener("change", handleChange);
-    };
-  }, []);
-
-  const handleCopy = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (!component.installer) {
-        return;
-      }
-
-      const command = `npx shadcn@latest add @smoothui/${component.installer}`;
-      navigator.clipboard.writeText(command);
-      setCopied(true);
-    },
-    [component.installer]
-  );
-
-  useEffect(() => {
-    if (!copied) {
-      return;
-    }
-    const timeout = setTimeout(() => setCopied(false), 2000);
-    return () => clearTimeout(timeout);
-  }, [copied]);
 
   return (
     <motion.div
       animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
-      className="group relative"
+      className="group relative flex h-full flex-col overflow-hidden rounded-xl border border-border bg-card"
       initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 10 }}
       transition={
         shouldReduceMotion
           ? { duration: 0 }
           : { type: "spring", duration: 0.25, bounce: 0.1 }
       }
-      whileHover={isHoverDevice && !shouldReduceMotion ? { y: -2 } : undefined}
     >
       <Link
         aria-label={`View ${component.title} component`}
-        className={cn(
-          "flex flex-col overflow-hidden rounded-lg border border-border bg-card no-underline",
-          "transition-shadow",
-          isHoverDevice && "hover:border-primary/30 hover:shadow-md"
-        )}
+        className="relative block"
         href={component.href}
       >
-        {/* Preview */}
         <GalleryPreview slug={component.slug} title={component.title} />
-
-        {/* Card content */}
-        <div className="flex flex-1 flex-col gap-2 border-t p-4">
-          <div className="flex items-start justify-between gap-2">
-            <div className="flex-1 space-y-1">
-              <h3 className="font-semibold text-foreground text-sm leading-tight">
-                {component.title}
-              </h3>
-              <p className="line-clamp-2 text-muted-foreground text-xs leading-relaxed">
-                {component.description}
-              </p>
-            </div>
-          </div>
-
-          <div className="flex items-center justify-between gap-2 pt-1">
-            <div className="flex items-center gap-1.5">
-              <span
-                className={cn(
-                  "inline-flex rounded-full border px-2 py-0.5 font-medium text-[10px] leading-tight",
-                  "border-border text-muted-foreground"
-                )}
-              >
-                {component.category}
-              </span>
-              {component.bundleSize && (
-                <span
-                  className="inline-flex items-center gap-0.5 text-[10px] text-muted-foreground/70"
-                  title={`Gzipped: ${formatSize(component.bundleSize.gzipped)}`}
-                >
-                  <Package aria-hidden="true" className="h-2.5 w-2.5" />
-                  {formatSize(component.bundleSize.gzipped)}
-                </span>
-              )}
-            </div>
-
-            {component.installer && (
-              <SmoothButton
-                aria-label={
-                  copied
-                    ? "Copied install command"
-                    : `Copy install command for ${component.title}`
-                }
-                className={cn(
-                  "h-auto gap-1 px-2 py-1 text-[10px]",
-                  copied &&
-                    "border-green-500/30 bg-green-500/10 text-green-600 hover:bg-green-500/10 dark:text-green-400"
-                )}
-                onClick={handleCopy}
-                variant="outline"
-              >
-                {copied ? (
-                  <Check className="h-3 w-3" />
-                ) : (
-                  <Copy className="h-3 w-3" />
-                )}
-                {copied ? "Copied" : "Install"}
-              </SmoothButton>
-            )}
-          </div>
-        </div>
       </Link>
+      <footer className="flex items-center justify-between gap-2 border-border/60 border-t px-4 py-2.5">
+        <Link
+          className="truncate font-medium text-foreground text-sm transition-colors hover:text-brand"
+          href={component.href}
+        >
+          {component.title}
+        </Link>
+        {component.installer && (
+          <div className="flex shrink-0 items-center gap-1.5">
+            <AddToKitButton
+              size="xs"
+              slug={component.installer}
+              title={component.title}
+            />
+            <InstallCopyButton slug={component.installer} />
+          </div>
+        )}
+      </footer>
     </motion.div>
   );
 };
diff --git a/apps/docs/components/gallery/component-gallery.tsx b/apps/docs/components/gallery/component-gallery.tsx
index 6fb273b5..2df1f0f9 100644
--- a/apps/docs/components/gallery/component-gallery.tsx
+++ b/apps/docs/components/gallery/component-gallery.tsx
@@ -15,6 +15,22 @@ export type ComponentGalleryProps = {
   categories: string[];
 };
 
+/* Demos whose natural width overflows a single grid cell (measured at the
+   3-column layout). They span two columns so the preview isn't clipped. */
+const WIDE_SLUGS = new Set([
+  "ai-input",
+  "animated-o-t-p-input",
+  "animated-stepper",
+  "apple-invites",
+  "contribution-graph",
+  "expandable-cards",
+  "exposure-slider",
+  "infinite-slider",
+  "magnetic-button",
+  "pagination",
+  "siri-orb",
+]);
+
 export const ComponentGallery = ({
   components,
   categories,
@@ -106,14 +122,20 @@ export const ComponentGallery = ({
       {filteredComponents.length > 0 ? (
         <div
           className={cn(
-            "grid gap-4",
-            "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+            "grid grid-flow-dense gap-4",
+            "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4"
           )}
           role="list"
         >
           <AnimatePresence mode="popLayout">
             {filteredComponents.map((component) => (
               <motion.div
+                className={cn(
+                  (WIDE_SLUGS.has(component.slug) ||
+                    component.category === "Transitions") &&
+                    "sm:col-span-2",
+                  component.slug === "expandable-cards" && "lg:col-span-3"
+                )}
                 exit={
                   shouldReduceMotion
                     ? { opacity: 0, transition: { duration: 0 } }
diff --git a/apps/docs/components/gallery/filter-bar.tsx b/apps/docs/components/gallery/filter-bar.tsx
index 30fec344..42b8fb4a 100644
--- a/apps/docs/components/gallery/filter-bar.tsx
+++ b/apps/docs/components/gallery/filter-bar.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import { Search, X } from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
+import { IconMagnifierFill24, IconXmarkFill24 } from "nucleo-core-fill-24";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 export type FilterBarProps = {
@@ -72,7 +72,7 @@ export const FilterBar = ({
     <div className="flex flex-col gap-4">
       {/* Search input */}
       <div className="relative">
-        <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <IconMagnifierFill24 className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
         <input
           aria-label="Search components"
           className={cn(
@@ -94,7 +94,7 @@ export const FilterBar = ({
             onClick={clearSearch}
             type="button"
           >
-            <X className="h-4 w-4" />
+            <IconXmarkFill24 className="h-4 w-4" />
           </button>
         )}
       </div>
diff --git a/apps/docs/components/gallery/gallery-preview.tsx b/apps/docs/components/gallery/gallery-preview.tsx
index 569cc3c3..641cc61c 100644
--- a/apps/docs/components/gallery/gallery-preview.tsx
+++ b/apps/docs/components/gallery/gallery-preview.tsx
@@ -93,10 +93,51 @@ class ErrorBoundaryWrapper extends Component<
   }
 }
 
+/* Demos lay out on a stage sized to availWidth / BASE_SCALE, then the stage
+   scales down until the whole demo fits the cell. MIN_SCALE stops tall demos
+   from becoming unreadable — below it they center-crop instead. */
+const BASE_SCALE = 0.75;
+const MIN_SCALE = 0.45;
+const SETTLE_DELAY_MS = 600;
+
 export const GalleryPreview = ({ slug, title }: GalleryPreviewProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
+  const frameRef = useRef<HTMLDivElement>(null);
+  const stageRef = useRef<HTMLDivElement>(null);
   const [isVisible, setIsVisible] = useState(false);
   const [hasError, setHasError] = useState(false);
+  const [scale, setScale] = useState(BASE_SCALE);
+
+  useEffect(() => {
+    if (!isVisible) {
+      return;
+    }
+    const frame = frameRef.current;
+    const stage = stageRef.current;
+    if (!(frame && stage)) {
+      return;
+    }
+    const compute = () => {
+      const availW = frame.clientWidth;
+      const availH = frame.clientHeight;
+      const w = stage.scrollWidth;
+      const h = stage.scrollHeight;
+      if (!(availW && availH && w && h)) {
+        return;
+      }
+      const fit = Math.min(availW / w, availH / h, BASE_SCALE);
+      setScale(Math.max(MIN_SCALE, fit));
+    };
+    compute();
+    const observer = new ResizeObserver(compute);
+    observer.observe(frame);
+    observer.observe(stage);
+    const settle = setTimeout(compute, SETTLE_DELAY_MS);
+    return () => {
+      observer.disconnect();
+      clearTimeout(settle);
+    };
+  }, [isVisible]);
 
   useEffect(() => {
     const element = containerRef.current;
@@ -127,20 +168,37 @@ export const GalleryPreview = ({ slug, title }: GalleryPreviewProps) => {
     <div
       aria-label={`Preview of ${title}`}
       className={cn(
-        "relative h-[200px] w-full overflow-hidden rounded-t-lg bg-muted/30",
+        "relative h-[280px] w-full overflow-hidden bg-primary p-6",
+        // contain:paint clips fixed/portal-less absolute demo content and
+        // caps its z-index so previews never paint over the sticky nav.
+        "isolate [contain:layout_paint]",
+        "before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(var(--dots-color)_1px,transparent_1px)] before:[--dots-color:--alpha(var(--color-foreground)/5%)] before:[background-size:16px_16px]",
         "pointer-events-none select-none"
       )}
       ref={containerRef}
     >
       {isVisible && ExampleComponent ? (
-        <div className="flex h-full w-full items-center justify-center [&>*]:scale-[0.6] [&>*]:transform">
-          <ErrorBoundaryWrapper onError={() => setHasError(true)}>
-            {hasError ? (
-              <PreviewFallback title={title} />
-            ) : (
-              <ExampleComponent />
-            )}
-          </ErrorBoundaryWrapper>
+        <div
+          className="relative z-10 flex h-full w-full items-center justify-center"
+          ref={frameRef}
+        >
+          <div
+            className="flex shrink-0 items-center justify-center"
+            ref={stageRef}
+            style={{
+              minHeight: "100%",
+              transform: `scale(${scale})`,
+              width: `${100 / BASE_SCALE}%`,
+            }}
+          >
+            <ErrorBoundaryWrapper onError={() => setHasError(true)}>
+              {hasError ? (
+                <PreviewFallback title={title} />
+              ) : (
+                <ExampleComponent />
+              )}
+            </ErrorBoundaryWrapper>
+          </div>
         </div>
       ) : (
         <PreviewSkeleton />
diff --git a/apps/docs/components/icon.tsx b/apps/docs/components/icon.tsx
index 289a9763..cddb821f 100644
--- a/apps/docs/components/icon.tsx
+++ b/apps/docs/components/icon.tsx
@@ -3,34 +3,43 @@
 import {
   motion,
   useAnimationControls,
+  useReducedMotion,
   useSpring,
   useTransform,
 } from "motion/react";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const EASE_OUT = [0.23, 1, 0.32, 1] as const;
+const EASE_IN = [0.4, 0, 1, 1] as const;
+
+// A bold ~1.25-turn swirl centered at the origin; spun in place it reads as
+// "dizzy" while keeping the chunky weight of the base face.
+const SPIRAL = "M0 0C-1 -7 9 -9 11 -1C13 8 2 14 -7 11C-16 8 -17 -4 -11 -11";
 
 export function Icon({ className }: { className?: string }) {
-  // Eye logic
+  const shouldReduceMotion = useReducedMotion();
+
   const [mouse, setMouse] = useState({ x: 0, y: 0 });
   const [hasMoved, setHasMoved] = useState(false);
   const [clickCount, setClickCount] = useState(0);
   const [lastClickTime, setLastClickTime] = useState(0);
-  const [defeated, setDefeated] = useState(false);
+  const [dizzy, setDizzy] = useState(false);
   const [petted, setPetted] = useState(false);
   const [_petDirections, setPetDirections] = useState<number[]>([]);
   const [lastPetX, setLastPetX] = useState<number | null>(null);
   const svgRef = useRef<SVGSVGElement>(null);
 
-  // Animation controls for blinking
   const leftEyeControls = useAnimationControls();
   const rightEyeControls = useAnimationControls();
+  // The whole-cup motion (hop, wobble, wake-bob) is imperative: driving it via
+  // an `animate` prop re-fires the keyframes on every mousemove re-render.
+  const svgControls = useAnimationControls();
 
-  // Springs for eye movement
   const leftEyeX = useSpring(0, { stiffness: 250, damping: 40 });
   const leftEyeY = useSpring(0, { stiffness: 250, damping: 40 });
   const rightEyeX = useSpring(0, { stiffness: 250, damping: 40 });
   const rightEyeY = useSpring(0, { stiffness: 250, damping: 40 });
 
-  // Derived mouth movement (average of eyes, scaled)
   const mouthX = useTransform(
     [leftEyeX, rightEyeX],
     ([lx, rx]: number[]) => ((lx + rx) / 2) * 0.3
@@ -40,10 +49,31 @@ export function Icon({ className }: { className?: string }) {
     ([ly, ry]: number[]) => ((ly + ry) / 2) * 0.3
   );
 
-  // Eye centers (from SVG, adjust as needed)
-  const leftEyeCenter = { x: 143, y: 301 }; // 118 + 50/2, 222 + 157/2
-  const rightEyeCenter = { x: 277, y: 301 }; // 252 + 50/2, 222 + 157/2
-  const eyeRadius = 18; // How far the pupil can move
+  const leftEyeCenter = { x: 143, y: 301 };
+  const rightEyeCenter = { x: 277, y: 301 };
+  const eyeRadius = 18;
+
+  // A natural blink: snap shut, ease back open. Sometimes a quick double.
+  const blink = useCallback(
+    async (double = false) => {
+      const close = { scaleY: 0.06 };
+      const open = { scaleY: 1 };
+      const closeT = { duration: 0.07, ease: EASE_IN };
+      const openT = { duration: 0.16, ease: EASE_OUT };
+      await Promise.all([
+        leftEyeControls.start(close, closeT),
+        rightEyeControls.start(close, closeT),
+      ]);
+      await Promise.all([
+        leftEyeControls.start(open, double ? closeT : openT),
+        rightEyeControls.start(open, double ? closeT : openT),
+      ]);
+      if (double) {
+        await blink(false);
+      }
+    },
+    [leftEyeControls, rightEyeControls]
+  );
 
   // Mouse tracking
   useEffect(() => {
@@ -55,62 +85,45 @@ export function Icon({ className }: { className?: string }) {
     return () => window.removeEventListener("mousemove", handle);
   }, []);
 
-  // Eye movement logic
+  // Eye movement follows the cursor
   useEffect(() => {
     if (!(svgRef.current && hasMoved)) {
       return;
     }
     const svgRect = svgRef.current.getBoundingClientRect();
-
-    function calc(x: number, y: number) {
+    const calc = (x: number, y: number) => {
       const centerX = svgRect.left + x * (svgRect.width / 443);
       const centerY = svgRect.top + y * (svgRect.height / 597);
       const dx = mouse.x - centerX;
       const dy = mouse.y - centerY;
       const angle = Math.atan2(dy, dx);
       const dist = Math.min(Math.sqrt(dx * dx + dy * dy) / 10, eyeRadius);
-      return {
-        x: Math.cos(angle) * dist,
-        y: Math.sin(angle) * dist,
-      };
-    }
-
+      return { x: Math.cos(angle) * dist, y: Math.sin(angle) * dist };
+    };
     const left = calc(leftEyeCenter.x, leftEyeCenter.y);
     const right = calc(rightEyeCenter.x, rightEyeCenter.y);
-
     leftEyeX.set(left.x);
     leftEyeY.set(left.y);
     rightEyeX.set(right.x);
     rightEyeY.set(right.y);
   }, [mouse, hasMoved, leftEyeX, leftEyeY, rightEyeX, rightEyeY]);
 
-  // Blinking logic
+  // Idle blinking (occasionally a double blink)
   useEffect(() => {
+    if (shouldReduceMotion) {
+      return;
+    }
     let timeout: NodeJS.Timeout;
     let mounted = true;
-    const blink = async () => {
-      if (!mounted) {
-        return;
-      }
-      await Promise.all([
-        leftEyeControls.start({ scaleY: 0.1 }),
-        rightEyeControls.start({ scaleY: 0.1 }),
-      ]);
-      if (!mounted) {
-        return;
-      }
-      await Promise.all([
-        leftEyeControls.start({ scaleY: 1 }),
-        rightEyeControls.start({ scaleY: 1 }),
-      ]);
-    };
     const schedule = () => {
       timeout = setTimeout(
         () => {
-          blink();
+          if (mounted && !(dizzy || petted)) {
+            blink(Math.random() < 0.25);
+          }
           schedule();
         },
-        4000 + Math.random() * 2000
+        3500 + Math.random() * 2500
       );
     };
     schedule();
@@ -118,66 +131,52 @@ export function Icon({ className }: { className?: string }) {
       mounted = false;
       clearTimeout(timeout);
     };
-  }, [leftEyeControls, rightEyeControls]);
+  }, [blink, shouldReduceMotion, dizzy, petted]);
 
-  // Remove click-to-blink that causes eye movement
+  // Click → blink; spam (5 within 2s) → dizzy
   useEffect(() => {
-    const blink = async () => {
-      await Promise.all([
-        leftEyeControls.start({ scaleY: 0.1 }),
-        rightEyeControls.start({ scaleY: 0.1 }),
-      ]);
-      await Promise.all([
-        leftEyeControls.start({ scaleY: 1 }),
-        rightEyeControls.start({ scaleY: 1 }),
-      ]);
-    };
-    // Only trigger blink on click, not eye movement
     const handleClick = () => {
-      // Defeat logic
       const now = Date.now();
-      if (now - lastClickTime < 2000) {
-        setClickCount((prev) => prev + 1);
-      } else {
-        setClickCount(1);
-      }
+      const next = now - lastClickTime < 2000 ? clickCount + 1 : 1;
+      setClickCount(next);
       setLastClickTime(now);
-      if (!defeated && clickCount + 1 >= 5) {
-        setDefeated(true);
-      } else if (!defeated) {
+      if (!dizzy && next >= 5) {
+        setDizzy(true);
+      } else if (!(dizzy || petted)) {
         blink();
       }
     };
     window.addEventListener("click", handleClick);
     return () => window.removeEventListener("click", handleClick);
-  }, [leftEyeControls, rightEyeControls, clickCount, lastClickTime, defeated]);
+  }, [blink, clickCount, lastClickTime, dizzy, petted]);
 
-  // Defeat state reset
+  // Dizzy resets after the spin settles
   useEffect(() => {
-    if (defeated) {
-      const timeout = setTimeout(() => {
-        setDefeated(false);
-        setClickCount(0);
-      }, 2000);
-      return () => clearTimeout(timeout);
+    if (!dizzy) {
+      return;
     }
-  }, [defeated]);
+    const timeout = setTimeout(() => {
+      setDizzy(false);
+      setClickCount(0);
+    }, 2200);
+    return () => clearTimeout(timeout);
+  }, [dizzy]);
 
-  // Petting logic: detect 5 rapid left-right changes over SVG
+  // Petting: rapid left-right strokes over the icon
   useEffect(() => {
     if (!svgRef.current) {
       return;
     }
     const handleMove = (e: MouseEvent) => {
-      if (!svgRef.current || defeated) {
+      if (!svgRef.current || dizzy) {
         return;
       }
-      const svgRect = svgRef.current.getBoundingClientRect();
+      const r = svgRef.current.getBoundingClientRect();
       if (
-        e.clientX < svgRect.left ||
-        e.clientX > svgRect.right ||
-        e.clientY < svgRect.top ||
-        e.clientY > svgRect.bottom
+        e.clientX < r.left ||
+        e.clientX > r.right ||
+        e.clientY < r.top ||
+        e.clientY > r.bottom
       ) {
         setLastPetX(null);
         setPetDirections([]);
@@ -201,31 +200,69 @@ export function Icon({ className }: { className?: string }) {
       setLastPetX(e.clientX);
     };
     window.addEventListener("mousemove", handleMove);
-    return () => {
-      window.removeEventListener("mousemove", handleMove);
-    };
-  }, [petted, defeated, lastPetX]);
+    return () => window.removeEventListener("mousemove", handleMove);
+  }, [petted, dizzy, lastPetX]);
 
-  // Cuando petted se activa, lo desactivamos tras la duración real de la animación (1.4s)
+  // Petted resets after the happy hop
   useEffect(() => {
-    if (petted) {
-      const timeout = setTimeout(() => {
-        setPetted(false);
-      }, 1400); // 0.7s * 2 repeticiones = 1.4s
-      return () => clearTimeout(timeout);
+    if (!petted) {
+      return;
     }
+    const timeout = setTimeout(() => setPetted(false), 1300);
+    return () => clearTimeout(timeout);
   }, [petted]);
 
-  // Render mouth based on state
+  // Petted hop (imperative)
+  useEffect(() => {
+    if (shouldReduceMotion || !petted) {
+      return;
+    }
+    svgControls.start(
+      {
+        y: [0, 8, -36, 0, -11, 0],
+        scaleY: [1, 0.84, 1.14, 0.9, 1.04, 1],
+        scaleX: [1, 1.14, 0.9, 1.08, 0.98, 1],
+        rotate: [0, 0, -3, 3, -1, 0],
+      },
+      {
+        duration: 0.95,
+        times: [0, 0.12, 0.4, 0.62, 0.82, 1],
+        ease: EASE_OUT,
+      }
+    );
+  }, [petted, svgControls, shouldReduceMotion]);
+
+  // Dizzy wobble (imperative)
+  useEffect(() => {
+    if (shouldReduceMotion || !dizzy) {
+      return;
+    }
+    svgControls.start(
+      {
+        rotate: [0, -13, 11, -10, 8, -5, 4, 0],
+        x: [0, -8, 7, -6, 4, -2, 2, 0],
+      },
+      { duration: 1.05, repeat: 1, ease: [0.45, 0, 0.55, 1] }
+    );
+    return () => {
+      svgControls.start({ rotate: 0, x: 0 }, { duration: 0.2 });
+    };
+  }, [dizzy, svgControls, shouldReduceMotion]);
+
   const renderMouth = () => {
-    if (defeated) {
+    if (dizzy) {
+      // woozy wavy mouth
       return (
-        <circle
-          className="fill-background"
-          cx={221.5}
-          cy={435}
-          fill="black"
-          r={20}
+        <motion.path
+          animate={{ pathLength: 1 }}
+          className="stroke-background"
+          d="M150 435 q18 -24 36 0 t36 0 t36 0"
+          fill="none"
+          initial={{ pathLength: 0 }}
+          stroke="black"
+          strokeLinecap="round"
+          strokeWidth={30}
+          transition={{ duration: 0.4 }}
         />
       );
     }
@@ -234,12 +271,13 @@ export function Icon({ className }: { className?: string }) {
         <motion.path
           animate={{ pathLength: 1 }}
           className="stroke-background"
-          d="M150 435 Q221.5 485 293 435"
+          d="M150 432 Q221.5 504 293 432"
           fill="none"
           initial={{ pathLength: 0 }}
           stroke="black"
-          strokeWidth={20}
-          transition={{ duration: 0.5 }}
+          strokeLinecap="round"
+          strokeWidth={32}
+          transition={{ duration: 0.45, ease: EASE_OUT }}
         />
       );
     }
@@ -248,47 +286,37 @@ export function Icon({ className }: { className?: string }) {
         className="fill-background"
         d="M267.87 407C271.243 407.191 274.227 407.739 276.959 409.87C280.247 412.433 282.139 416.941 282.582 421.005C283.16 426.325 280.833 430.766 277.515 434.744C263.501 451.546 243.234 461.076 221.624 462.945C197.225 465.055 169.441 458.247 150.573 442.257C145.626 437.542 139.761 432.101 138.333 425.133C137.544 421.285 138.13 417.11 140.381 413.842C142.787 410.346 146.747 408.061 150.91 407.413C161.065 405.834 166.456 416.009 173.71 421.169C192.365 434.442 223.95 436.953 243.492 424.269C251.723 418.926 257.881 408.707 267.87 407Z"
         fill="black"
-        style={{
-          x: mouthX,
-          y: mouthY,
-        }}
+        style={{ x: mouthX, y: mouthY }}
       />
     );
   };
 
+  const eyesVisible = !(dizzy || petted);
+
   return (
-    // biome-ignore lint/a11y/noSvgWithoutTitle: "title icon logo"
+    // biome-ignore lint/a11y/noSvgWithoutTitle: brand logomark
     <motion.svg
-      animate={petted && !defeated ? { y: [0, -18, 0, -8, 0] } : { y: 0 }}
+      animate={svgControls}
       className={className}
       fill="none"
       height="597"
       ref={svgRef}
-      style={{ display: "block" }}
-      transition={
-        petted && !defeated
-          ? { duration: 0.7, times: [0, 0.2, 0.5, 0.7, 1], repeat: 2 }
-          : {}
-      }
+      style={{ display: "block", transformOrigin: "50% 88%" }}
       viewBox="0 0 443 597"
       width="443"
       xmlns="http://www.w3.org/2000/svg"
     >
-      {/* Top pink shape */}
       <path
         className="fill-foreground"
         d="M209.511 81.9998C100.987 81.9998 13.0107 169.976 13.0107 278.5H406.011C406.011 169.976 318.035 81.9998 209.511 81.9998Z"
         fill="#FF64B1"
       />
-      {/* Bottom pink shape */}
       <path
         className="fill-foreground"
         d="M31.0107 279.07C37.7797 279.924 88.001 279.07 88.001 279.07L211.001 279.07C211.001 279.07 281.395 279.102 326.501 279.07C351.033 279.052 340.501 279 389.319 279C388.843 284.983 387.765 291.019 386.954 296.974L382.314 331.242L369.406 431.749C366.068 458.502 363.366 485.334 359.909 512.07C358.404 523.711 357.483 536.169 354.621 547.539C353.444 550.459 352.034 553.106 350.13 555.612C331.041 580.737 284.184 588.95 254.396 593.075C239.067 595.309 223.592 596.385 208.102 596.296C173.519 595.829 109.775 586.855 81.9698 565.58C75.7968 560.856 70.0768 555.028 67.6848 547.463C65.4648 540.44 65.0338 532.242 64.0218 524.955L57.9317 481.252L31.0107 279.07Z"
         fill="#FF64B1"
       />
-      {/* Mouth */}
       {renderMouth()}
-      {/* Pink band/rect */}
       <rect
         className="fill-foreground"
         fill="#FF64B1"
@@ -297,136 +325,112 @@ export function Icon({ className }: { className?: string }) {
         width="420"
         y="251"
       />
-      {/* Pink horn/decorative element */}
       <path
         className="fill-foreground"
         d="M335.493 11.8972C335.898 12.0719 336.283 12.2729 336.652 12.4924L433.04 54.1314C438.11 56.3216 440.444 62.2072 438.254 67.2772L430.322 85.6372C428.132 90.707 422.247 93.0417 417.177 90.8515L328.776 52.6628L290.686 140.835C288.496 145.905 282.61 148.24 277.54 146.049L259.18 138.118C254.11 135.928 251.776 130.042 253.966 124.972L303.987 9.18003C306.178 4.11004 312.063 1.77552 317.133 3.96573L335.493 11.8972Z"
         fill="#FF64B1"
       />
-      {/* Left Eye */}
-      {!(defeated || petted) && (
-        <motion.rect
-          animate={leftEyeControls}
-          className="fill-background"
-          fill="black"
-          height="157"
-          rx="18"
-          style={{
-            x: leftEyeX,
-            y: leftEyeY,
-            transformOrigin: `${leftEyeCenter.x}px ${leftEyeCenter.y}px`,
-          }}
-          transition={{ duration: 0.08 }}
-          width="50"
-          x="118"
-          y="222"
-        />
-      )}
-      {/* Left Eye Happy Arc */}
-      {petted && !defeated && (
-        <motion.path
-          animate={{ pathLength: 1 }}
-          className="stroke-background"
-          d={`M${leftEyeCenter.x - 25} ${leftEyeCenter.y} Q${
-            leftEyeCenter.x
-          } ${leftEyeCenter.y + 25} ${leftEyeCenter.x + 25} ${leftEyeCenter.y}`}
-          fill="none"
-          initial={{ pathLength: 0 }}
-          stroke="black"
-          strokeWidth={20}
-          transition={{ duration: 0.4 }}
-        />
-      )}
-      {/* Right Eye */}
-      {!(defeated || petted) && (
-        <motion.rect
-          animate={rightEyeControls}
-          className="fill-background"
-          fill="black"
-          height="157"
-          rx="18"
-          style={{
-            x: rightEyeX,
-            y: rightEyeY,
-            transformOrigin: `${rightEyeCenter.x}px ${rightEyeCenter.y}px`,
-          }}
-          transition={{ duration: 0.08 }}
-          width="50"
-          x="252"
-          y="222"
-        />
-      )}
-      {/* Right Eye Happy Arc */}
-      {petted && !defeated && (
-        <motion.path
-          animate={{ pathLength: 1 }}
-          className="stroke-background"
-          d={`M${rightEyeCenter.x - 25} ${rightEyeCenter.y} Q${
-            rightEyeCenter.x
-          } ${rightEyeCenter.y + 25} ${rightEyeCenter.x + 25} ${
-            rightEyeCenter.y
-          }`}
-          fill="none"
-          initial={{ pathLength: 0 }}
-          stroke="black"
-          strokeWidth={20}
-          transition={{ duration: 0.4, delay: 0.1 }}
-        />
+
+      {/* Normal eyes */}
+      {eyesVisible && (
+        <>
+          <motion.rect
+            animate={leftEyeControls}
+            className="fill-background"
+            fill="black"
+            height="157"
+            rx="18"
+            style={{
+              x: leftEyeX,
+              y: leftEyeY,
+              transformOrigin: `${leftEyeCenter.x}px ${leftEyeCenter.y}px`,
+            }}
+            transition={{ duration: 0.08 }}
+            width="50"
+            x="118"
+            y="222"
+          />
+          <motion.rect
+            animate={rightEyeControls}
+            className="fill-background"
+            fill="black"
+            height="157"
+            rx="18"
+            style={{
+              x: rightEyeX,
+              y: rightEyeY,
+              transformOrigin: `${rightEyeCenter.x}px ${rightEyeCenter.y}px`,
+            }}
+            transition={{ duration: 0.08 }}
+            width="50"
+            x="252"
+            y="222"
+          />
+        </>
       )}
-      {/* Defeated Eyes (X) */}
-      {defeated && (
-        <g>
-          {/* Left Eye X */}
-          <motion.line
+
+      {/* Happy arc eyes (petted) */}
+      {petted && (
+        <>
+          <motion.path
             animate={{ pathLength: 1 }}
             className="stroke-background"
+            d={`M${leftEyeCenter.x - 30} ${leftEyeCenter.y + 10} Q${leftEyeCenter.x} ${leftEyeCenter.y - 44} ${leftEyeCenter.x + 30} ${leftEyeCenter.y + 10}`}
+            fill="none"
             initial={{ pathLength: 0 }}
             stroke="black"
-            strokeWidth={14}
-            transition={{ duration: 0.2 }}
-            x1={leftEyeCenter.x - 25}
-            x2={leftEyeCenter.x + 25}
-            y1={leftEyeCenter.y - 78}
-            y2={leftEyeCenter.y + 78}
+            strokeLinecap="round"
+            strokeWidth={40}
+            transition={{ duration: 0.4, ease: EASE_OUT }}
           />
-          <motion.line
+          <motion.path
             animate={{ pathLength: 1 }}
             className="stroke-background"
+            d={`M${rightEyeCenter.x - 30} ${rightEyeCenter.y + 10} Q${rightEyeCenter.x} ${rightEyeCenter.y - 44} ${rightEyeCenter.x + 30} ${rightEyeCenter.y + 10}`}
+            fill="none"
             initial={{ pathLength: 0 }}
             stroke="black"
-            strokeWidth={14}
-            transition={{ duration: 0.2, delay: 0.1 }}
-            x1={leftEyeCenter.x + 25}
-            x2={leftEyeCenter.x - 25}
-            y1={leftEyeCenter.y - 78}
-            y2={leftEyeCenter.y + 78}
+            strokeLinecap="round"
+            strokeWidth={40}
+            transition={{ duration: 0.4, ease: EASE_OUT, delay: 0.08 }}
           />
-          {/* Right Eye X */}
-          <motion.line
-            animate={{ pathLength: 1 }}
+        </>
+      )}
+
+      {/* Dizzy spiral eyes */}
+      {dizzy && (
+        <>
+          <motion.path
+            animate={{ rotate: 360 }}
             className="stroke-background"
-            initial={{ pathLength: 0 }}
+            d={SPIRAL}
+            fill="none"
             stroke="black"
-            strokeWidth={14}
-            transition={{ duration: 0.2 }}
-            x1={rightEyeCenter.x - 25}
-            x2={rightEyeCenter.x + 25}
-            y1={rightEyeCenter.y - 78}
-            y2={rightEyeCenter.y + 78}
+            strokeLinecap="round"
+            strokeWidth={11}
+            style={{
+              x: leftEyeCenter.x,
+              y: leftEyeCenter.y,
+              scale: 2,
+            }}
+            transition={{ duration: 1.1, repeat: 1, ease: "linear" }}
           />
-          <motion.line
-            animate={{ pathLength: 1 }}
+          <motion.path
+            animate={{ rotate: -360 }}
             className="stroke-background"
-            initial={{ pathLength: 0 }}
+            d={SPIRAL}
+            fill="none"
             stroke="black"
-            strokeWidth={14}
-            transition={{ duration: 0.2, delay: 0.1 }}
-            x1={rightEyeCenter.x + 25}
-            x2={rightEyeCenter.x - 25}
-            y1={rightEyeCenter.y - 78}
-            y2={rightEyeCenter.y + 78}
+            strokeLinecap="round"
+            strokeWidth={11}
+            style={{
+              x: rightEyeCenter.x,
+              y: rightEyeCenter.y,
+              scale: 2,
+            }}
+            transition={{ duration: 1.1, repeat: 1, ease: "linear" }}
           />
-        </g>
+        </>
       )}
     </motion.svg>
   );
diff --git a/apps/docs/components/installer.tsx b/apps/docs/components/installer.tsx
index 5050c6c8..fbb8c332 100644
--- a/apps/docs/components/installer.tsx
+++ b/apps/docs/components/installer.tsx
@@ -1,11 +1,15 @@
 "use client";
 
+import { AddToKitButton } from "@docs/components/add-to-kit-button";
 import { usePackageManager } from "@docs/hooks/use-package-manager";
+import { prettify } from "@docs/lib/kit-context";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
 import { useState } from "react";
 
 interface InstallerProps {
+  /** Show the "Add to bundle" button (default true). */
+  addToKit?: boolean;
   packageName: string;
 }
 
@@ -142,7 +146,7 @@ const packageManagers = [
 ] as const;
 type PackageManager = (typeof packageManagers)[number]["id"];
 
-export const Installer = ({ packageName }: InstallerProps) => {
+export const Installer = ({ packageName, addToKit = true }: InstallerProps) => {
   const [activeTab, setActiveTab] = useState<"smoothui" | "shadcn">("smoothui");
   const [activePm, setActivePm] = usePackageManager();
 
@@ -188,34 +192,44 @@ export const Installer = ({ packageName }: InstallerProps) => {
           </button>
         </div>
 
-        {/* Package manager tabs - always render but hide when not shadcn */}
-        <div
-          className={cn(
-            "flex items-center gap-0.5 transition-opacity",
-            activeTab === "shadcn"
-              ? "opacity-100"
-              : "pointer-events-none hidden opacity-0 sm:flex"
+        <div className="flex items-center gap-2">
+          {/* Package manager tabs - always render but hide when not shadcn */}
+          <div
+            className={cn(
+              "flex items-center gap-0.5 transition-opacity",
+              activeTab === "shadcn"
+                ? "opacity-100"
+                : "pointer-events-none hidden opacity-0 sm:flex"
+            )}
+          >
+            {packageManagers.map((pm) => {
+              const isActive = activePm === pm.id;
+              return (
+                <button
+                  className={cn(
+                    "flex items-center gap-1 rounded border px-2 py-1 font-medium text-xs transition-all",
+                    isActive
+                      ? "border-border bg-background text-foreground shadow-sm"
+                      : "border-transparent text-muted-foreground hover:text-foreground"
+                  )}
+                  key={pm.id}
+                  onClick={() => setActivePm(pm.id)}
+                  type="button"
+                >
+                  <pm.icon colored={isActive} />
+                  {pm.id}
+                </button>
+              );
+            })}
+          </div>
+          {addToKit && (
+            <AddToKitButton
+              className="shrink-0"
+              size="xs"
+              slug={packageName}
+              title={prettify(packageName)}
+            />
           )}
-        >
-          {packageManagers.map((pm) => {
-            const isActive = activePm === pm.id;
-            return (
-              <button
-                className={cn(
-                  "flex items-center gap-1 rounded border px-2 py-1 font-medium text-xs transition-all",
-                  isActive
-                    ? "border-border bg-background text-foreground shadow-sm"
-                    : "border-transparent text-muted-foreground hover:text-foreground"
-                )}
-                key={pm.id}
-                onClick={() => setActivePm(pm.id)}
-                type="button"
-              >
-                <pm.icon colored={isActive} />
-                {pm.id}
-              </button>
-            );
-          })}
         </div>
       </div>
 
diff --git a/apps/docs/components/kit-float-nav.tsx b/apps/docs/components/kit-float-nav.tsx
new file mode 100644
index 00000000..7244f9ea
--- /dev/null
+++ b/apps/docs/components/kit-float-nav.tsx
@@ -0,0 +1,471 @@
+"use client";
+
+import { COLOR_STORAGE_KEY } from "@docs/app/lib/color-palette";
+import {
+  type PackageManager,
+  usePackageManager,
+} from "@docs/hooks/use-package-manager";
+import { prettify, useKit } from "@docs/lib/kit-context";
+import { THEME_PALETTES } from "@docs/lib/registry-themes";
+import { STARTER_KITS } from "@docs/lib/starter-kits";
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import ButtonCopy from "@repo/smoothui/components/button-copy";
+import { track } from "@vercel/analytics";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  IconChartBarTrendUpFill24,
+  IconCheckFill24,
+  IconChevronDownFill24,
+  IconCopy2Fill24,
+  IconDotsLoaderFill24,
+  IconLayersFill24,
+  IconMobile2Fill24,
+  IconRefresh2Fill24,
+  IconRocketFill24,
+  IconShareLeft3Fill24,
+  IconXmarkFill24,
+} from "nucleo-core-fill-24";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+const KIT_ICON: Record<string, typeof IconLayersFill24> = {
+  landing: IconRocketFill24,
+  ios: IconMobile2Fill24,
+  dashboard: IconChartBarTrendUpFill24,
+};
+
+const PM_PREFIX: Record<PackageManager, string> = {
+  pnpm: "pnpm dlx shadcn add",
+  npm: "npx shadcn@latest add",
+  yarn: "yarn dlx shadcn add",
+  bun: "bunx shadcn add",
+};
+
+const FOCUSABLE_SELECTOR =
+  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+export function KitFloatNav() {
+  const { items, count, remove, removeMany, clear, addMany, message } =
+    useKit();
+  const [pm] = usePackageManager();
+  const [open, setOpen] = useState(false);
+  const [kitsOpen, setKitsOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  // Theme comes from the float color picker (site palette), not the drawer.
+  const [siteTheme, setSiteTheme] = useState<string | null>(null);
+  const reduceMotion = useReducedMotion();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const previouslyFocusedRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Lock body scroll, trap focus, close on Escape, and read the current site
+  // palette so the command can include the matching `@smoothui/theme-<name>`.
+  useEffect(() => {
+    if (!open) {
+      previouslyFocusedRef.current?.focus();
+      previouslyFocusedRef.current = null;
+      return;
+    }
+
+    previouslyFocusedRef.current =
+      (document.activeElement as HTMLElement | null) ?? triggerRef.current;
+
+    try {
+      const raw = localStorage.getItem(COLOR_STORAGE_KEY);
+      const candy = raw ? JSON.parse(raw).candy : null;
+      const palette = THEME_PALETTES.find((p) => p.primary === candy);
+      setSiteTheme(palette ? palette.name : null);
+    } catch {
+      setSiteTheme(null);
+    }
+
+    // Move focus into the dialog once it has mounted.
+    const focusFrame = requestAnimationFrame(() => {
+      dialogRef.current?.focus();
+    });
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        return;
+      }
+      if (e.key !== "Tab" || !dialogRef.current) {
+        return;
+      }
+      const focusable = Array.from(
+        dialogRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
+      ).filter((el) => !el.hasAttribute("disabled"));
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable.at(-1);
+      if (!(first && last)) {
+        return;
+      }
+      const active = document.activeElement as HTMLElement | null;
+      if (e.shiftKey) {
+        if (active === first || !dialogRef.current.contains(active)) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (active === last || !dialogRef.current.contains(active)) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      cancelAnimationFrame(focusFrame);
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open]);
+
+  const themeArg = siteTheme ? `@smoothui/theme-${siteTheme} ` : "";
+  const command = `${PM_PREFIX[pm]} ${themeArg}${items
+    .map((i) => `@smoothui/${i.slug}`)
+    .join(" ")}`;
+
+  const shareUrl =
+    typeof window === "undefined" || count === 0
+      ? ""
+      : `${window.location.origin}/docs/components?kit=${items
+          .map((i) => i.slug)
+          .join(",")}${siteTheme ? `&theme=${siteTheme}` : ""}`;
+
+  const isKitActive = (slugs: string[]) =>
+    slugs.every((slug) => items.some((i) => i.slug === slug));
+
+  const toggleStarter = (id: string, slugs: string[]) => {
+    if (isKitActive(slugs)) {
+      removeMany(slugs);
+    } else {
+      track("bundle_starter_kit", { id });
+      addMany(slugs.map((slug) => ({ slug, title: prettify(slug) })));
+    }
+  };
+
+  return (
+    <>
+      <button
+        aria-label={`Open install bundle (${count} selected)`}
+        className="float-trigger flex h-auto w-auto items-center gap-1.5 p-2!"
+        onClick={() => setOpen(true)}
+        ref={triggerRef}
+        type="button"
+      >
+        <IconLayersFill24 size={20} />
+        <span className="hidden font-medium text-sm sm:inline">Bundle</span>
+        {count > 0 && (
+          <span className="grid min-w-5 place-items-center rounded-full bg-brand px-1.5 py-0.5 font-semibold text-[11px] text-white">
+            {count}
+          </span>
+        )}
+      </button>
+
+      {/* Announces bundle changes for screen reader users, independent of
+          whether the drawer is currently open. */}
+      <span aria-atomic="true" aria-live="polite" className="sr-only">
+        {message}
+      </span>
+
+      {mounted &&
+        createPortal(
+          <AnimatePresence>
+            {open && (
+              <>
+                <motion.div
+                  animate={{ opacity: 1 }}
+                  className="fixed inset-0 z-[55] bg-black/40 backdrop-blur-sm"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                  key="kit-overlay"
+                  onClick={() => setOpen(false)}
+                  transition={
+                    reduceMotion ? { duration: 0 } : { duration: 0.2 }
+                  }
+                />
+                <motion.div
+                  animate={{ y: 0, opacity: 1 }}
+                  aria-label="Install bundle"
+                  aria-modal="true"
+                  className="fixed inset-x-0 bottom-4 z-[60] mx-auto flex max-h-[80vh] w-[calc(100%-2rem)] max-w-2xl flex-col overflow-hidden rounded-2xl border bg-background shadow-xl outline-none"
+                  exit={
+                    reduceMotion
+                      ? { opacity: 0, transition: { duration: 0 } }
+                      : { y: "100%", opacity: 0 }
+                  }
+                  initial={
+                    reduceMotion ? { opacity: 0 } : { y: "100%", opacity: 0 }
+                  }
+                  key="kit-panel"
+                  ref={dialogRef}
+                  role="dialog"
+                  tabIndex={-1}
+                  transition={
+                    reduceMotion
+                      ? { duration: 0 }
+                      : { type: "spring", duration: 0.4, bounce: 0.1 }
+                  }
+                >
+                  <div className="mx-auto mt-3 h-1.5 w-12 shrink-0 rounded-full bg-muted" />
+
+                  {/* Header */}
+                  <div className="p-4 pb-3">
+                    <h2 className="font-semibold text-base">
+                      Your install bundle
+                    </h2>
+                    <p className="text-muted-foreground text-sm">
+                      Remove items, copy the command, or share your bundle.
+                    </p>
+                  </div>
+
+                  <div className="flex-1 overflow-y-auto">
+                    {/* Starter kits (collapsible) */}
+                    <section className="border-t">
+                      <button
+                        aria-expanded={kitsOpen}
+                        className="flex w-full items-center justify-between gap-2 p-4"
+                        onClick={() => setKitsOpen((o) => !o)}
+                        type="button"
+                      >
+                        <span className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+                          Starter kits
+                        </span>
+                        <IconChevronDownFill24
+                          className={cn(
+                            "text-muted-foreground transition-transform",
+                            kitsOpen && "rotate-180"
+                          )}
+                          size={16}
+                        />
+                      </button>
+                      <AnimatePresence initial={false}>
+                        {kitsOpen && (
+                          <motion.div
+                            animate={{ height: "auto", opacity: 1 }}
+                            className="overflow-hidden"
+                            exit={{ height: 0, opacity: 0 }}
+                            initial={{ height: 0, opacity: 0 }}
+                            transition={
+                              reduceMotion
+                                ? { duration: 0 }
+                                : { duration: 0.25 }
+                            }
+                          >
+                            <div className="flex flex-col gap-2 px-4 pb-4">
+                              {STARTER_KITS.map((kit) => {
+                                const active = isKitActive(kit.slugs);
+                                const Icon =
+                                  KIT_ICON[kit.id] ?? IconLayersFill24;
+                                return (
+                                  <button
+                                    aria-pressed={active}
+                                    className={cn(
+                                      "flex items-center justify-between gap-2 rounded-md border px-3 py-2 text-left transition-colors",
+                                      active
+                                        ? "border-brand/40 bg-brand/5"
+                                        : "border-border hover:bg-muted"
+                                    )}
+                                    key={kit.id}
+                                    onClick={() =>
+                                      toggleStarter(kit.id, kit.slugs)
+                                    }
+                                    type="button"
+                                  >
+                                    <span className="flex min-w-0 items-center gap-3">
+                                      <span className="grid size-9 shrink-0 place-items-center rounded-lg border border-border bg-muted/40 text-foreground">
+                                        <Icon size={16} />
+                                      </span>
+                                      <span className="min-w-0">
+                                        <span className="block truncate font-medium text-foreground text-sm">
+                                          {kit.label}
+                                        </span>
+                                        <span className="block truncate text-muted-foreground text-xs">
+                                          {kit.description} · {kit.slugs.length}
+                                        </span>
+                                      </span>
+                                    </span>
+                                    <span
+                                      className={cn(
+                                        "grid size-5 shrink-0 place-items-center rounded-full",
+                                        active
+                                          ? "bg-brand text-white"
+                                          : "text-muted-foreground"
+                                      )}
+                                    >
+                                      {active ? (
+                                        <IconCheckFill24 size={13} />
+                                      ) : (
+                                        <IconLayersFill24 size={15} />
+                                      )}
+                                    </span>
+                                  </button>
+                                );
+                              })}
+                            </div>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </section>
+
+                    {/* Selected */}
+                    <section className="border-t p-4">
+                      {count === 0 ? (
+                        <div className="flex flex-col items-center justify-center px-6 py-6 text-center">
+                          <div
+                            aria-hidden="true"
+                            className="relative flex size-36 items-center justify-center"
+                            style={{
+                              WebkitMaskImage:
+                                "radial-gradient(circle at center, black 30%, transparent 75%)",
+                              maskImage:
+                                "radial-gradient(circle at center, black 30%, transparent 75%)",
+                            }}
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className="absolute inset-0 size-full text-muted-foreground/30"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <defs>
+                                <pattern
+                                  height="12"
+                                  id="kit-empty-dots"
+                                  patternUnits="userSpaceOnUse"
+                                  width="12"
+                                >
+                                  <circle
+                                    cx="1"
+                                    cy="1"
+                                    fill="currentColor"
+                                    r="1"
+                                  />
+                                </pattern>
+                              </defs>
+                              <rect
+                                fill="url(#kit-empty-dots)"
+                                height="100%"
+                                width="100%"
+                              />
+                            </svg>
+                            <div className="relative flex size-14 items-center justify-center rounded-xl border border-border bg-background text-foreground shadow-sm">
+                              <IconLayersFill24 className="size-6" />
+                            </div>
+                          </div>
+                          <h3 className="mt-3 font-semibold text-foreground text-sm">
+                            Your bundle is empty
+                          </h3>
+                          <p className="mt-1 max-w-xs text-muted-foreground text-sm">
+                            Add components with the “Add” button, or load a
+                            starter kit above.
+                          </p>
+                        </div>
+                      ) : (
+                        <>
+                          <h3 className="mb-2 font-medium text-muted-foreground text-xs uppercase tracking-wide">
+                            Selected ({count})
+                          </h3>
+                          <ul>
+                            {items.map((item) => (
+                              <li
+                                className="flex items-center justify-between gap-2 border-border/60 border-b py-2 last:border-0"
+                                key={item.slug}
+                              >
+                                <span className="truncate font-medium text-foreground text-sm">
+                                  {item.title}
+                                </span>
+                                <button
+                                  aria-label={`Remove ${item.title} from bundle`}
+                                  className="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                                  onClick={() => remove(item.slug)}
+                                  type="button"
+                                >
+                                  <IconXmarkFill24 size={14} />
+                                </button>
+                              </li>
+                            ))}
+                          </ul>
+                        </>
+                      )}
+                    </section>
+                  </div>
+
+                  {/* Command + actions */}
+                  {count > 0 && (
+                    <div className="border-t p-4">
+                      <div className="mb-1.5 flex items-center justify-between gap-2">
+                        <span className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+                          Install command
+                        </span>
+                        {siteTheme && (
+                          <span className="text-muted-foreground text-xs">
+                            incl. {siteTheme} theme
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2 rounded-md border border-border bg-muted/40 py-2 pr-1 pl-3">
+                        <code className="flex-1 overflow-x-auto whitespace-nowrap font-mono text-foreground text-xs">
+                          {command}
+                        </code>
+                        <ButtonCopy
+                          className="grid size-7 shrink-0 place-items-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                          idleIcon={<IconCopy2Fill24 className="size-3.5" />}
+                          loadingIcon={
+                            <IconDotsLoaderFill24 className="size-3.5 animate-spin" />
+                          }
+                          onCopy={() => {
+                            track("bundle_copy_command", {
+                              count,
+                              pm,
+                              theme: siteTheme ?? "none",
+                            });
+                            navigator.clipboard.writeText(command);
+                          }}
+                          successIcon={<IconCheckFill24 className="size-3.5" />}
+                        />
+                      </div>
+                      <div className="mt-3 flex items-center justify-between">
+                        <button
+                          className="inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 font-medium text-foreground text-xs transition-colors hover:bg-muted"
+                          onClick={() => {
+                            track("bundle_share", { count });
+                            navigator.clipboard.writeText(shareUrl);
+                          }}
+                          title={shareUrl}
+                          type="button"
+                        >
+                          <IconShareLeft3Fill24 size={13} />
+                          Copy share link
+                        </button>
+                        <button
+                          className="inline-flex items-center gap-1.5 text-muted-foreground text-xs transition-colors hover:text-destructive"
+                          onClick={() => {
+                            track("bundle_clear", { count });
+                            clear();
+                          }}
+                          type="button"
+                        >
+                          <IconRefresh2Fill24 size={13} />
+                          Clear all
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                </motion.div>
+              </>
+            )}
+          </AnimatePresence>,
+          document.body
+        )}
+    </>
+  );
+}
diff --git a/apps/docs/components/landing/ai-section.tsx b/apps/docs/components/landing/ai-section.tsx
index f97f66a0..86fc32d2 100644
--- a/apps/docs/components/landing/ai-section.tsx
+++ b/apps/docs/components/landing/ai-section.tsx
@@ -2,9 +2,13 @@
 
 import Divider from "@docs/components/landing/divider";
 import { SectionHeader } from "@docs/components/landing/section-header";
-import { ArrowRight } from "lucide-react";
+import { Button } from "@docs/components/smoothbutton";
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import AgentAvatar from "@repo/smoothui/components/agent-avatar";
 import { motion, useReducedMotion } from "motion/react";
+import Image from "next/image";
 import Link from "next/link";
+import { IconArrowRightFill24, IconSparkleFill24 } from "nucleo-core-fill-24";
 
 function McpIllustration() {
   const shouldReduceMotion = useReducedMotion();
@@ -14,57 +18,73 @@ function McpIllustration() {
       ? { duration: 0 }
       : { type: "spring" as const, duration: 0.3, bounce: 0.1, delay };
 
+  const lift = (delay: number) => ({
+    initial: shouldReduceMotion
+      ? { opacity: 1 }
+      : { opacity: 0, transform: "translateY(8px)" },
+    whileInView: shouldReduceMotion
+      ? { opacity: 1 }
+      : { opacity: 1, transform: "translateY(0px)" },
+    transition: bubbleTransition(delay),
+    viewport: { once: true, amount: 0.4 },
+  });
+
+  const steps = [
+    "Search the registry",
+    "Resolve dependencies",
+    "Add @smoothui/siri-orb",
+  ];
+
   return (
-    <div aria-hidden className="mx-auto max-w-56 self-center">
-      <div className="space-y-2">
-        <motion.div
-          className="flex items-center gap-2"
-          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0 }}
-          transition={bubbleTransition(0)}
-          viewport={{ once: true, amount: 0.5 }}
-          whileInView={shouldReduceMotion ? { opacity: 1 } : { opacity: 1 }}
-        >
-          <div className="size-4 rounded-full bg-brand/20 ring-1 ring-brand/30" />
-          <span className="text-foreground/60 text-sm">AI Agent</span>
-        </motion.div>
-        <motion.div
-          className="w-fit rounded-2xl rounded-tl border border-border bg-background p-2.5 text-foreground/70 text-xs"
-          initial={
-            shouldReduceMotion
-              ? { opacity: 1 }
-              : { opacity: 0, transform: "translateY(8px)" }
-          }
-          transition={bubbleTransition(0.1)}
-          viewport={{ once: true, amount: 0.5 }}
-          whileInView={
-            shouldReduceMotion
-              ? { opacity: 1 }
-              : { opacity: 1, transform: "translateY(0px)" }
-          }
-        >
-          Install the <span className="text-brand">SiriOrb</span> component from
-          smoothui
-        </motion.div>
-        <motion.div
-          className="ml-auto w-fit rounded-2xl rounded-tr border border-brand/20 bg-brand/10 p-2.5 text-foreground/70 text-xs"
-          initial={
-            shouldReduceMotion
-              ? { opacity: 1 }
-              : { opacity: 0, transform: "translateY(8px)" }
-          }
-          transition={bubbleTransition(0.25)}
-          viewport={{ once: true, amount: 0.5 }}
-          whileInView={
-            shouldReduceMotion
-              ? { opacity: 1 }
-              : { opacity: 1, transform: "translateY(0px)" }
-          }
-        >
-          <code className="font-mono text-[11px]">
-            npx shadcn@latest add @smoothui/siri-orb
-          </code>
-        </motion.div>
-      </div>
+    <div aria-hidden className="w-full space-y-2.5">
+      {/* User request — right */}
+      <motion.div
+        className="ml-auto w-fit max-w-[78%] rounded-2xl rounded-br-sm bg-brand px-3 py-1.5 text-white text-xs"
+        {...lift(0.05)}
+      >
+        Automate component installs
+      </motion.div>
+      {/* Skill card with steps */}
+      <motion.div
+        className="rounded-xl border border-border bg-background p-3 shadow-sm"
+        {...lift(0.15)}
+      >
+        <div className="flex items-center gap-2">
+          <div className="flex size-6 shrink-0 items-center justify-center rounded-lg bg-brand/10 text-brand">
+            <IconSparkleFill24 className="size-3.5" />
+          </div>
+          <div className="leading-tight">
+            <div className="font-medium text-foreground text-xs">
+              Install component
+            </div>
+            <div className="text-[10px] text-muted-foreground">
+              Skill · 3 steps
+            </div>
+          </div>
+        </div>
+        <div className="mt-2.5 space-y-1.5">
+          {steps.map((step, index) => (
+            <div className="flex items-center gap-2" key={step}>
+              <span className="flex size-4 shrink-0 items-center justify-center rounded-full bg-muted text-[9px] text-muted-foreground">
+                {index + 1}
+              </span>
+              <span className="text-[11px] text-foreground/70">{step}</span>
+            </div>
+          ))}
+        </div>
+      </motion.div>
+      {/* Agent confirmation — left, with avatar */}
+      <motion.div className="flex items-center gap-2" {...lift(0.3)}>
+        <AgentAvatar
+          animated
+          className="shrink-0 rounded-full"
+          seed="SmoothUI Agent"
+          size={20}
+        />
+        <span className="text-[11px] text-foreground/60">
+          Done — installed in your project.
+        </span>
+      </motion.div>
     </div>
   );
 }
@@ -78,7 +98,7 @@ function ApiIllustration() {
       : { type: "spring" as const, duration: 0.25, bounce: 0.1, delay };
 
   return (
-    <div aria-hidden className="self-center">
+    <div aria-hidden className="self-end">
       <motion.div
         className="space-y-2.5 rounded-2xl border border-border bg-background p-4"
         initial={
@@ -94,9 +114,13 @@ function ApiIllustration() {
             : { opacity: 1, transform: "scale(1)" }
         }
       >
-        <div className="flex justify-between text-sm">
-          <span className="text-foreground/50">GET</span>
-          <span className="font-mono text-brand text-xs">/api/v1/suggest</span>
+        <div className="flex items-center justify-between text-sm">
+          <span className="rounded bg-brand/10 px-1.5 py-0.5 font-semibold text-[10px] text-brand">
+            GET
+          </span>
+          <span className="font-mono text-foreground/50 text-xs">
+            /api/v1/suggest
+          </span>
         </div>
         <div className="h-px bg-border" />
         <div className="space-y-1.5 font-mono text-xs">
@@ -157,7 +181,7 @@ function LlmsIllustration() {
       : { type: "spring" as const, duration: 0.25, bounce: 0.1, delay };
 
   return (
-    <div aria-hidden className="relative w-full select-none self-center">
+    <div aria-hidden className="relative w-full select-none self-end">
       <div className="relative w-full space-y-2 py-4">
         <motion.div
           className="absolute inset-y-0 left-0 w-px bg-[length:1px_4px] bg-repeat-y opacity-25 [background-image:linear-gradient(180deg,var(--color-foreground)_1px,transparent_1px)]"
@@ -210,7 +234,7 @@ function LlmsIllustration() {
               : { opacity: 1, transform: "translateX(0px)" }
           }
         >
-          <div className="relative mt-0.5 ml-7 inline-flex items-center gap-2 font-medium text-sm before:absolute before:inset-y-0 before:-left-[19px] before:my-auto before:size-[5px] before:rounded-full before:border before:border-brand before:bg-background before:ring before:ring-background">
+          <div className="relative mt-0.5 ml-7 inline-flex items-center gap-2 font-medium text-sm before:absolute before:inset-y-0 before:-left-[19px] before:my-auto before:size-[5px] before:rounded-full before:border before:border-foreground/40 before:bg-background before:ring before:ring-background">
             <span className="text-brand">tags</span>
             <span className="text-foreground/40">categories</span>
             <span className="text-foreground/40">useCases</span>
@@ -265,68 +289,81 @@ const aiFeatures = [
   },
 ];
 
+const cardBase =
+  "group relative flex flex-col rounded-2xl border bg-primary/40 p-6 transition-colors hover:bg-primary";
+
 export function AISection() {
   const shouldReduceMotion = useReducedMotion();
 
   return (
-    <section className="relative bg-background px-8 py-24 transition">
+    <section className="relative bg-background px-8 py-40 transition">
       <Divider />
       <div className="mx-auto max-w-5xl">
         <SectionHeader
           description="The first component library designed for AI agents. Discover, search, and install components programmatically."
-          eyebrow="AI-Native"
-          title="Built for AI-Assisted Development"
+          title="Built for AI-assisted development"
         />
 
-        <motion.div
-          className="relative mx-auto mt-16 grid divide-y overflow-hidden rounded-2xl border border-transparent bg-card/50 shadow-black/5 shadow-md ring-1 ring-border md:grid-cols-3 md:divide-x md:divide-y-0"
-          initial={
-            shouldReduceMotion
-              ? { opacity: 1 }
-              : { opacity: 0, transform: "translateY(16px) scale(0.98)" }
-          }
-          transition={
-            shouldReduceMotion
-              ? { duration: 0 }
-              : { type: "spring", duration: 0.4, bounce: 0.1, delay: 0.15 }
-          }
-          viewport={{ once: true, amount: 0.2 }}
-          whileInView={
-            shouldReduceMotion
-              ? { opacity: 1 }
-              : { opacity: 1, transform: "translateY(0px) scale(1)" }
-          }
-        >
-          {aiFeatures.map((feature, index) => (
-            <motion.div
-              className="row-span-2 grid grid-rows-subgrid gap-8 p-8"
-              initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0 }}
-              key={feature.label}
-              transition={
-                shouldReduceMotion
-                  ? { duration: 0 }
-                  : {
-                      type: "spring",
-                      duration: 0.25,
-                      bounce: 0.1,
-                      delay: 0.25 + index * 0.1,
-                    }
-              }
-              viewport={{ once: true, amount: 0.2 }}
-              whileInView={shouldReduceMotion ? { opacity: 1 } : { opacity: 1 }}
-            >
-              <feature.illustration />
-              <div className="relative z-10 mx-auto max-w-sm text-center">
-                <h3 className="text-balance font-semibold text-foreground">
-                  {feature.title}
-                </h3>
-                <p className="mt-3 text-balance text-primary-foreground text-sm">
-                  {feature.description}
-                </p>
+        <div className="mt-16 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2">
+          {/* MCP — lead pillar: agent-chat mockup over a saturated blurred photo */}
+          <div
+            className={cn(
+              cardBase,
+              "relative overflow-hidden border-0 p-0 text-white md:col-span-2 lg:col-span-2 lg:row-span-2"
+            )}
+          >
+            <Image
+              alt=""
+              aria-hidden
+              className="object-cover"
+              draggable={false}
+              fill
+              sizes="(max-width: 768px) 100vw, 420px"
+              src="/scenes/ai-mcp.webp"
+              unoptimized
+            />
+            <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-black/20" />
+            <div className="relative flex flex-1 items-center justify-center p-6">
+              <div className="w-full max-w-xs rounded-2xl border border-white/40 bg-background/80 p-4 shadow-xl backdrop-blur-xl">
+                <McpIllustration />
               </div>
-            </motion.div>
-          ))}
-        </motion.div>
+            </div>
+            <div className="relative p-6">
+              <h3 className="font-semibold text-lg tracking-tight drop-shadow-sm">
+                {aiFeatures[0].title}
+              </h3>
+              <p className="mt-1.5 max-w-sm text-sm text-white/80">
+                {aiFeatures[0].description}
+              </p>
+            </div>
+          </div>
+
+          {/* REST API — the endpoint response artifact */}
+          <div className={cn(cardBase, "lg:col-span-2")}>
+            <div className="mb-4 flex justify-center">
+              <ApiIllustration />
+            </div>
+            <h3 className="font-semibold text-foreground text-lg tracking-tight">
+              {aiFeatures[1].title}
+            </h3>
+            <p className="mt-1.5 text-muted-foreground text-sm">
+              {aiFeatures[1].description}
+            </p>
+          </div>
+
+          {/* llms.txt — the machine-readable catalog artifact */}
+          <div className={cn(cardBase, "lg:col-span-2")}>
+            <div className="mb-4">
+              <LlmsIllustration />
+            </div>
+            <h3 className="font-semibold text-foreground text-lg tracking-tight">
+              {aiFeatures[2].title}
+            </h3>
+            <p className="mt-1.5 text-muted-foreground text-sm">
+              {aiFeatures[2].description}
+            </p>
+          </div>
+        </div>
 
         <motion.div
           className="mt-8 flex justify-center"
@@ -339,16 +376,21 @@ export function AISection() {
           viewport={{ once: true, amount: 0.5 }}
           whileInView={shouldReduceMotion ? { opacity: 1 } : { opacity: 1 }}
         >
-          <Link
-            className="group flex items-center gap-2 font-medium text-brand text-sm transition-colors hover:text-foreground"
-            href="/docs/guides/ai-integration"
+          <Button
+            asChild
+            className="group"
+            color="accent"
+            size="sm"
+            variant="ghost"
           >
-            Learn more about AI integration
-            <ArrowRight
-              className="transition-transform group-hover:translate-x-1"
-              size={14}
-            />
-          </Link>
+            <Link href="/docs/guides/ai-integration">
+              Learn more about AI integration
+              <IconArrowRightFill24
+                className="transition-transform group-hover:translate-x-1"
+                size={14}
+              />
+            </Link>
+          </Button>
         </motion.div>
       </div>
     </section>
diff --git a/apps/docs/components/landing/block-categories.tsx b/apps/docs/components/landing/block-categories.tsx
index ad474e4c..6e67cd06 100644
--- a/apps/docs/components/landing/block-categories.tsx
+++ b/apps/docs/components/landing/block-categories.tsx
@@ -21,19 +21,18 @@ import {
 import InfiniteSlider from "@repo/smoothui/components/infinite-slider";
 import PriceFlow from "@repo/smoothui/components/price-flow";
 import { getAllPeople, getAvatarUrl, getImageKitUrl } from "@smoothui/data";
-import {
-  Check,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  Github,
-  HelpCircle,
-  Link as LinkIcon,
-  Twitter,
-} from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import Image from "next/image";
 import Link from "next/link";
+import {
+  IconChevronDownFill24,
+  IconChevronLeftFill24,
+  IconChevronRightFill24,
+  IconCircleQuestionFill24,
+  IconExternalLinkFill24,
+  IconStarFill24,
+} from "nucleo-core-fill-24";
+import { IconGithub, IconXTwitter } from "nucleo-social-media";
 import { useState } from "react";
 
 const EASE_OUT_QUAD = [0.25, 0.46, 0.45, 0.94] as const;
@@ -90,85 +89,33 @@ const blockCategories = [
 ];
 
 function HeroPreview() {
-  const titleVariants = {
-    rest: { width: "10rem" },
-    hover: { width: "10.5rem" },
-  };
-
-  const descriptionVariants = {
-    rest: { width: "8rem" },
-    hover: { width: "8.5rem" },
-  };
-
-  const buttonVariants = {
-    rest: { scale: 1 },
-    hover: { scale: 1.05 },
-  };
-
-  const abstractVariants = {
-    rest: { scale: 1, rotate: 0 },
-    hover: { scale: 1.1, rotate: 5 },
-  };
-
   return (
-    <motion.div
-      className="group/preview relative flex h-full w-full items-center justify-between gap-4 p-4"
-      initial="rest"
-      whileHover="hover"
-    >
-      {/* Left side - Content */}
-      <div className="flex flex-1 flex-col items-start justify-center gap-3">
-        {/* Title */}
-        <motion.div
-          className="h-4 w-40 rounded-full bg-foreground/20"
-          transition={{
-            duration: 0.3,
-            ease: [0.25, 0.46, 0.45, 0.94],
-          }}
-          variants={titleVariants}
-        />
-        {/* Description */}
-        <motion.div
-          className="h-2 w-32 rounded-full bg-foreground/10"
-          transition={{
-            duration: 0.3,
-            ease: [0.25, 0.46, 0.45, 0.94],
-          }}
-          variants={descriptionVariants}
-        />
-        <div className="h-2 w-28 rounded-full bg-foreground/8" />
-        {/* Buttons */}
-        <div className="mt-2 flex items-center gap-2">
-          <motion.div
-            className="h-4 w-8 rounded-full bg-brand"
-            transition={{
-              duration: 0.2,
-              ease: [0.25, 0.46, 0.45, 0.94],
-            }}
-            variants={buttonVariants}
-          />
-          <motion.div
-            className="h-4 w-8 rounded-full border bg-background"
-            transition={{
-              duration: 0.2,
-              ease: [0.25, 0.46, 0.45, 0.94],
-            }}
-            variants={buttonVariants}
-          />
+    <div className="group/preview flex h-full w-full items-center justify-between gap-3 p-5">
+      <div className="flex flex-1 flex-col items-start gap-1.5">
+        <span className="rounded-full bg-brand/10 px-2 py-0.5 font-medium text-[9px] text-brand">
+          New
+        </span>
+        <h4 className="font-semibold text-foreground text-sm leading-tight tracking-tight">
+          Ship beautiful UI
+        </h4>
+        <p className="text-[10px] text-muted-foreground leading-snug">
+          Production-ready React blocks, animated out of the box.
+        </p>
+        <div className="mt-1.5 flex items-center gap-1.5">
+          <span className="rounded-md bg-brand px-2 py-1 font-medium text-[9px] text-white transition-transform group-hover/preview:scale-105">
+            Get started
+          </span>
+          <span className="rounded-md border border-border bg-background px-2 py-1 text-[9px] text-foreground/70">
+            Docs
+          </span>
         </div>
       </div>
-      {/* Right side - Abstract visual */}
-      <motion.div
-        className="relative flex h-20 w-20 items-center justify-center overflow-hidden"
-        transition={{
-          duration: 0.3,
-          ease: [0.25, 0.46, 0.45, 0.94],
-        }}
-        variants={abstractVariants}
-      >
+      <div className="relative size-20 shrink-0 transition-transform duration-300 group-hover/preview:scale-105">
         <Image
-          alt="Hero illustration"
-          className="h-full w-full object-cover opacity-60"
+          alt=""
+          aria-hidden
+          className="size-full object-contain"
+          draggable={false}
           height={160}
           src={getImageKitUrl("/images/hero-example_xertaz.png", {
             width: 160,
@@ -178,303 +125,134 @@ function HeroPreview() {
           })}
           width={160}
         />
-      </motion.div>
-    </motion.div>
+      </div>
+    </div>
   );
 }
 
-function PricingPreview() {
-  const [price1, setPrice1] = useState(0);
-  const [price2, setPrice2] = useState(19);
-  const [price3, setPrice3] = useState(29);
-
-  const cardVariants = {
-    rest: { scale: 1, y: 0 },
-    hover: { scale: 1.02, y: -2 },
-  };
-
-  const popularBadgeVariants = {
-    rest: { scale: 1, opacity: 1 },
-    hover: { scale: 1.05, opacity: 1 },
-  };
+const PRICING_PLANS = [
+  { name: "Free", base: 0, hover: 5, popular: false },
+  { name: "Pro", base: 19, hover: 24, popular: true },
+  { name: "Scale", base: 29, hover: 34, popular: false },
+];
 
-  const features = [
-    ["Basic Analytics", "5GB Storage", "Email Support"],
-    [
-      "Everything in Free",
-      "5GB Storage",
-      "Email Support",
-      "Community Forum",
-      "Single User",
-      "Basic Templates",
-    ],
-    ["Everything in Pro", "5GB Storage", "Email Support"],
-  ];
+function PricingPreview() {
+  const [hovered, setHovered] = useState(false);
 
   return (
     <motion.div
-      className="group/preview relative flex h-full w-full flex-col gap-4 p-4"
-      initial="rest"
-      onHoverEnd={() => {
-        setPrice1(0);
-        setPrice2(19);
-        setPrice3(29);
-      }}
-      onHoverStart={() => {
-        setPrice1(5);
-        setPrice2(24);
-        setPrice3(34);
-      }}
-      whileHover="hover"
+      className="group/preview relative flex h-full w-full items-center justify-center p-4"
+      onHoverEnd={() => setHovered(false)}
+      onHoverStart={() => setHovered(true)}
     >
-      {/* Header */}
-      <div className="flex flex-col items-center gap-1.5 text-center">
-        <div className="h-2 w-32 rounded-full bg-foreground/20" />
-        <div className="h-1.5 w-24 rounded-full bg-foreground/10" />
-      </div>
-
-      {/* Cards Grid */}
-      <div className="grid grid-cols-3 gap-2">
-        {/* Free Plan */}
-        <motion.div
-          className="relative flex flex-col rounded-lg border bg-primary p-2"
-          transition={{
-            duration: 0.2,
-            ease: [0.25, 0.46, 0.45, 0.94],
-          }}
-          variants={cardVariants}
-        >
-          <div className="flex flex-col gap-1">
-            <div className="h-1.5 w-8 rounded-full bg-foreground/20" />
-            <div className="flex items-baseline gap-0.5">
-              <span className="text-foreground/40 text-xs">$</span>
-              <div className="scale-75">
-                <PriceFlow value={price1} />
-              </div>
-              <span className="text-[10px] text-foreground/30">/mo</span>
-            </div>
-            <div className="h-1 w-6 rounded-full bg-foreground/10" />
-          </div>
-          <div className="my-1.5 h-px border-foreground/10 border-t border-dashed" />
-          <ul className="space-y-1">
-            {features[0].slice(0, 2).map((_, i) => (
-              <li
-                className="flex items-center gap-1"
-                // biome-ignore lint/suspicious/noArrayIndexKey: Static list that never reorders
-                key={`free-feature-${i}`}
-              >
-                <Check className="h-2 w-2 shrink-0 text-foreground/30" />
-                <div className="h-1 w-12 rounded-full bg-foreground/10" />
-              </li>
-            ))}
-          </ul>
-          <div className="mt-auto pt-2">
-            <div className="h-2 w-full rounded-md border bg-background" />
-          </div>
-        </motion.div>
-
-        {/* Pro Plan - Popular */}
-        <motion.div
-          className="relative flex flex-col rounded-lg border bg-background p-2"
-          transition={{
-            duration: 0.2,
-            ease: [0.25, 0.46, 0.45, 0.94],
-          }}
-          variants={cardVariants}
-        >
-          <motion.span
-            className="absolute -top-1.5 left-1/2 flex h-3 w-fit -translate-x-1/2 items-center rounded-full bg-brand px-1.5 font-medium text-[8px] text-white"
-            transition={{
-              duration: 0.2,
-              ease: [0.25, 0.46, 0.45, 0.94],
-            }}
-            variants={popularBadgeVariants}
+      <div className="grid w-full grid-cols-3 gap-2">
+        {PRICING_PLANS.map((plan) => (
+          <motion.div
+            className={`relative flex flex-col gap-2 rounded-lg border p-2.5 ${
+              plan.popular
+                ? "border-brand/30 bg-background shadow-sm"
+                : "border-border bg-primary"
+            }`}
+            key={plan.name}
+            transition={{ duration: 0.2, ease: EASE_OUT_QUAD }}
+            whileHover={{ scale: 1.02, y: -2 }}
           >
-            Popular
-          </motion.span>
-          <div className="flex flex-col gap-1">
-            <div className="h-1.5 w-6 rounded-full bg-foreground/20" />
-            <div className="flex items-baseline gap-0.5">
-              <span className="text-foreground/40 text-xs">$</span>
-              <div className="scale-75">
-                <PriceFlow value={price2} />
-              </div>
-              <span className="text-[10px] text-foreground/30">/mo</span>
-            </div>
-            <div className="h-1 w-6 rounded-full bg-foreground/10" />
-          </div>
-          <div className="my-1.5 h-px border-foreground/10 border-t border-dashed" />
-          <ul className="space-y-1">
-            {features[1].slice(0, 3).map((_, i) => (
-              <li
-                className="flex items-center gap-1"
-                // biome-ignore lint/suspicious/noArrayIndexKey: Static list that never reorders
-                key={`pro-feature-${i}`}
-              >
-                <Check className="h-2 w-2 shrink-0 text-foreground/30" />
-                <div className="h-1 w-10 rounded-full bg-foreground/10" />
-              </li>
-            ))}
-          </ul>
-          <div className="mt-auto pt-2">
-            <div className="h-2 w-full rounded-md bg-brand/20" />
-          </div>
-        </motion.div>
-
-        {/* Startup Plan */}
-        <motion.div
-          className="relative flex flex-col rounded-lg border bg-primary p-2"
-          transition={{
-            duration: 0.2,
-            ease: [0.25, 0.46, 0.45, 0.94],
-          }}
-          variants={cardVariants}
-        >
-          <div className="flex flex-col gap-1">
-            <div className="h-1.5 w-10 rounded-full bg-foreground/20" />
+            {plan.popular && (
+              <span className="absolute -top-1.5 left-1/2 flex h-3 w-fit -translate-x-1/2 items-center rounded-full bg-brand px-1.5 font-medium text-[8px] text-white">
+                Popular
+              </span>
+            )}
+            <span className="font-medium text-[9px] text-foreground/70">
+              {plan.name}
+            </span>
             <div className="flex items-baseline gap-0.5">
-              <span className="text-foreground/40 text-xs">$</span>
-              <div className="scale-75">
-                <PriceFlow value={price3} />
+              <span className="text-[10px] text-foreground/40">$</span>
+              <div className="origin-left scale-75">
+                <PriceFlow value={hovered ? plan.hover : plan.base} />
               </div>
-              <span className="text-[10px] text-foreground/30">/mo</span>
+              <span className="text-[8px] text-foreground/30">/mo</span>
             </div>
-            <div className="h-1 w-6 rounded-full bg-foreground/10" />
-          </div>
-          <div className="my-1.5 h-px border-foreground/10 border-t border-dashed" />
-          <ul className="space-y-1">
-            {features[2].slice(0, 2).map((_, i) => (
-              <li
-                className="flex items-center gap-1"
-                // biome-ignore lint/suspicious/noArrayIndexKey: Static list that never reorders
-                key={`startup-feature-${i}`}
-              >
-                <Check className="h-2 w-2 shrink-0 text-foreground/30" />
-                <div className="h-1 w-12 rounded-full bg-foreground/10" />
-              </li>
-            ))}
-          </ul>
-          <div className="mt-auto pt-2">
-            <div className="h-2 w-full rounded-md border bg-background" />
-          </div>
-        </motion.div>
+            <span
+              className={`mt-1 block rounded-md py-1 text-center font-medium text-[8px] ${
+                plan.popular
+                  ? "bg-brand text-white"
+                  : "border border-border bg-background text-foreground/70"
+              }`}
+            >
+              {plan.popular ? "Choose" : "Start"}
+            </span>
+          </motion.div>
+        ))}
       </div>
     </motion.div>
   );
 }
 
+const TESTIMONIAL_QUOTES = [
+  "Best component library I've shipped with.",
+  "The animations just work out of the box.",
+  "Dropped straight into my app — love it.",
+];
+
 function TestimonialPreview() {
   const people = getAllPeople().slice(0, 3);
   const [currentIndex, setCurrentIndex] = useState(0);
-
   const currentPerson = people[currentIndex] || people[0];
+  const quote = TESTIMONIAL_QUOTES[currentIndex % TESTIMONIAL_QUOTES.length];
 
-  const starVariants = {
-    rest: { scale: 1, backgroundColor: "hsl(var(--color-brand) / 0.4)" },
-    hover: { scale: 1.3, backgroundColor: "hsl(var(--color-brand) / 0.6)" },
-  };
-
-  const slideVariants = {
-    enter: (direction: number) => ({
-      x: direction > 0 ? 20 : -20,
-      opacity: 0,
-    }),
-    center: {
-      x: 0,
-      opacity: 1,
-    },
-    exit: (direction: number) => ({
-      x: direction > 0 ? -20 : 20,
-      opacity: 0,
-    }),
+  const slide = {
+    enter: { opacity: 0, transform: "translateY(6px)" },
+    center: { opacity: 1, transform: "translateY(0px)" },
+    exit: { opacity: 0, transform: "translateY(-6px)" },
   };
 
   return (
     <motion.div
       className="group/preview relative flex h-full w-full items-center justify-center p-4"
-      initial="rest"
-      onHoverStart={() => {
-        setCurrentIndex((prev) => (prev + 1) % people.length);
-      }}
-      whileHover="hover"
+      onHoverStart={() => setCurrentIndex((prev) => (prev + 1) % people.length)}
     >
-      <div className="relative flex flex-col items-center justify-center gap-2 overflow-hidden rounded-lg border bg-background p-4">
-        {/* Left Arrow */}
-        <div className="absolute top-1/2 left-1 -translate-y-1/2">
-          <ChevronLeft className="h-3 w-3 text-foreground/30" />
-        </div>
-        {/* Right Arrow */}
-        <div className="absolute top-1/2 right-1 -translate-y-1/2">
-          <ChevronRight className="h-3 w-3 text-foreground/30" />
-        </div>
-        <AnimatePresence custom={1} mode="wait">
+      <div className="relative flex w-[180px] flex-col items-center gap-2 overflow-hidden rounded-xl border border-border bg-background p-4 shadow-sm">
+        <IconChevronLeftFill24 className="absolute top-1/2 left-1.5 size-3 -translate-y-1/2 text-foreground/30" />
+        <IconChevronRightFill24 className="absolute top-1/2 right-1.5 size-3 -translate-y-1/2 text-foreground/30" />
+        <AnimatePresence mode="wait">
           <motion.div
             animate="center"
-            className="relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-full"
-            custom={1}
+            className="flex flex-col items-center gap-1.5"
             exit="exit"
             initial="enter"
             key={currentIndex}
-            transition={{
-              duration: 0.3,
-              ease: [0.25, 0.46, 0.45, 0.94],
-            }}
-            variants={slideVariants}
+            transition={{ duration: 0.25, ease: EASE_OUT_QUAD }}
+            variants={slide}
           >
-            <Image
-              alt={currentPerson?.name || "Avatar"}
-              className="h-full w-full object-cover"
-              height={32}
-              src={currentPerson ? getAvatarUrl(currentPerson.avatar, 32) : ""}
-              width={32}
-            />
+            <span className="relative size-8 overflow-hidden rounded-full">
+              <Image
+                alt={currentPerson?.name || ""}
+                className="size-full object-cover"
+                draggable={false}
+                height={32}
+                src={
+                  currentPerson ? getAvatarUrl(currentPerson.avatar, 32) : ""
+                }
+                width={32}
+              />
+            </span>
+            <div className="flex gap-0.5">
+              {[...new Array(5)].map((_, i) => (
+                <IconStarFill24
+                  className="size-2 fill-brand text-brand"
+                  // biome-ignore lint/suspicious/noArrayIndexKey: static 5-star rating
+                  key={`star-${i}`}
+                />
+              ))}
+            </div>
+            <p className="text-balance text-center text-[9px] text-foreground/70 leading-snug">
+              "{quote}"
+            </p>
+            <span className="font-medium text-[8px] text-muted-foreground">
+              {currentPerson?.name}
+            </span>
           </motion.div>
         </AnimatePresence>
-        <div className="flex gap-0.5">
-          {[...new Array(5)].map((_, i) => (
-            <motion.div
-              className="h-1.5 w-1.5 rounded-full bg-brand/40"
-              // biome-ignore lint/suspicious/noArrayIndexKey: Static star rating that never reorders
-              key={`star-${i}`}
-              transition={{
-                duration: 0.2,
-                delay: i * 0.03,
-                ease: [0.25, 0.46, 0.45, 0.94],
-              }}
-              variants={starVariants}
-            />
-          ))}
-        </div>
-        <AnimatePresence custom={1} mode="wait">
-          <motion.div
-            animate="center"
-            className="h-2 w-20 rounded-full bg-foreground/10"
-            custom={1}
-            exit="exit"
-            initial="enter"
-            key={`line1-${currentIndex}`}
-            transition={{
-              duration: 0.3,
-              ease: [0.25, 0.46, 0.45, 0.94],
-            }}
-            variants={slideVariants}
-          />
-        </AnimatePresence>
-        <AnimatePresence custom={1} mode="wait">
-          <motion.div
-            animate="center"
-            className="h-2 w-16 rounded-full bg-foreground/5"
-            custom={1}
-            exit="exit"
-            initial="enter"
-            key={`line2-${currentIndex}`}
-            transition={{
-              duration: 0.3,
-              ease: [0.25, 0.46, 0.45, 0.94],
-            }}
-            variants={slideVariants}
-          />
-        </AnimatePresence>
       </div>
     </motion.div>
   );
@@ -482,183 +260,113 @@ function TestimonialPreview() {
 
 function FAQPreview() {
   const chevronVariants = {
-    open: {
-      rotate: 180,
-    },
-    closed: {
-      rotate: 0,
-    },
+    open: { rotate: 180 },
+    closed: { rotate: 0 },
   };
 
   const contentVariants = {
-    open: {
-      opacity: 1,
-      height: "auto",
-      marginTop: "0.25rem",
-    },
-    closed: {
-      opacity: 0,
-      height: 0,
-      marginTop: 0,
-    },
+    open: { opacity: 1, height: "auto", marginTop: "0.25rem" },
+    closed: { opacity: 0, height: 0, marginTop: 0 },
   };
 
   return (
     <motion.div
-      className="group/preview relative flex h-full w-full flex-col items-center justify-center gap-4 p-4"
+      className="group/preview relative flex h-full w-full flex-col items-stretch justify-center gap-2 p-4"
       initial="open"
       whileHover="closed"
     >
-      {/* First FAQ - Expanded by default, closes on hover */}
       <motion.div
-        className="flex flex-col overflow-hidden rounded-md border border-foreground/10 bg-background px-2 pt-2 pb-2"
-        transition={{
-          duration: 0.2,
-          ease: [0.25, 0.46, 0.45, 0.94],
-        }}
-        whileHover={{
-          scale: 1.02,
-        }}
+        className="flex flex-col overflow-hidden rounded-md border border-border bg-background p-2"
+        transition={{ duration: 0.2, ease: EASE_OUT_QUAD }}
+        whileHover={{ scale: 1.02 }}
       >
         <div className="flex items-center justify-between gap-2">
-          <div className="flex items-center gap-0.5">
-            <HelpCircle className="h-2.5 w-2.5 text-foreground/30" />
-            <div className="h-2 w-16 rounded-full bg-foreground/20" />
+          <div className="flex items-center gap-1">
+            <IconCircleQuestionFill24 className="size-2.5 shrink-0 text-brand/60" />
+            <span className="font-medium text-[9px] text-foreground/80">
+              Is it free to use?
+            </span>
           </div>
           <motion.div
-            transition={{
-              duration: 0.2,
-              ease: [0.25, 0.46, 0.45, 0.94],
-            }}
+            transition={{ duration: 0.2, ease: EASE_OUT_QUAD }}
             variants={chevronVariants}
           >
-            <ChevronDown className="h-3 w-3 text-foreground/30" />
+            <IconChevronDownFill24 className="size-3 text-foreground/30" />
           </motion.div>
         </div>
-        {/* Expanded content - hidden on hover */}
         <motion.div
-          className="flex flex-col gap-1.5 overflow-hidden pl-1"
-          transition={{
-            duration: 0.2,
-            ease: [0.25, 0.46, 0.45, 0.94],
-          }}
+          className="overflow-hidden pl-3.5"
+          transition={{ duration: 0.2, ease: EASE_OUT_QUAD }}
           variants={contentVariants}
         >
-          <div className="h-1.5 w-full rounded-full bg-foreground/10" />
-          <div className="h-1.5 w-3/4 rounded-full bg-foreground/8" />
-          <div className="h-1.5 w-5/6 rounded-full bg-foreground/6" />
+          <p className="text-[8px] text-foreground/55 leading-snug">
+            Yes — MIT licensed. Copy any block into your project, free forever.
+          </p>
         </motion.div>
       </motion.div>
-      <motion.div
-        className="flex items-center justify-between gap-2 rounded-md border border-foreground/10 bg-background p-2"
-        transition={{
-          duration: 0.2,
-          ease: [0.25, 0.46, 0.45, 0.94],
-        }}
-        whileHover={{
-          scale: 1.02,
-        }}
-      >
-        <div className="flex items-center gap-0.5">
-          <HelpCircle className="h-2.5 w-2.5 text-foreground/30" />
-          <div className="h-2 w-16 rounded-full bg-foreground/15" />
-        </div>
-        <ChevronDown className="h-3 w-3 text-foreground/30" />
-      </motion.div>
-      <motion.div
-        className="flex items-center justify-between gap-2 rounded-md border border-foreground/10 bg-background p-2"
-        transition={{
-          duration: 0.2,
-          ease: [0.25, 0.46, 0.45, 0.94],
-        }}
-        whileHover={{
-          scale: 1.02,
-        }}
-      >
-        <div className="flex items-center gap-0.5">
-          <HelpCircle className="h-2.5 w-2.5 text-foreground/30" />
-          <div className="h-2 w-16 rounded-full bg-foreground/15" />
-        </div>
-        <ChevronDown className="h-3 w-3 text-foreground/30" />
-      </motion.div>
+      {["Does it work with shadcn?", "Can I customize the theme?"].map(
+        (question) => (
+          <motion.div
+            className="flex items-center justify-between gap-2 rounded-md border border-border bg-background p-2"
+            key={question}
+            transition={{ duration: 0.2, ease: EASE_OUT_QUAD }}
+            whileHover={{ scale: 1.02 }}
+          >
+            <div className="flex items-center gap-1">
+              <IconCircleQuestionFill24 className="size-2.5 shrink-0 text-brand/60" />
+              <span className="font-medium text-[9px] text-foreground/80">
+                {question}
+              </span>
+            </div>
+            <IconChevronDownFill24 className="size-3 text-foreground/30" />
+          </motion.div>
+        )
+      )}
     </motion.div>
   );
 }
 
 function FooterPreview() {
-  const linkVariants = {
-    rest: { scaleY: 1, backgroundColor: "hsl(var(--color-foreground) / 0.2)" },
-    hover: {
-      scaleY: 1.2,
-      backgroundColor: "hsl(var(--color-brand) / 0.2)",
-    },
-  };
-
-  const lineVariants = {
-    rest: { backgroundColor: "hsl(var(--color-foreground) / 0.1)" },
-    hover: { backgroundColor: "hsl(var(--color-brand) / 0.3)" },
-  };
-
-  const iconVariants = {
-    rest: { scale: 1, backgroundColor: "hsl(var(--color-foreground) / 0.1)" },
-    hover: {
-      scale: 1.2,
-      backgroundColor: "hsl(var(--color-brand) / 0.3)",
-    },
-  };
-
   return (
     <motion.div
       className="group/preview relative flex h-full w-full items-center justify-center p-4"
-      initial="rest"
-      whileHover="hover"
+      whileHover={{ scale: 1.02 }}
     >
-      <div className="flex w-full flex-col gap-1.5 rounded-lg border border-foreground/10 bg-background p-3">
-        <div className="flex items-center gap-2">
-          <div className="h-2.5 w-2.5 rounded bg-brand/30" />
-          <div className="flex gap-3">
-            {[...new Array(3)].map((_, i) => (
-              <motion.div
-                className="h-1.5 w-12 rounded-full bg-foreground/20"
-                // biome-ignore lint/suspicious/noArrayIndexKey: Static footer links that never reorder
-                key={`footer-link-${i}`}
-                transition={{
-                  duration: 0.2,
-                  delay: i * 0.03,
-                  ease: [0.25, 0.46, 0.45, 0.94],
-                }}
-                variants={linkVariants}
-              />
+      <div className="flex w-full flex-col gap-2 rounded-lg border border-border bg-background p-3">
+        <div className="flex items-center gap-2.5">
+          <div className="flex size-3.5 items-center justify-center rounded bg-brand text-[7px] text-white">
+            S
+          </div>
+          <div className="flex gap-2.5">
+            {["Docs", "Blocks", "Pricing"].map((label) => (
+              <span
+                className="text-[9px] text-foreground/60 transition-colors group-hover/preview:text-brand"
+                key={label}
+              >
+                {label}
+              </span>
             ))}
           </div>
         </div>
-        <motion.div
-          className="h-px w-full bg-foreground/10"
-          transition={{
-            duration: 0.3,
-            ease: [0.25, 0.46, 0.45, 0.94],
-          }}
-          variants={lineVariants}
-        />
+        <div className="h-px w-full bg-border" />
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-1.5">
-            <div className="h-1.5 w-20 rounded-full bg-foreground/15" />
-            <div className="h-1 w-10 rounded-full bg-foreground/10" />
-          </div>
+          <span className="text-[8px] text-muted-foreground">
+            © 2026 SmoothUI
+          </span>
           <div className="flex gap-1.5">
-            {[Twitter, Github, LinkIcon].map((Icon, i) => (
-              <motion.div
-                className="relative flex h-3.5 w-3.5 items-center justify-center rounded-full bg-foreground/10"
-                key={Icon.displayName}
-                transition={{
-                  duration: 0.2,
-                  delay: i * 0.03,
-                  ease: [0.25, 0.46, 0.45, 0.94],
-                }}
-                variants={iconVariants}
+            {(
+              [
+                { Icon: IconXTwitter, key: "twitter" },
+                { Icon: IconGithub, key: "github" },
+                { Icon: IconExternalLinkFill24, key: "link" },
+              ] as const
+            ).map(({ Icon, key }) => (
+              <span
+                className="flex size-3.5 items-center justify-center rounded-full bg-muted text-foreground/40"
+                key={key}
               >
-                <Icon className="h-2 w-2 text-foreground/40" />
-              </motion.div>
+                <Icon className="size-2" />
+              </span>
             ))}
           </div>
         </div>
@@ -668,7 +376,6 @@ function FooterPreview() {
 }
 
 function LogoCloudPreview() {
-  // Use more logos for a smoother infinite loop
   const logos = [
     Canpoy,
     Canva,
@@ -685,17 +392,10 @@ function LogoCloudPreview() {
   ];
 
   const logoVariants = {
-    rest: {
-      scale: 1,
-      opacity: 0.6,
-    },
-    hover: {
-      scale: 1.08,
-      opacity: 1,
-    },
+    rest: { scale: 1, opacity: 0.6 },
+    hover: { scale: 1.08, opacity: 1 },
   };
 
-  // Create blur mask layers - simplified for preview
   const createBlurMask = (
     direction: "left" | "right",
     blur: number,
@@ -723,37 +423,27 @@ function LogoCloudPreview() {
   return (
     <div className="group/preview relative flex h-full w-full items-center justify-center overflow-hidden p-4">
       <div className="relative w-full overflow-hidden">
-        {/* Base gradient backgrounds */}
         <div className="absolute inset-y-0 left-0 z-10 w-5 bg-linear-to-r from-background" />
         <div className="absolute inset-y-0 right-0 z-10 w-5 bg-linear-to-l from-background" />
-
-        {/* Left blur mask layers */}
         <div className="pointer-events-none absolute top-0 left-0 z-20 h-full w-5">
           {Array.from({ length: 4 }, (_, i) => createBlurMask("left", i, i))}
         </div>
-
-        {/* Right blur mask layers */}
         <div className="pointer-events-none absolute top-0 right-0 z-20 h-full w-5">
           {Array.from({ length: 4 }, (_, i) => createBlurMask("right", i, i))}
         </div>
-
         <InfiniteSlider gap={10} speed={15} speedOnHover={0}>
           {logos.map((LogoComponent) => (
             <motion.div
               className="relative flex shrink-0 flex-col items-center gap-1"
               initial="rest"
               key={LogoComponent.name}
-              transition={{
-                duration: 0.2,
-                ease: [0.25, 0.46, 0.45, 0.94],
-              }}
+              transition={{ duration: 0.2, ease: [0.25, 0.46, 0.45, 0.94] }}
               variants={logoVariants}
               whileHover="hover"
             >
-              <div className="relative flex h-7 w-7 items-center justify-center rounded-md border border-foreground/10 bg-background text-foreground transition-opacity duration-200 [&_svg]:h-full [&_svg]:w-full [&_svg]:fill-current">
+              <div className="relative flex size-9 items-center justify-center rounded-lg border border-border bg-background text-foreground transition-opacity duration-200 [&_svg]:h-5 [&_svg]:w-5 [&_svg]:fill-current">
                 <LogoComponent />
               </div>
-              <div className="h-0.5 w-5 rounded-full bg-foreground/10" />
             </motion.div>
           ))}
         </InfiniteSlider>
@@ -762,52 +452,36 @@ function LogoCloudPreview() {
   );
 }
 
-function StatsPreview() {
-  const [stat1, setStat1] = useState(24);
-  const [stat2, setStat2] = useState(48);
-  const [stat3, setStat3] = useState(72);
+const STATS = [
+  { base: 70, hover: 72, label: "Components" },
+  { base: 24, hover: 26, label: "Blocks" },
+  { base: 813, hover: 820, label: "GitHub stars" },
+];
 
-  const numberVariants = {
-    rest: { scale: 1 },
-    hover: { scale: 1.05 },
-  };
+function StatsPreview() {
+  const [hovered, setHovered] = useState(false);
 
   return (
     <motion.div
       className="group/preview relative flex h-full w-full items-center justify-center p-4"
-      initial="rest"
-      onHoverEnd={() => {
-        setStat1(24);
-        setStat2(48);
-        setStat3(72);
-      }}
-      onHoverStart={() => {
-        setStat1(34);
-        setStat2(58);
-        setStat3(82);
-      }}
-      whileHover="hover"
+      onHoverEnd={() => setHovered(false)}
+      onHoverStart={() => setHovered(true)}
     >
-      <div className="grid w-full grid-cols-3 divide-x divide-foreground/10">
-        {[stat1, stat2, stat3].map((stat, i) => (
+      <div className="grid w-full grid-cols-3 divide-x divide-border">
+        {STATS.map((stat) => (
           <motion.div
-            className="flex flex-col items-center gap-1.5 space-y-1 text-center"
-            // biome-ignore lint/suspicious/noArrayIndexKey: Static stats array that never reorders
-            key={`stat-${i}`}
-            transition={{
-              duration: 0.2,
-              delay: i * 0.03,
-              ease: [0.25, 0.46, 0.45, 0.94],
-            }}
-            variants={numberVariants}
+            className="flex flex-col items-center gap-1 text-center"
+            key={stat.label}
+            transition={{ duration: 0.2, ease: EASE_OUT_QUAD }}
+            whileHover={{ scale: 1.05 }}
           >
-            <div className="flex items-baseline justify-center gap-0.5 font-bold">
-              <span className="text-[8px] text-foreground/40">+</span>
-              <div className="scale-90">
-                <PriceFlow value={stat} />
-              </div>
+            <div className="flex items-baseline justify-center gap-0.5 font-bold text-foreground">
+              <span className="text-[8px] text-brand">+</span>
+              <PriceFlow value={hovered ? stat.hover : stat.base} />
             </div>
-            <div className="h-1 w-7 rounded-full bg-foreground/15" />
+            <span className="text-[9px] text-muted-foreground">
+              {stat.label}
+            </span>
           </motion.div>
         ))}
       </div>
@@ -815,55 +489,38 @@ function StatsPreview() {
   );
 }
 
+const TEAM_ROLES = ["Maintainer", "Designer", "Engineer"];
+
 function TeamPreview() {
   const people = getAllPeople().slice(0, 3);
 
-  const containerVariants = {
-    rest: { scale: 1, y: 0 },
-    hover: { scale: 1.08, y: -3 },
-  };
-
-  const avatarVariants = {
-    rest: { scale: 1 },
-    hover: { scale: 1.15 },
-  };
-
   return (
     <motion.div
       className="group/preview relative flex h-full w-full items-center justify-center gap-2.5 p-4"
-      initial="rest"
-      whileHover="hover"
+      whileHover={{ scale: 1.04, y: -3 }}
     >
       {people.map((person, i) => (
-        <motion.div
-          className="flex flex-col items-center gap-1.5 rounded-lg border border-foreground/10 bg-background p-2.5"
+        <div
+          className="flex flex-col items-center gap-1 rounded-lg border border-border bg-background p-2.5"
           key={person.name}
-          transition={{
-            duration: 0.2,
-            delay: i * 0.03,
-            ease: [0.25, 0.46, 0.45, 0.94],
-          }}
-          variants={containerVariants}
         >
-          <motion.div
-            className="relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-full"
-            transition={{
-              duration: 0.3,
-              ease: [0.25, 0.46, 0.45, 0.94],
-            }}
-            variants={avatarVariants}
-          >
+          <span className="relative size-9 overflow-hidden rounded-full">
             <Image
               alt={person.name}
-              className="h-full w-full object-cover"
+              className="size-full object-cover"
+              draggable={false}
               height={36}
               src={getAvatarUrl(person.avatar, 36)}
               width={36}
             />
-          </motion.div>
-          <div className="h-1.5 w-10 rounded-full bg-foreground/15" />
-          <div className="h-1 w-8 rounded-full bg-foreground/10" />
-        </motion.div>
+          </span>
+          <span className="max-w-14 truncate font-medium text-[9px] text-foreground/80">
+            {person.name}
+          </span>
+          <span className="text-[8px] text-muted-foreground">
+            {TEAM_ROLES[i]}
+          </span>
+        </div>
       ))}
     </motion.div>
   );
@@ -885,11 +542,9 @@ export function BlockCategories() {
               project needs
             </>
           }
-          eyebrow="Blocks"
           title="Elevate your design with premium blocks"
         />
 
-        {/* Grid Container with overflow */}
         <div className="relative -mx-3 mt-8 h-[480px] overflow-hidden sm:mx-0 md:mt-16 md:h-[672px]">
           <div className="grid grid-cols-1 gap-3 md:grid-cols-3 md:gap-6 xl:grid-cols-4">
             {blockCategories.map((category, index) => (
@@ -911,18 +566,12 @@ export function BlockCategories() {
                       }
                 }
               >
-                <Link
-                  className="relative block text-center"
-                  href={category.href}
-                >
-                  {/* Preview Area - Simple rounded container with frame-box */}
+                <Link className="relative block" href={category.href}>
                   <div className="w-full overflow-hidden">
                     <div className="frame-box relative h-[220px] w-full overflow-hidden rounded-[13px] p-2 md:rounded-2xl">
                       <category.preview />
                     </div>
                   </div>
-
-                  {/* Content - Centered with pill tag */}
                   <div className="mt-3 flex items-center justify-center gap-2 md:mt-4">
                     <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-0.5 font-medium text-foreground text-xs">
                       <span className="size-1.5 rounded-full bg-brand" />
@@ -937,7 +586,6 @@ export function BlockCategories() {
             ))}
           </div>
 
-          {/* Bottom Button Overlay */}
           <Button
             asChild
             className="absolute bottom-6 left-1/2 z-20 -translate-x-1/2 md:bottom-24"
@@ -965,16 +613,13 @@ export function BlockCategories() {
             </Link>
           </Button>
 
-          {/* BlurMagic Fade Effect */}
           <BlurMagic
             background="var(--color-background)"
             blur="4px"
             className="!absolute !bottom-0 !left-0 z-10 h-80 w-full"
             height="500px"
             side="bottom"
-            style={{
-              position: "absolute",
-            }}
+            style={{ position: "absolute" }}
           />
         </div>
       </div>
diff --git a/apps/docs/components/landing/components-slideshow.tsx b/apps/docs/components/landing/components-slideshow.tsx
index a53f8647..6b7e822e 100644
--- a/apps/docs/components/landing/components-slideshow.tsx
+++ b/apps/docs/components/landing/components-slideshow.tsx
@@ -1,8 +1,12 @@
+import { AddToKitButton } from "@docs/components/add-to-kit-button";
 import Divider from "@docs/components/landing/divider";
-import Frame from "@docs/components/landing/frame";
+import { InstallCopyButton } from "@docs/components/landing/install-copy-button";
+import { SectionHeader } from "@docs/components/landing/section-header";
 import { Button } from "@docs/components/smoothbutton";
+import { cn } from "@repo/shadcn-ui/lib/utils";
 import dynamic from "next/dynamic";
 import Link from "next/link";
+import { createElement } from "react";
 
 // Lazy-load example components to reduce initial bundle size
 const AnimatedTags = dynamic(() => import("@docs/examples/animated-tags"));
@@ -21,40 +25,112 @@ const UserAccountAvatar = dynamic(
   () => import("@docs/examples/user-account-avatar")
 );
 
-const SHOWCASE_COMPONENTS = [
-  { id: "animatedTags", component: AnimatedTags },
-  { id: "socialSelector", component: SocialSelector },
-  { id: "powerOffSlide", component: PowerOffSlide },
-  { id: "scrollableCardStack", component: ScrollableCardStack },
-  { id: "userAccountAvatar", component: UserAccountAvatar },
-  { id: "numberFlow", component: NumberFlow },
-  { id: "phototab", component: Phototab },
-  { id: "dynamicIsland", component: DynamicIsland },
-  { id: "imageMetadataPreview", component: ImageMetadataPreview },
+type ShowcaseItem = {
+  component: React.ComponentType;
+  name: string;
+  slug: string;
+  /** Extra grid span classes for the bento layout. */
+  span?: string;
+};
+
+// Rows are arranged so each md row sums to 3 columns.
+const SHOWCASE_COMPONENTS: ShowcaseItem[] = [
+  {
+    name: "Dynamic Island",
+    slug: "dynamic-island",
+    component: DynamicIsland,
+    span: "md:col-span-2",
+  },
+  { name: "Number Flow", slug: "number-flow", component: NumberFlow },
+  { name: "Phototab", slug: "phototab", component: Phototab },
+  {
+    name: "Social Selector",
+    slug: "social-selector",
+    component: SocialSelector,
+  },
+  {
+    name: "User Account Avatar",
+    slug: "user-account-avatar",
+    component: UserAccountAvatar,
+  },
+  {
+    name: "Scrollable Card Stack",
+    slug: "scrollable-card-stack",
+    component: ScrollableCardStack,
+    span: "md:col-span-2",
+  },
+  {
+    name: "Power Off Slide",
+    slug: "power-off-slide",
+    component: PowerOffSlide,
+  },
+  { name: "Animated Tags", slug: "animated-tags", component: AnimatedTags },
+  {
+    name: "Image Metadata Preview",
+    slug: "image-metadata-preview",
+    component: ImageMetadataPreview,
+    span: "md:col-span-2",
+  },
 ];
 
 export function ComponentsSlideshow() {
   return (
     <section className="relative bg-background px-8 py-24 transition">
       <Divider />
-      <h2 className="text-balance text-center font-semibold font-title text-3xl text-foreground transition">
-        Components Showcase
-      </h2>
+      <SectionHeader
+        description="Real components from the registry — preview the motion, then install with one command."
+        title="Components showcase"
+      />
       <div className="mt-16 grid grid-cols-1 gap-4 md:grid-cols-3">
-        {SHOWCASE_COMPONENTS.map(({ id, component }) => (
-          <div className="relative" key={id}>
-            <Frame
-              className="m-0 p-0 md:w-full"
-              clean={false}
-              component={component}
-              group="components"
-            />
+        {SHOWCASE_COMPONENTS.map(({ name, slug, component, span }) => (
+          <div
+            className={cn(
+              "group relative flex flex-col overflow-hidden rounded-xl border border-border bg-card",
+              span
+            )}
+            key={slug}
+          >
+            <div className="relative flex h-[280px] items-center justify-center overflow-hidden bg-primary p-6 before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(var(--dots-color)_1px,transparent_1px)] before:[--dots-color:--alpha(var(--color-foreground)/5%)] before:[background-size:16px_16px]">
+              <div className="relative z-10 flex h-full w-full items-center justify-center">
+                {createElement(component)}
+              </div>
+            </div>
+            <footer className="flex items-center justify-between gap-2 border-border/60 border-t px-4 py-2.5">
+              <Link
+                className="truncate font-medium text-foreground text-sm transition-colors hover:text-brand"
+                href={`/docs/components/${slug}`}
+              >
+                {name}
+              </Link>
+              <div className="flex shrink-0 items-center gap-1.5">
+                <AddToKitButton size="xs" slug={slug} title={name} />
+                <InstallCopyButton slug={slug} />
+              </div>
+            </footer>
           </div>
         ))}
       </div>
       <div className="mx-auto mt-8 flex justify-center">
-        <Button asChild variant="candy">
-          <Link href="/docs/components">View All Components</Link>
+        <Button asChild size="lg" variant="candy">
+          <Link href="/docs/components">
+            <span className="flex items-center gap-1">
+              <span>View all components</span>
+            </span>
+            <svg
+              aria-hidden="true"
+              className="-mx-1.5 size-5 shrink-0 text-white/72"
+              fill="none"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.333 13.333 11.667 10 8.333 6.667"
+                stroke="currentColor"
+                strokeLinecap="square"
+                strokeWidth="1.25"
+              />
+            </svg>
+          </Link>
         </Button>
       </div>
     </section>
diff --git a/apps/docs/components/landing/coverage.tsx b/apps/docs/components/landing/coverage.tsx
new file mode 100644
index 00000000..1922c362
--- /dev/null
+++ b/apps/docs/components/landing/coverage.tsx
@@ -0,0 +1,69 @@
+import Divider from "@docs/components/landing/divider";
+
+// Real, verified external mentions — coverage + directory listings. Not testimonials
+// (those stay X-only) and not "featured in" listicles we aren't actually in.
+const COVERAGE: { label: string; url: string }[] = [
+  {
+    label: "Peerlist",
+    url: "https://peerlist.io/saxenashikhil/articles/smoothui-a-beautiful-motiondriven-ui-library-for-react-devel",
+  },
+  {
+    label: "DEV.to",
+    url: "https://dev.to/jqueryscript/smoothui-40-animated-react-components-with-motion-8e5",
+  },
+  { label: "Tailkits", url: "https://tailkits.com/components/smoothui/" },
+  { label: "All Shadcn", url: "https://allshadcn.com/blocks/smoothui/" },
+  {
+    label: "Tailwind Resources",
+    url: "https://www.tailwindresources.com/theme/educlopez-smoothui/",
+  },
+  {
+    label: "Shadcn Templates",
+    url: "https://shadcntemplates.com/theme/educlopez-smoothui",
+  },
+  {
+    label: "Built At Lightspeed",
+    url: "https://www.builtatlightspeed.com/theme/educlopez-smoothui",
+  },
+];
+
+export function Coverage() {
+  return (
+    <section className="relative bg-background px-8 py-20 transition">
+      <Divider />
+      <div className="mx-auto max-w-3xl text-center">
+        <h2 className="font-medium text-[11px] text-muted-foreground uppercase tracking-[0.18em]">
+          Featured across the community
+        </h2>
+
+        <blockquote className="mt-5 text-balance font-semibold font-title text-foreground text-xl tracking-tight md:text-2xl">
+          &ldquo;SmoothUI is a game-changer for frontend developers looking for
+          polished UI components with motion-powered interactivity.&rdquo;
+        </blockquote>
+
+        <a
+          className="mt-3 inline-block text-muted-foreground text-sm transition-colors hover:text-brand"
+          href={COVERAGE[0].url}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          — Shikhil Saxena, Peerlist
+        </a>
+
+        <div className="mt-10 flex flex-wrap items-center justify-center gap-x-6 gap-y-3">
+          {COVERAGE.map((item) => (
+            <a
+              className="font-medium text-muted-foreground text-sm transition-colors hover:text-foreground"
+              href={item.url}
+              key={item.label}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              {item.label}
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/docs/components/landing/features.tsx b/apps/docs/components/landing/features.tsx
index 019f3491..f2528e07 100644
--- a/apps/docs/components/landing/features.tsx
+++ b/apps/docs/components/landing/features.tsx
@@ -4,68 +4,189 @@ import { ShadcnLogo } from "@docs/components/landing/logos/shadcn-logo";
 import { TailwindLogo } from "@docs/components/landing/logos/tailwind-logo";
 import { SectionHeader } from "@docs/components/landing/section-header";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import { Package } from "lucide-react";
+import InfiniteSlider from "@repo/smoothui/components/infinite-slider";
+import Image from "next/image";
 
-const features = [
-  {
-    title: "Smooth Animations",
-    description:
-      "Built-in animations powered by Motion and GSAP for delightful user experiences.",
-    icon: Package,
-  },
-  {
-    title: "React",
-    description:
-      "Built with modern React patterns including Server Components, TypeScript, and hooks for optimal performance.",
-    icon: ReactLogo,
-  },
-  {
-    title: "Tailwindcss",
-    description:
-      "Built with Tailwind CSS v4, featuring the latest utility-first CSS framework with enhanced dark mode and modern design patterns.",
-    icon: TailwindLogo,
-  },
-  {
-    title: "shadcn/ui Compatible",
-    description:
-      "Fully compatible with shadcn/ui ecosystem. Easy to integrate with existing shadcn/ui projects and follows the same patterns.",
-    icon: ShadcnLogo,
-  },
+const lead = {
+  title: "Smooth animations",
+  description:
+    "Every component ships with motion built in — powered by Motion and GSAP, tuned for spring physics, and fully reduced-motion aware.",
+};
+
+const cardBase =
+  "group relative flex flex-col rounded-2xl border bg-primary/40 p-6 transition-colors hover:bg-primary";
+
+const SHOWCASE_ROW_A = [
+  "Siri Orb",
+  "Dynamic Island",
+  "Number Flow",
+  "Apple Invites",
+  "Scramble Hover",
+];
+
+const SHOWCASE_ROW_B = [
+  "Wave Text",
+  "Grid Loader",
+  "Social Selector",
+  "Image Metadata",
+  "Power Off Slide",
+];
+
+const TOKEN_CHIPS = [
+  "bg-brand",
+  "rounded-2xl",
+  "--radius",
+  "oklch()",
+  "text-balance",
+  "@theme",
 ];
 
+const REACT_SNIPPET = `export function Orb() {
+  const ref = useRef(null)
+  return <SiriOrb ref={ref} />
+}`;
+
+const Pill = ({ children }: { children: string }) => (
+  <span className="flex shrink-0 items-center whitespace-nowrap rounded-full border border-border bg-background px-3 py-1.5 text-foreground/70 text-sm">
+    {children}
+  </span>
+);
+
+const CardHeading = ({
+  icon: Icon,
+  title,
+  description,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description: string;
+}) => (
+  <>
+    <div className="flex items-center gap-2">
+      <Icon className="size-4" />
+      <h3 className="font-semibold text-foreground text-lg tracking-tight">
+        {title}
+      </h3>
+    </div>
+    <p className="mt-1.5 text-muted-foreground text-sm">{description}</p>
+  </>
+);
+
+const WindowChrome = ({ label }: { label: string }) => (
+  <div className="flex items-center gap-1.5 border-border border-b px-3 py-2">
+    <span className="size-2 rounded-full bg-smooth-400" />
+    <span className="size-2 rounded-full bg-smooth-400" />
+    <span className="size-2 rounded-full bg-smooth-400" />
+    <span className="ml-1.5 font-mono text-[10px] text-muted-foreground">
+      {label}
+    </span>
+  </div>
+);
+
 export function Features() {
   return (
     <section className="relative bg-background px-8 py-24 transition">
       <Divider />
       <SectionHeader
         description="Built on the foundations you already love, with the polish you've been wishing for."
-        eyebrow="Why SmoothUI"
         title={
           <>
-            Why Choose Smooth<span className="text-brand">UI</span>?
+            Why choose Smooth<span className="text-brand">UI</span>?
           </>
         }
       />
-      <div className="mt-16 grid w-full gap-8 md:grid-cols-2 lg:grid-cols-4">
-        {features.map((feature) => (
-          <div
-            className={cn(
-              "group relative inset-ring-2 inset-ring-background flex flex-col rounded-2xl bg-linear-to-b bg-transparent from-65% from-primary/30 to-transparent p-6 backdrop-blur-lg transition-all hover:from-primary",
-              "border shadow-blue-800/10 shadow-sm hover:shadow-none"
-            )}
-            key={feature.title}
-          >
-            <div className="inset-ring inset-ring-background mb-4 flex h-8 w-8 items-center justify-center rounded-full border-[0.5px] border-brand bg-primary p-2">
-              <feature.icon className="text-brand transition" />
-            </div>
-            <h3 className="mb-2 font-semibold text-foreground text-xl transition">
-              {feature.title}
+      <div className="mt-16 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2">
+        {/* Lead — live component marquee over a saturated blurred photo */}
+        <div
+          className={cn(
+            cardBase,
+            "relative overflow-hidden border-0 p-0 text-white md:col-span-2 lg:col-span-2 lg:row-span-2"
+          )}
+        >
+          <Image
+            alt=""
+            aria-hidden
+            className="object-cover"
+            draggable={false}
+            fill
+            sizes="(max-width: 768px) 100vw, 420px"
+            src="/scenes/why-choose.webp"
+            unoptimized
+          />
+          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-black/20" />
+          <div className="relative flex flex-1 flex-col justify-center gap-3 py-12 [mask-image:linear-gradient(to_right,transparent,#000_12%,#000_88%,transparent)]">
+            <InfiniteSlider gap={12} speed={32}>
+              {SHOWCASE_ROW_A.map((name) => (
+                <Pill key={name}>{name}</Pill>
+              ))}
+            </InfiniteSlider>
+            <InfiniteSlider gap={12} reverse speed={32}>
+              {SHOWCASE_ROW_B.map((name) => (
+                <Pill key={name}>{name}</Pill>
+              ))}
+            </InfiniteSlider>
+          </div>
+          <div className="relative p-6">
+            <h3 className="mb-2 font-semibold text-xl tracking-tight drop-shadow-sm">
+              {lead.title}
             </h3>
-            <p className="text-primary-foreground transition">
-              {feature.description}
-            </p>
+            <p className="max-w-md text-sm text-white/80">{lead.description}</p>
+          </div>
+        </div>
+
+        {/* Modern React — a real code snippet */}
+        <div className={cn(cardBase, "lg:col-span-2")}>
+          <div className="mb-4 overflow-hidden rounded-lg border border-border bg-background">
+            <WindowChrome label="orb.tsx" />
+            <pre className="overflow-x-auto p-3 font-mono text-[11px] text-foreground/80 leading-relaxed">
+              <code>{REACT_SNIPPET}</code>
+            </pre>
+          </div>
+          <CardHeading
+            description="Server Components, TypeScript and hooks throughout — built for React 19."
+            icon={ReactLogo}
+            title="Modern React"
+          />
+        </div>
+
+        {/* Tailwind v4 — real token / utility chips */}
+        <div className={cardBase}>
+          <div className="mb-4 overflow-hidden rounded-lg border border-border bg-background">
+            <WindowChrome label="globals.css" />
+            <div className="flex flex-wrap gap-1.5 p-3">
+              {TOKEN_CHIPS.map((token) => (
+                <span
+                  className="rounded-md border border-border bg-muted px-2 py-1 font-mono text-[10px] text-muted-foreground"
+                  key={token}
+                >
+                  {token}
+                </span>
+              ))}
+            </div>
+          </div>
+          <CardHeading
+            description="The latest utility-first engine, with a unified token spine."
+            icon={TailwindLogo}
+            title="Tailwind CSS v4"
+          />
+        </div>
+
+        {/* shadcn — the real install command */}
+        <div className={cardBase}>
+          <div className="mb-4 overflow-hidden rounded-lg border border-border bg-background">
+            <WindowChrome label="Terminal" />
+            <div className="overflow-x-auto p-3 font-mono text-[11px] leading-relaxed">
+              <span className="select-none text-muted-foreground">$ </span>
+              <span className="text-foreground/80">npx shadcn add </span>
+              <span className="text-brand">@smoothui/siri-orb</span>
+            </div>
           </div>
-        ))}
+          <CardHeading
+            description="Drops into any shadcn project — same patterns, one command."
+            icon={ShadcnLogo}
+            title="shadcn compatible"
+          />
+        </div>
       </div>
     </section>
   );
diff --git a/apps/docs/components/landing/footer.tsx b/apps/docs/components/landing/footer.tsx
index 8dbff604..130ee47c 100644
--- a/apps/docs/components/landing/footer.tsx
+++ b/apps/docs/components/landing/footer.tsx
@@ -6,13 +6,13 @@ import { MotionLogo } from "@docs/components/landing/logos/motion-logo";
 import { ReactLogo } from "@docs/components/landing/logos/react-logo";
 import { ShadcnLogo } from "@docs/components/landing/logos/shadcn-logo";
 import { TailwindLogo } from "@docs/components/landing/logos/tailwind-logo";
+import { Button } from "@docs/components/smoothbutton";
 import { SponsorLogo } from "@docs/components/sponsor-logo";
 import { getExternalSponsors } from "@docs/lib/sponsors";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import { ArrowUpRight, Heart } from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
 import Link from "next/link";
-import smoothuiPkg from "../../../../packages/smoothui/package.json";
+import { IconArrowUpRightFill24, IconHeartFill24 } from "nucleo-core-fill-24";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -161,7 +161,10 @@ function CtaCard() {
         {hasSponsors ? (
           <>
             <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/60 px-3 py-1 font-medium text-xs backdrop-blur-sm">
-              <Heart aria-hidden className="size-3.5 fill-brand text-brand" />
+              <IconHeartFill24
+                aria-hidden
+                className="size-3.5 fill-brand text-brand"
+              />
               <span className="text-foreground">Thank you to our sponsors</span>
             </div>
             <h2 className="text-balance font-semibold font-title text-3xl text-foreground md:text-4xl">
@@ -204,22 +207,22 @@ function CtaCard() {
               helps ship more components, blocks, and animation recipes.
             </p>
             <div className="mt-7 flex flex-wrap items-center justify-center gap-3">
-              <Link
-                className="inline-flex items-center justify-center gap-1.5 rounded-md bg-foreground px-4 py-2 font-medium text-background text-sm transition-transform duration-200 hover:-translate-y-0.5"
-                href="/docs/guides/sponsors"
-              >
-                Become a sponsor
-                <ArrowUpRight aria-hidden className="size-4" />
-              </Link>
-              <a
-                className="inline-flex items-center justify-center gap-1.5 rounded-md border border-border/70 bg-background/60 px-4 py-2 font-medium text-foreground text-sm backdrop-blur-sm transition-colors duration-200 hover:border-brand/40 hover:text-brand"
-                href="https://github.com/educlopez/smoothui"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                <GithubIcon className="size-4" />
-                Star on GitHub
-              </a>
+              <Button asChild color="neutral" variant="solid">
+                <Link href="/docs/guides/sponsors">
+                  Become a sponsor
+                  <IconArrowUpRightFill24 aria-hidden />
+                </Link>
+              </Button>
+              <Button asChild variant="outline">
+                <a
+                  href="https://github.com/educlopez/smoothui"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  <GithubIcon />
+                  Star on GitHub
+                </a>
+              </Button>
             </div>
           </>
         )}
@@ -242,7 +245,7 @@ function FooterLinkItem({ link }: { link: FooterLink }) {
         target="_blank"
       >
         <span>{link.label}</span>
-        <ArrowUpRight
+        <IconArrowUpRightFill24
           aria-hidden
           className="size-3 shrink-0 opacity-60 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
         />
@@ -277,15 +280,7 @@ function LinkColumn({ column }: { column: FooterColumn }) {
 
 const ENTER_EASE = [0.23, 1, 0.32, 1] as const;
 
-interface FooterProps {
-  componentCount?: number;
-  version?: string;
-}
-
-export default function Footer({
-  componentCount,
-  version = smoothuiPkg.version,
-}: FooterProps) {
+export default function Footer() {
   const shouldReduceMotion = useReducedMotion();
 
   return (
@@ -317,114 +312,107 @@ export default function Footer({
 
       {/* Footer body */}
       <footer className="bg-muted/60 py-16 sm:py-20">
-        <div className="mx-auto max-w-5xl space-y-14 px-6">
-          <div className="grid gap-12 md:grid-cols-5">
-            {/* Brand column (spans 2) */}
-            <div className="space-y-6 md:col-span-2 md:space-y-8">
-              <Link
-                aria-label="SmoothUI home"
-                className="inline-flex items-center gap-2 transition-opacity hover:opacity-80"
-                href="/"
-              >
-                <Icon className="h-6 w-auto" />
-                <span className="mt-0.5 select-none font-medium font-title text-foreground text-xl">
-                  Smooth<span className="text-brand">UI</span>
-                </span>
-              </Link>
-              <p className="max-w-xs text-balance text-muted-foreground text-sm leading-relaxed">
-                Animated React components with smooth Motion animations. Drop-in
-                shadcn/ui compatible.
-              </p>
-            </div>
+        <FooterBody />
+      </footer>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Footer body — link columns + bottom bar, reusable without the CTA card
+// ---------------------------------------------------------------------------
+
+export function FooterBody() {
+  return (
+    <div className="mx-auto max-w-5xl space-y-14 px-6">
+      <div className="grid gap-12 md:grid-cols-5">
+        {/* Brand column (spans 2) */}
+        <div className="space-y-6 md:col-span-2 md:space-y-8">
+          <Link
+            aria-label="SmoothUI home"
+            className="inline-flex items-center gap-2 transition-opacity hover:opacity-80"
+            href="/"
+          >
+            <Icon className="h-6 w-auto" />
+            <span className="mt-0.5 select-none font-medium font-title text-foreground text-xl">
+              Smooth<span className="text-brand">UI</span>
+            </span>
+          </Link>
+          <p className="max-w-xs text-balance text-muted-foreground text-sm leading-relaxed">
+            Animated React components with smooth Motion animations. Drop-in
+            shadcn/ui compatible.
+          </p>
+        </div>
 
-            {/* 3 link columns */}
-            <div className="grid gap-8 sm:grid-cols-3 md:col-span-3">
-              <LinkColumn column={navigateColumn} />
-              <LinkColumn column={developColumn} />
-              <div>
-                <LinkColumn column={connectColumn} />
-                <div className="mt-5 flex items-center gap-3">
-                  <a
-                    className="text-muted-foreground transition-colors duration-200 hover:text-brand"
-                    href="https://x.com/educalvolpz"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    <XIcon className="size-[18px]" />
-                  </a>
-                  <a
-                    aria-label="SmoothUI on GitHub"
-                    className="text-muted-foreground transition-colors duration-200 hover:text-brand"
-                    href="https://github.com/educlopez/smoothui"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    <GithubIcon className="size-[18px]" />
-                  </a>
-                </div>
-              </div>
+        {/* 3 link columns */}
+        <div className="grid gap-8 sm:grid-cols-3 md:col-span-3">
+          <LinkColumn column={navigateColumn} />
+          <LinkColumn column={developColumn} />
+          <div>
+            <LinkColumn column={connectColumn} />
+            <div className="mt-5 flex items-center gap-3">
+              <a
+                className="text-muted-foreground transition-colors duration-200 hover:text-brand"
+                href="https://x.com/educalvolpz"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <XIcon className="size-[18px]" />
+              </a>
+              <a
+                aria-label="SmoothUI on GitHub"
+                className="text-muted-foreground transition-colors duration-200 hover:text-brand"
+                href="https://github.com/educlopez/smoothui"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <GithubIcon className="size-[18px]" />
+              </a>
             </div>
           </div>
+        </div>
+      </div>
 
-          {/* Dotted divider */}
-          <div
-            aria-hidden
-            className="h-px bg-[length:6px_1px] bg-repeat-x opacity-30 [background-image:linear-gradient(90deg,var(--color-foreground)_1px,transparent_1px)]"
-          />
-
-          {/* Bottom bar */}
-          <div className="flex flex-wrap items-center justify-between gap-4">
-            <div className="flex items-center gap-4">
-              <p className="text-muted-foreground text-sm">
-                &copy; {new Date().getFullYear()} SmoothUI. Built by{" "}
-                <a
-                  className="text-foreground underline underline-offset-4 transition-colors hover:text-brand"
-                  href="https://x.com/educalvolpz"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Eduardo Calvo
-                </a>
-                .
-              </p>
-            </div>
+      {/* Dotted divider */}
+      <div
+        aria-hidden
+        className="h-px bg-[length:6px_1px] bg-repeat-x opacity-30 [background-image:linear-gradient(90deg,var(--color-foreground)_1px,transparent_1px)]"
+      />
 
-            <div className="flex items-center gap-3">
-              {/* Tech stack row */}
-              <div className="hidden items-center gap-3 text-smooth-800 sm:flex">
-                {techStack.map((tech) => (
-                  <span
-                    aria-label={tech.name}
-                    className="transition-colors duration-200 hover:text-brand"
-                    key={tech.name}
-                    role="img"
-                    title={tech.name}
-                  >
-                    <tech.icon className={tech.className} />
-                  </span>
-                ))}
-              </div>
-
-              {/* Status pill — SmoothUI version of "All Systems Normal" */}
-              <div className="flex items-center gap-2 rounded-full border border-transparent bg-background py-1 pr-3 pl-2 shadow-sm ring-1 ring-border/60">
-                <span aria-hidden className="relative flex size-2.5">
-                  <span className="absolute inset-0 inline-flex size-full animate-ping rounded-full bg-brand/60 opacity-75" />
-                  <span className="relative inline-flex size-2.5 rounded-full bg-brand" />
-                </span>
-                <span className="text-foreground text-xs">
-                  v{version}
-                  {componentCount !== undefined && (
-                    <>
-                      <span className="text-muted-foreground"> · </span>
-                      {componentCount} components
-                    </>
-                  )}
-                </span>
-              </div>
-            </div>
+      {/* Bottom bar */}
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-4">
+          <p className="text-muted-foreground text-sm">
+            &copy; {new Date().getFullYear()} SmoothUI. Built by{" "}
+            <a
+              className="text-foreground underline underline-offset-4 transition-colors hover:text-brand"
+              href="https://x.com/educalvolpz"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Eduardo Calvo
+            </a>
+            .
+          </p>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Tech stack row */}
+          <div className="hidden items-center gap-3 text-smooth-800 sm:flex">
+            {techStack.map((tech) => (
+              <span
+                aria-label={tech.name}
+                className="transition-colors duration-200 hover:text-brand"
+                key={tech.name}
+                role="img"
+                title={tech.name}
+              >
+                <tech.icon className={tech.className} />
+              </span>
+            ))}
           </div>
         </div>
-      </footer>
+      </div>
     </div>
   );
 }
diff --git a/apps/docs/components/landing/hero.tsx b/apps/docs/components/landing/hero.tsx
index c1cbe721..576a923e 100644
--- a/apps/docs/components/landing/hero.tsx
+++ b/apps/docs/components/landing/hero.tsx
@@ -7,6 +7,7 @@ import { ReactLogo } from "@docs/components/landing/logos/react-logo";
 import { ShadcnLogo } from "@docs/components/landing/logos/shadcn-logo";
 import { TailwindLogo } from "@docs/components/landing/logos/tailwind-logo";
 import { Button } from "@docs/components/smoothbutton";
+import { useUiSound } from "@docs/components/sound-provider";
 import ExpandableCardsDemo from "@docs/examples/expandable-cards";
 import {
   Tooltip,
@@ -18,46 +19,14 @@ import ButtonCopy from "@repo/smoothui/components/button-copy";
 import ClipCornersButton from "@repo/smoothui/components/clip-corners-button";
 import ScrambleHover from "@repo/smoothui/components/scramble-hover";
 import SiriOrb from "@repo/smoothui/components/siri-orb";
-import { ArrowUpRight, User, Wand2 } from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
 import Link from "next/link";
-
-function AnnouncementBadge() {
-  const shouldReduceMotion = useReducedMotion();
-
-  return (
-    <a
-      className="group inline-flex max-w-full items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-full border bg-background px-3 py-0.5 font-medium text-foreground text-xs transition-all"
-      href="https://skills.smoothui.dev"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <div className="relative -ml-2.5 flex shrink-0 items-center gap-1 overflow-hidden truncate rounded-full bg-brand/10 px-2.5 py-1 text-brand text-xs">
-        {!shouldReduceMotion && (
-          <motion.div
-            animate={{ x: ["-100%", "200%"] }}
-            className="pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent"
-            transition={{
-              duration: 2,
-              repeat: Number.POSITIVE_INFINITY,
-              repeatDelay: 3,
-              ease: "easeInOut",
-            }}
-          />
-        )}
-        <Wand2 className="size-3" />
-        <span>New</span>
-      </div>
-      <div className="flex items-center gap-1 truncate py-1">
-        <span>UI Craft — Design taste for AI agents</span>
-        <ArrowUpRight
-          aria-hidden="true"
-          className="size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
-        />
-      </div>
-    </a>
-  );
-}
+import {
+  IconCheckFill24,
+  IconCopy2Fill24,
+  IconUserFill24,
+} from "nucleo-core-fill-24";
+import { useState } from "react";
 
 const EASE_OUT_QUAD_X1 = 0.25;
 const EASE_OUT_QUAD_Y1 = 0.46;
@@ -70,8 +39,23 @@ const EASE_OUT_QUAD = [
   EASE_OUT_QUAD_Y2,
 ] as const;
 
+const INSTALL_COMMAND = "npx shadcn@latest add @smoothui/dynamic-island";
+
 export function Hero() {
   const shouldReduceMotion = useReducedMotion();
+  const playClick = useUiSound("/sounds/button.wav", 0.4);
+  const [installCopied, setInstallCopied] = useState(false);
+
+  const copyInstall = async () => {
+    try {
+      await navigator.clipboard.writeText(INSTALL_COMMAND);
+      setInstallCopied(true);
+      playClick();
+      setTimeout(() => setInstallCopied(false), 1600);
+    } catch {
+      // clipboard unavailable — no-op
+    }
+  };
 
   return (
     <section className="bg-background transition">
@@ -84,7 +68,7 @@ export function Hero() {
               animate={
                 shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
               }
-              className="space-y-8"
+              className="flex max-w-xl flex-col"
               initial={
                 shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
               }
@@ -94,70 +78,117 @@ export function Hero() {
                   : { duration: 0.35, ease: EASE_OUT_QUAD }
               }
             >
-              {/* Announcement badge */}
-              <AnnouncementBadge />
-
-              {/* Main heading */}
-              <h1 className="text-balance font-semibold text-4xl text-foreground md:text-5xl lg:text-6xl lg:leading-15 lg:tracking-tight">
-                Animated React Components for shadcn/ui
-              </h1>
-
-              {/* Description */}
-              <p className="text-balance text-foreground/70 sm:text-lg md:text-xl">
-                Highly customizable, production-ready UI blocks for building
-                beautiful websites and apps that look and feel the way you mean
-                it.
-              </p>
-
-              {/* CTA buttons */}
-              <div className="flex flex-col gap-4 sm:flex-row">
-                <Button asChild size="sm" variant="candy">
-                  <Link href="/docs/guides">Explore Docs</Link>
-                </Button>
-                <Button asChild size="sm" variant="outline">
-                  <Link href="/docs/components">Explore components</Link>
-                </Button>
+              {/* Primary message */}
+              <div className="flex flex-col gap-5">
+                <h1 className="text-balance font-semibold font-title text-4xl text-foreground tracking-tight md:text-5xl lg:text-6xl lg:leading-[1.1]">
+                  <span className="block">Animated React components</span>
+                  <span className="block text-muted-foreground">
+                    for shadcn/ui
+                  </span>
+                </h1>
+
+                <p className="max-w-lg text-balance text-foreground/70 text-lg leading-relaxed md:text-xl">
+                  50+ drop-in components for your shadcn/ui project — one
+                  command, Motion-powered, fully typed.
+                </p>
               </div>
 
-              {/* Vercel OSS Program */}
-              <a
-                href="https://vercel.com/oss"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                <img
-                  alt="Vercel OSS Program"
-                  src="https://vercel.com/oss/program-badge-2026.svg"
-                />
-              </a>
-
-              <div className="mt-14 hidden items-center gap-8 sm:flex">
-                {[
-                  { name: "React", icon: ReactLogo, className: "size-7" },
-                  {
-                    name: "Tailwind CSS",
-                    icon: TailwindLogo,
-                    className: "h-6 w-auto",
-                  },
-                  { name: "shadcn/ui", icon: ShadcnLogo, className: "size-7" },
-                  {
-                    name: "Motion",
-                    icon: MotionLogo,
-                    className: "h-5 w-auto",
-                  },
-                  { name: "GSAP", icon: GsapLogo, className: "h-5 w-auto" },
-                ].map((tech) => (
-                  <Tooltip key={tech.name}>
-                    <TooltipTrigger asChild>
-                      <span className="cursor-default text-smooth-700 transition-colors hover:text-brand">
-                        <tech.icon className={tech.className} />
-                      </span>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom" sideOffset={8}>
-                      {tech.name}
-                    </TooltipContent>
-                  </Tooltip>
-                ))}
+              {/* Actions */}
+              <div className="mt-10 flex flex-col gap-5">
+                <div className="flex flex-col gap-3 sm:flex-row sm:gap-4">
+                  <Button
+                    asChild
+                    onClick={() => playClick()}
+                    size="sm"
+                    variant="candy"
+                  >
+                    <Link href="/docs/components">Browse components</Link>
+                  </Button>
+                  <Button
+                    asChild
+                    onClick={() => playClick()}
+                    size="sm"
+                    variant="outline"
+                  >
+                    <Link href="/docs/guides">Read the docs</Link>
+                  </Button>
+                </div>
+
+                <button
+                  aria-label="Copy install command"
+                  className="group flex w-fit max-w-full items-center gap-2.5 rounded-lg border border-border bg-background px-3 py-2 font-mono text-foreground/80 text-sm transition-colors hover:border-brand/40"
+                  onClick={copyInstall}
+                  type="button"
+                >
+                  <span
+                    aria-hidden
+                    className="select-none text-muted-foreground"
+                  >
+                    $
+                  </span>
+                  <span className="truncate">{INSTALL_COMMAND}</span>
+                  <span className="shrink-0 text-muted-foreground transition-colors group-hover:text-foreground">
+                    {installCopied ? (
+                      <IconCheckFill24 className="size-4 text-brand" />
+                    ) : (
+                      <IconCopy2Fill24 className="size-4" />
+                    )}
+                  </span>
+                  <span aria-live="polite" className="sr-only">
+                    {installCopied ? "Copied to clipboard" : ""}
+                  </span>
+                </button>
+              </div>
+
+              {/* Trust — Vercel OSS + stack */}
+              <div className="mt-12 flex flex-col gap-5 border-border/60 border-t pt-8">
+                <a
+                  className="w-fit opacity-80 transition-opacity hover:opacity-100"
+                  href="https://vercel.com/oss"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  <img
+                    alt="Vercel Open Source Software Program"
+                    draggable={false}
+                    height={24}
+                    src="/vercel-oss-badge.svg"
+                    width={240}
+                  />
+                </a>
+
+                <div className="flex flex-wrap items-center gap-x-6 gap-y-3">
+                  {[
+                    { name: "React", icon: ReactLogo, className: "size-6" },
+                    {
+                      name: "Tailwind CSS",
+                      icon: TailwindLogo,
+                      className: "h-5 w-auto",
+                    },
+                    {
+                      name: "shadcn/ui",
+                      icon: ShadcnLogo,
+                      className: "size-6",
+                    },
+                    {
+                      name: "Motion",
+                      icon: MotionLogo,
+                      className: "h-4 w-auto",
+                    },
+                    { name: "GSAP", icon: GsapLogo, className: "h-4 w-auto" },
+                  ].map((tech) => (
+                    <Tooltip key={tech.name}>
+                      <TooltipTrigger asChild>
+                        <span className="cursor-default text-smooth-700 transition-colors hover:text-brand">
+                          <tech.icon className={tech.className} />
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent side="bottom" sideOffset={8}>
+                        {tech.name}
+                      </TooltipContent>
+                    </Tooltip>
+                  ))}
+                </div>
               </div>
             </motion.div>
 
@@ -192,7 +223,7 @@ export function Hero() {
                 {/* AnimatedInput Component */}
                 <div className="frame-box relative rounded-lg p-4">
                   <AnimatedInput
-                    icon={<User size={16} strokeWidth={1.5} />}
+                    icon={<IconUserFill24 size={16} strokeWidth={1.5} />}
                     label="Username"
                     placeholder="Enter username"
                   />
diff --git a/apps/docs/components/landing/install-copy-button.tsx b/apps/docs/components/landing/install-copy-button.tsx
new file mode 100644
index 00000000..97b10fd2
--- /dev/null
+++ b/apps/docs/components/landing/install-copy-button.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import ButtonCopy from "@repo/smoothui/components/button-copy";
+import {
+  IconCheckFill24,
+  IconCopy2Fill24,
+  IconDotsLoaderFill24,
+} from "nucleo-core-fill-24";
+
+export function InstallCopyButton({ slug }: { slug: string }) {
+  const command = `npx shadcn@latest add @smoothui/${slug}`;
+
+  return (
+    <span title={command}>
+      <ButtonCopy
+        className="grid size-7! min-h-7! min-w-7! shrink-0 place-items-center rounded-md p-0! text-foreground transition-colors hover:bg-primary"
+        idleIcon={<IconCopy2Fill24 className="size-3.5" />}
+        loadingIcon={<IconDotsLoaderFill24 className="size-3.5 animate-spin" />}
+        onCopy={() => navigator.clipboard.writeText(command)}
+        successIcon={<IconCheckFill24 className="size-3.5" />}
+      />
+    </span>
+  );
+}
diff --git a/apps/docs/components/landing/latest-posts.tsx b/apps/docs/components/landing/latest-posts.tsx
new file mode 100644
index 00000000..c1b9c0e3
--- /dev/null
+++ b/apps/docs/components/landing/latest-posts.tsx
@@ -0,0 +1,101 @@
+import { SectionHeader } from "@docs/components/landing/section-header";
+import { PostCover } from "@docs/components/post-cover";
+import { Button } from "@docs/components/smoothbutton";
+import { blogSource, formatDate, getReadingTime } from "@docs/lib/source";
+import Link from "next/link";
+import { IconChevronRightFill24 } from "nucleo-core-fill-24";
+
+export async function LatestPosts() {
+  const posts = blogSource
+    .getPages()
+    .sort(
+      (a, b) =>
+        new Date(b.data.date as string).getTime() -
+        new Date(a.data.date as string).getTime()
+    )
+    .slice(0, 3);
+
+  if (posts.length === 0) {
+    return null;
+  }
+
+  const withMeta = await Promise.all(
+    posts.map(async (post) => ({
+      post,
+      readingTime: getReadingTime(await post.data.getText("processed")),
+    }))
+  );
+
+  return (
+    <section className="relative bg-background px-8 py-24 transition">
+      <SectionHeader
+        description="Tutorials, deep dives and case studies on building beautifully animated React components."
+        title="From the blog"
+      />
+
+      <div className="mx-auto mt-16 grid max-w-6xl gap-4 md:grid-cols-3">
+        {withMeta.map(({ post, readingTime }) => (
+          <article className="group relative" key={post.url}>
+            <Link
+              className="flex h-full flex-col overflow-hidden rounded-2xl border bg-primary/40 transition-colors hover:bg-primary"
+              href={post.url}
+            >
+              <PostCover
+                alt={post.data.title}
+                className="aspect-video border-border border-b"
+                image={post.data.image as string | undefined}
+                seed={post.url}
+              />
+              <div className="flex flex-1 flex-col p-6">
+                <div className="flex items-center gap-2 text-muted-foreground text-sm">
+                  <time dateTime={post.data.date as string}>
+                    {formatDate(post.data.date as string)}
+                  </time>
+                  <span aria-hidden="true">·</span>
+                  <span>{readingTime} min read</span>
+                </div>
+                <h3 className="mt-3 font-semibold text-foreground tracking-tight transition-colors group-hover:text-brand">
+                  {post.data.title}
+                </h3>
+                <p className="mt-2 line-clamp-3 text-muted-foreground text-sm leading-relaxed">
+                  {post.data.description}
+                </p>
+                <span className="mt-auto flex items-center gap-1 pt-6 font-medium text-brand text-sm">
+                  Read
+                  <IconChevronRightFill24
+                    aria-hidden="true"
+                    className="size-3.5 translate-y-px transition-transform group-hover:translate-x-0.5"
+                  />
+                </span>
+              </div>
+            </Link>
+          </article>
+        ))}
+      </div>
+
+      <div className="mx-auto mt-8 flex justify-center">
+        <Button asChild size="lg" variant="candy">
+          <Link href="/blog">
+            <span className="flex items-center gap-1">
+              <span>View all posts</span>
+            </span>
+            <svg
+              aria-hidden="true"
+              className="-mx-1.5 size-5 shrink-0 text-white/72"
+              fill="none"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.333 13.333 11.667 10 8.333 6.667"
+                stroke="currentColor"
+                strokeLinecap="square"
+                strokeWidth="1.25"
+              />
+            </svg>
+          </Link>
+        </Button>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/docs/components/landing/logos/install-method-icons.tsx b/apps/docs/components/landing/logos/install-method-icons.tsx
new file mode 100644
index 00000000..22f86760
--- /dev/null
+++ b/apps/docs/components/landing/logos/install-method-icons.tsx
@@ -0,0 +1,65 @@
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import type { SVGProps } from "react";
+
+type InstallMethodIconProps = SVGProps<SVGSVGElement>;
+
+export function BrewInstallIcon({
+  className,
+  ...props
+}: InstallMethodIconProps) {
+  return (
+    <svg
+      aria-hidden
+      className={cn("size-[15px] shrink-0", className)}
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.75"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M12 2 21 7v10l-9 5-9-5V7z" />
+    </svg>
+  );
+}
+
+export function NpxInstallIcon({
+  className,
+  ...props
+}: InstallMethodIconProps) {
+  return (
+    <svg
+      aria-hidden
+      className={cn("size-[15px] shrink-0", className)}
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.75"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
+      <path d="m3.3 7 8.7 5 8.7-5" />
+      <path d="M12 22V12" />
+    </svg>
+  );
+}
+
+export function ClaudeInstallIcon({
+  className,
+  ...props
+}: InstallMethodIconProps) {
+  return (
+    <svg
+      aria-hidden
+      className={cn("size-[15px] shrink-0", className)}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M4.7 15.9 9 13.4l.07-.2-.07-.13H8.8l-.7-.04-2.4-.06-2.06-.08-2-.1-.5-.1L.8 12l.05-.3.42-.3.6.05 1.33.1 2 .14 1.45.08 2.15.23h.34l.05-.14-.12-.08-.1-.08L6.9 10.6 4.66 9.12l-1.2-.86-.63-.43-.32-.4-.14-.88.57-.63.76.05.2.05.78.6 1.66 1.28 2.18 1.6.32.27.13-.09.02-.06-.14-.24L7.5 7.78 6.26 5.6l-.56-.9-.15-.53a2.6 2.6 0 0 1-.09-.64l.65-.88.36-.12.87.12.37.32.54 1.24.88 1.95 1.36 2.65.4.79.21.73.08.22h.14v-.13l.1-1.48.2-1.82.2-2.34.06-.66.32-.78.64-.42.5.24.42.6-.06.39-.25 1.6-.48 2.52-.32 1.68h.18l.21-.21.85-1.13 1.43-1.79.63-.71.74-.78.47-.38h.9l.66 1-.3 1.02-.92 1.16-.76 1-1.1 1.47-.68.93.06.1.16-.02 2.45-.52 1.32-.24 1.58-.27.72.33.08.34-.29.7-1.7.42-2 .4-2.97.7-.04.03.04.05 1.34.13.57.03h1.4l2.6.2.68.44.4.55-.07.42-1.05.53-1.42-.33-3.3-.78-1.13-.28h-.16v.1l.94.92 1.72 1.55 2.16 2 .1.5-.27.4-.3-.05-1.9-1.43-.73-.64-1.65-1.4h-.11v.16l.38.56 2.01 3.02.1.93-.14.3-.52.19-.58-.1-1.18-1.66-1.22-1.87-.99-1.67-.12.07-.58 6.27-.27.32-.63.24-.52-.4-.27-.63.27-1.27.33-1.66.27-1.32.24-1.64.14-.54v-.04h-.14L5.99 16l-1.9 2.54-1.5 1.6-.36.14-.62-.32.06-.57.34-.5 2.06-2.62z" />
+    </svg>
+  );
+}
diff --git a/apps/docs/components/landing/media-player.tsx b/apps/docs/components/landing/media-player.tsx
deleted file mode 100644
index 76f6c0da..00000000
--- a/apps/docs/components/landing/media-player.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client";
-
-import { ClientTweetCard, TweetSkeleton } from "@repo/smoothui/components";
-import { ExternalLink } from "lucide-react";
-import type { TestimonialMedia } from "./what-they-say";
-
-interface MediaPlayerProps {
-  media: TestimonialMedia;
-}
-
-// Regex for extracting tweet ID - defined at top level for performance
-const TWITTER_URL_REGEX = /(?:twitter\.com|x\.com)\/\w+\/status\/(\d+)/;
-
-// Extract Twitter/X tweet ID from URL
-function getTwitterId(url: string): string | null {
-  const match = url.match(TWITTER_URL_REGEX);
-  return match ? match[1] : null;
-}
-
-export function MediaPlayer({ media }: MediaPlayerProps) {
-  const handleOpenExternal = () => {
-    window.open(media.url, "_blank", "noopener,noreferrer");
-  };
-
-  const tweetId = getTwitterId(media.url);
-
-  if (!tweetId) {
-    return (
-      <div className="relative min-h-[400px] overflow-hidden rounded-2xl border bg-background">
-        <div className="flex h-full min-h-[400px] items-center justify-center p-6">
-          <div className="text-center">
-            <p className="mb-4 text-foreground/60 text-sm">Invalid tweet URL</p>
-            <button
-              className="ease inline-flex items-center gap-2 rounded-lg border bg-background px-4 py-2 text-foreground text-sm transition-colors duration-200 hover:bg-accent"
-              onClick={handleOpenExternal}
-              type="button"
-            >
-              <ExternalLink className="h-4 w-4" />
-              Open on X
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return <ClientTweetCard fallback={<TweetSkeleton />} id={tweetId} />;
-}
diff --git a/apps/docs/components/landing/navbar/github-stars.tsx b/apps/docs/components/landing/navbar/github-stars.tsx
index cffd234b..50849d23 100644
--- a/apps/docs/components/landing/navbar/github-stars.tsx
+++ b/apps/docs/components/landing/navbar/github-stars.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { Star } from "lucide-react";
 import Link from "next/link";
+import { IconStarFill24 } from "nucleo-core-fill-24";
 import { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 
@@ -73,11 +73,13 @@ export function GithubStars({
       {data && !loading && !error && (
         <>
           <span className="flex items-center gap-1 text-foreground/60">
-            <Star className="size-3.5 fill-current" />
-            <span className="text-xs">{data.stars.toLocaleString()}</span>
+            <IconStarFill24 className="size-3.5 fill-current" />
+            <span className="text-xs tabular-nums">
+              {data.stars.toLocaleString()}
+            </span>
           </span>
           {showForks && (
-            <span className="text-foreground/60 text-xs">
+            <span className="text-foreground/60 text-xs tabular-nums">
               {data.forks.toLocaleString()} forks
             </span>
           )}
diff --git a/apps/docs/components/landing/navbar/mobile-navbar.tsx b/apps/docs/components/landing/navbar/mobile-navbar.tsx
index a3df18e5..49757da1 100644
--- a/apps/docs/components/landing/navbar/mobile-navbar.tsx
+++ b/apps/docs/components/landing/navbar/mobile-navbar.tsx
@@ -2,24 +2,24 @@
 
 import Logo from "@docs/components/logo";
 import { Button } from "@docs/components/smoothbutton";
-import {
-  Book,
-  Compass,
-  FileText,
-  Heart,
-  Layers3,
-  LayoutDashboard,
-  Menu,
-  PackagePlus,
-  Sparkles,
-  Type,
-  User,
-  Wand2,
-  X,
-  Zap,
-} from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import Link from "next/link";
+import {
+  IconBoltFill24,
+  IconBookFill24,
+  IconBoxFill24,
+  IconColorPaletteFill24,
+  IconCompassFill24,
+  IconGrid2Fill24,
+  IconHeartFill24,
+  IconLayersFill24,
+  IconMenuFill24,
+  IconSparkleFill24,
+  IconTextFill24,
+  IconUserFill24,
+  IconWandSparkleFill24,
+  IconXmarkFill24,
+} from "nucleo-core-fill-24";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 import { GithubStars } from "./github-stars";
@@ -75,7 +75,11 @@ export function MobileNavbar({ className }: MobileNavbarProps) {
           size="icon"
           variant="ghost"
         >
-          {isOpen ? <X size={20} /> : <Menu size={20} />}
+          {isOpen ? (
+            <IconXmarkFill24 size={20} />
+          ) : (
+            <IconMenuFill24 size={20} />
+          )}
         </Button>
       </div>
 
@@ -120,7 +124,7 @@ export function MobileNavbar({ className }: MobileNavbarProps) {
               }
             >
               <div className="mobile-navbar-section-title">
-                <LayoutDashboard size={16} />
+                <IconGrid2Fill24 size={16} />
                 Components
               </div>
               <div className="mobile-navbar-links">
@@ -128,21 +132,21 @@ export function MobileNavbar({ className }: MobileNavbarProps) {
                   className="mobile-navbar-link"
                   href="/docs/components/scroll-reveal-paragraph"
                 >
-                  <Type size={16} />
+                  <IconTextFill24 size={16} />
                   Text Components
                 </Link>
                 <Link
                   className="mobile-navbar-link"
                   href="/docs/components/accordion"
                 >
-                  <Layers3 size={16} />
+                  <IconLayersFill24 size={16} />
                   Basic Components
                 </Link>
                 <Link
                   className="mobile-navbar-link"
                   href="/docs/components/animated-o-t-p-input"
                 >
-                  <LayoutDashboard size={16} />
+                  <IconGrid2Fill24 size={16} />
                   UI Components
                 </Link>
               </div>
@@ -163,26 +167,26 @@ export function MobileNavbar({ className }: MobileNavbarProps) {
               }
             >
               <div className="mobile-navbar-section-title">
-                <Zap size={16} />
+                <IconBoltFill24 size={16} />
                 Blocks
               </div>
               <div className="mobile-navbar-links">
                 <Link className="mobile-navbar-link" href="/docs/blocks/hero">
-                  <Sparkles size={16} />
+                  <IconSparkleFill24 size={16} />
                   Hero Blocks
                 </Link>
                 <Link
                   className="mobile-navbar-link"
                   href="/docs/blocks/pricing"
                 >
-                  <PackagePlus size={16} />
+                  <IconBoxFill24 size={16} />
                   Pricing Blocks
                 </Link>
                 <Link
                   className="mobile-navbar-link"
                   href="/docs/blocks/testimonial"
                 >
-                  <User size={16} />
+                  <IconUserFill24 size={16} />
                   Testimonial Blocks
                 </Link>
               </div>
@@ -202,8 +206,12 @@ export function MobileNavbar({ className }: MobileNavbarProps) {
                   : { delay: 0.15, duration: 0.2 }
               }
             >
+              <Link className="mobile-navbar-link" href="/themes">
+                <IconColorPaletteFill24 size={16} />
+                Themes
+              </Link>
               <Link className="mobile-navbar-link" href="/docs/guides">
-                <Book size={16} />
+                <IconBookFill24 size={16} />
                 Docs
               </Link>
             </motion.div>
@@ -223,19 +231,19 @@ export function MobileNavbar({ className }: MobileNavbarProps) {
               }
             >
               <div className="mobile-navbar-section-title">
-                <Compass size={16} />
+                <IconCompassFill24 size={16} />
                 Resources
               </div>
               <div className="mobile-navbar-links">
                 <Link className="mobile-navbar-link" href="/blog">
-                  <FileText size={16} />
+                  <IconTextFill24 size={16} />
                   Blog
                 </Link>
                 <Link
                   className="mobile-navbar-link"
                   href="/docs/guides/sponsors"
                 >
-                  <Heart size={16} />
+                  <IconHeartFill24 size={16} />
                   Sponsors
                 </Link>
                 <a
@@ -244,7 +252,7 @@ export function MobileNavbar({ className }: MobileNavbarProps) {
                   rel="noopener noreferrer"
                   target="_blank"
                 >
-                  <Wand2 size={16} />
+                  <IconWandSparkleFill24 size={16} />
                   Skills
                 </a>
               </div>
diff --git a/apps/docs/components/landing/navbar/navbar.tsx b/apps/docs/components/landing/navbar/navbar.tsx
index 72bad2f6..4f9c3586 100644
--- a/apps/docs/components/landing/navbar/navbar.tsx
+++ b/apps/docs/components/landing/navbar/navbar.tsx
@@ -10,20 +10,20 @@ import {
   Viewport as NavigationMenuViewport,
 } from "@radix-ui/react-navigation-menu";
 import {
-  ArrowRight,
-  Book,
-  Compass,
-  FileText,
-  Heart,
-  Layers3,
-  LayoutDashboard,
-  PackagePlus,
-  Sparkles,
-  Type,
-  User,
-  Wand2,
-  Zap,
-} from "lucide-react";
+  IconArrowRightFill24,
+  IconBoltFill24,
+  IconBookFill24,
+  IconBoxFill24,
+  IconColorPaletteFill24,
+  IconCompassFill24,
+  IconGrid2Fill24,
+  IconHeartFill24,
+  IconLayersFill24,
+  IconSparkleFill24,
+  IconTextFill24,
+  IconUserFill24,
+  IconWandSparkleFill24,
+} from "nucleo-core-fill-24";
 import type React from "react";
 import { useState } from "react";
 
@@ -45,17 +45,17 @@ import { MobileNavbar } from "./mobile-navbar";
 const componentPreviews = {
   text: {
     title: "Text Components",
-    icon: <Type size={20} />,
+    icon: <IconTextFill24 size={20} />,
     section: "text",
   },
   basic: {
     title: "Basic Components",
-    icon: <Layers3 size={20} />,
+    icon: <IconLayersFill24 size={20} />,
     section: "basic",
   },
   components: {
     title: "UI Components",
-    icon: <LayoutDashboard size={20} />,
+    icon: <IconGrid2Fill24 size={20} />,
     section: "components",
   },
 };
@@ -63,17 +63,17 @@ const componentPreviews = {
 const blockPreviews = {
   hero: {
     title: "Hero Blocks",
-    icon: <Sparkles size={20} />,
+    icon: <IconSparkleFill24 size={20} />,
     section: "hero",
   },
   pricing: {
     title: "Pricing Blocks",
-    icon: <PackagePlus size={20} />,
+    icon: <IconBoxFill24 size={20} />,
     section: "pricing",
   },
   testimonial: {
     title: "Testimonial Blocks",
-    icon: <User size={20} />,
+    icon: <IconUserFill24 size={20} />,
     section: "testimonial",
   },
 };
@@ -103,7 +103,7 @@ export default function Navbar({ className }: NavbarProps) {
       <NavigationMenuList className="menu-list flex-auto">
         <NavigationMenuItem>
           <NavigationMenuTrigger className="trigger !cursor-default">
-            <LayoutDashboard size={16} />
+            <IconGrid2Fill24 size={16} />
             Components
           </NavigationMenuTrigger>
           <NavigationMenuContent className="content">
@@ -143,7 +143,7 @@ export default function Navbar({ className }: NavbarProps) {
                   href="/docs/components"
                 >
                   Explore all components
-                  <ArrowRight size={14} />
+                  <IconArrowRightFill24 size={14} />
                 </Link>
               </div>
 
@@ -167,7 +167,7 @@ export default function Navbar({ className }: NavbarProps) {
 
         <NavigationMenuItem>
           <NavigationMenuTrigger className="trigger !cursor-default">
-            <Zap size={16} />
+            <IconBoltFill24 size={16} />
             Blocks
           </NavigationMenuTrigger>
           <NavigationMenuContent className="content">
@@ -207,7 +207,7 @@ export default function Navbar({ className }: NavbarProps) {
                   href="/docs/blocks"
                 >
                   Explore all blocks
-                  <ArrowRight size={14} />
+                  <IconArrowRightFill24 size={14} />
                 </Link>
               </div>
 
@@ -229,14 +229,19 @@ export default function Navbar({ className }: NavbarProps) {
           </NavigationMenuContent>
         </NavigationMenuItem>
 
+        <NavigationMenuItem>
+          <NavigationMenuLink className="trigger" href="/themes">
+            <IconColorPaletteFill24 size={16} /> Themes
+          </NavigationMenuLink>
+        </NavigationMenuItem>
         <NavigationMenuItem>
           <NavigationMenuLink className="trigger" href="/docs/guides">
-            <Book size={16} /> Docs
+            <IconBookFill24 size={16} /> Docs
           </NavigationMenuLink>
         </NavigationMenuItem>
         <NavigationMenuItem>
           <NavigationMenuTrigger className="trigger !cursor-default">
-            <Compass size={16} />
+            <IconCompassFill24 size={16} />
             Resources
           </NavigationMenuTrigger>
           <NavigationMenuContent className="content">
@@ -245,7 +250,7 @@ export default function Navbar({ className }: NavbarProps) {
                 <div className="submenu-items">
                   <EnhancedListItem
                     href="/blog"
-                    icon={<FileText size={20} />}
+                    icon={<IconTextFill24 size={20} />}
                     onHover={() => setHoveredResource("blog")}
                     onLeave={() => setHoveredResource(null)}
                     title="Blog"
@@ -254,7 +259,7 @@ export default function Navbar({ className }: NavbarProps) {
                   </EnhancedListItem>
                   <EnhancedListItem
                     href="/docs/guides/sponsors"
-                    icon={<Heart size={20} />}
+                    icon={<IconHeartFill24 size={20} />}
                     onHover={() => setHoveredResource("sponsors")}
                     onLeave={() => setHoveredResource(null)}
                     title="Sponsors"
@@ -264,7 +269,7 @@ export default function Navbar({ className }: NavbarProps) {
                   <EnhancedListItem
                     external
                     href="https://skills.smoothui.dev"
-                    icon={<Wand2 size={20} />}
+                    icon={<IconWandSparkleFill24 size={20} />}
                     onHover={() => setHoveredResource("skills")}
                     onLeave={() => setHoveredResource(null)}
                     title="Skills"
@@ -277,7 +282,7 @@ export default function Navbar({ className }: NavbarProps) {
                   href="/blog"
                 >
                   Read the blog
-                  <ArrowRight size={14} />
+                  <IconArrowRightFill24 size={14} />
                 </Link>
               </div>
 
diff --git a/apps/docs/components/landing/section-header.tsx b/apps/docs/components/landing/section-header.tsx
index 17f2a530..b470711b 100644
--- a/apps/docs/components/landing/section-header.tsx
+++ b/apps/docs/components/landing/section-header.tsx
@@ -8,12 +8,10 @@ export interface SectionHeaderProps {
   align?: "center" | "left";
   className?: string;
   description?: ReactNode;
-  eyebrow?: ReactNode;
   title: ReactNode;
 }
 
 export function SectionHeader({
-  eyebrow,
   title,
   description,
   className,
@@ -43,17 +41,6 @@ export function SectionHeader({
     <div
       className={cn("max-w-2xl", isCenter && "mx-auto text-center", className)}
     >
-      {eyebrow && (
-        <motion.p
-          className={cn(
-            "mb-2 font-medium text-brand text-sm uppercase tracking-wider",
-            isCenter && "text-center"
-          )}
-          {...fadeUp(0)}
-        >
-          {eyebrow}
-        </motion.p>
-      )}
       <motion.h2
         className={cn(
           "text-balance font-semibold font-title text-3xl text-foreground transition md:text-4xl",
diff --git a/apps/docs/components/landing/skills-section.tsx b/apps/docs/components/landing/skills-section.tsx
index c0f19e9d..2e0bd841 100644
--- a/apps/docs/components/landing/skills-section.tsx
+++ b/apps/docs/components/landing/skills-section.tsx
@@ -1,169 +1,101 @@
 "use client";
 
 import Divider from "@docs/components/landing/divider";
-import { SectionHeader } from "@docs/components/landing/section-header";
-import { ArrowUpRight, Eye, Search, Sparkles, Wand2 } from "lucide-react";
+import { UiCraftInstallSelector } from "@docs/components/landing/ui-craft-install-selector";
 import { motion, useReducedMotion } from "motion/react";
 import Image from "next/image";
 import Link from "next/link";
-
-const modes = [
-  { icon: Wand2, label: "Build", description: "Scaffold with taste" },
-  { icon: Sparkles, label: "Animate", description: "Motion that feels right" },
-  { icon: Eye, label: "Review", description: "Catch what AI misses" },
-  { icon: Search, label: "Polish", description: "Pixel-perfect details" },
-];
+import { IconArrowUpRightFill24 } from "nucleo-core-fill-24";
 
 export function SkillsSection() {
   const shouldReduceMotion = useReducedMotion();
 
-  const springTransition = (delay: number) =>
-    shouldReduceMotion
+  const lift = (delay: number) => ({
+    initial: shouldReduceMotion
+      ? { opacity: 1 }
+      : { opacity: 0, transform: "translateY(16px)" },
+    whileInView: shouldReduceMotion
+      ? { opacity: 1 }
+      : { opacity: 1, transform: "translateY(0px)" },
+    transition: shouldReduceMotion
       ? { duration: 0 }
-      : { type: "spring" as const, duration: 0.3, bounce: 0.1, delay };
+      : { type: "spring" as const, duration: 0.35, bounce: 0.1, delay },
+    viewport: { once: true, amount: 0.3 },
+  });
 
   return (
-    <section className="relative bg-background px-8 py-24 transition">
+    <section className="relative bg-background px-8 py-32 transition">
       <Divider />
       <div className="mx-auto max-w-5xl">
-        <SectionHeader
-          description="Same prompt. Same model. Different result. UI Craft gives your coding agent the design intuition it's missing."
-          eyebrow="Skills"
-          title="Design taste for your AI agent"
-        />
+        <div className="relative isolate overflow-hidden rounded-3xl border border-border">
+          <Image
+            alt=""
+            aria-hidden
+            className="-z-10 object-cover"
+            draggable={false}
+            fill
+            sizes="(max-width: 1024px) 100vw, 960px"
+            src="/scenes/skill-meadow.webp"
+          />
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10 bg-gradient-to-b from-black/45 via-black/30 to-black/60"
+          />
 
-        <motion.div
-          className="frame-box relative mx-auto mt-16 overflow-hidden rounded-2xl"
-          initial={
-            shouldReduceMotion
-              ? { opacity: 1 }
-              : { opacity: 0, transform: "translateY(16px) scale(0.98)" }
-          }
-          transition={springTransition(0.15)}
-          viewport={{ once: true, amount: 0.2 }}
-          whileInView={
-            shouldReduceMotion
-              ? { opacity: 1 }
-              : { opacity: 1, transform: "translateY(0px) scale(1)" }
-          }
-        >
-          <div className="grid gap-8 p-8 md:grid-cols-2 md:gap-12 md:p-12">
-            {/* Logo side */}
-            <motion.div
-              className="flex flex-col items-center justify-center gap-6"
-              initial={
-                shouldReduceMotion
-                  ? { opacity: 1 }
-                  : { opacity: 0, transform: "scale(0.95)" }
-              }
-              transition={springTransition(0.25)}
-              viewport={{ once: true, amount: 0.3 }}
-              whileInView={
-                shouldReduceMotion
-                  ? { opacity: 1 }
-                  : { opacity: 1, transform: "scale(1)" }
-              }
-            >
+          <div className="flex flex-col items-center gap-5 px-6 py-20 text-center md:py-28">
+            <motion.div {...lift(0.05)}>
               <Image
-                alt="UI Craft — Design taste for AI coding agents"
-                className="size-28 rounded-3xl shadow shadow-black/10 ring-1 ring-border"
-                height={112}
+                alt="UI Craft"
+                className="size-14 rounded-2xl shadow-black/20 shadow-lg ring-1 ring-white/40"
+                draggable={false}
+                height={56}
                 src="/icon-ui-craft.png"
-                width={112}
+                width={56}
               />
-              <div className="text-center">
-                <p className="font-semibold text-foreground text-lg">
-                  UI Craft
-                </p>
-                <p className="mt-1 text-primary-foreground text-sm">
-                  Design taste for AI coding agents
-                </p>
-              </div>
             </motion.div>
 
-            {/* Info side */}
-            <div className="flex flex-col justify-center gap-6">
-              {/* 4 modes */}
-              <motion.div
-                className="grid grid-cols-2 gap-3"
-                initial={
-                  shouldReduceMotion
-                    ? { opacity: 1 }
-                    : { opacity: 0, transform: "translateY(8px)" }
-                }
-                transition={springTransition(0.3)}
-                viewport={{ once: true, amount: 0.3 }}
-                whileInView={
-                  shouldReduceMotion
-                    ? { opacity: 1 }
-                    : { opacity: 1, transform: "translateY(0px)" }
-                }
-              >
-                {modes.map((mode) => (
-                  <div
-                    className="flex items-center gap-2.5 rounded-xl border border-border bg-background p-3"
-                    key={mode.label}
-                  >
-                    <mode.icon className="size-4 shrink-0 text-brand" />
-                    <div>
-                      <p className="font-medium text-foreground text-sm leading-tight">
-                        {mode.label}
-                      </p>
-                      <p className="text-primary-foreground text-xs leading-tight">
-                        {mode.description}
-                      </p>
-                    </div>
-                  </div>
-                ))}
-              </motion.div>
+            <motion.span
+              className="font-medium text-[11px] text-white/75 uppercase tracking-[0.18em]"
+              {...lift(0.1)}
+            >
+              UI Craft
+            </motion.span>
+
+            <motion.h2
+              className="max-w-2xl text-balance font-semibold font-title text-3xl text-white tracking-tight md:text-5xl"
+              {...lift(0.15)}
+            >
+              The system behind design taste
+            </motion.h2>
 
-              {/* Install command */}
-              <motion.div
-                className="overflow-hidden rounded-xl border border-border bg-background p-4"
-                initial={
-                  shouldReduceMotion
-                    ? { opacity: 1 }
-                    : { opacity: 0, transform: "translateY(8px)" }
-                }
-                transition={springTransition(0.35)}
-                viewport={{ once: true, amount: 0.3 }}
-                whileInView={
-                  shouldReduceMotion
-                    ? { opacity: 1 }
-                    : { opacity: 1, transform: "translateY(0px)" }
-                }
+            <motion.p
+              className="max-w-xl text-balance text-white/85"
+              {...lift(0.2)}
+            >
+              Anti-slop detection, a scored quality gate, and a convergence loop
+              — so your agent ships UI you&apos;d actually put in production.
+            </motion.p>
+
+            <motion.div className="mt-3" {...lift(0.25)}>
+              <UiCraftInstallSelector />
+            </motion.div>
+
+            <motion.div {...lift(0.3)}>
+              <Link
+                className="group mt-2 flex items-center gap-1.5 font-medium text-sm text-white/80 transition-colors hover:text-white"
+                href="https://skills.smoothui.dev"
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                <p className="mb-2 text-primary-foreground text-xs">
-                  Install with one command
-                </p>
-                <code className="block font-mono text-foreground text-sm">
-                  npx skills add educlopez/ui-craft
-                </code>
-              </motion.div>
-            </div>
+                Explore UI Craft
+                <IconArrowUpRightFill24
+                  className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
+                  size={14}
+                />
+              </Link>
+            </motion.div>
           </div>
-        </motion.div>
-
-        <motion.div
-          className="mt-8 flex justify-center"
-          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0 }}
-          transition={springTransition(0.5)}
-          viewport={{ once: true, amount: 0.5 }}
-          whileInView={shouldReduceMotion ? { opacity: 1 } : { opacity: 1 }}
-        >
-          <Link
-            className="group flex items-center gap-2 font-medium text-brand text-sm transition-colors hover:text-foreground"
-            href="https://skills.smoothui.dev"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Explore UI Craft skill
-            <ArrowUpRight
-              className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
-              size={14}
-            />
-          </Link>
-        </motion.div>
+        </div>
       </div>
     </section>
   );
diff --git a/apps/docs/components/landing/social-proof.tsx b/apps/docs/components/landing/social-proof.tsx
new file mode 100644
index 00000000..9718c660
--- /dev/null
+++ b/apps/docs/components/landing/social-proof.tsx
@@ -0,0 +1,42 @@
+import { GithubStars } from "@docs/components/landing/navbar/github-stars";
+
+// A slim credibility bar right under the hero — avatar stack + GitHub stars.
+const FACES = [
+  "orcdev",
+  "jaykosai",
+  "Lucas_Moveset",
+  "Potato___Dragon",
+  "openhunts",
+  "PeteCapeCod",
+];
+
+export function SocialProof() {
+  return (
+    <section className="bg-background px-8 py-8 transition">
+      <div className="mx-auto flex max-w-7xl flex-col items-center justify-center gap-4 sm:flex-row sm:gap-6">
+        <div className="flex items-center gap-3">
+          <div className="flex -space-x-2">
+            {FACES.map((handle) => (
+              <img
+                alt=""
+                aria-hidden
+                className="size-7 rounded-full border-2 border-background object-cover"
+                draggable={false}
+                height={28}
+                key={handle}
+                loading="lazy"
+                src={`https://unavatar.io/x/${handle}`}
+                width={28}
+              />
+            ))}
+          </div>
+          <span className="text-muted-foreground text-sm">
+            Loved by developers building with shadcn/ui
+          </span>
+        </div>
+        <span aria-hidden className="hidden h-4 w-px bg-border sm:block" />
+        <GithubStars />
+      </div>
+    </section>
+  );
+}
diff --git a/apps/docs/components/landing/sponsors.tsx b/apps/docs/components/landing/sponsors.tsx
index 68fb2565..c1456bc6 100644
--- a/apps/docs/components/landing/sponsors.tsx
+++ b/apps/docs/components/landing/sponsors.tsx
@@ -2,8 +2,8 @@
 
 import { SponsorLogo } from "@docs/components/sponsor-logo";
 import { getExternalSponsors } from "@docs/lib/sponsors";
-import { Heart } from "lucide-react";
 import Link from "next/link";
+import { IconHeartFill24 } from "nucleo-core-fill-24";
 import Divider from "./divider";
 
 export function Sponsors() {
@@ -17,7 +17,7 @@ export function Sponsors() {
         {hasSponsors && (
           <div className="mb-12 text-center">
             <div className="mb-6 inline-flex items-center gap-2 rounded-full border bg-linear-to-br from-background via-background to-brand/10 px-4 py-2">
-              <Heart className="h-4 w-4 fill-red-500 text-red-500" />
+              <IconHeartFill24 className="h-4 w-4 fill-red-500 text-red-500" />
               <span className="font-medium text-foreground text-sm">
                 Thank You to Our Sponsors
               </span>
diff --git a/apps/docs/components/landing/ui-craft-install-selector.tsx b/apps/docs/components/landing/ui-craft-install-selector.tsx
new file mode 100644
index 00000000..48f7590d
--- /dev/null
+++ b/apps/docs/components/landing/ui-craft-install-selector.tsx
@@ -0,0 +1,241 @@
+"use client";
+
+import {
+  BrewInstallIcon,
+  ClaudeInstallIcon,
+  NpxInstallIcon,
+} from "@docs/components/landing/logos/install-method-icons";
+import { useUiSound } from "@docs/components/sound-provider";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@repo/shadcn-ui/components/ui/dropdown-menu";
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  IconCheckFill24,
+  IconChevronDownFill24,
+  IconCopy2Fill24,
+} from "nucleo-core-fill-24";
+import type { ComponentType, SVGProps } from "react";
+import { useEffect, useRef, useState } from "react";
+
+const INSTALL_METHODS = [
+  {
+    id: "brew",
+    label: "brew",
+    command: "brew install --cask educlopez/tap/ui-craft",
+    followUp: "Then run ui-craft install",
+    Icon: BrewInstallIcon,
+  },
+  {
+    id: "npx",
+    label: "npx",
+    command: "npx skills add educlopez/ui-craft",
+    Icon: NpxInstallIcon,
+  },
+  {
+    id: "claude",
+    label: "Claude",
+    command: "/plugin install ui-craft",
+    Icon: ClaudeInstallIcon,
+  },
+] as const;
+
+type InstallMethodId = (typeof INSTALL_METHODS)[number]["id"];
+type InstallMethodIcon = ComponentType<SVGProps<SVGSVGElement>>;
+
+interface UiCraftInstallSelectorProps {
+  className?: string;
+  defaultMethod?: InstallMethodId;
+}
+
+function MethodIcon({
+  icon: Icon,
+  className,
+}: {
+  icon: InstallMethodIcon;
+  className?: string;
+}) {
+  return <Icon className={cn("text-current", className)} />;
+}
+
+export function UiCraftInstallSelector({
+  className,
+  defaultMethod = "brew",
+}: UiCraftInstallSelectorProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const playCopied = useUiSound("/sounds/celebration.wav", 0.35);
+  const [methodId, setMethodId] = useState<InstallMethodId>(defaultMethod);
+  const [copied, setCopied] = useState(false);
+  const ghostRef = useRef<HTMLSpanElement>(null);
+  const wrapRef = useRef<HTMLSpanElement>(null);
+
+  const method =
+    INSTALL_METHODS.find((item) => item.id === methodId) ?? INSTALL_METHODS[0];
+
+  const sizeToCommand = () => {
+    if (!(ghostRef.current && wrapRef.current)) {
+      return;
+    }
+    wrapRef.current.style.width = `${ghostRef.current.offsetWidth}px`;
+  };
+
+  useEffect(() => {
+    sizeToCommand();
+  }, [method.command]);
+
+  useEffect(() => {
+    const onResize = () => sizeToCommand();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [method.command]);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(method.command);
+      setCopied(true);
+      playCopied();
+      setTimeout(() => setCopied(false), 1600);
+    } catch {
+      // clipboard unavailable — no-op
+    }
+  };
+
+  return (
+    <div className={cn("flex flex-col items-center gap-2", className)}>
+      <div className="inline-flex max-w-[calc(100vw-4rem)] items-center gap-1 rounded-xl border border-white/25 bg-white/10 py-1.5 pr-1 pl-1.5 shadow-[0_1px_2px_oklch(0%_0_0/0.08)] backdrop-blur-md">
+        <DropdownMenu>
+          <DropdownMenuTrigger className="inline-flex items-center gap-1.5 rounded-lg px-2 py-1 font-medium text-sm text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40">
+            <MethodIcon className="text-white/80" icon={method.Icon} />
+            <span>{method.label}</span>
+            <IconChevronDownFill24
+              aria-hidden
+              className="size-3.5 text-white/70"
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="start"
+            className="min-w-[9.5rem] rounded-xl p-1 shadow-[0_1px_2px_oklch(0%_0_0/0.04),0_8px_28px_oklch(0%_0_0/0.12)]"
+            sideOffset={8}
+          >
+            {INSTALL_METHODS.map((item) => {
+              const isSelected = item.id === methodId;
+
+              return (
+                <DropdownMenuItem
+                  className="gap-2 rounded-lg px-2 py-1.5 font-medium text-[13px]"
+                  key={item.id}
+                  onSelect={() => setMethodId(item.id)}
+                >
+                  <MethodIcon
+                    className="text-muted-foreground"
+                    icon={item.Icon}
+                  />
+                  <span className="flex-1 text-left">{item.label}</span>
+                  <svg
+                    aria-hidden
+                    className={cn(
+                      "size-3.5 shrink-0 text-brand",
+                      isSelected ? "opacity-100" : "opacity-0"
+                    )}
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.4"
+                    viewBox="0 0 24 24"
+                  >
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <span aria-hidden className="my-1 w-px self-stretch bg-white/20" />
+
+        <span
+          aria-hidden
+          className="select-none pl-1 font-mono text-sm text-white/60"
+        >
+          $
+        </span>
+
+        <span
+          className="relative block max-w-[min(100vw-12rem,28rem)] overflow-hidden"
+          ref={wrapRef}
+          style={
+            shouldReduceMotion
+              ? undefined
+              : { transition: "width 400ms cubic-bezier(0.32, 0.72, 0, 1)" }
+          }
+        >
+          <span
+            aria-hidden
+            className="pointer-events-none invisible absolute whitespace-nowrap font-mono text-sm"
+            ref={ghostRef}
+          >
+            {method.command}
+          </span>
+          <code className="block max-w-full overflow-x-auto whitespace-nowrap font-mono text-sm text-white [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+            {method.command}
+          </code>
+        </span>
+
+        <button
+          aria-label="Copy install command"
+          className="group relative flex size-8 shrink-0 items-center justify-center rounded-lg text-white/70 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
+          onClick={copy}
+          type="button"
+        >
+          <AnimatePresence initial={false} mode="wait">
+            {copied ? (
+              <motion.span
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }
+                }
+                initial={
+                  shouldReduceMotion
+                    ? { opacity: 1 }
+                    : { opacity: 0, scale: 0.6 }
+                }
+                key="check"
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { type: "spring", stiffness: 500, damping: 28 }
+                }
+              >
+                <IconCheckFill24 className="size-4 text-brand-lighter" />
+              </motion.span>
+            ) : (
+              <motion.span
+                animate={{ opacity: 1 }}
+                exit={
+                  shouldReduceMotion
+                    ? { opacity: 0, transition: { duration: 0 } }
+                    : { opacity: 0, scale: 0.6 }
+                }
+                initial={{ opacity: 1 }}
+                key="copy"
+              >
+                <IconCopy2Fill24 className="size-4" />
+              </motion.span>
+            )}
+          </AnimatePresence>
+          <span aria-live="polite" className="sr-only">
+            {copied ? "Copied to clipboard" : ""}
+          </span>
+        </button>
+      </div>
+
+      {"followUp" in method && method.followUp ? (
+        <p className="font-mono text-white/60 text-xs">{method.followUp}</p>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/docs/components/landing/what-they-say.tsx b/apps/docs/components/landing/what-they-say.tsx
index 88f2093c..2a90cf24 100644
--- a/apps/docs/components/landing/what-they-say.tsx
+++ b/apps/docs/components/landing/what-they-say.tsx
@@ -1,285 +1,381 @@
 "use client";
 
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import { motion, useReducedMotion } from "motion/react";
-import { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import Image from "next/image";
+import {
+  IconChevronLeftFill24,
+  IconChevronRightFill24,
+} from "nucleo-core-fill-24";
+import { useState } from "react";
 import Divider from "./divider";
-import { LoadingDots } from "./loading-dots";
-import { MediaPlayer } from "./media-player";
 
-export interface TestimonialMedia {
+type Testimonial = {
   id: string;
-  type: "twitter";
-  url: string;
-}
+  name: string;
+  handle: string;
+  quote: string;
+  tweetUrl: string;
+};
 
-const testimonials: TestimonialMedia[] = [
-  // Add your testimonials here
-  // Example:
+const username = (handle: string) => handle.replace(/^@/, "");
+const avatarUrl = (handle: string) =>
+  `https://unavatar.io/x/${username(handle)}`;
 
+const Avatar = ({ data, size }: { data: Testimonial; size: number }) => (
+  <Image
+    alt={data.name}
+    className="shrink-0 rounded-full object-cover"
+    draggable={false}
+    height={size}
+    src={avatarUrl(data.handle)}
+    width={size}
+  />
+);
+
+// Center feature card per page (crossfades).
+const CENTERS: { image: string; data: Testimonial }[] = [
   {
-    id: "1",
-    type: "twitter",
-    url: "https://x.com/Lucas_Moveset/status/1990155654019887348",
-  },
-  {
-    id: "2",
-    type: "twitter",
-    url: "https://x.com/PeteCapeCod/status/1962707094395556337",
+    image: "/scenes/testimonial-1.jpg",
+    data: {
+      id: "orcdev",
+      name: "OrcDev",
+      handle: "@orcdev",
+      tweetUrl: "https://x.com/orcdev/status/2007091382784303330",
+      quote:
+        "Love your project Edu! Keep it up — can't wait to see what you cook next 🔥",
+    },
   },
   {
-    id: "3",
-    type: "twitter",
-    url: "https://x.com/orcdev/status/2007091382784303330",
+    image: "/scenes/testimonial-2.jpg",
+    data: {
+      id: "jaykosai",
+      name: "jeth.eth",
+      handle: "@jaykosai",
+      tweetUrl: "https://x.com/jaykosai/status/1919079453017231481",
+      quote:
+        "All I can say is 🙌🔥 — planning to build something crazy with it.",
+    },
   },
+];
+
+// Four side slots. Each holds one testimonial and is a card on its activePage,
+// otherwise a small square. The two slots in a column swap card/square on page
+// change — the ElevenLabs morph.
+const SIDE_SLOTS: { activePage: number; data: Testimonial }[] = [
+  // left column: top, bottom
   {
-    id: "4",
-    type: "twitter",
-    url: "https://x.com/dew_yashtwt/status/1986010168065466568",
+    activePage: 0,
+    data: {
+      id: "lucas",
+      name: "Lucas",
+      handle: "@Lucas_Moveset",
+      tweetUrl: "https://x.com/Lucas_Moveset/status/1990155654019887348",
+      quote:
+        "Great resource! UI libraries like SmoothUI simplify your workflow and boost your design aesthetic.",
+    },
   },
   {
-    id: "5",
-    type: "twitter",
-    url: "https://x.com/Potato___Dragon/status/1980544421121970512",
+    activePage: 1,
+    data: {
+      id: "potato",
+      name: "Potato Dragon",
+      handle: "@Potato___Dragon",
+      tweetUrl: "https://x.com/Potato___Dragon/status/1980544421121970512",
+      quote:
+        "I really liked the buttons on SmoothUI — that clickable kind of animation. Can you share it?",
+    },
   },
+  // right column: top, bottom
   {
-    id: "6",
-    type: "twitter",
-    url: "https://x.com/openhunts/status/1980911462030950489",
+    activePage: 1,
+    data: {
+      id: "openhunts",
+      name: "openhunts",
+      handle: "@openhunts",
+      tweetUrl: "https://x.com/openhunts/status/1980911462030950489",
+      quote: "I love this UI component from @educalvolpz!",
+    },
   },
   {
-    id: "7",
-    type: "twitter",
-    url: "https://x.com/jaykosai/status/1919079453017231481",
+    activePage: 0,
+    data: {
+      id: "pete",
+      name: "Peter Cruckshank",
+      handle: "@PeteCapeCod",
+      tweetUrl: "https://x.com/PeteCapeCod/status/1962707094395556337",
+      quote: "Checked out SmoothUI — some great stuff! 👏 Great job 👍",
+    },
   },
 ];
 
-const MIN_LOADING_DURATION_MS = 1200;
-const TWEET_LOAD_CHECK_INTERVAL_MS = 200;
-const MIN_LOADED_TWEETS_COUNT = 2;
-const CONTENT_FADE_DELAY_MS = 100;
-
-const STAGGER_DELAY_S = 0.08;
+const PAGE_COUNT = CENTERS.length;
 
-const entrySpring = { type: "spring" as const, duration: 0.4, bounce: 0.1 };
-const hoverSpring = { type: "spring" as const, duration: 0.25, bounce: 0.1 };
 const headerSpring = { type: "spring" as const, duration: 0.35, bounce: 0.1 };
+const morphSpring = { type: "spring" as const, duration: 0.55, bounce: 0.14 };
+const fadeTween = { duration: 0.25, ease: [0.23, 1, 0.32, 1] as const };
 
-const getCardAnimateState = (
-  isVisible: boolean,
-  reduceMotion: boolean | null
-) => {
-  if (isVisible && reduceMotion) {
-    return { opacity: 1 };
-  }
-  if (isVisible) {
-    return { opacity: 1, transform: "translateY(0px)" };
-  }
-  if (reduceMotion) {
-    return { opacity: 0 };
-  }
-  return { opacity: 0, transform: "translateY(20px)" };
-};
-
-export function WhatTheySay() {
-  const [isLoading, setIsLoading] = useState(true);
-  const [showContent, setShowContent] = useState(false);
-  const [isHoverDevice, setIsHoverDevice] = useState(false);
-  const tweetsContainerRef = useRef<HTMLDivElement>(null);
-  const startTimeRef = useRef(Date.now());
-  const timeoutRefsRef = useRef<Set<NodeJS.Timeout>>(new Set());
-  const isMountedRef = useRef(true);
-  const isLoadingRef = useRef(true);
-  const shouldReduceMotion = useReducedMotion();
-
-  // Detect hover-capable devices
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(hover: hover) and (pointer: fine)");
-    setIsHoverDevice(mediaQuery.matches);
-
-    const handleChange = (event: MediaQueryListEvent) => {
-      setIsHoverDevice(event.matches);
-    };
-
-    mediaQuery.addEventListener("change", handleChange);
-    return () => {
-      mediaQuery.removeEventListener("change", handleChange);
-    };
-  }, []);
-
-  // Keep ref in sync with state
-  useEffect(() => {
-    isLoadingRef.current = isLoading;
-  }, [isLoading]);
-
-  useEffect(() => {
-    isMountedRef.current = true;
-    isLoadingRef.current = true;
-
-    // Helper to track and create timeouts
-    const createTrackedTimeout = (
-      callback: () => void,
-      delay: number
-    ): NodeJS.Timeout => {
-      const timeoutId = setTimeout(() => {
-        timeoutRefsRef.current.delete(timeoutId);
-        if (isMountedRef.current) {
-          callback();
-        }
-      }, delay);
-      timeoutRefsRef.current.add(timeoutId);
-      return timeoutId;
-    };
-
-    // Helper to check if loading should stop
-    const shouldStopLoading = (): boolean => {
-      const container = tweetsContainerRef.current;
-      if (!container) {
-        return false;
-      }
-      const actualTweets = container.querySelectorAll("[data-tweet]");
-      const hasLoadedTweets = actualTweets.length >= MIN_LOADED_TWEETS_COUNT;
-      const elapsed = Date.now() - startTimeRef.current;
-      return hasLoadedTweets || elapsed >= MIN_LOADING_DURATION_MS;
-    };
+const PlainCard = ({
+  data,
+  compact,
+}: {
+  data: Testimonial;
+  compact?: boolean;
+}) => (
+  <a
+    className="flex h-full flex-col justify-between rounded-2xl border bg-primary/40 p-4 transition-colors hover:bg-primary"
+    href={data.tweetUrl}
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <p
+      className={cn(
+        "text-balance text-foreground/90 text-sm leading-relaxed",
+        compact && "line-clamp-4"
+      )}
+    >
+      {data.quote}
+    </p>
+    <div className="mt-3 flex items-center gap-2">
+      <Avatar data={data} size={28} />
+      <div className="leading-tight">
+        <div className="font-medium text-foreground text-xs">{data.name}</div>
+        <div className="text-[11px] text-muted-foreground">{data.handle}</div>
+      </div>
+    </div>
+  </a>
+);
 
-    // Helper to show content after delay
-    const showContentAfterDelay = () => {
-      createTrackedTimeout(() => {
-        if (isMountedRef.current) {
-          setShowContent(true);
-        }
-      }, CONTENT_FADE_DELAY_MS);
-    };
+const FeatureCard = ({ data, image }: { data: Testimonial; image: string }) => (
+  <a
+    className="relative flex h-full flex-col justify-end overflow-hidden rounded-2xl p-6 text-white transition-[filter] hover:brightness-105"
+    href={data.tweetUrl}
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <Image
+      alt=""
+      aria-hidden
+      className="object-cover"
+      draggable={false}
+      fill
+      sizes="(max-width: 768px) 100vw, 360px"
+      src={image}
+      unoptimized
+    />
+    {/* legibility scrim over the photo */}
+    <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/55 via-black/15 to-black/5" />
+    <p className="relative text-balance font-medium text-lg leading-snug drop-shadow-sm">
+      {data.quote}
+    </p>
+    <div className="relative mt-5 flex items-center gap-2.5">
+      <Avatar data={data} size={32} />
+      <div className="leading-tight">
+        <div className="font-medium text-sm">{data.name}</div>
+        <div className="text-sm opacity-80">{data.handle}</div>
+      </div>
+    </div>
+  </a>
+);
 
-    // Function to check if tweets are loaded
-    // Early exit optimization: combine conditions for better performance
-    const checkTweetsLoaded = () => {
-      const container = tweetsContainerRef.current;
-      if (!(container && isMountedRef.current && isLoadingRef.current)) {
-        return;
-      }
+const SideTile = ({
+  slot,
+  active,
+  reduce,
+  align,
+}: {
+  slot: { data: Testimonial };
+  active: boolean;
+  reduce: boolean | null;
+  align: "start" | "end";
+}) => (
+  <motion.div
+    className={cn(
+      "relative min-h-0 overflow-hidden rounded-2xl",
+      active
+        ? "w-full flex-[1.7]"
+        : cn(
+            "aspect-square flex-1",
+            align === "end" ? "self-end" : "self-start"
+          )
+    )}
+    layout
+    transition={reduce ? { duration: 0 } : morphSpring}
+  >
+    <AnimatePresence initial={false}>
+      {active ? (
+        <motion.div
+          animate={{ opacity: 1 }}
+          className="absolute inset-0"
+          exit={{ opacity: 0 }}
+          initial={{ opacity: 0 }}
+          key="card"
+          transition={reduce ? { duration: 0 } : fadeTween}
+        >
+          <PlainCard compact data={slot.data} />
+        </motion.div>
+      ) : (
+        <motion.div
+          animate={{ opacity: 1 }}
+          className="absolute inset-0 rounded-2xl bg-smooth-200/60"
+          exit={{ opacity: 0 }}
+          initial={{ opacity: 0 }}
+          key="square"
+          transition={reduce ? { duration: 0 } : fadeTween}
+        />
+      )}
+    </AnimatePresence>
+  </motion.div>
+);
 
-      if (shouldStopLoading()) {
-        isLoadingRef.current = false;
-        setIsLoading(false);
-        showContentAfterDelay();
-        return;
-      }
+export function WhatTheySay() {
+  const [page, setPage] = useState(0);
+  const shouldReduceMotion = useReducedMotion();
 
-      createTrackedTimeout(checkTweetsLoaded, TWEET_LOAD_CHECK_INTERVAL_MS);
-    };
+  const goTo = (delta: number) =>
+    setPage((current) => (current + delta + PAGE_COUNT) % PAGE_COUNT);
 
-    // Start checking for loaded tweets after minimum duration
-    createTrackedTimeout(checkTweetsLoaded, MIN_LOADING_DURATION_MS);
+  const center = CENTERS[page];
+  const [lt, lb, rt, rb] = SIDE_SLOTS;
+  const mobileSlots = SIDE_SLOTS.filter((s) => s.activePage === page);
 
-    return () => {
-      isMountedRef.current = false;
-      // Clear all tracked timeouts
-      for (const timeoutId of timeoutRefsRef.current) {
-        clearTimeout(timeoutId);
-      }
-      timeoutRefsRef.current.clear();
-    };
-  }, []);
+  const arrowClass =
+    "flex size-10 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:bg-primary";
 
-  if (testimonials.length === 0) {
-    return null;
-  }
+  const renderCenter = (
+    <div className="relative size-full">
+      <AnimatePresence initial={false} mode="popLayout">
+        <motion.div
+          animate={{ opacity: 1 }}
+          className="absolute inset-0"
+          exit={{ opacity: 0 }}
+          initial={{ opacity: 0 }}
+          key={page}
+          transition={shouldReduceMotion ? { duration: 0 } : fadeTween}
+        >
+          <FeatureCard data={center.data} image={center.image} />
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
 
   return (
     <section className="relative w-full bg-background px-8 py-24">
       <Divider />
-      <div className="mx-auto max-w-7xl">
-        <div className="mb-12 text-center">
-          <motion.h2
-            className="text-balance text-center font-semibold font-title text-3xl text-foreground transition"
-            initial={
-              shouldReduceMotion
-                ? { opacity: 1 }
-                : { opacity: 0, transform: "translateY(12px)" }
-            }
-            transition={shouldReduceMotion ? { duration: 0 } : headerSpring}
-            viewport={{ once: true, amount: 0.5 }}
-            whileInView={
-              shouldReduceMotion
-                ? { opacity: 1 }
-                : { opacity: 1, transform: "translateY(0px)" }
-            }
-          >
-            What They Say About Us
-          </motion.h2>
-          <motion.p
-            className="mx-auto mt-4 max-w-2xl text-foreground/70 text-lg"
-            initial={
-              shouldReduceMotion
-                ? { opacity: 1 }
-                : { opacity: 0, transform: "translateY(12px)" }
-            }
-            transition={
-              shouldReduceMotion
-                ? { duration: 0 }
-                : { ...headerSpring, delay: 0.1 }
-            }
-            viewport={{ once: true, amount: 0.5 }}
-            whileInView={
-              shouldReduceMotion
-                ? { opacity: 1 }
-                : { opacity: 1, transform: "translateY(0px)" }
-            }
-          >
-            See what developers and designers are saying about SmoothUI.
-          </motion.p>
+      <div className="mx-auto max-w-6xl">
+        <div className="mb-12 flex flex-col items-center gap-6 text-center">
+          <div className="max-w-2xl">
+            <motion.h2
+              className="text-balance font-semibold font-title text-3xl text-foreground"
+              initial={
+                shouldReduceMotion
+                  ? { opacity: 1 }
+                  : { opacity: 0, transform: "translateY(12px)" }
+              }
+              transition={shouldReduceMotion ? { duration: 0 } : headerSpring}
+              viewport={{ once: true, amount: 0.5 }}
+              whileInView={
+                shouldReduceMotion
+                  ? { opacity: 1 }
+                  : { opacity: 1, transform: "translateY(0px)" }
+              }
+            >
+              What they say about us
+            </motion.h2>
+            <motion.p
+              className="mt-4 text-foreground/70 text-lg"
+              initial={
+                shouldReduceMotion
+                  ? { opacity: 1 }
+                  : { opacity: 0, transform: "translateY(12px)" }
+              }
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : { ...headerSpring, delay: 0.1 }
+              }
+              viewport={{ once: true, amount: 0.5 }}
+              whileInView={
+                shouldReduceMotion
+                  ? { opacity: 1 }
+                  : { opacity: 1, transform: "translateY(0px)" }
+              }
+            >
+              See what developers and designers are saying about SmoothUI.
+            </motion.p>
+          </div>
+          <div className="flex shrink-0 items-center gap-2">
+            <button
+              aria-label="Previous testimonials"
+              className={arrowClass}
+              onClick={() => goTo(-1)}
+              type="button"
+            >
+              <IconChevronLeftFill24 className="size-4" />
+            </button>
+            <button
+              aria-label="Next testimonials"
+              className={arrowClass}
+              onClick={() => goTo(1)}
+              type="button"
+            >
+              <IconChevronRightFill24 className="size-4" />
+            </button>
+          </div>
         </div>
 
-        <div className="relative mt-4 flex min-h-[600px] gap-4 overflow-hidden px-1 pt-px">
-          {/* Loading overlay - always show when loading */}
-          {isLoading && (
-            <div className="absolute inset-0 z-20 flex items-center justify-center bg-background">
-              <LoadingDots showText size={64} />
-            </div>
-          )}
-
-          {/* Tweets container - render invisibly when not ready, then animate in when ready */}
-          <div
-            className={cn(
-              "mt-10 columns-1 gap-5 sm:columns-2 sm:gap-7 md:columns-3 [&_[data-tweet]]:mb-5",
-              showContent ? "" : "pointer-events-none invisible"
-            )}
-            ref={tweetsContainerRef}
-          >
-            {testimonials.map((testimonial, index) => (
-              <motion.div
-                animate={getCardAnimateState(showContent, shouldReduceMotion)}
-                className="break-inside-avoid"
-                initial={
-                  shouldReduceMotion
-                    ? { opacity: 0 }
-                    : { opacity: 0, transform: "translateY(20px)" }
-                }
-                key={testimonial.id}
-                style={{ willChange: "transform, opacity" }}
-                transition={
-                  shouldReduceMotion
-                    ? { duration: 0 }
-                    : {
-                        ...entrySpring,
-                        delay: index * STAGGER_DELAY_S,
-                      }
-                }
-                whileHover={
-                  isHoverDevice && !shouldReduceMotion
-                    ? {
-                        transform: "translateY(-2px) scale(1.02)",
-                        transition: hoverSpring,
-                      }
-                    : undefined
-                }
-              >
-                <MediaPlayer key={testimonial.id} media={testimonial} />
-              </motion.div>
-            ))}
+        {/* Desktop: morphing card / square columns around a crossfading center */}
+        <div className="hidden items-stretch justify-center gap-3 md:flex">
+          <div className="flex w-[210px] flex-col gap-3">
+            <SideTile
+              active={lt.activePage === page}
+              align="end"
+              reduce={shouldReduceMotion}
+              slot={lt}
+            />
+            <SideTile
+              active={lb.activePage === page}
+              align="end"
+              reduce={shouldReduceMotion}
+              slot={lb}
+            />
           </div>
+          <div className="h-80 w-[360px] shrink-0">{renderCenter}</div>
+          <div className="flex w-[210px] flex-col gap-3">
+            <SideTile
+              active={rt.activePage === page}
+              align="start"
+              reduce={shouldReduceMotion}
+              slot={rt}
+            />
+            <SideTile
+              active={rb.activePage === page}
+              align="start"
+              reduce={shouldReduceMotion}
+              slot={rb}
+            />
+          </div>
+        </div>
+
+        {/* Mobile: simple stacked fade of the active page's three cards */}
+        <div className="md:hidden">
+          <AnimatePresence initial={false} mode="popLayout">
+            <motion.div
+              animate={{ opacity: 1 }}
+              className="flex flex-col gap-4"
+              exit={{ opacity: 0 }}
+              initial={{ opacity: 0 }}
+              key={page}
+              transition={shouldReduceMotion ? { duration: 0 } : fadeTween}
+            >
+              <div className="h-72">
+                <FeatureCard data={center.data} image={center.image} />
+              </div>
+              {mobileSlots.map((slot) => (
+                <PlainCard data={slot.data} key={slot.data.id} />
+              ))}
+            </motion.div>
+          </AnimatePresence>
         </div>
       </div>
     </section>
diff --git a/apps/docs/components/logo-context-menu.tsx b/apps/docs/components/logo-context-menu.tsx
index 88f6694c..901adc4e 100644
--- a/apps/docs/components/logo-context-menu.tsx
+++ b/apps/docs/components/logo-context-menu.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import { Volume2 } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { IconVolume2Fill24 } from "nucleo-core-fill-24";
 import {
   createContext,
   type ReactNode,
@@ -209,7 +209,7 @@ function LogoContextMenuPopup() {
               type="button"
             >
               <span className="font-medium">/smooth-yoo-eye/</span>
-              <Volume2
+              <IconVolume2Fill24
                 aria-hidden="true"
                 className="size-4 text-muted-foreground"
               />
diff --git a/apps/docs/components/nav-search-actions.tsx b/apps/docs/components/nav-search-actions.tsx
new file mode 100644
index 00000000..28b79faa
--- /dev/null
+++ b/apps/docs/components/nav-search-actions.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { ChangelogPopover } from "@docs/components/changelog-popover";
+import {
+  SearchTrigger,
+  type SearchTriggerProps,
+} from "fumadocs-ui/layouts/shared/slots/search-trigger";
+
+// Mobile (<md): the changelog bell sits next to the compact search icon on
+// the right, instead of being pushed into the sidebar drawer. Theme toggling
+// lives only in the FloatNav to avoid a duplicate control.
+export function NavSearchTriggerSm(props: SearchTriggerProps) {
+  return (
+    <div className="flex items-center">
+      <ChangelogPopover />
+      <SearchTrigger {...props} />
+    </div>
+  );
+}
+
+// md and up: the changelog bell lives in the far-right header cluster via the
+// theme-switch slot, not attached to the centered search bar. Theme toggling
+// lives only in the FloatNav to avoid a duplicate control.
+export function NavDesktopActions() {
+  return (
+    <div className="flex items-center gap-1">
+      <ChangelogPopover />
+    </div>
+  );
+}
diff --git a/apps/docs/components/package-manager-tabs.tsx b/apps/docs/components/package-manager-tabs.tsx
index f56e03f4..b05a71a5 100644
--- a/apps/docs/components/package-manager-tabs.tsx
+++ b/apps/docs/components/package-manager-tabs.tsx
@@ -93,7 +93,7 @@ const BunIcon = ({ colored }: { colored?: boolean }) => (
   </svg>
 );
 
-const packageManagers = [
+export const packageManagers = [
   { id: "pnpm", icon: PnpmIcon },
   { id: "npm", icon: NpmIcon },
   { id: "yarn", icon: YarnIcon },
diff --git a/apps/docs/components/page-actions.tsx b/apps/docs/components/page-actions.tsx
index 89b63ffd..c42501cf 100644
--- a/apps/docs/components/page-actions.tsx
+++ b/apps/docs/components/page-actions.tsx
@@ -8,14 +8,14 @@ import {
 } from "fumadocs-ui/components/ui/popover";
 import { useCopyButton } from "fumadocs-ui/utils/use-copy-button";
 import {
-  Check,
-  ChevronDown,
-  Copy,
-  ExternalLinkIcon,
-  MessageCircleIcon,
-} from "lucide-react";
+  IconCheckFill24,
+  IconChevronDownFill24,
+  IconCopy2Fill24,
+  IconExternalLinkFill24,
+  IconMessageFill24,
+} from "nucleo-core-fill-24";
 import { useMemo, useState } from "react";
-import { Button, buttonVariants } from "./smoothbutton";
+import { Button } from "./smoothbutton";
 
 const cache = new Map<string, string>();
 
@@ -54,17 +54,13 @@ export function LLMCopyButton({
 
   return (
     <Button
-      className={cn(
-        buttonVariants({
-          variant: "outline",
-          size: "sm",
-          className: "text-foreground [&_svg]:size-3.5",
-        })
-      )}
+      className="text-foreground [&_svg]:size-3.5"
       disabled={isLoading}
       onClick={onClick}
+      size="sm"
+      variant="outline"
     >
-      {checked ? <Check /> : <Copy />}
+      {checked ? <IconCheckFill24 /> : <IconCopy2Fill24 />}
       Copy Markdown
     </Button>
   );
@@ -210,7 +206,7 @@ export function ViewOptions({
         href: `https://t3.chat/new?${new URLSearchParams({
           q,
         })}`,
-        icon: <MessageCircleIcon />,
+        icon: <IconMessageFill24 />,
       },
     ];
   }, [githubUrl, markdownUrl]);
@@ -220,7 +216,7 @@ export function ViewOptions({
       <PopoverTrigger asChild>
         <Button className="text-foreground" size="sm" variant="outline">
           Open
-          <ChevronDown className="d size-3.5" />
+          <IconChevronDownFill24 className="d size-3.5" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="flex flex-col">
@@ -234,7 +230,7 @@ export function ViewOptions({
           >
             {item.icon}
             {item.title}
-            <ExternalLinkIcon className="ms-auto size-3.5 text-fd-muted-foreground" />
+            <IconExternalLinkFill24 className="ms-auto size-3.5 text-fd-muted-foreground" />
           </a>
         ))}
       </PopoverContent>
diff --git a/apps/docs/components/pm-float-nav.tsx b/apps/docs/components/pm-float-nav.tsx
new file mode 100644
index 00000000..3a942dfb
--- /dev/null
+++ b/apps/docs/components/pm-float-nav.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { packageManagers } from "@docs/components/package-manager-tabs";
+import { usePackageManager } from "@docs/hooks/use-package-manager";
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useEffect, useRef, useState } from "react";
+
+export function PmFloatNav() {
+  const [activePm, setActivePm] = usePackageManager();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const shouldReduceMotion = useReducedMotion();
+
+  const current = packageManagers.find((pm) => pm.id === activePm);
+  const CurrentIcon = current?.icon;
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onClickOutside);
+    document.addEventListener("keydown", onEscape);
+    return () => {
+      document.removeEventListener("mousedown", onClickOutside);
+      document.removeEventListener("keydown", onEscape);
+    };
+  }, [open]);
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        aria-label={`Package manager: ${activePm}`}
+        className="float-trigger flex h-auto w-auto items-center gap-1.5 p-2!"
+        onClick={() => setOpen((v) => !v)}
+        type="button"
+      >
+        {CurrentIcon && <CurrentIcon colored />}
+        <span className="hidden font-medium text-sm sm:inline">{activePm}</span>
+      </button>
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            animate={
+              shouldReduceMotion
+                ? { opacity: 1 }
+                : { opacity: 1, scale: 1, y: 0 }
+            }
+            className="absolute bottom-12 left-1/2 z-50 flex min-w-[140px] -translate-x-1/2 flex-col gap-0.5 rounded-xl border bg-background p-1 shadow-2xl"
+            exit={
+              shouldReduceMotion
+                ? { opacity: 0, transition: { duration: 0 } }
+                : { opacity: 0, scale: 0.95, y: 12 }
+            }
+            initial={
+              shouldReduceMotion
+                ? { opacity: 0 }
+                : { opacity: 0, scale: 0.95, y: 12 }
+            }
+            role="menu"
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : { type: "spring", stiffness: 300, damping: 30 }
+            }
+          >
+            {packageManagers.map((pm) => {
+              const Icon = pm.icon;
+              const active = pm.id === activePm;
+              return (
+                <button
+                  className={cn(
+                    "flex items-center gap-2 rounded-md px-2.5 py-1.5 text-left font-medium text-sm transition-colors",
+                    active
+                      ? "bg-muted text-foreground"
+                      : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                  )}
+                  key={pm.id}
+                  onClick={() => {
+                    setActivePm(pm.id);
+                    setOpen(false);
+                  }}
+                  role="menuitem"
+                  type="button"
+                >
+                  <Icon colored={active} />
+                  {pm.id}
+                </button>
+              );
+            })}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/apps/docs/components/post-cover.tsx b/apps/docs/components/post-cover.tsx
new file mode 100644
index 00000000..3890be0a
--- /dev/null
+++ b/apps/docs/components/post-cover.tsx
@@ -0,0 +1,78 @@
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import Image from "next/image";
+
+// On-brand mesh-gradient fallbacks. Posts without an `image` get a deterministic
+// one based on their slug, so every post still has a distinct cover.
+const GRADIENTS = [
+  [
+    "radial-gradient(ellipse 80% 60% at 20% 30%, var(--color-brand) 0%, transparent 60%)",
+    "radial-gradient(ellipse 60% 80% at 75% 70%, var(--color-brand-secondary) 0%, transparent 55%)",
+    "radial-gradient(ellipse 50% 50% at 55% 20%, var(--color-brand-light) 0%, transparent 50%)",
+    "linear-gradient(135deg, var(--color-brand-secondary) 0%, var(--color-brand-light) 100%)",
+  ],
+  [
+    "radial-gradient(ellipse 70% 70% at 80% 25%, var(--color-brand) 0%, transparent 55%)",
+    "radial-gradient(ellipse 60% 60% at 25% 75%, var(--color-brand-light) 0%, transparent 55%)",
+    "radial-gradient(ellipse 50% 50% at 50% 50%, var(--color-brand-lighter) 0%, transparent 60%)",
+    "linear-gradient(120deg, var(--color-brand-light) 0%, var(--color-brand-secondary) 100%)",
+  ],
+  [
+    "radial-gradient(ellipse 65% 75% at 35% 80%, var(--color-brand-secondary) 0%, transparent 55%)",
+    "radial-gradient(ellipse 70% 60% at 70% 20%, var(--color-brand) 0%, transparent 55%)",
+    "radial-gradient(ellipse 45% 45% at 20% 30%, var(--color-brand-lighter) 0%, transparent 55%)",
+    "linear-gradient(150deg, var(--color-brand-secondary) 0%, var(--color-brand-lighter) 100%)",
+  ],
+];
+
+function gradientFor(seed: string) {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i++) {
+    hash = (hash * 31 + seed.charCodeAt(i)) % 100_000;
+  }
+  return GRADIENTS[hash % GRADIENTS.length].join(", ");
+}
+
+export function PostCover({
+  image,
+  alt = "",
+  seed,
+  className,
+  sizes = "(max-width: 768px) 100vw, 400px",
+}: {
+  image?: string;
+  alt?: string;
+  seed: string;
+  className?: string;
+  sizes?: string;
+}) {
+  return (
+    <div className={cn("relative overflow-hidden", className)}>
+      {image ? (
+        <Image
+          alt={alt}
+          className="object-cover object-center"
+          draggable={false}
+          fill
+          sizes={sizes}
+          src={image}
+        />
+      ) : (
+        <>
+          <div
+            aria-hidden="true"
+            className="absolute inset-0"
+            style={{ background: gradientFor(seed) }}
+          />
+          <div
+            aria-hidden="true"
+            className="absolute inset-0 opacity-40 mix-blend-soft-light"
+            style={{
+              backgroundImage:
+                "radial-gradient(circle at 70% 25%, white 0%, transparent 40%)",
+            }}
+          />
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/docs/components/powered-by.tsx b/apps/docs/components/powered-by.tsx
index 42322082..f45bfce0 100644
--- a/apps/docs/components/powered-by.tsx
+++ b/apps/docs/components/powered-by.tsx
@@ -1,5 +1,5 @@
-import { LibraryIcon } from "lucide-react";
 import Image from "next/image";
+import { IconBooksFill24 } from "nucleo-core-fill-24";
 
 interface PoweredByProps {
   packages: string[];
@@ -36,10 +36,10 @@ const getPackageName = (url: string) => {
 export const PoweredBy = ({ packages }: PoweredByProps) => (
   <div className="not-prose mt-6 flex flex-col gap-2">
     <div className="flex items-center gap-2">
-      <LibraryIcon className="size-4 text-muted-foreground" />
+      <IconBooksFill24 className="size-4 text-muted-foreground" />
       <p className="text-muted-foreground text-sm">Powered by</p>
     </div>
-    <div className="flex flex-col gap-2 pl-[14px]">
+    <div className="flex flex-col gap-2 pl-3.5">
       {packages.map((url) => {
         const isValidUrl = url.startsWith("http") || url.startsWith("/");
         const hostname = getHostname(url);
@@ -54,6 +54,7 @@ export const PoweredBy = ({ packages }: PoweredByProps) => (
               <Image
                 alt=""
                 className="h-3.5 w-3.5 overflow-hidden rounded-sm object-cover"
+                draggable={false}
                 height={14}
                 src={`https://img.logo.dev/${hostname}?token=${process.env.NEXT_PUBLIC_LOGO_DEV_TOKEN}&size=14&retina=true`}
                 width={14}
@@ -62,6 +63,7 @@ export const PoweredBy = ({ packages }: PoweredByProps) => (
               <Image
                 alt=""
                 className="h-3.5 w-3.5 overflow-hidden rounded-sm object-cover"
+                draggable={false}
                 height={14}
                 src={`https://img.logo.dev/npmjs.com?token=${process.env.NEXT_PUBLIC_LOGO_DEV_TOKEN}&size=14&retina=true`}
                 width={14}
diff --git a/apps/docs/components/preview/content.tsx b/apps/docs/components/preview/content.tsx
index 07ad4fda..2ea88eea 100644
--- a/apps/docs/components/preview/content.tsx
+++ b/apps/docs/components/preview/content.tsx
@@ -1,12 +1,13 @@
 "use client";
 
+import { useUiSound } from "@docs/components/sound-provider";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@repo/shadcn-ui/components/ui/resizable";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { ReactNode } from "react";
+import type { MouseEvent as ReactMouseEvent, ReactNode } from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 // biome-ignore lint/style/useImportType: used as generic type parameter only
 import { type PanelImperativeHandle } from "react-resizable-panels";
@@ -20,15 +21,17 @@ interface PreviewContentProps {
 
 export type PreviewSize = "desktop" | "tablet" | "mobile";
 
-const SIZE_TO_PERCENT: Record<PreviewSize, number> = {
-  desktop: 100,
-  tablet: 60,
-  mobile: 30,
+// react-resizable-panels v4 reads bare numbers as pixels — percentages must
+// be passed as "%" strings or the panel constraints collapse and lock.
+const SIZE_TO_PERCENT: Record<PreviewSize, string> = {
+  desktop: "100%",
+  tablet: "60%",
+  mobile: "30%",
 };
 
 const BLOCK_PREVIEW_MIN_HEIGHT_REM = 32;
-const COMPONENT_PANEL_MIN_SIZE = 40;
-const BLOCK_PANEL_MIN_SIZE = 30;
+const COMPONENT_PANEL_MIN_SIZE = "40%";
+const BLOCK_PANEL_MIN_SIZE = "30%";
 const IFRAME_MIN_HEIGHT_REM = 32;
 const REM_IN_PX = 16;
 const BLOCK_PREVIEW_MIN_HEIGHT_PX = BLOCK_PREVIEW_MIN_HEIGHT_REM * REM_IN_PX;
@@ -149,6 +152,20 @@ export const PreviewContent = ({
     return `/blocks/preview/${blockPath}`;
   }, [blockPath, type]);
 
+  // Delegated UI sound: a subtle tap on any interactive click inside a live
+  // component demo, gated by the global sound preference (off by default).
+  const playTap = useUiSound("/sounds/button.wav", 0.3);
+  const handleDemoClick = (event: ReactMouseEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLElement;
+    if (
+      target.closest(
+        'button,[role="button"],a[href],label,[data-slot="button"],input[type="checkbox"],input[type="radio"]'
+      )
+    ) {
+      playTap();
+    }
+  };
+
   return (
     <div
       className={cn(
@@ -183,8 +200,8 @@ export const PreviewContent = ({
                   `min-h-[${BLOCK_PREVIEW_MIN_HEIGHT_REM}rem]`
                 )
           )}
-          defaultSize={100}
-          maxSize={100}
+          defaultSize="100%"
+          maxSize="100%"
           minSize={
             type === "block" ? BLOCK_PANEL_MIN_SIZE : COMPONENT_PANEL_MIN_SIZE
           }
@@ -208,18 +225,18 @@ export const PreviewContent = ({
               title={`${blockPath ?? "block"} preview`}
             />
           ) : (
-            children
+            // biome-ignore lint/a11y/useKeyWithClickEvents: passive sound cue only
+            <div className="contents" onClickCapture={handleDemoClick}>
+              {children}
+            </div>
           )}
         </ResizablePanel>
-        <ResizableHandle
-          className="peer-data-[panel-size=100.0]:w-0"
-          withHandle
-        />
+        <ResizableHandle withHandle />
         <ResizablePanel
           className={cn("bg-background", "border-none")}
-          defaultSize={0}
-          maxSize={70}
-          minSize={0}
+          defaultSize="0%"
+          maxSize="70%"
+          minSize="0%"
         />
       </ResizablePanelGroup>
     </div>
diff --git a/apps/docs/components/preview/shell.tsx b/apps/docs/components/preview/shell.tsx
index 5dd42615..d38caa04 100644
--- a/apps/docs/components/preview/shell.tsx
+++ b/apps/docs/components/preview/shell.tsx
@@ -13,16 +13,16 @@ import {
   ToggleGroupItem,
 } from "@repo/shadcn-ui/components/ui/toggle-group";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import {
-  BoxIcon,
-  CodeIcon,
-  EyeIcon,
-  Fullscreen,
-  Monitor,
-  Smartphone,
-  Tablet,
-} from "lucide-react";
 import Link from "next/link";
+import {
+  IconBoxFill24,
+  IconCodeFill24,
+  IconExpandFill24,
+  IconEyeFill24,
+  IconMobile2Fill24,
+  IconMonitorFill24,
+  IconTabletFill24,
+} from "nucleo-core-fill-24";
 import type { ReactNode } from "react";
 import { useState } from "react";
 
@@ -43,17 +43,17 @@ const previewSizes: { label: string; value: PreviewSize; icon: ReactNode }[] = [
   {
     label: "Desktop preview",
     value: "desktop",
-    icon: <Monitor className="h-4 w-4" />,
+    icon: <IconMonitorFill24 className="h-4 w-4" />,
   },
   {
     label: "Tablet preview",
     value: "tablet",
-    icon: <Tablet className="h-4 w-4" />,
+    icon: <IconTabletFill24 className="h-4 w-4" />,
   },
   {
     label: "Mobile preview",
     value: "mobile",
-    icon: <Smartphone className="h-4 w-4" />,
+    icon: <IconMobile2Fill24 className="h-4 w-4" />,
   },
 ];
 
@@ -89,16 +89,16 @@ export const PreviewShell = ({
         <div className="flex flex-col gap-2 border-b bg-muted/30 px-3 py-2 sm:flex-row sm:items-center sm:justify-between">
           <TabsList className="flex h-9 items-center gap-1 rounded-md bg-transparent p-0 shadow-none">
             <TabsTrigger value="preview">
-              <EyeIcon className="text-muted-foreground" size={16} />
+              <IconEyeFill24 className="text-muted-foreground" size={16} />
               Preview
             </TabsTrigger>
             <TabsTrigger value="example">
-              <BoxIcon className="text-muted-foreground" size={16} />
+              <IconBoxFill24 className="text-muted-foreground" size={16} />
               Example
             </TabsTrigger>
             {sourceComponents.length > 0 && (
               <TabsTrigger value="code">
-                <CodeIcon className="text-muted-foreground" size={16} />
+                <IconCodeFill24 className="text-muted-foreground" size={16} />
                 Code
               </TabsTrigger>
             )}
@@ -145,7 +145,7 @@ export const PreviewShell = ({
                     target="_blank"
                   >
                     <span className="sr-only">Open preview in new tab</span>
-                    <Fullscreen className="h-4 w-4" />
+                    <IconExpandFill24 className="h-4 w-4" />
                   </Link>
                 </Button>
               )}
diff --git a/apps/docs/components/preview/source.tsx b/apps/docs/components/preview/source.tsx
index e4c3369b..f1402373 100644
--- a/apps/docs/components/preview/source.tsx
+++ b/apps/docs/components/preview/source.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
-import { Hand } from "lucide-react";
+import { IconPointerFill24 } from "nucleo-core-fill-24";
 import {
   Accordion,
   AccordionContent,
@@ -24,7 +24,7 @@ export const PreviewSource = ({ source }: PreviewSourceProps) => (
       <AccordionItem key={name} value={name}>
         <AccordionTrigger className="rounded-none bg-secondary px-4">
           <div className="flex items-center gap-2 text-sm">
-            <Hand className="size-4 text-muted-foreground" />
+            <IconPointerFill24 className="size-4 text-muted-foreground" />
             <span>{name}</span>
           </div>
         </AccordionTrigger>
diff --git a/apps/docs/components/reference.tsx b/apps/docs/components/reference.tsx
index e81063dd..3efe9f6c 100644
--- a/apps/docs/components/reference.tsx
+++ b/apps/docs/components/reference.tsx
@@ -1,5 +1,5 @@
-import { LibraryIcon, SparklesIcon } from "lucide-react";
 import Image from "next/image";
+import { IconBooksFill24, IconSparkleFill24 } from "nucleo-core-fill-24";
 
 interface ReferenceProps {
   sources: string[];
@@ -35,10 +35,10 @@ const getSourceName = (url: string) => {
 export const Reference = ({ sources }: ReferenceProps) => (
   <div className="not-prose mt-6 flex flex-col gap-2">
     <div className="flex items-center gap-2">
-      <SparklesIcon className="size-4 text-muted-foreground" />
+      <IconSparkleFill24 className="size-4 text-muted-foreground" />
       <p className="text-muted-foreground text-sm">Inspired by</p>
     </div>
-    <div className="flex flex-col gap-2 pl-[14px]">
+    <div className="flex flex-col gap-2 pl-3.5">
       {sources.map((url) => {
         const isValidUrl = url.startsWith("http") || url.startsWith("/");
         const hostname = getHostname(url);
@@ -53,12 +53,13 @@ export const Reference = ({ sources }: ReferenceProps) => (
               <Image
                 alt=""
                 className="h-3.5 w-3.5 overflow-hidden rounded-sm object-cover"
+                draggable={false}
                 height={14}
                 src={`https://img.logo.dev/${hostname}?token=${process.env.NEXT_PUBLIC_LOGO_DEV_TOKEN}&size=14&retina=true`}
                 width={14}
               />
             ) : (
-              <LibraryIcon className="size-3.5 text-muted-foreground" />
+              <IconBooksFill24 className="size-3.5 text-muted-foreground" />
             )}
             {isValidUrl ? (
               <a
diff --git a/apps/docs/components/share-buttons.tsx b/apps/docs/components/share-buttons.tsx
index fab548e1..827f85ee 100644
--- a/apps/docs/components/share-buttons.tsx
+++ b/apps/docs/components/share-buttons.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { Check, Copy, Linkedin, Twitter } from "lucide-react";
+import { IconCheckFill24, IconCopy2Fill24 } from "nucleo-core-fill-24";
+import { IconLinkedin, IconXTwitter } from "nucleo-social-media";
 import { useState } from "react";
 
 interface ShareButtonsProps {
@@ -30,7 +31,7 @@ export function ShareButtons({ url, title }: ShareButtonsProps) {
         rel="noopener noreferrer"
         target="_blank"
       >
-        <Twitter className="h-4 w-4" />
+        <IconXTwitter className="h-4 w-4" />
       </a>
       <a
         aria-label="Share on LinkedIn"
@@ -39,7 +40,7 @@ export function ShareButtons({ url, title }: ShareButtonsProps) {
         rel="noopener noreferrer"
         target="_blank"
       >
-        <Linkedin className="h-4 w-4" />
+        <IconLinkedin className="h-4 w-4" />
       </a>
       <button
         aria-label="Copy link"
@@ -47,7 +48,11 @@ export function ShareButtons({ url, title }: ShareButtonsProps) {
         onClick={copyToClipboard}
         type="button"
       >
-        {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+        {copied ? (
+          <IconCheckFill24 className="h-4 w-4" />
+        ) : (
+          <IconCopy2Fill24 className="h-4 w-4" />
+        )}
       </button>
     </div>
   );
diff --git a/apps/docs/components/smoothbutton.tsx b/apps/docs/components/smoothbutton.tsx
index 3c949002..5390f534 100644
--- a/apps/docs/components/smoothbutton.tsx
+++ b/apps/docs/components/smoothbutton.tsx
@@ -1,64 +1,10 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cn } from "@repo/shadcn-ui/lib/utils";
-import { cva, type VariantProps } from "class-variance-authority";
-import type React from "react";
-import type { ButtonHTMLAttributes } from "react";
-
-const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm ring-offset-background transition-transform duration-150 ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-gradient-to-b from-[#FD4B4E] to-destructive text-shadow-sm text-white shadow-[0px_1px_2px_rgba(0,0,0,0.4),0px_0px_0px_1px_#F61418,inset_0px_0.75px_0px_rgba(255,255,255,0.2)] hover:from-destructive hover:to-destructive",
-        outline:
-          "border border-transparent bg-background shadow-black/15 shadow-sm ring-1 ring-foreground/10 hover:bg-primary dark:ring-foreground/15",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost: "hover:bg-background hover:text-foreground hover:shadow-custom",
-        link: "text-primary underline-offset-4 hover:underline",
-        candy:
-          "border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-shadow-sm text-white shadow-black/20 shadow-md ring-(--ring-color) ring-1 [--ring-color:color-mix(in_oklab,var(--color-foreground)15%,var(--color-brand))] hover:from-brand-secondary hover:to-brand-secondary [&_svg]:drop-shadow-sm",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-4 py-2",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ref,
-  ...props
-}: ButtonProps) {
-  const Comp = asChild ? Slot : "button";
-  return (
-    <Comp
-      className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };
+"use client";
+
+export type { SmoothButtonProps as ButtonProps } from "@repo/smoothui/components/smooth-button";
+// Single source of truth: the docs/landing chrome button IS the published DS
+// component. Re-exported under the historical `Button` / `buttonVariants` names
+// so existing call sites keep working while the visual system stays unified.
+export {
+  default as Button,
+  smoothButtonVariants as buttonVariants,
+} from "@repo/smoothui/components/smooth-button";
diff --git a/apps/docs/components/sound-provider.tsx b/apps/docs/components/sound-provider.tsx
new file mode 100644
index 00000000..9e8291b6
--- /dev/null
+++ b/apps/docs/components/sound-provider.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { useReducedMotion } from "motion/react";
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import useSound from "use-sound";
+
+type SoundContextValue = {
+  enabled: boolean;
+  setEnabled: (value: boolean) => void;
+  /** True on touch / coarse-pointer devices, where UI sound is suppressed. */
+  suppressed: boolean;
+};
+
+const SoundContext = createContext<SoundContextValue>({
+  enabled: false,
+  setEnabled: () => {
+    // no-op default
+  },
+  suppressed: false,
+});
+
+const STORAGE_KEY = "sui-sound";
+
+export function SoundProvider({ children }: { children: ReactNode }) {
+  const shouldReduceMotion = useReducedMotion();
+  const [enabled, setEnabledState] = useState(false);
+  const [suppressed, setSuppressed] = useState(false);
+
+  useEffect(() => {
+    // Suppress on coarse pointers (mobile/tablet): the OS ducks media to play
+    // the cue, which is jarring. Reduced-motion is the default-off proxy.
+    const coarse = window.matchMedia("(pointer: coarse)").matches;
+    if (coarse) {
+      setSuppressed(true);
+      return;
+    }
+    if (shouldReduceMotion) {
+      return; // stays off by default, but the user can still opt in
+    }
+    try {
+      if (localStorage.getItem(STORAGE_KEY) === "on") {
+        setEnabledState(true);
+      }
+    } catch {
+      // ignore
+    }
+  }, [shouldReduceMotion]);
+
+  const setEnabled = useCallback((value: boolean) => {
+    setEnabledState(value);
+    try {
+      localStorage.setItem(STORAGE_KEY, value ? "on" : "off");
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const value = useMemo(
+    () => ({ enabled: enabled && !suppressed, setEnabled, suppressed }),
+    [enabled, suppressed, setEnabled]
+  );
+
+  return (
+    <SoundContext.Provider value={value}>{children}</SoundContext.Provider>
+  );
+}
+
+export function useSoundToggle() {
+  return useContext(SoundContext);
+}
+
+type PlayFn = (options?: { forceSoundEnabled?: boolean }) => void;
+
+/** Returns a play() bound to the global sound preference, throttled so a single
+ * interaction can't double-fire (e.g. a label + its input both emitting click). */
+export function useUiSound(src: string, volume = 0.5): PlayFn {
+  const { enabled } = useContext(SoundContext);
+  const [rawPlay] = useSound(src, { soundEnabled: enabled, volume });
+  const lastPlayedRef = useRef(0);
+
+  return useCallback<PlayFn>(
+    (options) => {
+      const now = performance.now();
+      if (now - lastPlayedRef.current < 70) {
+        return;
+      }
+      lastPlayedRef.current = now;
+      (rawPlay as PlayFn)(options);
+    },
+    [rawPlay]
+  );
+}
diff --git a/apps/docs/components/sponsor-card.tsx b/apps/docs/components/sponsor-card.tsx
index 007c3d75..6fc34552 100644
--- a/apps/docs/components/sponsor-card.tsx
+++ b/apps/docs/components/sponsor-card.tsx
@@ -2,8 +2,8 @@
 
 import { SponsorLogo } from "@docs/components/sponsor-logo";
 import type { Sponsor, SponsorTier } from "@docs/lib/sponsors";
-import { Zap } from "lucide-react";
 import Link from "next/link";
+import { IconBoltFill24 } from "nucleo-core-fill-24";
 
 interface SponsorCardProps {
   sponsor: Sponsor;
@@ -29,7 +29,7 @@ export function SponsorCard({ sponsor, tier }: SponsorCardProps) {
       {/* Velocity Badge */}
       {isVelocity && (
         <div className="group/badge absolute top-4 right-4 isolate inline-flex h-[1.875rem] items-center justify-center gap-1 overflow-hidden rounded-full border-0 bg-brand px-3 font-medium text-white text-xs shadow-[0_1px_theme(colors.white/0.07)_inset,0_1px_3px_theme(colors.gray.900/0.2)] ring-brand transition duration-300 ease-[cubic-bezier(0.4,0.36,0,1)] before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-gradient-to-b before:from-white/20 before:opacity-50 before:transition-opacity before:duration-300 before:ease-[cubic-bezier(0.4,0.36,0,1)] after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-full after:bg-gradient-to-b after:from-[46%] after:from-white/10 after:to-[54%] after:mix-blend-overlay hover:before:opacity-100">
-          <Zap className="h-3 w-3 fill-white text-white" />
+          <IconBoltFill24 className="h-3 w-3 fill-white text-white" />
           <span className="font-semibold text-xs">Velocity</span>
         </div>
       )}
diff --git a/apps/docs/components/sponsor-logo.tsx b/apps/docs/components/sponsor-logo.tsx
index 159e56ea..0efb7d7e 100644
--- a/apps/docs/components/sponsor-logo.tsx
+++ b/apps/docs/components/sponsor-logo.tsx
@@ -44,6 +44,7 @@ export function SponsorLogo({
     <Image
       alt={sponsor.name}
       className={className}
+      draggable={false}
       height={height}
       onError={onError}
       src={sponsor.logo}
diff --git a/apps/docs/components/sponsors-empty-state.tsx b/apps/docs/components/sponsors-empty-state.tsx
index 914d96de..264cc963 100644
--- a/apps/docs/components/sponsors-empty-state.tsx
+++ b/apps/docs/components/sponsors-empty-state.tsx
@@ -1,13 +1,13 @@
-import { Heart } from "lucide-react";
 import Link from "next/link";
+import { IconHeartFill24 } from "nucleo-core-fill-24";
 import { Button } from "./smoothbutton";
 
 export function SponsorsEmptyState() {
   return (
     <div className="not-prose mb-12 rounded-lg border border-dashed bg-linear-to-br from-background via-background to-brand/5 p-12 text-center">
       <div className="relative mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full border bg-linear-to-br from-background via-background to-brand/10">
-        <Heart className="absolute top-1/2 left-1/2 z-1 h-6 w-6 -translate-x-1/2 -translate-y-1/2 fill-red-500 text-red-500" />
-        <Heart className="absolute top-1/2 left-1/2 z-0 h-8 w-8 -translate-x-1/2 -translate-y-1/2 animate-pulse fill-red-500 text-red-500 opacity-75" />
+        <IconHeartFill24 className="absolute top-1/2 left-1/2 z-1 h-6 w-6 -translate-x-1/2 -translate-y-1/2 fill-red-500 text-red-500" />
+        <IconHeartFill24 className="absolute top-1/2 left-1/2 z-0 h-8 w-8 -translate-x-1/2 -translate-y-1/2 animate-pulse fill-red-500 text-red-500 opacity-75" />
       </div>
       <h3 className="mb-2 font-semibold text-foreground text-lg">
         No Active Sponsors Yet
diff --git a/apps/docs/components/themes/theme-studio.tsx b/apps/docs/components/themes/theme-studio.tsx
new file mode 100644
index 00000000..6a2bbba5
--- /dev/null
+++ b/apps/docs/components/themes/theme-studio.tsx
@@ -0,0 +1,1080 @@
+"use client";
+
+import { AddToKitButton } from "@docs/components/add-to-kit-button";
+import {
+  DARK_SCALE,
+  getTheme,
+  LIGHT_SCALE,
+  THEME_PALETTES,
+  type ThemePalette,
+} from "@docs/lib/registry-themes";
+import {
+  buildStudioCssVars,
+  CUSTOM_THEME_PREFIX,
+  decodeStudioPreset,
+  encodeStudioPreset,
+  FONT_OPTIONS,
+  type FontId,
+  fontStack,
+  type StudioPresetState,
+  shiftLightness,
+  TINT_OPTIONS,
+  type TintId,
+  tintScale,
+} from "@docs/lib/studio-preset";
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import Scrubber from "@repo/smoothui/components/scrubber";
+import SmoothButton from "@repo/smoothui/components/smooth-button";
+import dynamic from "next/dynamic";
+import { useTheme } from "next-themes";
+import {
+  IconCheckFill24,
+  IconCopy2Fill24,
+  IconDiceFill24,
+  IconMagnifierFill24,
+  IconMoonFill24,
+  IconSunFill24,
+  IconTargetFill24,
+} from "nucleo-core-fill-24";
+import {
+  type ComponentType,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+const COPY_FEEDBACK_DURATION = 1500;
+
+type PreviewMode = "light" | "dark";
+
+const installCommand = (state: StudioPresetState): string => {
+  const isCustom =
+    state.accent !== 0 ||
+    state.font !== "sans" ||
+    state.tint !== "neutral" ||
+    state.radius !== 10;
+  const item = isCustom
+    ? `${CUSTOM_THEME_PREFIX}${encodeStudioPreset(state)}`
+    : `theme-${state.palette}`;
+  return `npx shadcn@latest add https://smoothui.dev/r/${item}.json`;
+};
+
+const componentInstallCommand = (slug: string) =>
+  `npx shadcn@latest add https://smoothui.dev/r/${slug}.json`;
+
+function DuotoneInstallIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M4.75 6.75A2.75 2.75 0 0 1 7.5 4h9A2.75 2.75 0 0 1 19.25 6.75v10.5A2.75 2.75 0 0 1 16.5 20h-9a2.75 2.75 0 0 1-2.75-2.75V6.75Z"
+        fill="currentColor"
+        opacity="0.16"
+      />
+      <path
+        d="M8 10.25 10.35 12 8 13.75M12 14h4"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.8"
+      />
+      <path
+        d="M4.75 8.25h14.5M7.5 4h9a2.75 2.75 0 0 1 2.75 2.75v10.5A2.75 2.75 0 0 1 16.5 20h-9a2.75 2.75 0 0 1-2.75-2.75V6.75A2.75 2.75 0 0 1 7.5 4Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.7"
+      />
+      <path
+        d="M7.5 6.25h.01M10 6.25h.01"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.9"
+      />
+    </svg>
+  );
+}
+
+function DuotoneExternalIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M6 7.5A1.5 1.5 0 0 1 7.5 6H18v10.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 16.5v-9Z"
+        fill="currentColor"
+        opacity="0.18"
+      />
+      <path
+        d="M9 15 17 7m0 0h-5.5M17 7v5.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.8"
+      />
+      <path
+        d="M10 6H7.5A1.5 1.5 0 0 0 6 7.5v9A1.5 1.5 0 0 0 7.5 18h9a1.5 1.5 0 0 0 1.5-1.5V14"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.8"
+      />
+    </svg>
+  );
+}
+
+const toCssBlock = (vars: Record<string, string>, selector: string) => {
+  const body = Object.entries(vars)
+    .map(([key, value]) => `  --${key}: ${value};`)
+    .join("\n");
+  return `${selector} {\n${body}\n}`;
+};
+
+const buildThemeCss = (state: StudioPresetState): string => {
+  const cssVars = buildStudioCssVars(state);
+  if (!(cssVars?.light && cssVars.dark && cssVars.theme)) {
+    return "";
+  }
+  return `${toCssBlock(cssVars.theme, ":root")}\n\n${toCssBlock(
+    cssVars.light,
+    ":root"
+  )}\n\n${toCssBlock(cssVars.dark, ".dark")}`;
+};
+
+// The docs app's Tailwind theme is declared with `@theme inline`, so
+// utilities like bg-background compile to the UNDERLYING SmoothUI tokens
+// (var(--color-smooth-50), var(--color-brand)...). To scope a theme preview
+// we therefore override those tokens on the container, not the shadcn names.
+const buildPreviewStyle = (
+  palette: ThemePalette,
+  mode: PreviewMode,
+  state: StudioPresetState
+): Record<string, string> => {
+  const scale = tintScale(
+    mode === "dark" ? DARK_SCALE : LIGHT_SCALE,
+    state.tint
+  );
+  const destructive = getTheme(`theme-${palette.name}`)?.cssVars?.[mode]
+    ?.destructive;
+  const style: Record<string, string> = {
+    "--color-brand": shiftLightness(palette.primary, state.accent),
+    "--color-brand-secondary": shiftLightness(palette.secondary, state.accent),
+    "--radius": `${state.radius}px`,
+    ...(destructive ? { "--destructive": destructive } : {}),
+  };
+  for (const [stop, value] of Object.entries(scale)) {
+    style[`--color-smooth-${stop}`] = value;
+  }
+  return style;
+};
+
+function useCopy() {
+  const [copied, setCopied] = useState(false);
+
+  async function copy(value: string) {
+    await navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), COPY_FEEDBACK_DURATION);
+  }
+
+  return { copied, copy };
+}
+
+// Row-card in the Grid Loader customizer language: bg-smooth-200 pill rows
+// with the label on the left and the control on the right.
+function PanelRow({
+  children,
+  label,
+}: {
+  children: React.ReactNode;
+  label: string;
+}) {
+  return (
+    <div className="flex min-h-9 items-center justify-between rounded-lg bg-smooth-200 py-1 pr-1.5 pl-3">
+      <span className="font-medium text-[13px] text-foreground">{label}</span>
+      {children}
+    </div>
+  );
+}
+
+function StudioSidebar({
+  palette,
+  mode,
+  radius,
+  accent,
+  font,
+  tint,
+  onPalette,
+  onMode,
+  onRadius,
+  onAccent,
+  onFont,
+  onTint,
+  query,
+  onQuery,
+  onCenter,
+}: {
+  palette: ThemePalette;
+  mode: PreviewMode;
+  radius: number;
+  accent: number;
+  font: FontId;
+  tint: TintId;
+  onPalette: (palette: ThemePalette) => void;
+  onMode: (mode: PreviewMode) => void;
+  onRadius: (radius: number) => void;
+  onAccent: (accent: number) => void;
+  onFont: (font: FontId) => void;
+  onTint: (tint: TintId) => void;
+  query: string;
+  onQuery: (query: string) => void;
+  onCenter: () => void;
+}) {
+  const presetCopy = useCopy();
+  const linkCopy = useCopy();
+  const commandCopy = useCopy();
+  const cssCopy = useCopy();
+  const state = useMemo<StudioPresetState>(
+    () => ({ accent, font, palette: palette.name, radius, tint }),
+    [accent, font, palette.name, radius, tint]
+  );
+  const presetCode = useMemo(() => encodeStudioPreset(state), [state]);
+  const themeCss = useMemo(() => buildThemeCss(state), [state]);
+
+  function handleShuffle() {
+    const others = THEME_PALETTES.filter(
+      (entry) => entry.name !== palette.name
+    );
+    onPalette(others[Math.floor(Math.random() * others.length)]);
+  }
+
+  return (
+    <aside className="flex w-full shrink-0 flex-col gap-1.5 overflow-y-auto rounded-xl border bg-smooth-100 p-3 shadow-sm lg:w-64">
+      <div className="flex items-center justify-between px-1 pb-1">
+        <span className="font-semibold text-[15px] text-foreground">
+          Theme Studio
+        </span>
+        <div className="flex items-center gap-0.5">
+          <button
+            aria-label="Center board"
+            className="rounded-md p-1 text-muted-foreground transition-colors hover:text-foreground"
+            onClick={onCenter}
+            title="Center board"
+            type="button"
+          >
+            <IconTargetFill24 className="size-4" />
+          </button>
+          <button
+            aria-label="Shuffle theme"
+            className="rounded-md p-1 text-muted-foreground transition-colors hover:text-foreground"
+            onClick={handleShuffle}
+            title="Shuffle theme"
+            type="button"
+          >
+            <IconDiceFill24 className="size-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex min-h-9 items-center gap-2 rounded-lg bg-smooth-200 px-3">
+        <IconMagnifierFill24 className="size-3.5 shrink-0 text-muted-foreground" />
+        <input
+          aria-label="Search components"
+          className="w-full bg-transparent font-medium text-[13px] text-foreground outline-none placeholder:text-muted-foreground"
+          onChange={(event) => onQuery(event.target.value)}
+          placeholder="Search components"
+          type="search"
+          value={query}
+        />
+      </div>
+
+      <PanelRow label="Theme">
+        <div className="flex overflow-hidden rounded-md">
+          {THEME_PALETTES.map((entry) => (
+            <button
+              aria-label={`Select ${entry.label} theme`}
+              aria-pressed={entry.name === palette.name}
+              className="size-5 cursor-pointer transition-opacity duration-200"
+              key={entry.name}
+              onClick={() => onPalette(entry)}
+              style={{
+                background: `linear-gradient(135deg, ${entry.primary} 60%, ${entry.secondary} 100%)`,
+                opacity: entry.name === palette.name ? 1 : 0.45,
+              }}
+              title={entry.label}
+              type="button"
+            />
+          ))}
+        </div>
+      </PanelRow>
+
+      <div className="flex min-h-9 items-center gap-1 rounded-lg bg-smooth-200 p-1">
+        {(["light", "dark"] as const).map((entry) => (
+          <button
+            aria-pressed={mode === entry}
+            className={cn(
+              "flex h-7 flex-1 items-center justify-center gap-1.5 rounded-md font-medium text-[13px] capitalize transition-all",
+              mode === entry
+                ? "bg-foreground/10 text-foreground"
+                : "text-muted-foreground"
+            )}
+            key={entry}
+            onClick={() => onMode(entry)}
+            type="button"
+          >
+            {entry === "light" ? (
+              <IconSunFill24 className="size-3.5" />
+            ) : (
+              <IconMoonFill24 className="size-3.5" />
+            )}
+            {entry}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex min-h-9 items-center gap-1 rounded-lg bg-smooth-200 p-1">
+        {FONT_OPTIONS.map((option) => (
+          <button
+            aria-pressed={font === option.id}
+            className={cn(
+              "flex h-7 flex-1 items-center justify-center rounded-md font-medium text-[13px] transition-all",
+              font === option.id
+                ? "bg-foreground/10 text-foreground"
+                : "text-muted-foreground"
+            )}
+            key={option.id}
+            onClick={() => onFont(option.id)}
+            style={{ fontFamily: option.stack }}
+            type="button"
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex min-h-9 items-center gap-1 rounded-lg bg-smooth-200 p-1">
+        {TINT_OPTIONS.map((option) => (
+          <button
+            aria-pressed={tint === option.id}
+            className={cn(
+              "flex h-7 flex-1 items-center justify-center rounded-md font-medium text-[13px] transition-all",
+              tint === option.id
+                ? "bg-foreground/10 text-foreground"
+                : "text-muted-foreground"
+            )}
+            key={option.id}
+            onClick={() => onTint(option.id)}
+            type="button"
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+
+      <Scrubber
+        decimals={0}
+        label="Radius"
+        max={24}
+        min={0}
+        onValueChange={onRadius}
+        step={1}
+        ticks={5}
+        value={radius}
+      />
+
+      <Scrubber
+        decimals={0}
+        label="Accent"
+        max={15}
+        min={-15}
+        onValueChange={onAccent}
+        step={1}
+        ticks={5}
+        value={accent}
+      />
+
+      <div className="flex flex-col gap-2">
+        <span className="pl-1 font-semibold text-[13px] text-foreground/65">
+          Preset
+        </span>
+        <div className="flex flex-col gap-0.5 rounded-lg bg-smooth-200 p-1">
+          <button
+            className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 font-mono text-[13px] text-foreground transition-colors hover:bg-foreground/5"
+            onClick={() => presetCopy.copy(presetCode)}
+            type="button"
+          >
+            <span className="truncate">{presetCode}</span>
+            {presetCopy.copied ? (
+              <IconCheckFill24 className="size-3.5 shrink-0" />
+            ) : (
+              <IconCopy2Fill24 className="size-3.5 shrink-0 text-muted-foreground" />
+            )}
+          </button>
+          <button
+            className="flex items-center justify-between rounded-md px-2 py-1.5 text-[13px] text-foreground transition-colors hover:bg-foreground/5"
+            onClick={() =>
+              linkCopy.copy(
+                `${window.location.origin}/themes?preset=${presetCode}`
+              )
+            }
+            type="button"
+          >
+            Copy preset link
+            {linkCopy.copied ? (
+              <IconCheckFill24 className="size-3.5" />
+            ) : (
+              <IconCopy2Fill24 className="size-3.5 text-muted-foreground" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-auto flex flex-col gap-2 pt-2">
+        <SmoothButton
+          className="w-full"
+          onClick={() => commandCopy.copy(installCommand(state))}
+          variant="candy"
+        >
+          {commandCopy.copied ? (
+            <IconCheckFill24 className="size-4" />
+          ) : (
+            <DuotoneInstallIcon className="size-4" />
+          )}
+          {commandCopy.copied ? "Copied!" : `Install ${palette.label}`}
+        </SmoothButton>
+        <SmoothButton
+          className="w-full"
+          onClick={() => cssCopy.copy(themeCss)}
+          variant="outline"
+        >
+          {cssCopy.copied ? (
+            <IconCheckFill24 className="size-3.5" />
+          ) : (
+            <IconCopy2Fill24 className="size-3.5" />
+          )}
+          {cssCopy.copied ? "Copied!" : "Copy CSS variables"}
+        </SmoothButton>
+      </div>
+    </aside>
+  );
+}
+
+const demoTitle = (slug: string): string =>
+  slug
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+
+// Every component demo in the registry, code-split so the board only loads
+// what scrolls into view.
+const DEMO_CARDS: { slug: string; Demo: ComponentType }[] = [
+  {
+    slug: "agent-avatar",
+    Demo: dynamic(() => import("@docs/examples/agent-avatar")),
+  },
+  {
+    slug: "ai-branch",
+    Demo: dynamic(() => import("@docs/examples/ai-branch")),
+  },
+  {
+    slug: "ai-input",
+    Demo: dynamic(() => import("@docs/examples/ai-input")),
+  },
+  {
+    slug: "animated-avatar-group",
+    Demo: dynamic(() => import("@docs/examples/animated-avatar-group")),
+  },
+  {
+    slug: "animated-file-upload",
+    Demo: dynamic(() => import("@docs/examples/animated-file-upload")),
+  },
+  {
+    slug: "animated-input",
+    Demo: dynamic(() => import("@docs/examples/animated-input")),
+  },
+  {
+    slug: "animated-o-t-p-input",
+    Demo: dynamic(() => import("@docs/examples/animated-o-t-p-input")),
+  },
+  {
+    slug: "animated-progress-bar",
+    Demo: dynamic(() => import("@docs/examples/animated-progress-bar")),
+  },
+  {
+    slug: "animated-stepper",
+    Demo: dynamic(() => import("@docs/examples/animated-stepper")),
+  },
+  {
+    slug: "animated-tabs",
+    Demo: dynamic(() => import("@docs/examples/animated-tabs")),
+  },
+  {
+    slug: "animated-tags",
+    Demo: dynamic(() => import("@docs/examples/animated-tags")),
+  },
+  {
+    slug: "animated-toggle",
+    Demo: dynamic(() => import("@docs/examples/animated-toggle")),
+  },
+  {
+    slug: "animated-tooltip",
+    Demo: dynamic(() => import("@docs/examples/animated-tooltip")),
+  },
+  {
+    slug: "app-download-stack",
+    Demo: dynamic(() => import("@docs/examples/app-download-stack")),
+  },
+  {
+    slug: "apple-invites",
+    Demo: dynamic(() => import("@docs/examples/apple-invites")),
+  },
+  {
+    slug: "basic-accordion",
+    Demo: dynamic(() => import("@docs/examples/basic-accordion")),
+  },
+  {
+    slug: "basic-dropdown",
+    Demo: dynamic(() => import("@docs/examples/basic-dropdown")),
+  },
+  {
+    slug: "basic-modal",
+    Demo: dynamic(() => import("@docs/examples/basic-modal")),
+  },
+  {
+    slug: "basic-toast",
+    Demo: dynamic(() => import("@docs/examples/basic-toast")),
+  },
+  {
+    slug: "book",
+    Demo: dynamic(() => import("@docs/examples/book")),
+  },
+  {
+    slug: "breadcrumb",
+    Demo: dynamic(() => import("@docs/examples/breadcrumb")),
+  },
+  {
+    slug: "button-copy",
+    Demo: dynamic(() => import("@docs/examples/button-copy")),
+  },
+  {
+    slug: "checkbox",
+    Demo: dynamic(() => import("@docs/examples/checkbox")),
+  },
+  {
+    slug: "clip-corners-button",
+    Demo: dynamic(() => import("@docs/examples/clip-corners-button")),
+  },
+  {
+    slug: "combobox",
+    Demo: dynamic(() => import("@docs/examples/combobox")),
+  },
+  {
+    slug: "context-menu",
+    Demo: dynamic(() => import("@docs/examples/context-menu")),
+  },
+  {
+    slug: "contribution-graph",
+    Demo: dynamic(() => import("@docs/examples/contribution-graph")),
+  },
+  {
+    slug: "cursor-follow",
+    Demo: dynamic(() => import("@docs/examples/cursor-follow")),
+  },
+  {
+    slug: "dialog",
+    Demo: dynamic(() => import("@docs/examples/dialog")),
+  },
+  {
+    slug: "dot-morph-button",
+    Demo: dynamic(() => import("@docs/examples/dot-morph-button")),
+  },
+  {
+    slug: "drawer",
+    Demo: dynamic(() => import("@docs/examples/drawer")),
+  },
+  {
+    slug: "dropdown-menu",
+    Demo: dynamic(() => import("@docs/examples/dropdown-menu")),
+  },
+  {
+    slug: "dynamic-island",
+    Demo: dynamic(() => import("@docs/examples/dynamic-island")),
+  },
+  {
+    slug: "expandable-cards",
+    Demo: dynamic(() => import("@docs/examples/expandable-cards")),
+  },
+  {
+    slug: "exposure-slider",
+    Demo: dynamic(() => import("@docs/examples/exposure-slider")),
+  },
+  {
+    slug: "figma-comment",
+    Demo: dynamic(() => import("@docs/examples/figma-comment")),
+  },
+  {
+    slug: "form",
+    Demo: dynamic(() => import("@docs/examples/form")),
+  },
+  {
+    slug: "github-stars-animation",
+    Demo: dynamic(() => import("@docs/examples/github-stars-animation")),
+  },
+  {
+    slug: "glow-hover-card",
+    Demo: dynamic(() => import("@docs/examples/glow-hover-card")),
+  },
+  {
+    slug: "gooey-popover",
+    Demo: dynamic(() => import("@docs/examples/gooey-popover")),
+  },
+  {
+    slug: "grid-loader",
+    Demo: dynamic(() => import("@docs/examples/grid-loader")),
+  },
+  {
+    slug: "image-metadata-preview",
+    Demo: dynamic(() => import("@docs/examples/image-metadata-preview")),
+  },
+  {
+    slug: "infinite-slider",
+    Demo: dynamic(() => import("@docs/examples/infinite-slider")),
+  },
+  {
+    slug: "interactive-image-selector",
+    Demo: dynamic(() => import("@docs/examples/interactive-image-selector")),
+  },
+  {
+    slug: "job-listing-component",
+    Demo: dynamic(() => import("@docs/examples/job-listing-component")),
+  },
+  {
+    slug: "magnetic-button",
+    Demo: dynamic(() => import("@docs/examples/magnetic-button")),
+  },
+  {
+    slug: "notification-badge",
+    Demo: dynamic(() => import("@docs/examples/notification-badge")),
+  },
+  {
+    slug: "number-flow",
+    Demo: dynamic(() => import("@docs/examples/number-flow")),
+  },
+  {
+    slug: "pagination",
+    Demo: dynamic(() => import("@docs/examples/pagination")),
+  },
+  {
+    slug: "phototab",
+    Demo: dynamic(() => import("@docs/examples/phototab")),
+  },
+  {
+    slug: "power-off-slide",
+    Demo: dynamic(() => import("@docs/examples/power-off-slide")),
+  },
+  {
+    slug: "price-flow",
+    Demo: dynamic(() => import("@docs/examples/price-flow")),
+  },
+  {
+    slug: "product-card",
+    Demo: dynamic(() => import("@docs/examples/product-card")),
+  },
+  {
+    slug: "radio-group",
+    Demo: dynamic(() => import("@docs/examples/radio-group")),
+  },
+  {
+    slug: "reveal-text",
+    Demo: dynamic(() => import("@docs/examples/reveal-text")),
+  },
+  {
+    slug: "reviews-carousel",
+    Demo: dynamic(() => import("@docs/examples/reviews-carousel")),
+  },
+  {
+    slug: "rich-popover",
+    Demo: dynamic(() => import("@docs/examples/rich-popover")),
+  },
+  {
+    slug: "scramble-hover",
+    Demo: dynamic(() => import("@docs/examples/scramble-hover")),
+  },
+  {
+    slug: "scrollable-card-stack",
+    Demo: dynamic(() => import("@docs/examples/scrollable-card-stack")),
+  },
+  {
+    slug: "scrubber",
+    Demo: dynamic(() => import("@docs/examples/scrubber")),
+  },
+  {
+    slug: "searchable-dropdown",
+    Demo: dynamic(() => import("@docs/examples/searchable-dropdown")),
+  },
+  {
+    slug: "select",
+    Demo: dynamic(() => import("@docs/examples/select")),
+  },
+  {
+    slug: "siri-orb",
+    Demo: dynamic(() => import("@docs/examples/siri-orb")),
+  },
+  {
+    slug: "skeleton-loader",
+    Demo: dynamic(() => import("@docs/examples/skeleton-loader")),
+  },
+  {
+    slug: "smooth-button",
+    Demo: dynamic(() => import("@docs/examples/smooth-button")),
+  },
+  {
+    slug: "social-selector",
+    Demo: dynamic(() => import("@docs/examples/social-selector")),
+  },
+  {
+    slug: "switchboard-card",
+    Demo: dynamic(() => import("@docs/examples/switchboard-card")),
+  },
+  {
+    slug: "typewriter-text",
+    Demo: dynamic(() => import("@docs/examples/typewriter-text")),
+  },
+  {
+    slug: "user-account-avatar",
+    Demo: dynamic(() => import("@docs/examples/user-account-avatar")),
+  },
+  {
+    slug: "wave-text",
+    Demo: dynamic(() => import("@docs/examples/wave-text")),
+  },
+];
+
+// Mounts the demo when the card approaches the viewport and unmounts it when
+// it leaves, remembering its height so the masonry never shifts. Keeps the
+// board at a constant runtime cost no matter how many demos exist.
+const LAZY_ROOT_MARGIN = "400px";
+const PLACEHOLDER_MIN_HEIGHT = 220;
+
+function LazyDemo({ Demo }: { Demo: ComponentType }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const heightRef = useRef<number>(PLACEHOLDER_MIN_HEIGHT);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+        } else {
+          if (el.offsetHeight > 0) {
+            heightRef.current = el.offsetHeight;
+          }
+          setVisible(false);
+        }
+      },
+      { rootMargin: LAZY_ROOT_MARGIN }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      className="flex items-center justify-center overflow-hidden p-4"
+      ref={ref}
+      style={visible ? undefined : { minHeight: heightRef.current }}
+    >
+      {visible ? <Demo /> : null}
+    </div>
+  );
+}
+
+const BOARD_COLUMN_COUNT = 5;
+const BOARD_COLUMNS: (typeof DEMO_CARDS)[] = Array.from(
+  { length: BOARD_COLUMN_COUNT },
+  (_, index) =>
+    DEMO_CARDS.filter(
+      (_, cardIndex) => cardIndex % BOARD_COLUMN_COUNT === index
+    )
+);
+
+function CopyInstallButton({ slug }: { slug: string }) {
+  const { copied, copy } = useCopy();
+
+  return (
+    <button
+      aria-label={`Copy install command for ${demoTitle(slug)}`}
+      className="grid size-7 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground"
+      onClick={() => copy(componentInstallCommand(slug))}
+      title={componentInstallCommand(slug)}
+      type="button"
+    >
+      {copied ? (
+        <IconCheckFill24 className="size-4 text-brand" />
+      ) : (
+        <DuotoneInstallIcon className="size-4" />
+      )}
+    </button>
+  );
+}
+
+function PreviewCanvas({
+  palette,
+  mode,
+  state,
+  query,
+  centerSignal,
+}: {
+  palette: ThemePalette;
+  mode: PreviewMode;
+  state: StudioPresetState;
+  query: string;
+  centerSignal: number;
+}) {
+  const style = useMemo(
+    () => ({
+      ...buildPreviewStyle(palette, mode, state),
+      colorScheme: mode,
+      fontFamily: fontStack(state.font),
+    }),
+    [palette, mode, state]
+  );
+  const panRef = useRef<HTMLDivElement>(null);
+  const panState = useRef({ active: false, x: 0, y: 0, left: 0, top: 0 });
+  const [panning, setPanning] = useState(false);
+
+  // Start centered on the board so the user can pan in any direction
+  // right away instead of being parked at the top-left corner. Re-centers
+  // when the sidebar's center action fires.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: centerSignal is the trigger
+  useEffect(() => {
+    const el = panRef.current;
+    if (!el) {
+      return;
+    }
+    el.scrollLeft = (el.scrollWidth - el.clientWidth) / 2;
+    el.scrollTop = (el.scrollHeight - el.clientHeight) / 2;
+  }, [centerSignal]);
+
+  // Capturing the pointer on pointerdown would retarget the eventual click
+  // to the canvas, silently breaking onClick handlers on non-button elements
+  // inside the demos. So the pan only arms on pointerdown and captures after
+  // the pointer actually travels — a plain click never gets hijacked.
+  const PAN_THRESHOLD_PX = 5;
+
+  function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {
+    // Primary button only: right-click must reach context menus untouched.
+    if (event.button !== 0) {
+      return;
+    }
+    // Real interactive controls keep full pointer ownership (slider drags).
+    if (
+      (event.target as HTMLElement).closest(
+        "button, a, input, textarea, select, [contenteditable], [role='tab'], [role='switch'], [role='slider'], [role='checkbox']"
+      )
+    ) {
+      return;
+    }
+    const el = panRef.current;
+    if (!el) {
+      return;
+    }
+    panState.current = {
+      active: true,
+      x: event.clientX,
+      y: event.clientY,
+      left: el.scrollLeft,
+      top: el.scrollTop,
+    };
+  }
+
+  function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {
+    const el = panRef.current;
+    if (!(panState.current.active && el)) {
+      return;
+    }
+    const deltaX = event.clientX - panState.current.x;
+    const deltaY = event.clientY - panState.current.y;
+    if (!panning) {
+      if (
+        Math.abs(deltaX) < PAN_THRESHOLD_PX &&
+        Math.abs(deltaY) < PAN_THRESHOLD_PX
+      ) {
+        return;
+      }
+      el.setPointerCapture(event.pointerId);
+      setPanning(true);
+    }
+    el.scrollLeft = panState.current.left - deltaX;
+    el.scrollTop = panState.current.top - deltaY;
+  }
+
+  function handlePointerEnd() {
+    panState.current.active = false;
+    setPanning(false);
+  }
+
+  const normalizedQuery = query.trim().toLowerCase();
+  const columns = useMemo(() => {
+    if (!normalizedQuery) {
+      return BOARD_COLUMNS;
+    }
+    const matches = DEMO_CARDS.filter(({ slug }) =>
+      demoTitle(slug).toLowerCase().includes(normalizedQuery)
+    );
+    return Array.from({ length: BOARD_COLUMN_COUNT }, (_, index) =>
+      matches.filter((_, cardIndex) => cardIndex % BOARD_COLUMN_COUNT === index)
+    );
+  }, [normalizedQuery]);
+
+  return (
+    <div
+      className={cn(
+        "min-w-0 flex-1 rounded-2xl bg-secondary text-foreground transition-colors duration-200 lg:rounded-r-none",
+        mode === "dark" && "dark",
+        panning ? "cursor-grabbing select-none" : "cursor-grab"
+      )}
+      onPointerCancel={handlePointerEnd}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerEnd}
+      ref={panRef}
+      style={{
+        ...style,
+        overflow: "auto",
+        scrollbarWidth: "none",
+      }}
+    >
+      <div className="frame-box relative flex w-[2600px] items-start gap-5 p-8">
+        {columns.map((column, columnIndex) => (
+          <div
+            className="flex min-w-0 flex-1 flex-col gap-5"
+            // biome-ignore lint/suspicious/noArrayIndexKey: columns are static
+            key={columnIndex}
+          >
+            {column.map(({ slug, Demo }) => (
+              <div
+                className="rounded-xl border bg-background shadow-sm"
+                data-demo-card
+                key={slug}
+              >
+                <div className="flex items-center justify-between border-b px-4 py-2.5">
+                  <span className="font-medium text-foreground text-sm">
+                    {demoTitle(slug)}
+                  </span>
+                  <div className="flex items-center gap-2.5">
+                    <AddToKitButton
+                      className="border-transparent bg-transparent text-muted-foreground shadow-none ring-0 hover:bg-muted/70 hover:text-foreground dark:ring-0"
+                      iconOnly
+                      size="xs"
+                      slug={slug}
+                      title={demoTitle(slug)}
+                    />
+                    <CopyInstallButton slug={slug} />
+                    <a
+                      aria-label={`Open ${demoTitle(slug)} docs`}
+                      className="grid size-7 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground"
+                      href={`/docs/components/${slug}`}
+                    >
+                      <DuotoneExternalIcon className="size-4" />
+                    </a>
+                  </div>
+                </div>
+                <LazyDemo Demo={Demo} />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const DEFAULT_RADIUS_PX = 10;
+
+export function ThemeStudio() {
+  const { resolvedTheme } = useTheme();
+  const [palette, setPalette] = useState<ThemePalette>(THEME_PALETTES[0]);
+  const [mode, setMode] = useState<PreviewMode>("light");
+  const [radius, setRadius] = useState(DEFAULT_RADIUS_PX);
+  const [accent, setAccent] = useState(0);
+  const [font, setFont] = useState<FontId>("sans");
+  const [tint, setTint] = useState<TintId>("neutral");
+  const [query, setQuery] = useState("");
+  const [centerSignal, setCenterSignal] = useState(0);
+
+  useEffect(() => {
+    if (resolvedTheme === "dark" || resolvedTheme === "light") {
+      setMode(resolvedTheme);
+    }
+  }, [resolvedTheme]);
+
+  // Restore a shared preset from /themes?preset=<code>
+  useEffect(() => {
+    const code = new URLSearchParams(window.location.search).get("preset");
+    if (!code) {
+      return;
+    }
+    const restored = decodeStudioPreset(code);
+    if (!restored) {
+      return;
+    }
+    const restoredPalette = THEME_PALETTES.find(
+      (entry) => entry.name === restored.palette
+    );
+    if (restoredPalette) {
+      setPalette(restoredPalette);
+    }
+    setRadius(restored.radius);
+    setAccent(restored.accent);
+    setFont(restored.font);
+    setTint(restored.tint);
+  }, []);
+
+  const state = useMemo<StudioPresetState>(
+    () => ({ accent, font, palette: palette.name, radius, tint }),
+    [accent, font, palette.name, radius, tint]
+  );
+
+  return (
+    <div className="flex w-full flex-col gap-4 px-3 pt-20 pb-3 lg:h-dvh lg:flex-row lg:items-stretch lg:overflow-hidden lg:pr-0 lg:pb-4 lg:pl-6">
+      <h1 className="sr-only">SmoothUI Themes</h1>
+      <StudioSidebar
+        accent={accent}
+        font={font}
+        mode={mode}
+        onAccent={setAccent}
+        onCenter={() => setCenterSignal((signal) => signal + 1)}
+        onFont={setFont}
+        onMode={setMode}
+        onPalette={setPalette}
+        onQuery={setQuery}
+        onRadius={setRadius}
+        onTint={setTint}
+        palette={palette}
+        query={query}
+        radius={radius}
+        tint={tint}
+      />
+      <PreviewCanvas
+        centerSignal={centerSignal}
+        mode={mode}
+        palette={palette}
+        query={query}
+        state={state}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/blog/ai-design-slop.mdx b/apps/docs/content/blog/ai-design-slop.mdx
index 91230b5c..a52b2afb 100644
--- a/apps/docs/content/blog/ai-design-slop.mdx
+++ b/apps/docs/content/blog/ai-design-slop.mdx
@@ -3,6 +3,7 @@ title: "AI Design Slop: Why AI-Generated UI Looks Generic — and the Fix"
 description: "AI coding agents ship the same purple gradients, glassmorphism, and identical card grids. Here's why AI-generated UI looks like slop — and how a closed-loop design-quality bar fixes it for good."
 date: "2026-06-24"
 author: "Eduardo Calvo"
+image: "/blog/ai-design-slop.webp"
 ---
 
 You can spot it in a second now. The purple-to-cyan gradient. Glassmorphism with a neon glow. Six identical cards in a row, each with an icon, a heading, and two lines of text. A bounce on every hover. It has a name: **AI design slop** — the generic, interchangeable UI that coding agents produce by default.
diff --git a/apps/docs/content/blog/best-react-animation-libraries.mdx b/apps/docs/content/blog/best-react-animation-libraries.mdx
index ff02be69..a0cc0641 100644
--- a/apps/docs/content/blog/best-react-animation-libraries.mdx
+++ b/apps/docs/content/blog/best-react-animation-libraries.mdx
@@ -3,6 +3,7 @@ title: "Best React Animation Libraries in 2026: A Complete Comparison"
 description: "A detailed comparison of the top React animation libraries — Motion, React Spring, GSAP, SmoothUI, and more. Learn which library fits your project with real examples and performance benchmarks."
 date: "2026-04-16"
 author: "Eduardo Calvo"
+image: "/blog/best-react-animation-libraries.webp"
 ---
 
 import { Installer } from "@docs/components/installer";
diff --git a/apps/docs/content/blog/building-animated-tabs.mdx b/apps/docs/content/blog/building-animated-tabs.mdx
index a0b87636..aa39203e 100644
--- a/apps/docs/content/blog/building-animated-tabs.mdx
+++ b/apps/docs/content/blog/building-animated-tabs.mdx
@@ -3,6 +3,7 @@ title: "Building Animated Tabs with a Shared Layout Indicator"
 description: "How to build tabs where a single pill slides smoothly between the active option, with full keyboard support and reduced-motion compliance."
 date: "2026-04-14"
 author: "Eduardo Calvo"
+image: "/blog/building-animated-tabs.webp"
 ---
 
 import { InteractiveAnimatedTabsTutorial } from "@docs/components/blog/interactive-animated-tabs-tutorial";
diff --git a/apps/docs/content/blog/building-magnetic-button.mdx b/apps/docs/content/blog/building-magnetic-button.mdx
index 10890c8d..e642af11 100644
--- a/apps/docs/content/blog/building-magnetic-button.mdx
+++ b/apps/docs/content/blog/building-magnetic-button.mdx
@@ -3,6 +3,7 @@ title: "Building a Magnetic Button with Cursor Physics"
 description: "Learn how to build a button that's pulled towards the user's cursor — with radius falloff, spring physics, and full accessibility support."
 date: "2026-04-14"
 author: "Eduardo Calvo"
+image: "/blog/building-magnetic-button.webp"
 ---
 
 import { InteractiveMagneticButtonTutorial } from "@docs/components/blog/interactive-magnetic-button-tutorial";
diff --git a/apps/docs/content/blog/building-number-flow.mdx b/apps/docs/content/blog/building-number-flow.mdx
index 6f7e38bb..6fa906ab 100644
--- a/apps/docs/content/blog/building-number-flow.mdx
+++ b/apps/docs/content/blog/building-number-flow.mdx
@@ -3,6 +3,7 @@ title: "Building a Number Flow Animation"
 description: "A step-by-step guide to animating numeric values digit-by-digit with direction-aware motion, tabular alignment, and accessibility in mind."
 date: "2026-04-14"
 author: "Eduardo Calvo"
+image: "/blog/building-number-flow.webp"
 ---
 
 import { InteractiveNumberFlowTutorial } from "@docs/components/blog/interactive-number-flow-tutorial";
diff --git a/apps/docs/content/blog/building-rich-popover.mdx b/apps/docs/content/blog/building-rich-popover.mdx
index e54f2ab1..3df5fbb4 100644
--- a/apps/docs/content/blog/building-rich-popover.mdx
+++ b/apps/docs/content/blog/building-rich-popover.mdx
@@ -3,6 +3,7 @@ title: "Building a Rich Popover with Blur Animations"
 description: "A deep dive into creating media-rich popovers with scale, blur, and spring animations for a polished materializing effect."
 date: "2025-02-05"
 author: "Eduardo Calvo"
+image: "/blog/building-rich-popover.webp"
 ---
 
 import { InteractiveRichPopoverTutorial } from "@docs/components/blog/interactive-rich-popover-tutorial";
diff --git a/apps/docs/content/blog/building-scramble-hover.mdx b/apps/docs/content/blog/building-scramble-hover.mdx
index 1f85da9b..ed39be7e 100644
--- a/apps/docs/content/blog/building-scramble-hover.mdx
+++ b/apps/docs/content/blog/building-scramble-hover.mdx
@@ -3,6 +3,7 @@ title: "Building a Scramble-on-Hover Text Effect"
 description: "A tutorial on crafting the cyberpunk-style text scramble effect with pure React, timers, and proper cleanup — no external libs required."
 date: "2026-04-14"
 author: "Eduardo Calvo"
+image: "/blog/building-scramble-hover.webp"
 ---
 
 import { InteractiveScrambleHoverTutorial } from "@docs/components/blog/interactive-scramble-hover-tutorial";
diff --git a/apps/docs/content/blog/building-social-selector.mdx b/apps/docs/content/blog/building-social-selector.mdx
index 352f9a18..bd766e32 100644
--- a/apps/docs/content/blog/building-social-selector.mdx
+++ b/apps/docs/content/blog/building-social-selector.mdx
@@ -3,6 +3,7 @@ title: "Building an Animated Social Selector Component"
 description: "Learn how to create a sleek social platform selector with spring-powered sliding indicator and blur transitions using Motion and React."
 date: "2025-02-05"
 author: "Eduardo Calvo"
+image: "/blog/building-social-selector.webp"
 ---
 
 import { InteractiveSocialSelectorTutorial } from "@docs/components/blog/interactive-social-selector-tutorial";
diff --git a/apps/docs/content/blog/building-user-account-avatar.mdx b/apps/docs/content/blog/building-user-account-avatar.mdx
index ccefead1..647710f0 100644
--- a/apps/docs/content/blog/building-user-account-avatar.mdx
+++ b/apps/docs/content/blog/building-user-account-avatar.mdx
@@ -3,6 +3,7 @@ title: "Building an Animated User Account Avatar Component"
 description: "A deep dive into creating interactive dropdown menus with smooth spring animations, expandable sections, and accessibility features using Radix UI and Motion."
 date: "2025-02-05"
 author: "Eduardo Calvo"
+image: "/blog/building-user-account-avatar.webp"
 ---
 
 import { InteractiveAvatarTutorial } from "@docs/components/blog/interactive-avatar-tutorial";
diff --git a/apps/docs/content/blog/framer-motion-tutorial.mdx b/apps/docs/content/blog/framer-motion-tutorial.mdx
index 0abf481c..b45ce1b6 100644
--- a/apps/docs/content/blog/framer-motion-tutorial.mdx
+++ b/apps/docs/content/blog/framer-motion-tutorial.mdx
@@ -3,6 +3,7 @@ title: "Framer Motion Tutorial: Build Stunning React Animations in 2026"
 description: "Learn how to use Motion (formerly Framer Motion) to build smooth, accessible animations in React. From basic transitions to spring physics, gestures, and layout animations — with real examples."
 date: "2026-04-16"
 author: "Eduardo Calvo"
+image: "/blog/framer-motion-tutorial.webp"
 ---
 
 import { Installer } from "@docs/components/installer";
diff --git a/apps/docs/content/blog/introducing-ui-craft.mdx b/apps/docs/content/blog/introducing-ui-craft.mdx
index 295dd41f..cad13ae8 100644
--- a/apps/docs/content/blog/introducing-ui-craft.mdx
+++ b/apps/docs/content/blog/introducing-ui-craft.mdx
@@ -3,6 +3,7 @@ title: "Introducing UI Craft — Design Taste for AI Coding Agents"
 description: "UI Craft is a skill that gives AI coding agents real design intuition. Same prompt, same model, dramatically better UI output."
 date: "2026-03-19"
 author: "Eduardo Calvo"
+image: "/blog/introducing-ui-craft.webp"
 ---
 
 AI coding agents are fast. They can scaffold entire interfaces in seconds. But speed without taste produces the same generic output every time — purple-cyan gradients, glassmorphism with neon accents, bounce animations, identical card grids.
diff --git a/apps/docs/content/docs/blocks/cta.mdx b/apps/docs/content/docs/blocks/cta.mdx
index e80ffcc1..e5b7a566 100644
--- a/apps/docs/content/docs/blocks/cta.mdx
+++ b/apps/docs/content/docs/blocks/cta.mdx
@@ -1,6 +1,8 @@
 ---
+icon: MousePointerClick
 title: CTA Blocks
 description: Animated React call-to-action blocks with radial glow backgrounds, staggered text animations, and conversion-focused layouts.
+full: true
 ---
 
 # CTA Blocks
diff --git a/apps/docs/content/docs/blocks/faqs.mdx b/apps/docs/content/docs/blocks/faqs.mdx
index 1444c652..828db3af 100644
--- a/apps/docs/content/docs/blocks/faqs.mdx
+++ b/apps/docs/content/docs/blocks/faqs.mdx
@@ -1,6 +1,8 @@
 ---
+icon: HelpCircle
 title: FAQs Blocks
 description: Animated React FAQ blocks with tabbed categories, smooth accordion transitions, and accessible keyboard navigation.
+full: true
 ---
 
 # FAQs Blocks
diff --git a/apps/docs/content/docs/blocks/features.mdx b/apps/docs/content/docs/blocks/features.mdx
index b31dbc34..2f57e49b 100644
--- a/apps/docs/content/docs/blocks/features.mdx
+++ b/apps/docs/content/docs/blocks/features.mdx
@@ -1,6 +1,8 @@
 ---
+icon: LayoutGrid
 title: Feature Blocks
 description: Animated React feature blocks with scroll-triggered entrances, hover effects, and responsive card grid layouts.
+full: true
 ---
 
 # Feature Blocks
diff --git a/apps/docs/content/docs/blocks/footer.mdx b/apps/docs/content/docs/blocks/footer.mdx
index 9369e487..c5e976c9 100644
--- a/apps/docs/content/docs/blocks/footer.mdx
+++ b/apps/docs/content/docs/blocks/footer.mdx
@@ -1,6 +1,8 @@
 ---
+icon: PanelBottom
 title: Footer Blocks
 description: Pre-built React footer blocks with organized link sections, social media icons, and responsive layouts for any website.
+full: true
 ---
 
 # Footer Blocks
diff --git a/apps/docs/content/docs/blocks/hero.mdx b/apps/docs/content/docs/blocks/hero.mdx
index 83987fbd..1934c3d7 100644
--- a/apps/docs/content/docs/blocks/hero.mdx
+++ b/apps/docs/content/docs/blocks/hero.mdx
@@ -1,6 +1,8 @@
 ---
+icon: Sparkles
 title: Hero Blocks
 description: Eye-catching animated React hero blocks with interactive backgrounds, text animations, and smooth scroll-triggered entrances.
+full: true
 ---
 
 # Hero Blocks
diff --git a/apps/docs/content/docs/blocks/index.mdx b/apps/docs/content/docs/blocks/index.mdx
index e68e8724..116b1f49 100644
--- a/apps/docs/content/docs/blocks/index.mdx
+++ b/apps/docs/content/docs/blocks/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: UI Blocks
 description: "20+ production-ready UI blocks: headers, footers, pricing tables, testimonials, and more. React components with smooth animations."
+full: true
 ---
 
 ## Basic Information About Blocks
diff --git a/apps/docs/content/docs/blocks/logo-clouds.mdx b/apps/docs/content/docs/blocks/logo-clouds.mdx
index b166a176..fb53c31f 100644
--- a/apps/docs/content/docs/blocks/logo-clouds.mdx
+++ b/apps/docs/content/docs/blocks/logo-clouds.mdx
@@ -1,6 +1,8 @@
 ---
+icon: Cloud
 title: Logo Clouds Blocks
 description: Animated React logo cloud blocks to showcase partners and clients with hover effects and responsive grid layouts.
+full: true
 ---
 
 # Logo Clouds Blocks
diff --git a/apps/docs/content/docs/blocks/pricing.mdx b/apps/docs/content/docs/blocks/pricing.mdx
index 4673a513..0ff58b4a 100644
--- a/apps/docs/content/docs/blocks/pricing.mdx
+++ b/apps/docs/content/docs/blocks/pricing.mdx
@@ -1,6 +1,8 @@
 ---
+icon: Tag
 title: Pricing Blocks
 description: Animated React pricing blocks with plan toggles, smooth price transitions, and feature comparison layouts built with Tailwind CSS.
+full: true
 ---
 
 # Pricing Blocks
diff --git a/apps/docs/content/docs/blocks/stats.mdx b/apps/docs/content/docs/blocks/stats.mdx
index 7fb40a71..1553aacd 100644
--- a/apps/docs/content/docs/blocks/stats.mdx
+++ b/apps/docs/content/docs/blocks/stats.mdx
@@ -1,6 +1,8 @@
 ---
+icon: BarChart2
 title: Stats Blocks
 description: Animated React stats blocks with count-up animations, hover effects, and responsive grid layouts for key metrics.
+full: true
 ---
 
 # Stats Blocks
diff --git a/apps/docs/content/docs/blocks/team-sections.mdx b/apps/docs/content/docs/blocks/team-sections.mdx
index fab1faaa..5c634e97 100644
--- a/apps/docs/content/docs/blocks/team-sections.mdx
+++ b/apps/docs/content/docs/blocks/team-sections.mdx
@@ -1,6 +1,8 @@
 ---
+icon: Users
 title: Team Sections Blocks
 description: Animated React team section blocks with member cards, hover reveal effects, and responsive grid layouts built with Tailwind CSS.
+full: true
 ---
 
 # Team Sections Blocks
diff --git a/apps/docs/content/docs/blocks/testimonial.mdx b/apps/docs/content/docs/blocks/testimonial.mdx
index 6d177c26..89371820 100644
--- a/apps/docs/content/docs/blocks/testimonial.mdx
+++ b/apps/docs/content/docs/blocks/testimonial.mdx
@@ -1,6 +1,8 @@
 ---
+icon: Quote
 title: Testimonial Blocks
 description: Animated React testimonial blocks with auto-rotating cards, smooth transitions, and progress indicators for social proof.
+full: true
 ---
 
 # Testimonial Blocks
diff --git a/apps/docs/content/docs/community/meta.json b/apps/docs/content/docs/community/meta.json
index 57e1f26e..e779610a 100644
--- a/apps/docs/content/docs/community/meta.json
+++ b/apps/docs/content/docs/community/meta.json
@@ -4,5 +4,5 @@
   "description": "Request components, share your projects, and connect with the SmoothUI community",
   "icon": "Users",
   "root": true,
-  "pages": ["index", "request", "showcase"]
+  "pages": ["---Guide---", "index", "---Community---", "request", "showcase"]
 }
diff --git a/apps/docs/content/docs/components/aperture-blur-transition.mdx b/apps/docs/content/docs/components/aperture-blur-transition.mdx
new file mode 100644
index 00000000..713c2883
--- /dev/null
+++ b/apps/docs/content/docs/components/aperture-blur-transition.mdx
@@ -0,0 +1,30 @@
+---
+title: Aperture Blur Transition
+description: Frame-level shader transition that swaps content under a focused champagne aperture sweep.
+icon: SunMedium
+dependencies:
+  - motion.dev
+installer: aperture-blur-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Swaps content at the shader midpoint so the next state appears under the sweep
+- Designed for route/state moments, not hover decoration
+- Accessible: honors `prefers-reduced-motion` and keeps semantic content in the DOM
+
+## Usage guidance
+
+Use it sparingly for meaningful state changes: publish flows, checkout completion, onboarding steps, presentation mode changes, or section-level navigation.
+
+## Accessibility
+
+When reduced motion is preferred, content swaps immediately and `onRest` still fires.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/aperture-blur-transition/index.tsx"
+  name="ApertureBlurTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/blur-out-up.mdx b/apps/docs/content/docs/components/blur-out-up.mdx
new file mode 100644
index 00000000..65cf2dec
--- /dev/null
+++ b/apps/docs/content/docs/components/blur-out-up.mdx
@@ -0,0 +1,29 @@
+---
+title: Blur Out Up
+description: Animated React per-word text reveal — words arrive clean from a gentle blur and upward drift, Apple-style airy entrance, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: blur-out-up
+---
+
+## Features
+
+- Per-word fade-in with a gentle blur (6 px) and upward drift (10 px)
+- Apple signature ease-out (`cubic-bezier(0.22, 1, 0.36, 1)`)
+- Fast stagger (28 ms) keeps total duration tight
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no blur or movement. The full string is exposed to screen readers via `aria-label`, with the per-word spans `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/blur-out-up/index.tsx"
+  name="BlurOutUpProps"
+/>
diff --git a/apps/docs/content/docs/components/bottom-up-letters.mdx b/apps/docs/content/docs/components/bottom-up-letters.mdx
new file mode 100644
index 00000000..e4b10814
--- /dev/null
+++ b/apps/docs/content/docs/components/bottom-up-letters.mdx
@@ -0,0 +1,29 @@
+---
+title: Bottom Up Letters
+description: Animated React per-character text reveal where letters rise from below in a pronounced staircase, one symbol at a time, with zero blur. Apple-style keynote typography, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: bottom-up-letters
+---
+
+## Features
+
+- Per-character bottom-up staircase reveal with zero blur
+- Pronounced staging at 88ms stagger for deliberate, one-letter-at-a-time rhythm
+- Configurable delay and per-character stagger
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no movement. The full string is exposed to screen readers via `aria-label`, with the per-character spans `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/bottom-up-letters/index.tsx"
+  name="BottomUpLettersProps"
+/>
diff --git a/apps/docs/content/docs/components/chroma-blur-transition.mdx b/apps/docs/content/docs/components/chroma-blur-transition.mdx
new file mode 100644
index 00000000..1d0504cb
--- /dev/null
+++ b/apps/docs/content/docs/components/chroma-blur-transition.mdx
@@ -0,0 +1,30 @@
+---
+title: Chroma Blur Transition
+description: Frame-level shader transition that swaps content under a liquid chromatic sweep.
+icon: Palette
+dependencies:
+  - motion.dev
+installer: chroma-blur-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Swaps content at the shader midpoint so the next state appears under the sweep
+- Designed for route/state moments, not hover decoration
+- Accessible: honors `prefers-reduced-motion` and keeps semantic content in the DOM
+
+## Usage guidance
+
+Use it sparingly for meaningful state changes: publish flows, checkout completion, onboarding steps, presentation mode changes, or section-level navigation.
+
+## Accessibility
+
+When reduced motion is preferred, content swaps immediately and `onRest` still fires.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/chroma-blur-transition/index.tsx"
+  name="ChromaBlurTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/depth-parallax-words.mdx b/apps/docs/content/docs/components/depth-parallax-words.mdx
new file mode 100644
index 00000000..8106fe4b
--- /dev/null
+++ b/apps/docs/content/docs/components/depth-parallax-words.mdx
@@ -0,0 +1,29 @@
+---
+title: Depth Parallax Words
+description: Animated React per-word text reveal with scale, vertical drift, and blur for layered depth — product landing page entrance, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: depth-parallax-words
+---
+
+## Features
+
+- Per-word depth motion: fade-in, upward drift (18 px), scale (0.92 → 1), and soft blur (3 px)
+- Apple signature ease-out (`cubic-bezier(0.22, 1, 0.36, 1)`)
+- Configurable delay and per-word stagger
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no depth animation. The full string is exposed to screen readers via `aria-label`, with the per-word spans `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/depth-parallax-words/index.tsx"
+  name="DepthParallaxWordsProps"
+/>
diff --git a/apps/docs/content/docs/components/fade-through.mdx b/apps/docs/content/docs/components/fade-through.mdx
new file mode 100644
index 00000000..eb1ad0b3
--- /dev/null
+++ b/apps/docs/content/docs/components/fade-through.mdx
@@ -0,0 +1,32 @@
+---
+title: Fade Through
+description: Material-style phrase cycling animation — old text fades out, new text fades in with a soft delay. Ideal for hero headlines and rotating taglines.
+icon: Type
+dependencies:
+  - motion.dev
+installer: fade-through
+---
+
+## Features
+
+- **Material-style crossfade** — exit completes before enter begins (`AnimatePresence mode="wait"`), creating a clean swap with no overlap
+- **Soft enter** — new phrase rises 6px and unblurs into view over 420ms
+- **Crisp exit** — current phrase fades up and out quickly over 260ms
+- **Configurable interval** — control how long each phrase is displayed via the `interval` prop
+- **Reduced motion** — when `prefers-reduced-motion` is enabled, cycling stops and the first phrase is shown statically with no animation
+
+## Accessibility
+
+### Reduced Motion
+
+The component checks `prefers-reduced-motion` via Motion's `useReducedMotion` hook. When `true`:
+
+- The interval timer does **not** start — the first phrase is shown statically
+- No motion is applied to the element
+- The text remains fully readable at all times
+
+The outer container uses `aria-live="polite"` so screen readers announce each phrase change as it cycles.
+
+## Props
+
+<AutoTypeTable path="../../packages/smoothui/components/fade-through/index.tsx" name="FadeThroughProps" />
diff --git a/apps/docs/content/docs/components/focus-blur-resolve.mdx b/apps/docs/content/docs/components/focus-blur-resolve.mdx
new file mode 100644
index 00000000..2cfaa2c4
--- /dev/null
+++ b/apps/docs/content/docs/components/focus-blur-resolve.mdx
@@ -0,0 +1,65 @@
+---
+title: Focus Blur Resolve
+description: A premium focus pull from heavy blur to crisp text. Whole-text entrance with blur, upward drift, and scale settle — ideal for hero headlines and section titles.
+icon: Type
+dependencies:
+  - motion.dev
+installer: focus-blur-resolve
+---
+
+## Features
+
+- Whole-text entrance that resolves from heavy blur (`14px`) to sharp in a single smooth motion
+- Subtle upward drift (`y: 14`) and scale settle (`scale: 1.01 → 1`) for a cinematic feel
+- Optional `delay` prop to sequence multiple lines
+- `triggerOnView` mode using `useInView` — fires once the element enters the viewport
+- Full `prefers-reduced-motion` support — renders instantly with no blur when motion is reduced
+
+## Usage
+
+```tsx
+import FocusBlurResolve from "@repo/smoothui/components/focus-blur-resolve";
+
+export default function Example() {
+  return (
+    <FocusBlurResolve className="font-bold text-5xl tracking-tight">
+      Clarity from chaos.
+    </FocusBlurResolve>
+  );
+}
+```
+
+## Scroll-triggered
+
+Use `triggerOnView` to play the animation only when the element scrolls into view:
+
+```tsx
+<FocusBlurResolve triggerOnView className="text-3xl font-semibold">
+  Revealed on scroll.
+</FocusBlurResolve>
+```
+
+## Sequenced lines
+
+Use `delay` to stagger multiple text lines:
+
+```tsx
+<FocusBlurResolve className="font-bold text-5xl">
+  Hero headline.
+</FocusBlurResolve>
+<FocusBlurResolve className="text-lg text-muted-foreground" delay={400}>
+  Supporting copy beneath it.
+</FocusBlurResolve>
+```
+
+## Accessibility
+
+### Reduced Motion
+
+`FocusBlurResolve` calls `useReducedMotion()` from `motion/react`. When the user has enabled **Reduce Motion** in their OS settings, the component renders at full opacity with no blur, scale, or movement — no animation plays. The transition duration is set to `0` so the change is instant.
+
+The outer `<span>` carries an `aria-label` equal to `children`, and the animated inner `<motion.span>` is marked `aria-hidden="true"`, so screen readers announce the text exactly once.
+
+## Props
+
+<AutoTypeTable path="../../packages/smoothui/components/focus-blur-resolve/index.tsx" name="FocusBlurResolveProps" />
diff --git a/apps/docs/content/docs/components/kinetic-center-build.mdx b/apps/docs/content/docs/components/kinetic-center-build.mdx
new file mode 100644
index 00000000..49040b82
--- /dev/null
+++ b/apps/docs/content/docs/components/kinetic-center-build.mdx
@@ -0,0 +1,29 @@
+---
+title: Kinetic Center Build
+description: Apple keynote-style word-by-word build — each new word enters from the right and pushes the line until the full phrase locks centered.
+icon: Type
+dependencies:
+  - motion.dev
+installer: kinetic-center-build
+---
+
+## Features
+
+- Word-by-word build with right-to-left entry and push reflow
+- Layout-animated centering as words are added
+- Soft blur entry and clean blur exit per word
+- Respects `prefers-reduced-motion`
+- Announces updates via `aria-live="polite"`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the full phrase appears at once and swaps instantly. The current phrase is announced via `aria-live="polite"`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/kinetic-center-build/index.tsx"
+  name="KineticCenterBuildProps"
+/>
diff --git a/apps/docs/content/docs/components/line-by-line-slide.mdx b/apps/docs/content/docs/components/line-by-line-slide.mdx
new file mode 100644
index 00000000..468ee11b
--- /dev/null
+++ b/apps/docs/content/docs/components/line-by-line-slide.mdx
@@ -0,0 +1,29 @@
+---
+title: Line-by-Line Slide
+description: Animated React per-line text reveal where each line slides in from the left with a staggered entrance — inspired by Apple landing page subheads, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: line-by-line-slide
+---
+
+## Features
+
+- Per-line slide-in from the left with staggered entrance (`cubic-bezier(0.22, 1, 0.36, 1)`)
+- Pass lines via `children` string with `\n` separators or the explicit `lines` prop
+- Configurable delay and per-line stagger
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no sliding motion. The full string is exposed to screen readers via `aria-label`, with the per-line spans `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/line-by-line-slide/index.tsx"
+  name="LineByLineSlideProps"
+/>
diff --git a/apps/docs/content/docs/components/mask-reveal-up.mdx b/apps/docs/content/docs/components/mask-reveal-up.mdx
new file mode 100644
index 00000000..655f319a
--- /dev/null
+++ b/apps/docs/content/docs/components/mask-reveal-up.mdx
@@ -0,0 +1,30 @@
+---
+title: Mask Reveal Up
+description: Animated React per-line text reveal with an upward masked motion — Apple's signature section-transition headline entrance, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: mask-reveal-up
+---
+
+## Features
+
+- Per-line masked reveal with upward drift and soft blur (`cubic-bezier(0.22, 1, 0.36, 1)`)
+- Overflow-hidden mask per line for a clean reveal effect
+- Pass lines via `children` string with `\n` separators or the explicit `lines` prop
+- Configurable delay and per-line stagger
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no movement. The full string is exposed to screen readers via `aria-label`, with the per-line spans `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/mask-reveal-up/index.tsx"
+  name="MaskRevealUpProps"
+/>
diff --git a/apps/docs/content/docs/components/meta.json b/apps/docs/content/docs/components/meta.json
index 4e4e0b23..28274719 100644
--- a/apps/docs/content/docs/components/meta.json
+++ b/apps/docs/content/docs/components/meta.json
@@ -41,15 +41,57 @@
     "dot-morph-button",
     "magnetic-button",
     "---Text---",
+    "blur-out-up",
+    "bottom-up-letters",
+    "depth-parallax-words",
+    "fade-through",
+    "focus-blur-resolve",
+    "kinetic-center-build",
+    "line-by-line-slide",
+    "mask-reveal-up",
+    "micro-scale-fade",
+    "per-character-rise",
+    "per-word-crossfade",
     "reveal-text",
+    "scale-down-fade",
     "scramble-hover",
     "scroll-reveal-paragraph",
+    "shared-axis-x",
+    "shared-axis-y",
+    "shared-axis-z",
+    "shimmer-sweep",
+    "shine-text",
+    "short-slide-down",
+    "short-slide-right",
+    "soft-blur-in",
+    "spring-scale-in",
+    "stagger-from-center",
+    "stagger-from-edges",
+    "top-down-letters",
     "typewriter-text",
     "wave-text",
     "---AI---",
     "agent-avatar",
     "ai-branch",
     "ai-input",
+    "---Transitions---",
+    "aperture-blur-transition",
+    "chroma-blur-transition",
+    "organic-merge-transition",
+    "prism-sweep-transition",
+    "radial-circles-transition",
+    "sdf-blob-transition",
+    "sdf-circle-transition",
+    "shader-reveal-circle-transition",
+    "shader-reveal-luma-transition",
+    "shader-reveal-noise-transition",
+    "shader-reveal-planetary-transition",
+    "shader-reveal-push-transition",
+    "shader-reveal-stripes-transition",
+    "shader-reveal-transition",
+    "shader-reveal-wipe-transition",
+    "shader-reveal-zoom-transition",
+    "warped-circle-transition",
     "---Others---",
     "animated-avatar-group",
     "product-card",
@@ -73,6 +115,7 @@
     "interactive-image-selector",
     "job-listing-component",
     "number-flow",
+    "photo-stack",
     "phototab",
     "power-off-slide",
     "price-flow",
diff --git a/apps/docs/content/docs/components/micro-scale-fade.mdx b/apps/docs/content/docs/components/micro-scale-fade.mdx
new file mode 100644
index 00000000..7e985f14
--- /dev/null
+++ b/apps/docs/content/docs/components/micro-scale-fade.mdx
@@ -0,0 +1,29 @@
+---
+title: Micro Scale Fade
+description: Animated React whole-text reveal with a calm, tiny scale pop — subtle premium polish for labels and headings, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: micro-scale-fade
+---
+
+## Features
+
+- Whole-text scale fade from 0.96 to 1 with opacity (`cubic-bezier(0.32, 0.72, 0, 1)`)
+- Calm micro-animation — not distracting, premium-feeling
+- Configurable delay
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no scaling. The `aria-label` on the wrapper ensures screen readers get the full text.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/micro-scale-fade/index.tsx"
+  name="MicroScaleFadeProps"
+/>
diff --git a/apps/docs/content/docs/components/organic-merge-transition.mdx b/apps/docs/content/docs/components/organic-merge-transition.mdx
new file mode 100644
index 00000000..53bec220
--- /dev/null
+++ b/apps/docs/content/docs/components/organic-merge-transition.mdx
@@ -0,0 +1,26 @@
+---
+title: Organic Merge Transition
+description: A soft-min SDF merge transition with two organic expanding shapes.
+icon: Merge
+dependencies:
+  - motion.dev
+installer: organic-merge-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Replicates the “Organic Merge” stage from the Codrops shader progression
+- Uses the shared SmoothUI SDF transition engine with reduced-motion fallback
+- Accessible: semantic content stays in the DOM and `onRest` still fires
+
+## Usage guidance
+
+Use it for meaningful route/state transitions where this shader grammar fits the product moment.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/organic-merge-transition/index.tsx"
+  name="OrganicMergeTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/per-character-rise.mdx b/apps/docs/content/docs/components/per-character-rise.mdx
new file mode 100644
index 00000000..ce8d1c7f
--- /dev/null
+++ b/apps/docs/content/docs/components/per-character-rise.mdx
@@ -0,0 +1,29 @@
+---
+title: Per Character Rise
+description: Animated React per-character text reveal where letters slide up from below with no blur — crisp, deliberate, and kinetic. Apple's clean tvOS-style entrance, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: per-character-rise
+---
+
+## Features
+
+- Per-character slide-up with zero blur — crisp and sharp
+- Apple tvOS / Fitness+ style kinetic reveal (`cubic-bezier(0.2, 0.8, 0.2, 1)`)
+- Configurable delay and per-character stagger
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no movement. The full string is exposed to screen readers via `aria-label`, with the per-character spans `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/per-character-rise/index.tsx"
+  name="PerCharacterRiseProps"
+/>
diff --git a/apps/docs/content/docs/components/per-word-crossfade.mdx b/apps/docs/content/docs/components/per-word-crossfade.mdx
new file mode 100644
index 00000000..773d956e
--- /dev/null
+++ b/apps/docs/content/docs/components/per-word-crossfade.mdx
@@ -0,0 +1,29 @@
+---
+title: Per Word Crossfade
+description: Animated React per-word text reveal with a calm fade and upward drift — keynote-style heading entrance, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: per-word-crossfade
+---
+
+## Features
+
+- Per-word fade-in with a subtle upward drift (8 px)
+- Calm keynote rhythm (`cubic-bezier(0.16, 1, 0.3, 1)`)
+- Configurable delay and per-word stagger
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no movement. The full string is exposed to screen readers via `aria-label`, with the per-word spans `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/per-word-crossfade/index.tsx"
+  name="PerWordCrossfadeProps"
+/>
diff --git a/apps/docs/content/docs/components/photo-stack.mdx b/apps/docs/content/docs/components/photo-stack.mdx
new file mode 100644
index 00000000..dbd37466
--- /dev/null
+++ b/apps/docs/content/docs/components/photo-stack.mdx
@@ -0,0 +1,81 @@
+---
+title: Photo Stack
+description: A draggable deck of photo cards. Drag or tap the top card to flick it to the back and reveal the next — with spring motion and reduced-motion support.
+icon: Images
+dependencies:
+  - motion.dev
+installer: photo-stack
+---
+
+## Features
+
+- Draggable top card — drag it in any direction and release to send it to the back
+- Tap or keyboard (Enter / Space) to cycle the deck
+- Layered stack with per-position offset, scale, and dim
+- Optional caption (name + role) over the front card
+- Spring transitions with `prefers-reduced-motion` fallback
+- Fully typed, headless of any specific image source
+
+## Accessibility
+
+### Keyboard Interactions
+
+| Key | Action |
+|-----|--------|
+| `Tab` | Focus the front card |
+| `Enter` / `Space` | Cycle the front card to the back |
+
+### Screen Reader
+
+- The front card exposes `role="button"` with an `aria-label` derived from the photo's name (or alt text).
+- Back cards are removed from the tab order (`tabIndex={-1}`) and their dim overlay is `aria-hidden`.
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, dragging is disabled and cards snap between positions with no spring animation (tap / keyboard still cycle the deck).
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/photo-stack/index.tsx"
+  name="PhotoStackProps"
+/>
+
+## Usage
+
+```tsx
+import PhotoStack from "@/components/photo-stack";
+
+export default function Example() {
+  const photos = [
+    { id: "1", src: "/people/mara.jpg", alt: "Mara Okonkwo", name: "Mara Okonkwo", role: "Design engineer" },
+    { id: "2", src: "/people/noa.jpg", alt: "Noa Bergström", name: "Noa Bergström", role: "Frontend lead" },
+    { id: "3", src: "/people/ines.jpg", alt: "Ines Duarte", name: "Ines Duarte", role: "Solo founder" },
+  ];
+
+  return <PhotoStack photos={photos} />;
+}
+```
+
+## Examples
+
+### Plain photos (no caption)
+
+```tsx
+<PhotoStack
+  photos={[
+    { id: "a", src: "/shots/one.jpg", alt: "Shot one" },
+    { id: "b", src: "/shots/two.jpg", alt: "Shot two" },
+    { id: "c", src: "/shots/three.jpg", alt: "Shot three" },
+  ]}
+/>
+```
+
+### React to the order changing
+
+```tsx
+<PhotoStack
+  photos={photos}
+  onCycle={(order) => console.log("new order", order)}
+/>
+```
diff --git a/apps/docs/content/docs/components/prism-sweep-transition.mdx b/apps/docs/content/docs/components/prism-sweep-transition.mdx
new file mode 100644
index 00000000..1b9e2c39
--- /dev/null
+++ b/apps/docs/content/docs/components/prism-sweep-transition.mdx
@@ -0,0 +1,35 @@
+---
+title: Prism Sweep Transition
+description: Premium React transition wrapper that swaps content under a custom faceted WebGL prism field — frame-level, persistent, and reduced-motion friendly.
+icon: Sparkles
+dependencies:
+  - motion.dev
+installer: prism-sweep-transition
+---
+
+## Features
+
+- Route/state transition wrapper triggered by a `transitionKey`
+- Custom faceted prism field rendered over the whole component frame with a persistent WebGL shader controller
+- Swaps the new content at the shader midpoint so the reveal lands under the crest
+- Direction controls for product-specific motion language
+- Accessible: honors `prefers-reduced-motion` and keeps semantic content in the DOM
+
+## Why it is different
+
+Product UI needs control, restraint, and graceful failure. Prism Sweep Transition uses a SmoothUI-specific faceted caustic shader, swaps content under the field crest, and contains the canvas inside the component frame instead of taking over the whole app.
+
+Use it sparingly for meaningful state changes: publishing, checkout completion, presentation mode changes, or section-level navigation. Avoid triggering it on passive interactions like hover, dropdowns, or every internal link.
+
+## Accessibility
+
+### Reduced Motion
+
+The component uses `useReducedMotion` from Motion. When reduced motion is preferred, content swaps immediately, the sweep is skipped, and `onRest` still fires so application logic stays consistent.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/prism-sweep-transition/index.tsx"
+  name="PrismSweepTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/radial-circles-transition.mdx b/apps/docs/content/docs/components/radial-circles-transition.mdx
new file mode 100644
index 00000000..0702ed44
--- /dev/null
+++ b/apps/docs/content/docs/components/radial-circles-transition.mdx
@@ -0,0 +1,26 @@
+---
+title: Radial Circles Transition
+description: A radial SDF circle pattern transition inspired by the Codrops radial circles step.
+icon: Orbit
+dependencies:
+  - motion.dev
+installer: radial-circles-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Replicates the “Radial Circles” stage from the Codrops shader progression
+- Uses the shared SmoothUI SDF transition engine with reduced-motion fallback
+- Accessible: semantic content stays in the DOM and `onRest` still fires
+
+## Usage guidance
+
+Use it for meaningful route/state transitions where this shader grammar fits the product moment.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/radial-circles-transition/index.tsx"
+  name="RadialCirclesTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/scale-down-fade.mdx b/apps/docs/content/docs/components/scale-down-fade.mdx
new file mode 100644
index 00000000..bdb3e91e
--- /dev/null
+++ b/apps/docs/content/docs/components/scale-down-fade.mdx
@@ -0,0 +1,29 @@
+---
+title: Scale Down Fade
+description: Animated React whole-text reveal with a subtle premium settle-in — the text enters slightly scaled up and settles to its natural size, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: scale-down-fade
+---
+
+## Features
+
+- Whole-text scale-down settle-in from scale 1.04 to 1 with opacity and a slight y drift (`cubic-bezier(0.22, 1, 0.36, 1)`)
+- Restrained, quiet motion — polished without being distracting
+- Configurable delay
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no scaling or movement. The `aria-label` on the wrapper ensures screen readers get the full text.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/scale-down-fade/index.tsx"
+  name="ScaleDownFadeProps"
+/>
diff --git a/apps/docs/content/docs/components/sdf-blob-transition.mdx b/apps/docs/content/docs/components/sdf-blob-transition.mdx
new file mode 100644
index 00000000..b5ea3382
--- /dev/null
+++ b/apps/docs/content/docs/components/sdf-blob-transition.mdx
@@ -0,0 +1,30 @@
+---
+title: SDF Blob Transition
+description: Frame-level WebGL transition that swaps content under soft-merged SDF circles with organic noise.
+icon: Blend
+dependencies:
+  - motion.dev
+installer: sdf-blob-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Soft-merged SDF circles inspired by shader image reveal techniques
+- Organic noise on the perimeter so the reveal feels alive without leaving residue
+- Accessible: honors `prefers-reduced-motion` and keeps semantic content in the DOM
+
+## Usage guidance
+
+Use it for launch moments, onboarding steps, checkout completion, or presentation state changes where an organic reveal fits the product language.
+
+## Accessibility
+
+When reduced motion is preferred, content swaps immediately and `onRest` still fires.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/sdf-blob-transition/index.tsx"
+  name="SdfBlobTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/sdf-circle-transition.mdx b/apps/docs/content/docs/components/sdf-circle-transition.mdx
new file mode 100644
index 00000000..d45921a8
--- /dev/null
+++ b/apps/docs/content/docs/components/sdf-circle-transition.mdx
@@ -0,0 +1,26 @@
+---
+title: SDF Circle Transition
+description: A clean SDF circle reveal based on the first Codrops shader step.
+icon: Circle
+dependencies:
+  - motion.dev
+installer: sdf-circle-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Replicates the “SDF Circle” stage from the Codrops shader progression
+- Uses the shared SmoothUI SDF transition engine with reduced-motion fallback
+- Accessible: semantic content stays in the DOM and `onRest` still fires
+
+## Usage guidance
+
+Use it for meaningful route/state transitions where this shader grammar fits the product moment.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/sdf-circle-transition/index.tsx"
+  name="SdfCircleTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/shader-reveal-circle-transition.mdx b/apps/docs/content/docs/components/shader-reveal-circle-transition.mdx
new file mode 100644
index 00000000..638162d3
--- /dev/null
+++ b/apps/docs/content/docs/components/shader-reveal-circle-transition.mdx
@@ -0,0 +1,26 @@
+---
+title: Circle Reveal Transition
+description: "Noisy circular reveal with radial interpolation."
+icon: CircleDot
+dependencies:
+  - motion.dev
+installer: shader-reveal-circle-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Adapts a shader image-transition technique into a SmoothUI frame transition
+- Preserves semantic React content and swaps at the shader midpoint
+- Accessible: honors `prefers-reduced-motion` and fires `onRest`
+
+## Usage guidance
+
+Use it for meaningful product state changes where a shader-led transition should feel intentional, not decorative. The component translates image-transition shader techniques into a frame-level overlay that can wrap arbitrary React content.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shader-reveal-circle-transition/index.tsx"
+  name="ShaderRevealCircleTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/shader-reveal-luma-transition.mdx b/apps/docs/content/docs/components/shader-reveal-luma-transition.mdx
new file mode 100644
index 00000000..c2c631d9
--- /dev/null
+++ b/apps/docs/content/docs/components/shader-reveal-luma-transition.mdx
@@ -0,0 +1,26 @@
+---
+title: Luma Ribbons Transition
+description: "Luminance-style ribbon displacement translated into a shader overlay."
+icon: Waves
+dependencies:
+  - motion.dev
+installer: shader-reveal-luma-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Adapts a shader image-transition technique into a SmoothUI frame transition
+- Preserves semantic React content and swaps at the shader midpoint
+- Accessible: honors `prefers-reduced-motion` and fires `onRest`
+
+## Usage guidance
+
+Use it for meaningful product state changes where a shader-led transition should feel intentional, not decorative. The component translates image-transition shader techniques into a frame-level overlay that can wrap arbitrary React content.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shader-reveal-luma-transition/index.tsx"
+  name="ShaderRevealLumaTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/shader-reveal-noise-transition.mdx b/apps/docs/content/docs/components/shader-reveal-noise-transition.mdx
new file mode 100644
index 00000000..6a6f91c7
--- /dev/null
+++ b/apps/docs/content/docs/components/shader-reveal-noise-transition.mdx
@@ -0,0 +1,26 @@
+---
+title: Noise Gate Transition
+description: "Noise threshold transition with an organic shader gate."
+icon: Hash
+dependencies:
+  - motion.dev
+installer: shader-reveal-noise-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Adapts a shader image-transition technique into a SmoothUI frame transition
+- Preserves semantic React content and swaps at the shader midpoint
+- Accessible: honors `prefers-reduced-motion` and fires `onRest`
+
+## Usage guidance
+
+Use it for meaningful product state changes where a shader-led transition should feel intentional, not decorative. The component translates image-transition shader techniques into a frame-level overlay that can wrap arbitrary React content.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shader-reveal-noise-transition/index.tsx"
+  name="ShaderRevealNoiseTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/shader-reveal-planetary-transition.mdx b/apps/docs/content/docs/components/shader-reveal-planetary-transition.mdx
new file mode 100644
index 00000000..b4883e71
--- /dev/null
+++ b/apps/docs/content/docs/components/shader-reveal-planetary-transition.mdx
@@ -0,0 +1,26 @@
+---
+title: Planetary Swirl Transition
+description: "Rotated displacement vectors with a planetary swirl feel."
+icon: Globe
+dependencies:
+  - motion.dev
+installer: shader-reveal-planetary-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Adapts a shader image-transition technique into a SmoothUI frame transition
+- Preserves semantic React content and swaps at the shader midpoint
+- Accessible: honors `prefers-reduced-motion` and fires `onRest`
+
+## Usage guidance
+
+Use it for meaningful product state changes where a shader-led transition should feel intentional, not decorative. The component translates image-transition shader techniques into a frame-level overlay that can wrap arbitrary React content.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shader-reveal-planetary-transition/index.tsx"
+  name="ShaderRevealPlanetaryTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/shader-reveal-push-transition.mdx b/apps/docs/content/docs/components/shader-reveal-push-transition.mdx
new file mode 100644
index 00000000..ca55cb16
--- /dev/null
+++ b/apps/docs/content/docs/components/shader-reveal-push-transition.mdx
@@ -0,0 +1,26 @@
+---
+title: Noise Push Transition
+description: "Procedural noise push and pull displacement."
+icon: ArrowRightLeft
+dependencies:
+  - motion.dev
+installer: shader-reveal-push-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Adapts a shader image-transition technique into a SmoothUI frame transition
+- Preserves semantic React content and swaps at the shader midpoint
+- Accessible: honors `prefers-reduced-motion` and fires `onRest`
+
+## Usage guidance
+
+Use it for meaningful product state changes where a shader-led transition should feel intentional, not decorative. The component translates image-transition shader techniques into a frame-level overlay that can wrap arbitrary React content.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shader-reveal-push-transition/index.tsx"
+  name="ShaderRevealPushTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/shader-reveal-stripes-transition.mdx b/apps/docs/content/docs/components/shader-reveal-stripes-transition.mdx
new file mode 100644
index 00000000..bba34720
--- /dev/null
+++ b/apps/docs/content/docs/components/shader-reveal-stripes-transition.mdx
@@ -0,0 +1,26 @@
+---
+title: Stripe Shutter Transition
+description: "Divided UV stripe displacement with diagonal motion."
+icon: ListOrdered
+dependencies:
+  - motion.dev
+installer: shader-reveal-stripes-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Adapts a shader image-transition technique into a SmoothUI frame transition
+- Preserves semantic React content and swaps at the shader midpoint
+- Accessible: honors `prefers-reduced-motion` and fires `onRest`
+
+## Usage guidance
+
+Use it for meaningful product state changes where a shader-led transition should feel intentional, not decorative. The component translates image-transition shader techniques into a frame-level overlay that can wrap arbitrary React content.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shader-reveal-stripes-transition/index.tsx"
+  name="ShaderRevealStripesTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/shader-reveal-transition.mdx b/apps/docs/content/docs/components/shader-reveal-transition.mdx
new file mode 100644
index 00000000..06205670
--- /dev/null
+++ b/apps/docs/content/docs/components/shader-reveal-transition.mdx
@@ -0,0 +1,30 @@
+---
+title: Shader Reveal Transition
+description: A shared WebGL transition engine with eight shader-driven reveal variants for frame-level state changes.
+icon: Shapes
+dependencies:
+  - motion.dev
+installer: shader-reveal-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Eight built-in shader variants: `noise`, `zoom`, `circle`, `wipe`, `luma`, `planetary`, `stripes`, `push`
+- Preserves semantic React content and swaps at the shader midpoint
+- Accessible: honors `prefers-reduced-motion` and fires `onRest`
+
+## Usage guidance
+
+Use it for meaningful product state changes where a shader-led transition should feel intentional, not decorative. Pick a `variant` that matches the moment — for example `circle` for a focal reveal, or `stripes` for a sharper, more mechanical cut. The eight single-purpose transition components (`ShaderRevealCircleTransition`, `ShaderRevealNoiseTransition`, etc.) wrap this same engine with a fixed variant if you don't need to switch variants at runtime.
+
+## Accessibility
+
+When reduced motion is preferred, content swaps immediately and `onRest` still fires.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shader-reveal-transition/index.tsx"
+  name="ShaderRevealTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/shader-reveal-wipe-transition.mdx b/apps/docs/content/docs/components/shader-reveal-wipe-transition.mdx
new file mode 100644
index 00000000..e87ba21e
--- /dev/null
+++ b/apps/docs/content/docs/components/shader-reveal-wipe-transition.mdx
@@ -0,0 +1,26 @@
+---
+title: Displacement Wipe Transition
+description: "Displacement-noise horizontal wipe with a sharp eased edge."
+icon: MoveHorizontal
+dependencies:
+  - motion.dev
+installer: shader-reveal-wipe-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Adapts a shader image-transition technique into a SmoothUI frame transition
+- Preserves semantic React content and swaps at the shader midpoint
+- Accessible: honors `prefers-reduced-motion` and fires `onRest`
+
+## Usage guidance
+
+Use it for meaningful product state changes where a shader-led transition should feel intentional, not decorative. The component translates image-transition shader techniques into a frame-level overlay that can wrap arbitrary React content.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shader-reveal-wipe-transition/index.tsx"
+  name="ShaderRevealWipeTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/shader-reveal-zoom-transition.mdx b/apps/docs/content/docs/components/shader-reveal-zoom-transition.mdx
new file mode 100644
index 00000000..ccbb730d
--- /dev/null
+++ b/apps/docs/content/docs/components/shader-reveal-zoom-transition.mdx
@@ -0,0 +1,26 @@
+---
+title: Zoom Wash Transition
+description: "Vertical-progress zoom wash translated into a frame transition."
+icon: RefreshCw
+dependencies:
+  - motion.dev
+installer: shader-reveal-zoom-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Adapts a shader image-transition technique into a SmoothUI frame transition
+- Preserves semantic React content and swaps at the shader midpoint
+- Accessible: honors `prefers-reduced-motion` and fires `onRest`
+
+## Usage guidance
+
+Use it for meaningful product state changes where a shader-led transition should feel intentional, not decorative. The component translates image-transition shader techniques into a frame-level overlay that can wrap arbitrary React content.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shader-reveal-zoom-transition/index.tsx"
+  name="ShaderRevealZoomTransitionProps"
+/>
diff --git a/apps/docs/content/docs/components/shared-axis-x.mdx b/apps/docs/content/docs/components/shared-axis-x.mdx
new file mode 100644
index 00000000..cf4a55d6
--- /dev/null
+++ b/apps/docs/content/docs/components/shared-axis-x.mdx
@@ -0,0 +1,28 @@
+---
+title: Shared Axis X
+description: Horizontal shared-axis phrase transition inspired by Google Material — outgoing phrase slides left as the next slides in from the right.
+icon: Type
+dependencies:
+  - motion.dev
+installer: shared-axis-x
+---
+
+## Features
+
+- Smooth horizontal enter/exit transitions between cycling phrases
+- Material-inspired directional continuity
+- Respects `prefers-reduced-motion`
+- Announces updates via `aria-live="polite"`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, phrases swap instantly with no translation or scale. The current phrase is announced via `aria-live="polite"`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shared-axis-x/index.tsx"
+  name="SharedAxisXProps"
+/>
diff --git a/apps/docs/content/docs/components/shared-axis-y.mdx b/apps/docs/content/docs/components/shared-axis-y.mdx
new file mode 100644
index 00000000..fe639484
--- /dev/null
+++ b/apps/docs/content/docs/components/shared-axis-y.mdx
@@ -0,0 +1,28 @@
+---
+title: Word Cut Staircase
+description: Per-word hard-cut staircase transition — each word flips in and out with stepped timing for sharp, editorial phrase swaps.
+icon: Type
+dependencies:
+  - motion.dev
+installer: shared-axis-y
+---
+
+## Features
+
+- Hard-cut per-word opacity flips with staircase stagger timing
+- Sharp, editorial feel with no easing curves
+- Respects `prefers-reduced-motion`
+- Announces updates via `aria-live="polite"`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, phrases swap instantly with no stagger. The current phrase is announced via `aria-live="polite"`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shared-axis-y/index.tsx"
+  name="SharedAxisYProps"
+/>
diff --git a/apps/docs/content/docs/components/shared-axis-z.mdx b/apps/docs/content/docs/components/shared-axis-z.mdx
new file mode 100644
index 00000000..d36d579b
--- /dev/null
+++ b/apps/docs/content/docs/components/shared-axis-z.mdx
@@ -0,0 +1,28 @@
+---
+title: Shared Axis Z
+description: Scale-based phrase transition inspired by Google Material shared axis (Z) — incoming text scales up from depth while the outgoing phrase scales out and fades.
+icon: Type
+dependencies:
+  - motion.dev
+installer: shared-axis-z
+---
+
+## Features
+
+- Scale and blur enter/exit between cycling phrases
+- Communicates depth and focus shift through the Z axis
+- Respects `prefers-reduced-motion`
+- Announces updates via `aria-live="polite"`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, phrases swap instantly with no scale or blur. The current phrase is announced via `aria-live="polite"`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shared-axis-z/index.tsx"
+  name="SharedAxisZProps"
+/>
diff --git a/apps/docs/content/docs/components/shimmer-sweep.mdx b/apps/docs/content/docs/components/shimmer-sweep.mdx
new file mode 100644
index 00000000..c791a1de
--- /dev/null
+++ b/apps/docs/content/docs/components/shimmer-sweep.mdx
@@ -0,0 +1,29 @@
+---
+title: Shimmer Sweep
+description: Animated React whole-text entrance with a left-to-center slide and blur dissolve — a subtle sweep across a clean headline, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: shimmer-sweep
+---
+
+## Features
+
+- Whole-text fade-in with a left-to-center slide and blur dissolve
+- Smooth ease-out curve (`cubic-bezier(0.22, 1, 0.36, 1)`)
+- Configurable delay
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no slide or blur. The full string is exposed to screen readers via `aria-label`, with the animated span `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shimmer-sweep/index.tsx"
+  name="ShimmerSweepProps"
+/>
diff --git a/apps/docs/content/docs/components/shine-text.mdx b/apps/docs/content/docs/components/shine-text.mdx
new file mode 100644
index 00000000..ecffb1a7
--- /dev/null
+++ b/apps/docs/content/docs/components/shine-text.mdx
@@ -0,0 +1,29 @@
+---
+title: Shine Text
+description: Animated React text with a metallic light sweep gliding across the letters on a loop, built with Motion and a clipped moving gradient.
+icon: Type
+dependencies:
+  - motion.dev
+installer: shine-text
+---
+
+## Features
+
+- A bright highlight band sweeps across the text on a continuous loop
+- Clipped moving gradient (`background-clip: text`) — works on any string
+- Configurable `duration`, `repeatDelay`, `baseColor`, and `shineColor`
+- Theme-aware defaults (muted base, foreground shine)
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders statically in `baseColor` with no sweeping gradient.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/shine-text/index.tsx"
+  name="ShineTextProps"
+/>
diff --git a/apps/docs/content/docs/components/short-slide-down.mdx b/apps/docs/content/docs/components/short-slide-down.mdx
new file mode 100644
index 00000000..076efad7
--- /dev/null
+++ b/apps/docs/content/docs/components/short-slide-down.mdx
@@ -0,0 +1,30 @@
+---
+title: Short Slide Down
+description: Each new word drops in from above into its own line and pushes the stack downward until a centered multi-line composition locks in place.
+icon: Type
+dependencies:
+  - motion.dev
+installer: short-slide-down
+---
+
+## Features
+
+- Word-by-word vertical build with top-entry and downward push
+- Each word occupies its own centered line
+- Layout-animated stacking as words are added
+- Soft blur entry and bottom-exit per word
+- Respects `prefers-reduced-motion`
+- Announces updates via `aria-live="polite"`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the full phrase appears at once and swaps instantly. The current phrase is announced via `aria-live="polite"`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/short-slide-down/index.tsx"
+  name="ShortSlideDownProps"
+/>
diff --git a/apps/docs/content/docs/components/short-slide-right.mdx b/apps/docs/content/docs/components/short-slide-right.mdx
new file mode 100644
index 00000000..a7bd2f3d
--- /dev/null
+++ b/apps/docs/content/docs/components/short-slide-right.mdx
@@ -0,0 +1,29 @@
+---
+title: Short Slide Right
+description: The whole phrase glides in from the left as one compact move while words reveal in sequence through opacity — Keynote-style editorial restraint.
+icon: Type
+dependencies:
+  - motion.dev
+installer: short-slide-right
+---
+
+## Features
+
+- Shared horizontal container translation with per-word opacity stagger
+- Compact travel distance keeps motion editorial, not swishy
+- Clean exit with slight rightward drift and blur
+- Respects `prefers-reduced-motion`
+- Announces updates via `aria-live="polite"`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, phrases swap instantly with no translation or opacity stagger. The current phrase is announced via `aria-live="polite"`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/short-slide-right/index.tsx"
+  name="ShortSlideRightProps"
+/>
diff --git a/apps/docs/content/docs/components/soft-blur-in.mdx b/apps/docs/content/docs/components/soft-blur-in.mdx
new file mode 100644
index 00000000..722b5d70
--- /dev/null
+++ b/apps/docs/content/docs/components/soft-blur-in.mdx
@@ -0,0 +1,29 @@
+---
+title: Soft Blur In
+description: Animated React per-character text reveal with a gentle blur and upward motion — Apple's signature hero-title entrance, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: soft-blur-in
+---
+
+## Features
+
+- Per-character fade-in with a soft blur and upward drift
+- Apple keynote-style hero reveal (`cubic-bezier(0.22, 1, 0.36, 1)`)
+- Configurable delay and per-character stagger
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no blur or movement. The full string is exposed to screen readers via `aria-label`, with the per-character spans `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/soft-blur-in/index.tsx"
+  name="SoftBlurInProps"
+/>
diff --git a/apps/docs/content/docs/components/spring-scale-in.mdx b/apps/docs/content/docs/components/spring-scale-in.mdx
new file mode 100644
index 00000000..af2e7090
--- /dev/null
+++ b/apps/docs/content/docs/components/spring-scale-in.mdx
@@ -0,0 +1,29 @@
+---
+title: Spring Scale In
+description: Animated React per-word text reveal with a soft overshoot scale — iOS app icon-style pop, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: spring-scale-in
+---
+
+## Features
+
+- Per-word scale-in with a soft overshoot (`cubic-bezier(0.34, 1.56, 0.64, 1)`)
+- iOS home screen / Dock-inspired bounce pop
+- Configurable delay and per-word stagger
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no scale animation. The full string is exposed to screen readers via `aria-label`, with the per-word spans `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/spring-scale-in/index.tsx"
+  name="SpringScaleInProps"
+/>
diff --git a/apps/docs/content/docs/components/stagger-from-center.mdx b/apps/docs/content/docs/components/stagger-from-center.mdx
new file mode 100644
index 00000000..f40eff3d
--- /dev/null
+++ b/apps/docs/content/docs/components/stagger-from-center.mdx
@@ -0,0 +1,30 @@
+---
+title: Stagger From Center
+description: Animated React per-character text reveal where characters emerge from the center outward, emphasizing the keyword core. Built with Motion for product hero typography.
+icon: Type
+dependencies:
+  - motion.dev
+installer: stagger-from-center
+---
+
+## Features
+
+- Per-character center-out reveal with subtle blur and upward drift
+- Delay computed by distance from center — not linear index
+- Emphasizes the core of the word for product hero use cases
+- Configurable delay and per-step stagger
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no blur or movement. The full string is exposed to screen readers via `aria-label`, with the per-character spans `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/stagger-from-center/index.tsx"
+  name="StaggerFromCenterProps"
+/>
diff --git a/apps/docs/content/docs/components/stagger-from-edges.mdx b/apps/docs/content/docs/components/stagger-from-edges.mdx
new file mode 100644
index 00000000..4d7241b8
--- /dev/null
+++ b/apps/docs/content/docs/components/stagger-from-edges.mdx
@@ -0,0 +1,30 @@
+---
+title: Stagger From Edges
+description: Animated React per-character text reveal where characters start from both edges and converge toward the center. Built with Motion for modern product hero typography.
+icon: Type
+dependencies:
+  - motion.dev
+installer: stagger-from-edges
+---
+
+## Features
+
+- Per-character edges-in reveal with subtle blur and upward drift
+- Delay computed by distance from the nearest edge — characters converge to center
+- Directional emphasis for modern product hero systems
+- Configurable delay and per-step stagger
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no blur or movement. The full string is exposed to screen readers via `aria-label`, with the per-character spans `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/stagger-from-edges/index.tsx"
+  name="StaggerFromEdgesProps"
+/>
diff --git a/apps/docs/content/docs/components/top-down-letters.mdx b/apps/docs/content/docs/components/top-down-letters.mdx
new file mode 100644
index 00000000..cd56c8ce
--- /dev/null
+++ b/apps/docs/content/docs/components/top-down-letters.mdx
@@ -0,0 +1,29 @@
+---
+title: Top Down Letters
+description: Animated React per-character text reveal where letters descend from above in a pronounced staircase, one symbol at a time, with zero blur. The top-down counterpart to Bottom Up Letters, built with Motion.
+icon: Type
+dependencies:
+  - motion.dev
+installer: top-down-letters
+---
+
+## Features
+
+- Per-character top-down staircase reveal with zero blur
+- Pronounced staging at 88ms stagger for deliberate, one-letter-at-a-time rhythm
+- Configurable delay and per-character stagger
+- Optional scroll-trigger via `triggerOnView`
+- Accessible: respects `prefers-reduced-motion`
+
+## Accessibility
+
+### Reduced Motion
+
+Respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no movement. The full string is exposed to screen readers via `aria-label`, with the per-character spans `aria-hidden`.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/top-down-letters/index.tsx"
+  name="TopDownLettersProps"
+/>
diff --git a/apps/docs/content/docs/components/warped-circle-transition.mdx b/apps/docs/content/docs/components/warped-circle-transition.mdx
new file mode 100644
index 00000000..63933acd
--- /dev/null
+++ b/apps/docs/content/docs/components/warped-circle-transition.mdx
@@ -0,0 +1,26 @@
+---
+title: Warped Circle Transition
+description: A wavy perimeter circle reveal inspired by the Codrops circle warping step.
+icon: CircleDot
+dependencies:
+  - motion.dev
+installer: warped-circle-transition
+---
+
+## Features
+
+- Persistent WebGL transition wrapper triggered by a `transitionKey`
+- Replicates the “Warped Circle” stage from the Codrops shader progression
+- Uses the shared SmoothUI SDF transition engine with reduced-motion fallback
+- Accessible: semantic content stays in the DOM and `onRest` still fires
+
+## Usage guidance
+
+Use it for meaningful route/state transitions where this shader grammar fits the product moment.
+
+## Props
+
+<AutoTypeTable
+  path="../../packages/smoothui/components/warped-circle-transition/index.tsx"
+  name="WarpedCircleTransitionProps"
+/>
diff --git a/apps/docs/content/docs/guides/accessibility.mdx b/apps/docs/content/docs/guides/accessibility.mdx
index 3ce88502..7bbed153 100644
--- a/apps/docs/content/docs/guides/accessibility.mdx
+++ b/apps/docs/content/docs/guides/accessibility.mdx
@@ -1,7 +1,6 @@
 ---
 title: Accessibility
 description: Accessibility compliance matrix for all interactive SmoothUI components covering keyboard support, ARIA roles, screen reader behavior, and reduced motion.
-icon: Accessibility
 ---
 
 ## Overview
diff --git a/apps/docs/content/docs/guides/ai-integration.mdx b/apps/docs/content/docs/guides/ai-integration.mdx
index 380ce4b1..61e8298e 100644
--- a/apps/docs/content/docs/guides/ai-integration.mdx
+++ b/apps/docs/content/docs/guides/ai-integration.mdx
@@ -1,7 +1,6 @@
 ---
 title: AI Integration
 description: SmoothUI is built for AI-assisted development. Discover components via MCP, REST API, and machine-readable catalogs.
-icon: Sparkles
 ---
 
 # AI Integration
diff --git a/apps/docs/content/docs/guides/animated-components.mdx b/apps/docs/content/docs/guides/animated-components.mdx
index d580f594..8a020e0f 100644
--- a/apps/docs/content/docs/guides/animated-components.mdx
+++ b/apps/docs/content/docs/guides/animated-components.mdx
@@ -1,7 +1,6 @@
 ---
 title: Animated React Components
 description: 50+ animated React components built with Motion (Framer Motion) and GSAP. Smooth hover effects, transitions, and interactive UI.
-icon: Sparkles
 ---
 
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
diff --git a/apps/docs/content/docs/guides/animation-best-practices.mdx b/apps/docs/content/docs/guides/animation-best-practices.mdx
index 7911a4f5..74527810 100644
--- a/apps/docs/content/docs/guides/animation-best-practices.mdx
+++ b/apps/docs/content/docs/guides/animation-best-practices.mdx
@@ -1,7 +1,6 @@
 ---
 title: Animation Best Practices
 description: Master React animations with Motion (Framer Motion) — performance tips, accessibility patterns, and techniques for smooth 60fps UIs.
-icon: Sparkles
 ---
 
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
diff --git a/apps/docs/content/docs/guides/api.mdx b/apps/docs/content/docs/guides/api.mdx
index f17c89f1..440110fd 100644
--- a/apps/docs/content/docs/guides/api.mdx
+++ b/apps/docs/content/docs/guides/api.mdx
@@ -1,7 +1,6 @@
 ---
 title: REST API
 description: Discover, search, and retrieve SmoothUI components and blocks programmatically. Designed for developers and AI agents.
-icon: Globe
 ---
 
 # REST API
diff --git a/apps/docs/content/docs/guides/astro.mdx b/apps/docs/content/docs/guides/astro.mdx
index 065a893e..f80acc5f 100644
--- a/apps/docs/content/docs/guides/astro.mdx
+++ b/apps/docs/content/docs/guides/astro.mdx
@@ -1,7 +1,6 @@
 ---
 title: Astro Integration
 description: Learn how to use SmoothUI animated React components in Astro projects using islands architecture, Tailwind CSS 4, and Motion.
-icon: Rocket
 ---
 
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
diff --git a/apps/docs/content/docs/guides/changelog.mdx b/apps/docs/content/docs/guides/changelog.mdx
index 77b548d7..5ddc7738 100644
--- a/apps/docs/content/docs/guides/changelog.mdx
+++ b/apps/docs/content/docs/guides/changelog.mdx
@@ -1,7 +1,6 @@
 ---
 title: Changelog
 description: View the release notes and updates for SmoothUI. Stay up to date with the latest changes in React components, TailwindCSS styles, and animations.
-icon: History
 ---
 
 > This page is a curated highlight reel of major SmoothUI releases. For the
@@ -9,6 +8,36 @@ icon: History
 > [GitHub Releases](https://github.com/educlopez/smoothui/releases) or
 > [`CHANGELOG.md`](https://github.com/educlopez/smoothui/blob/main/CHANGELOG.md).
 
+## 3.5.0
+
+<ChangelogEntry date="Jun 11, 2026" version="3.5.0" title="Theme Studio, Installable Themes & Accessibility">
+
+### Theme Studio
+
+- New **[Theme Studio](/themes)**: a draggable, infinite-canvas board previewing all 70 component demos with your theme applied live
+- Dialkit-style inspector with palette, light/dark, font, neutral tint, a continuous radius scrubber, and an accent lightness scrubber
+- Component search and one-click board re-centering
+
+### Installable Themes & Presets
+
+- Six **`registry:theme`** items (`theme-candy` … `theme-green`) installable in any shadcn project — full token set, light and dark, Radix and Base UI compatible
+- **SmoothUI presets**: shareable codes (`s1.…`) that round-trip the entire studio state via URL, and install as on-the-fly custom themes through `theme-custom-<code>.json`
+- Per-palette [shadcn/create](https://ui.shadcn.com/create) preset mapping, labeled as approximation
+
+### Accessibility & Quality
+
+- **100% `prefers-reduced-motion` compliance**: every animated block now renders statically under reduced motion (WCAG 2.1 SC 2.3.3)
+- Fixed real accessibility violations caught by new tests: unlabeled logo links, unlabeled carousel buttons, invalid `<dl>` structure
+- All images across the library are now non-draggable, so drag interactions never fight browser ghost-drags
+
+### Registry & Infrastructure
+
+- Registry content rewriting: installed components and blocks now ship with fully resolvable imports (no more workspace specifiers leaking)
+- Blocks correctly typed as `registry:block`; new `lib` (animation constants) and `data` items; AI **skill** item installable at `/r/skill.json`
+- Test suite grew from 106 to 186 tests (every block and component covered) with coverage gates in CI, plus typecheck and registry-validation CI jobs
+
+</ChangelogEntry>
+
 ## 3.4.0
 
 <ChangelogEntry date="Mar 7, 2026" version="3.4.0" title="AI-First Developer Experience">
diff --git a/apps/docs/content/docs/guides/design-principles.mdx b/apps/docs/content/docs/guides/design-principles.mdx
index 5a7f1429..eb87390c 100644
--- a/apps/docs/content/docs/guides/design-principles.mdx
+++ b/apps/docs/content/docs/guides/design-principles.mdx
@@ -1,7 +1,6 @@
 ---
 title: Design Principles
 description: Explore SmoothUI's design principles including theming, accessibility, animation standards, and Tailwind CSS customization options.
-icon: Lightbulb
 ---
 
 ## Design Philosophy
@@ -196,8 +195,8 @@ Add this CSS to your global styles to enable the full SmoothUI design system:
   --color-smooth-950: oklch(54.17% 0 0);
   --color-smooth-1000: oklch(20.46% 0 0);
   --border: var(--color-smooth-300);
-  --text-primary: var(--color-smooth-200);
-  --text-quaternary: var(--color-smooth-1000);
+  --shimmer-highlight: var(--color-smooth-200);
+  --shimmer-base: var(--color-smooth-1000);
   --radius: 0.625rem;
 }
 
@@ -215,8 +214,8 @@ Add this CSS to your global styles to enable the full SmoothUI design system:
   --color-smooth-950: oklch(70.58% 0 0);
   --color-smooth-1000: oklch(94.61% 0 0);
   --border: var(--color-smooth-300);
-  --text-primary: var(--color-smooth-200);
-  --text-quaternary: var(--color-smooth-1000);
+  --shimmer-highlight: var(--color-smooth-200);
+  --shimmer-base: var(--color-smooth-1000);
 }
 
 /* Component NumberFlow */
@@ -291,22 +290,22 @@ Add this CSS to your global styles to enable the full SmoothUI design system:
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-name: loading-shimmer;
-    background: var(--text-quaternary)
+    background: var(--shimmer-base)
       gradient(
         linear,
         100% 0,
         0 0,
-        from(var(--text-quaternary)),
-        color-stop(0.5, var(--text-primary)),
-        to(var(--text-quaternary))
+        from(var(--shimmer-base)),
+        color-stop(0.5, var(--shimmer-highlight)),
+        to(var(--shimmer-base))
       );
-    background: var(--text-quaternary) -webkit-gradient(
+    background: var(--shimmer-base) -webkit-gradient(
         linear,
         100% 0,
         0 0,
-        from(var(--text-quaternary)),
-        color-stop(0.5, var(--text-primary)),
-        to(var(--text-quaternary))
+        from(var(--shimmer-base)),
+        color-stop(0.5, var(--shimmer-highlight)),
+        to(var(--shimmer-base))
       );
     background-clip: text;
     -webkit-background-clip: text;
@@ -319,7 +318,7 @@ Add this CSS to your global styles to enable the full SmoothUI design system:
     background-position: -100% top;
   }
   .loading-shimmer:hover {
-    -webkit-text-fill-color: var(--text-quaternary);
+    -webkit-text-fill-color: var(--shimmer-base);
     animation: none;
     background: transparent;
   }
diff --git a/apps/docs/content/docs/guides/getting-started.mdx b/apps/docs/content/docs/guides/getting-started.mdx
index 1b3e2260..fea02b52 100644
--- a/apps/docs/content/docs/guides/getting-started.mdx
+++ b/apps/docs/content/docs/guides/getting-started.mdx
@@ -1,7 +1,6 @@
 ---
 title: Getting Started
 description: Get up and running with SmoothUI in your React project in under 5 minutes.
-icon: Rocket
 ---
 
 ## Prerequisites
diff --git a/apps/docs/content/docs/guides/hooks.mdx b/apps/docs/content/docs/guides/hooks.mdx
index de3a4f88..db621d7b 100644
--- a/apps/docs/content/docs/guides/hooks.mdx
+++ b/apps/docs/content/docs/guides/hooks.mdx
@@ -1,7 +1,6 @@
 ---
 title: React Hooks
 description: SmoothUI React hooks for responsive design and device detection. useIsMobile hook for mobile breakpoint detection with SSR support and real-time updates.
-icon: Code
 ---
 
 ## Overview
diff --git a/apps/docs/content/docs/guides/index.mdx b/apps/docs/content/docs/guides/index.mdx
index 07bfafa4..eed149d0 100644
--- a/apps/docs/content/docs/guides/index.mdx
+++ b/apps/docs/content/docs/guides/index.mdx
@@ -1,7 +1,6 @@
 ---
 title: Introduction
 description: SmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, Motion, and GSAP.
-icon: Album
 ---
 
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
diff --git a/apps/docs/content/docs/guides/installation.mdx b/apps/docs/content/docs/guides/installation.mdx
index 2dc3ba43..c8da485a 100644
--- a/apps/docs/content/docs/guides/installation.mdx
+++ b/apps/docs/content/docs/guides/installation.mdx
@@ -1,7 +1,6 @@
 ---
 title: Installation
 description: Learn how to install SmoothUI components using the SmoothUI CLI, shadcn CLI, or manual installation methods.
-icon: Download
 ---
 
 <FeatureCard title="Framework Integration Guides" variant="info">
diff --git a/apps/docs/content/docs/guides/mcp.mdx b/apps/docs/content/docs/guides/mcp.mdx
index 46b730c2..1a97d4d2 100644
--- a/apps/docs/content/docs/guides/mcp.mdx
+++ b/apps/docs/content/docs/guides/mcp.mdx
@@ -1,7 +1,6 @@
 ---
 title: MCP Server
 description: Enable AI assistants to discover and install SmoothUI components via MCP server integration with the shadcn-compatible registry.
-icon: Bot
 ---
 
 # MCP Server
diff --git a/apps/docs/content/docs/guides/meta.json b/apps/docs/content/docs/guides/meta.json
index a04571b3..827dc252 100644
--- a/apps/docs/content/docs/guides/meta.json
+++ b/apps/docs/content/docs/guides/meta.json
@@ -1,7 +1,6 @@
 {
   "title": "Guides",
   "description": "Learn how to use SmoothUI components and blocks",
-  "icon": "Book",
   "root": true,
   "pages": [
     "---Guide---",
@@ -16,6 +15,7 @@
     "remix",
     "tanstack-start",
     "vite",
+    "themes",
     "accessibility",
     "migration-from-shadcn",
     "---Reference---",
diff --git a/apps/docs/content/docs/guides/migration-from-shadcn.mdx b/apps/docs/content/docs/guides/migration-from-shadcn.mdx
index 79dbd904..0ec3ee52 100644
--- a/apps/docs/content/docs/guides/migration-from-shadcn.mdx
+++ b/apps/docs/content/docs/guides/migration-from-shadcn.mdx
@@ -1,7 +1,6 @@
 ---
 title: Migration from shadcn
 description: Step-by-step guide to replacing shadcn/ui components with animated SmoothUI equivalents.
-icon: ArrowRightLeft
 ---
 
 ## Overview
diff --git a/apps/docs/content/docs/guides/nextjs.mdx b/apps/docs/content/docs/guides/nextjs.mdx
index acda0687..39aec0c6 100644
--- a/apps/docs/content/docs/guides/nextjs.mdx
+++ b/apps/docs/content/docs/guides/nextjs.mdx
@@ -1,7 +1,6 @@
 ---
 title: Next.js
 description: Learn how to use SmoothUI animated React components in Next.js projects with App Router, Tailwind CSS 4, and Motion.
-icon: Globe
 ---
 
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
diff --git a/apps/docs/content/docs/guides/remix.mdx b/apps/docs/content/docs/guides/remix.mdx
index 16ffa49c..3ab2133c 100644
--- a/apps/docs/content/docs/guides/remix.mdx
+++ b/apps/docs/content/docs/guides/remix.mdx
@@ -1,7 +1,6 @@
 ---
 title: Remix
 description: Learn how to use SmoothUI animated React components in Remix and React Router v7 projects with SSR support, Tailwind CSS 4, and Motion.
-icon: RefreshCw
 ---
 
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
diff --git a/apps/docs/content/docs/guides/shadcn-alternative.mdx b/apps/docs/content/docs/guides/shadcn-alternative.mdx
index 65ba3cc2..60c4274d 100644
--- a/apps/docs/content/docs/guides/shadcn-alternative.mdx
+++ b/apps/docs/content/docs/guides/shadcn-alternative.mdx
@@ -1,7 +1,6 @@
 ---
 title: SmoothUI vs shadcn/ui
 description: SmoothUI adds smooth Motion and GSAP animations to the shadcn/ui ecosystem. Compare features and discover animated React components.
-icon: Sparkles
 ---
 
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
diff --git a/apps/docs/content/docs/guides/sponsors.mdx b/apps/docs/content/docs/guides/sponsors.mdx
index 870f02a3..0a53e2bb 100644
--- a/apps/docs/content/docs/guides/sponsors.mdx
+++ b/apps/docs/content/docs/guides/sponsors.mdx
@@ -1,7 +1,6 @@
 ---
 title: Sponsors
 description: Thank you to our amazing sponsors who support SmoothUI. Discover the tools and services that help make this project possible.
-icon: Heart
 ---
 
 
diff --git a/apps/docs/content/docs/guides/tanstack-start.mdx b/apps/docs/content/docs/guides/tanstack-start.mdx
index c47e7199..4008025f 100644
--- a/apps/docs/content/docs/guides/tanstack-start.mdx
+++ b/apps/docs/content/docs/guides/tanstack-start.mdx
@@ -1,7 +1,6 @@
 ---
 title: TanStack Start
 description: Learn how to use SmoothUI animated React components in TanStack Start projects with type-safe routing, streaming SSR, Tailwind CSS 4, and Motion.
-icon: Triangle
 ---
 
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
diff --git a/apps/docs/content/docs/guides/themes.mdx b/apps/docs/content/docs/guides/themes.mdx
new file mode 100644
index 00000000..435d3685
--- /dev/null
+++ b/apps/docs/content/docs/guides/themes.mdx
@@ -0,0 +1,65 @@
+---
+title: Themes
+description: Installable SmoothUI color themes for any shadcn project, plus the Theme Studio — customize palette, radius, accent, font and neutral tint, then install or share your own preset.
+---
+
+SmoothUI ships complete color themes you can install in **any shadcn project** with one command — light and dark mode included, compatible with both Radix UI and Base UI primitives.
+
+## Quick start
+
+Pick a palette and install it. The CLI writes every CSS variable into your global stylesheet:
+
+```bash
+npx shadcn@latest add https://smoothui.dev/r/theme-candy.json
+```
+
+Available themes: `theme-candy`, `theme-indigo`, `theme-blue`, `theme-red`, `theme-orange`, `theme-green`.
+
+Each theme defines the full token set — backgrounds, foregrounds, borders, inputs, ring, charts, sidebar — using SmoothUI's smooth neutral scale with the palette's accent, in both `:root` and `.dark`.
+
+## Theme Studio
+
+[smoothui.dev/themes](https://smoothui.dev/themes) is an interactive studio: a draggable board previewing the entire component registry with your theme applied live.
+
+- **Theme** — six accent palettes.
+- **Mode** — preview light or dark.
+- **Font** — Sans, Serif or Mono, applied to the preview and the exported CSS (`--font-sans`).
+- **Tint** — re-tint the neutral scale: pure Neutral, Warm or Cool.
+- **Radius** — a continuous 0–24px scrubber driving every `rounded-*` value.
+- **Accent** — shift the accent's oklch lightness ±15 points.
+
+Every card on the board shows a real component demo, links to its docs, and copies its install command.
+
+## SmoothUI presets
+
+The studio encodes your full configuration into a compact preset code:
+
+```
+s1.candy.16.20.mono.warm
+```
+
+Unlike shadcn/create presets (limited to their catalog values), SmoothUI presets carry the exact oklch palette, continuous radius, accent shift, font and tint. Three ways to use one:
+
+### Share it
+
+`Copy preset link` produces a URL that restores every control:
+
+```
+https://smoothui.dev/themes?preset=s1.candy.16.20.mono.warm
+```
+
+### Install it
+
+Any custom configuration is installable directly — the registry builds the theme on the fly from the code:
+
+```bash
+npx shadcn@latest add https://smoothui.dev/r/theme-custom-s1.candy.16.20.mono.warm.json
+```
+
+### Copy the CSS
+
+`Copy CSS variables` exports the exact `:root` / `.dark` blocks for manual pasting, always reflecting the current controls.
+
+## shadcn/create interop
+
+Each palette also maps to the closest [shadcn/create](https://ui.shadcn.com/create) preset (for example Candy ≈ `b3gmgq`, their pink). The studio links to it as an **approximation**: shadcn's preset system only supports its own catalog values, so the exact SmoothUI palette, tint and accent shift don't survive the round trip. For full fidelity, use SmoothUI presets.
diff --git a/apps/docs/content/docs/guides/utilities.mdx b/apps/docs/content/docs/guides/utilities.mdx
index c2f2b7c5..80ac7a06 100644
--- a/apps/docs/content/docs/guides/utilities.mdx
+++ b/apps/docs/content/docs/guides/utilities.mdx
@@ -1,7 +1,6 @@
 ---
 title: Utility Functions
 description: SmoothUI utility functions for React and Tailwind CSS. The cn() utility for merging class names with clsx and tailwind-merge for conflict-free styling.
-icon: Wrench
 ---
 
 ## Overview
@@ -249,6 +248,91 @@ export function cn(...inputs: ClassValue[]) {
 
 ---
 
+## Animation Constants
+
+Several SmoothUI components share a small set of animation constants — spring
+configs, easing curves, and durations — so motion feels consistent across the
+library. They live in `lib/animation.ts` and follow the project's [animation
+guidelines](/docs/guides/animation-best-practices) (durations of 0.2–0.25s and
+bounce ≤ 0.1 for standard UI).
+
+### Installation
+
+You don't install these directly. Any component that uses them (for example
+`pagination`, `select`, `combobox`, `dropdown-menu`, `context-menu`,
+`radio-group`, `checkbox`, `form`, or `breadcrumb`) lists them as a registry
+dependency, so `shadcn` pulls `lib/animation.ts` into your project automatically:
+
+```bash
+npx shadcn@latest add @smoothui/pagination
+```
+
+The file lands at `components/smoothui/lib/animation.ts` and the component's
+imports resolve to `@/components/smoothui/lib/animation`. To add it on its own:
+
+```bash
+npx shadcn@latest add @smoothui/lib
+```
+
+### Available Constants
+
+```tsx
+// components/smoothui/lib/animation.ts
+
+/** Default spring for most UI animations */
+export const SPRING_DEFAULT = { type: "spring", duration: 0.25, bounce: 0.1 };
+
+/** Snappy spring for quick, no-overshoot transitions */
+export const SPRING_SNAPPY = { type: "spring", duration: 0.2, bounce: 0 };
+
+/** Ease-out for entering elements — cubic-bezier(.23, 1, .32, 1) */
+export const EASE_OUT = [0.23, 1, 0.32, 1] as const;
+
+/** Ease-in-out for moving elements — cubic-bezier(0.645, 0.045, 0.355, 1) */
+export const EASE_IN_OUT = [0.645, 0.045, 0.355, 1] as const;
+
+/** Instant transition for reduced-motion contexts */
+export const DURATION_INSTANT = { duration: 0 };
+
+/** Standard animation durations (seconds) */
+export const DURATION = { fast: 0.15, default: 0.25, slow: 0.3, complex: 0.4 } as const;
+```
+
+### Usage
+
+Feed them straight into Motion's `transition` prop, and swap to
+`DURATION_INSTANT` when the user prefers reduced motion:
+
+```tsx
+import { motion, useReducedMotion } from "motion/react";
+import { SPRING_DEFAULT, DURATION_INSTANT } from "@/components/smoothui/lib/animation";
+
+function Panel() {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      animate={{ opacity: 1, y: 0 }}
+      initial={{ opacity: 0, y: 10 }}
+      transition={shouldReduceMotion ? DURATION_INSTANT : SPRING_DEFAULT}
+    />
+  );
+}
+```
+
+Use the easing curves anywhere Motion accepts an `ease` value:
+
+```tsx
+import { EASE_OUT } from "@/components/smoothui/lib/animation";
+
+<motion.div
+  animate={{ opacity: 1 }}
+  transition={{ duration: DURATION.default, ease: EASE_OUT }}
+/>
+```
+
+---
+
 ## Best Practices
 
 ### Always Use cn() for Component Styling
diff --git a/apps/docs/content/docs/guides/vite.mdx b/apps/docs/content/docs/guides/vite.mdx
index 50f23023..a9be58b3 100644
--- a/apps/docs/content/docs/guides/vite.mdx
+++ b/apps/docs/content/docs/guides/vite.mdx
@@ -1,7 +1,6 @@
 ---
 title: Vite + React
 description: Learn how to use SmoothUI animated React components in a Vite + React project with Tailwind CSS 4 and Motion.
-icon: Zap
 ---
 
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
diff --git a/apps/docs/examples/accordion.tsx b/apps/docs/examples/accordion.tsx
new file mode 100644
index 00000000..98cbc5ea
--- /dev/null
+++ b/apps/docs/examples/accordion.tsx
@@ -0,0 +1 @@
+export { default } from "./basic-accordion";
diff --git a/apps/docs/examples/aperture-blur-transition.tsx b/apps/docs/examples/aperture-blur-transition.tsx
new file mode 100644
index 00000000..b468f828
--- /dev/null
+++ b/apps/docs/examples/aperture-blur-transition.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import ApertureBlurTransition from "@repo/smoothui/components/aperture-blur-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const ApertureBlurTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="A focused aperture reveal for switching between dashboard and landing contexts."
+    renderTransition={({ children, className, transitionKey }) => (
+      <ApertureBlurTransition
+        className={className}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </ApertureBlurTransition>
+    )}
+    title="Aperture blur"
+  />
+);
+
+export default ApertureBlurTransitionDemo;
diff --git a/apps/docs/examples/apple-invites.tsx b/apps/docs/examples/apple-invites.tsx
index d2f83dc9..19200beb 100644
--- a/apps/docs/examples/apple-invites.tsx
+++ b/apps/docs/examples/apple-invites.tsx
@@ -3,7 +3,7 @@
 import AppleInvites, {
   type Event,
 } from "@repo/smoothui/components/apple-invites";
-import { getAllPeople, getAvatarUrl, getImageKitUrl } from "@smoothui/data";
+import { getAllPeople, getAvatarUrl } from "@smoothui/data";
 
 const AVATAR_SIZE = 72;
 
@@ -13,12 +13,7 @@ const demoEvents: Event[] = [
     title: "Yoga",
     subtitle: "Sat, June 14, 6:00 AM",
     location: "Central Park",
-    image: getImageKitUrl("/images/yogaday.webp", {
-      width: 400,
-      height: 500,
-      quality: 80,
-      format: "auto",
-    }),
+    image: "/images/figma/bg-11.webp",
     badge: "Hosting",
     participants: [
       {
@@ -31,12 +26,7 @@ const demoEvents: Event[] = [
     title: "Tyler Turns 3!",
     subtitle: "Sat, June 14, 3:00 PM",
     location: "Central Park",
-    image: getImageKitUrl("/images/park.webp", {
-      width: 400,
-      height: 500,
-      quality: 80,
-      format: "auto",
-    }),
+    image: "/images/figma/bg-9.webp",
     badge: "Going",
     participants: [
       {
@@ -49,12 +39,7 @@ const demoEvents: Event[] = [
     title: "Golf party",
     subtitle: "Sun, April 15, 9:00 AM",
     location: "Golf Park",
-    image: getImageKitUrl("/images/golf.webp", {
-      width: 400,
-      height: 500,
-      quality: 80,
-      format: "auto",
-    }),
+    image: "/images/figma/bg-5.webp",
     badge: "Going",
     participants: [
       {
@@ -67,12 +52,7 @@ const demoEvents: Event[] = [
     title: "Movie Night",
     subtitle: "Fri, June 20, 8:00 PM",
     location: "Cine Town",
-    image: getImageKitUrl("/images/movie.webp", {
-      width: 400,
-      height: 500,
-      quality: 80,
-      format: "auto",
-    }),
+    image: "/images/figma/bg-13.webp",
     badge: "Interested",
     participants: [
       {
diff --git a/apps/docs/examples/blur-out-up.tsx b/apps/docs/examples/blur-out-up.tsx
new file mode 100644
index 00000000..7416ccd8
--- /dev/null
+++ b/apps/docs/examples/blur-out-up.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import BlurOutUp from "@repo/smoothui/components/blur-out-up";
+
+const BlurOutUpDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <BlurOutUp className="font-bold text-4xl tracking-tight">
+      Think different.
+    </BlurOutUp>
+    <BlurOutUp className="text-lg text-muted-foreground" delay={400}>
+      Per-word blur reveal.
+    </BlurOutUp>
+  </div>
+);
+
+export default BlurOutUpDemo;
diff --git a/apps/docs/examples/bottom-up-letters.tsx b/apps/docs/examples/bottom-up-letters.tsx
new file mode 100644
index 00000000..14442754
--- /dev/null
+++ b/apps/docs/examples/bottom-up-letters.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import BottomUpLetters from "@repo/smoothui/components/bottom-up-letters";
+
+const BottomUpLettersDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-6 text-center">
+    <BottomUpLetters className="font-bold text-5xl tracking-tight">
+      Design.
+    </BottomUpLetters>
+    <BottomUpLetters className="font-semibold text-3xl" delay={600}>
+      Build.
+    </BottomUpLetters>
+  </div>
+);
+
+export default BottomUpLettersDemo;
diff --git a/apps/docs/examples/chroma-blur-transition.tsx b/apps/docs/examples/chroma-blur-transition.tsx
new file mode 100644
index 00000000..2db28378
--- /dev/null
+++ b/apps/docs/examples/chroma-blur-transition.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import ChromaBlurTransition from "@repo/smoothui/components/chroma-blur-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const ChromaBlurTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="A restrained chromatic blur that adds color while preserving a quiet UI frame."
+    renderTransition={({ children, className, transitionKey }) => (
+      <ChromaBlurTransition className={className} transitionKey={transitionKey}>
+        {children}
+      </ChromaBlurTransition>
+    )}
+    title="Chroma blur"
+  />
+);
+
+export default ChromaBlurTransitionDemo;
diff --git a/apps/docs/examples/cursor-follow.tsx b/apps/docs/examples/cursor-follow.tsx
index 8728df14..7ba78e13 100644
--- a/apps/docs/examples/cursor-follow.tsx
+++ b/apps/docs/examples/cursor-follow.tsx
@@ -35,6 +35,7 @@ const CursorFollowDemo = () => (
             className="aspect-[9/16] w-48 rounded-xl border-background object-cover transition-transform duration-200 hover:scale-105"
             data-cursor-text={img.label}
             height={341}
+            priority
             src={img.src}
             style={{ cursor: "none" }}
             width={192}
diff --git a/apps/docs/examples/depth-parallax-words.tsx b/apps/docs/examples/depth-parallax-words.tsx
new file mode 100644
index 00000000..a9932184
--- /dev/null
+++ b/apps/docs/examples/depth-parallax-words.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import DepthParallaxWords from "@repo/smoothui/components/depth-parallax-words";
+
+const DepthParallaxWordsDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <DepthParallaxWords className="font-bold text-4xl tracking-tight">
+      Think different.
+    </DepthParallaxWords>
+    <DepthParallaxWords className="text-lg text-muted-foreground" delay={400}>
+      Per-word depth parallax reveal.
+    </DepthParallaxWords>
+  </div>
+);
+
+export default DepthParallaxWordsDemo;
diff --git a/apps/docs/examples/fade-through.tsx b/apps/docs/examples/fade-through.tsx
new file mode 100644
index 00000000..79b91dd1
--- /dev/null
+++ b/apps/docs/examples/fade-through.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import FadeThrough from "@repo/smoothui/components/fade-through";
+
+const FadeThroughDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-8 text-center">
+    <div className="flex flex-col items-center gap-2">
+      <p className="text-muted-foreground text-sm uppercase tracking-widest">
+        We help you
+      </p>
+      <FadeThrough
+        className="font-bold text-4xl tracking-tight"
+        phrases={["Ship faster.", "Build smarter.", "Scale further."]}
+      />
+    </div>
+
+    <FadeThrough
+      className="text-lg text-muted-foreground"
+      interval={3000}
+      phrases={[
+        "Beautifully animated components.",
+        "Accessible by default.",
+        "Copy-paste ready.",
+      ]}
+    />
+  </div>
+);
+
+export default FadeThroughDemo;
diff --git a/apps/docs/examples/focus-blur-resolve.tsx b/apps/docs/examples/focus-blur-resolve.tsx
new file mode 100644
index 00000000..481279c0
--- /dev/null
+++ b/apps/docs/examples/focus-blur-resolve.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import FocusBlurResolve from "@repo/smoothui/components/focus-blur-resolve";
+
+const FocusBlurResolveDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-6 text-center">
+    <FocusBlurResolve className="font-bold text-5xl tracking-tight">
+      Clarity from chaos.
+    </FocusBlurResolve>
+    <FocusBlurResolve className="text-lg text-muted-foreground" delay={400}>
+      Focus pull from heavy blur to crisp.
+    </FocusBlurResolve>
+  </div>
+);
+
+export default FocusBlurResolveDemo;
diff --git a/apps/docs/examples/grid-loader.tsx b/apps/docs/examples/grid-loader.tsx
index 56d47efe..38956651 100644
--- a/apps/docs/examples/grid-loader.tsx
+++ b/apps/docs/examples/grid-loader.tsx
@@ -237,7 +237,7 @@ export default function GridLoaderDemo() {
                   animate={{ x: 0 }}
                   aria-label="Customize panel"
                   aria-modal="true"
-                  className="fixed inset-y-0 right-0 z-[60] flex w-80 flex-col bg-smooth-100 shadow-2xl"
+                  className="fixed top-3 right-3 bottom-3 z-[60] flex w-72 flex-col overflow-hidden rounded-xl border bg-smooth-100 shadow-2xl"
                   exit={{ x: "100%" }}
                   initial={{ x: "100%" }}
                   role="dialog"
@@ -273,14 +273,14 @@ export default function GridLoaderDemo() {
                     </button>
                   </div>
 
-                  <div className="flex flex-col gap-3 overflow-y-auto p-4">
+                  <div className="flex flex-col gap-1.5 overflow-y-auto p-3">
                     {/* Color */}
                     <div
                       className="flex items-center justify-between bg-smooth-200"
                       style={{
-                        borderRadius: 12,
-                        minHeight: 52,
-                        padding: "0 18px",
+                        borderRadius: 8,
+                        minHeight: 36,
+                        padding: "0 12px",
                       }}
                     >
                       <span
@@ -322,8 +322,8 @@ export default function GridLoaderDemo() {
                     <div
                       className="flex items-center bg-smooth-200"
                       style={{
-                        borderRadius: 12,
-                        minHeight: 52,
+                        borderRadius: 8,
+                        minHeight: 36,
                         padding: "0 4px",
                         gap: 4,
                       }}
@@ -339,8 +339,8 @@ export default function GridLoaderDemo() {
                           onClick={() => setModeIndex(idx)}
                           style={{
                             borderRadius: 8,
-                            height: 44,
-                            fontSize: 17,
+                            height: 28,
+                            fontSize: 13,
                           }}
                           type="button"
                         >
@@ -353,9 +353,9 @@ export default function GridLoaderDemo() {
                     <div
                       className="flex items-center justify-between bg-smooth-200"
                       style={{
-                        borderRadius: 12,
-                        minHeight: 52,
-                        padding: "0 18px",
+                        borderRadius: 8,
+                        minHeight: 36,
+                        padding: "0 12px",
                       }}
                     >
                       <span
@@ -381,8 +381,8 @@ export default function GridLoaderDemo() {
                           onClick={() => setRounded(false)}
                           style={{
                             borderRadius: 6,
-                            padding: "5px 14px",
-                            fontSize: 14,
+                            padding: "3px 10px",
+                            fontSize: 12,
                             fontWeight: 500,
                           }}
                           type="button"
@@ -398,8 +398,8 @@ export default function GridLoaderDemo() {
                           onClick={() => setRounded(true)}
                           style={{
                             borderRadius: 6,
-                            padding: "5px 14px",
-                            fontSize: 14,
+                            padding: "3px 10px",
+                            fontSize: 12,
                             fontWeight: 500,
                           }}
                           type="button"
@@ -427,6 +427,7 @@ export default function GridLoaderDemo() {
                         className="text-muted-foreground"
                         style={{
                           fontSize: 13,
+                          fontWeight: 600,
                           paddingLeft: 4,
                         }}
                       >
@@ -435,7 +436,7 @@ export default function GridLoaderDemo() {
                       <div
                         className="overflow-y-auto bg-smooth-200"
                         style={{
-                          borderRadius: 12,
+                          borderRadius: 8,
                           padding: 10,
                         }}
                       >
diff --git a/apps/docs/examples/image-metadata-preview.tsx b/apps/docs/examples/image-metadata-preview.tsx
index d6ed94d0..07c5245f 100644
--- a/apps/docs/examples/image-metadata-preview.tsx
+++ b/apps/docs/examples/image-metadata-preview.tsx
@@ -19,8 +19,8 @@ const Example = () => {
       <ImageMetadataPreview
         alt="Mountain landscape"
         description="Beautiful mountain landscape with snow-capped peaks"
-        filename="mountain-landscape.jpg"
-        imageSrc="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=437&fit=crop"
+        filename="desert-canyon.jpg"
+        imageSrc="/images/figma/bg-9.webp"
         metadata={sampleMetadata}
         onShare={handleShare}
       />
diff --git a/apps/docs/examples/kinetic-center-build.tsx b/apps/docs/examples/kinetic-center-build.tsx
new file mode 100644
index 00000000..8f901003
--- /dev/null
+++ b/apps/docs/examples/kinetic-center-build.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import KineticCenterBuild from "@repo/smoothui/components/kinetic-center-build";
+
+const KineticCenterBuildDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <KineticCenterBuild
+      className="font-bold text-4xl tracking-tight"
+      phrases={["Words push left", "Type locks center", "Build the line"]}
+    />
+  </div>
+);
+
+export default KineticCenterBuildDemo;
diff --git a/apps/docs/examples/line-by-line-slide.tsx b/apps/docs/examples/line-by-line-slide.tsx
new file mode 100644
index 00000000..20e72aab
--- /dev/null
+++ b/apps/docs/examples/line-by-line-slide.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import LineByLineSlide from "@repo/smoothui/components/line-by-line-slide";
+
+const LineByLineSlideDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-6 text-center">
+    <LineByLineSlide className="font-bold text-4xl tracking-tight">
+      {"Beautiful by design.\nPowerful by nature."}
+    </LineByLineSlide>
+    <LineByLineSlide
+      className="text-lg text-muted-foreground"
+      delay={400}
+      lines={["Per-line slide reveal.", "Apple landing page vibes."]}
+    />
+  </div>
+);
+
+export default LineByLineSlideDemo;
diff --git a/apps/docs/examples/mask-reveal-up.tsx b/apps/docs/examples/mask-reveal-up.tsx
new file mode 100644
index 00000000..b97572da
--- /dev/null
+++ b/apps/docs/examples/mask-reveal-up.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import MaskRevealUp from "@repo/smoothui/components/mask-reveal-up";
+
+const MaskRevealUpDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-6 text-center">
+    <MaskRevealUp className="font-bold text-4xl tracking-tight">
+      {"Designed for\nthe planet."}
+    </MaskRevealUp>
+    <MaskRevealUp
+      className="text-lg text-muted-foreground"
+      delay={300}
+      lines={["Per-line masked reveal.", "Apple section transitions."]}
+    />
+  </div>
+);
+
+export default MaskRevealUpDemo;
diff --git a/apps/docs/examples/micro-scale-fade.tsx b/apps/docs/examples/micro-scale-fade.tsx
new file mode 100644
index 00000000..87e26752
--- /dev/null
+++ b/apps/docs/examples/micro-scale-fade.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import MicroScaleFade from "@repo/smoothui/components/micro-scale-fade";
+
+const MicroScaleFadeDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <MicroScaleFade className="font-bold text-4xl tracking-tight">
+      Precision.
+    </MicroScaleFade>
+    <MicroScaleFade className="text-lg text-muted-foreground" delay={300}>
+      Subtle premium scale entrance.
+    </MicroScaleFade>
+  </div>
+);
+
+export default MicroScaleFadeDemo;
diff --git a/apps/docs/examples/organic-merge-transition.tsx b/apps/docs/examples/organic-merge-transition.tsx
new file mode 100644
index 00000000..6e6c5a43
--- /dev/null
+++ b/apps/docs/examples/organic-merge-transition.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import OrganicMergeTransition from "@repo/smoothui/components/organic-merge-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const OrganicMergeTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="Soft merged shapes reveal a new state while keeping the underlying UI readable."
+    renderTransition={({ children, className, transitionKey }) => (
+      <OrganicMergeTransition
+        className={className}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </OrganicMergeTransition>
+    )}
+    title="Organic merge"
+  />
+);
+
+export default OrganicMergeTransitionDemo;
diff --git a/apps/docs/examples/per-character-rise.tsx b/apps/docs/examples/per-character-rise.tsx
new file mode 100644
index 00000000..e01e9110
--- /dev/null
+++ b/apps/docs/examples/per-character-rise.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import PerCharacterRise from "@repo/smoothui/components/per-character-rise";
+
+const PerCharacterRiseDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <PerCharacterRise className="font-bold text-4xl tracking-tight">
+      Think different.
+    </PerCharacterRise>
+    <PerCharacterRise className="text-lg text-muted-foreground" delay={400}>
+      Crisp per-character rise.
+    </PerCharacterRise>
+  </div>
+);
+
+export default PerCharacterRiseDemo;
diff --git a/apps/docs/examples/per-word-crossfade.tsx b/apps/docs/examples/per-word-crossfade.tsx
new file mode 100644
index 00000000..2937d8a2
--- /dev/null
+++ b/apps/docs/examples/per-word-crossfade.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import PerWordCrossfade from "@repo/smoothui/components/per-word-crossfade";
+
+const PerWordCrossfadeDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <PerWordCrossfade className="font-bold text-4xl tracking-tight">
+      Think different.
+    </PerWordCrossfade>
+    <PerWordCrossfade className="text-lg text-muted-foreground" delay={400}>
+      Per-word crossfade reveal.
+    </PerWordCrossfade>
+  </div>
+);
+
+export default PerWordCrossfadeDemo;
diff --git a/apps/docs/examples/photo-stack.tsx b/apps/docs/examples/photo-stack.tsx
new file mode 100644
index 00000000..e4cd1f04
--- /dev/null
+++ b/apps/docs/examples/photo-stack.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import PhotoStack, {
+  type PhotoStackPhoto,
+} from "@repo/smoothui/components/photo-stack";
+
+const photos: PhotoStackPhoto[] = [
+  {
+    id: "canyon",
+    src: "/images/figma/bg-9.webp",
+    alt: "Desert canyon at sunset",
+    name: "Desert Canyon",
+    role: "Golden hour",
+  },
+  {
+    id: "palms",
+    src: "/images/figma/bg-11.webp",
+    alt: "Palm grove in soft light",
+    name: "Palm Grove",
+    role: "Summer haze",
+  },
+  {
+    id: "lights",
+    src: "/images/figma/bg-13.webp",
+    alt: "City lights bokeh at night",
+    name: "City Lights",
+    role: "After dark",
+  },
+];
+
+export default function PhotoStackDemo() {
+  return (
+    <div className="flex min-h-80 items-center justify-center py-6">
+      <PhotoStack photos={photos} />
+    </div>
+  );
+}
diff --git a/apps/docs/examples/prism-sweep-transition.tsx b/apps/docs/examples/prism-sweep-transition.tsx
new file mode 100644
index 00000000..35ebf033
--- /dev/null
+++ b/apps/docs/examples/prism-sweep-transition.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import PrismSweepTransition from "@repo/smoothui/components/prism-sweep-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const PrismSweepTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="A faceted prism field for major state changes across the whole component frame."
+    renderTransition={({ children, className, transitionKey }) => (
+      <PrismSweepTransition
+        className={className}
+        direction="left"
+        duration={1500}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </PrismSweepTransition>
+    )}
+    title="Prism sweep"
+  />
+);
+
+export default PrismSweepTransitionDemo;
diff --git a/apps/docs/examples/radial-circles-transition.tsx b/apps/docs/examples/radial-circles-transition.tsx
new file mode 100644
index 00000000..e4048564
--- /dev/null
+++ b/apps/docs/examples/radial-circles-transition.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import RadialCirclesTransition from "@repo/smoothui/components/radial-circles-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const RadialCirclesTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="Concentric motion for controlled, graphic state changes."
+    renderTransition={({ children, className, transitionKey }) => (
+      <RadialCirclesTransition
+        className={className}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </RadialCirclesTransition>
+    )}
+    title="Radial circles"
+  />
+);
+
+export default RadialCirclesTransitionDemo;
diff --git a/apps/docs/examples/scale-down-fade.tsx b/apps/docs/examples/scale-down-fade.tsx
new file mode 100644
index 00000000..03e237e1
--- /dev/null
+++ b/apps/docs/examples/scale-down-fade.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import ScaleDownFade from "@repo/smoothui/components/scale-down-fade";
+
+const ScaleDownFadeDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <ScaleDownFade className="font-bold text-4xl tracking-tight">
+      Polished.
+    </ScaleDownFade>
+    <ScaleDownFade className="text-lg text-muted-foreground" delay={300}>
+      Subtle premium settle-in.
+    </ScaleDownFade>
+  </div>
+);
+
+export default ScaleDownFadeDemo;
diff --git a/apps/docs/examples/scrollable-card-stack.tsx b/apps/docs/examples/scrollable-card-stack.tsx
index edae6f11..bba6b4ea 100644
--- a/apps/docs/examples/scrollable-card-stack.tsx
+++ b/apps/docs/examples/scrollable-card-stack.tsx
@@ -20,14 +20,7 @@ export default function ScrollableCardStackDemo() {
           format: "auto",
         }
       ), // Keep educlopez as requested
-      image: getImageKitUrl(
-        "https://ik.imagekit.io/16u211libb/smoothui/surf.webp?updatedAt=1764932280262",
-        {
-          width: 600,
-          quality: 80,
-          format: "auto",
-        }
-      ),
+      image: "/images/figma/bg-5.webp",
       href: "https://x.com/educalvolpz",
     },
     {
@@ -56,14 +49,7 @@ export default function ScrollableCardStackDemo() {
         people[2]?.name?.toLowerCase().replace(/\s+/g, "") || "marcusj"
       }`,
       avatar: getAvatarUrl(people[2]?.avatar || "", 40),
-      image: getImageKitUrl(
-        "https://ik.imagekit.io/16u211libb/smoothui/dreams.webp?updatedAt=1764932263863",
-        {
-          width: 600,
-          quality: 80,
-          format: "auto",
-        }
-      ),
+      image: "/images/figma/bg-8.webp",
       href: `https://x.com/${
         people[2]?.name?.toLowerCase().replace(/\s+/g, "") || "marcusj"
       }`,
@@ -75,14 +61,7 @@ export default function ScrollableCardStackDemo() {
         people[3]?.name?.toLowerCase().replace(/\s+/g, "") || "emilyrodriguez"
       }`,
       avatar: getAvatarUrl(people[3]?.avatar || "", 40),
-      image: getImageKitUrl(
-        "https://ik.imagekit.io/16u211libb/smoothui/galleryart.webp?updatedAt=1764932265858",
-        {
-          width: 600,
-          quality: 80,
-          format: "auto",
-        }
-      ),
+      image: "/images/figma/bg-1.webp",
       href: `https://x.com/${
         people[3]?.name?.toLowerCase().replace(/\s+/g, "") || "emilyrodriguez"
       }`,
diff --git a/apps/docs/examples/sdf-blob-transition.tsx b/apps/docs/examples/sdf-blob-transition.tsx
new file mode 100644
index 00000000..d218f1dd
--- /dev/null
+++ b/apps/docs/examples/sdf-blob-transition.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import SdfBlobTransition from "@repo/smoothui/components/sdf-blob-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const SdfBlobTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="A soft blob reveal that feels organic without adding extra chrome."
+    renderTransition={({ children, className, transitionKey }) => (
+      <SdfBlobTransition className={className} transitionKey={transitionKey}>
+        {children}
+      </SdfBlobTransition>
+    )}
+    title="SDF blob"
+  />
+);
+
+export default SdfBlobTransitionDemo;
diff --git a/apps/docs/examples/sdf-circle-transition.tsx b/apps/docs/examples/sdf-circle-transition.tsx
new file mode 100644
index 00000000..3273a9ee
--- /dev/null
+++ b/apps/docs/examples/sdf-circle-transition.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import SdfCircleTransition from "@repo/smoothui/components/sdf-circle-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const SdfCircleTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="A clean circular reveal for simple before-and-after state changes."
+    renderTransition={({ children, className, transitionKey }) => (
+      <SdfCircleTransition className={className} transitionKey={transitionKey}>
+        {children}
+      </SdfCircleTransition>
+    )}
+    title="SDF circle"
+  />
+);
+
+export default SdfCircleTransitionDemo;
diff --git a/apps/docs/examples/shader-reveal-circle-transition.tsx b/apps/docs/examples/shader-reveal-circle-transition.tsx
new file mode 100644
index 00000000..884de368
--- /dev/null
+++ b/apps/docs/examples/shader-reveal-circle-transition.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import ShaderRevealCircleTransition from "@repo/smoothui/components/shader-reveal-circle-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const ShaderRevealCircleTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="A radial reveal that works best when the next surface needs a clear focal point."
+    renderTransition={({ children, className, transitionKey }) => (
+      <ShaderRevealCircleTransition
+        className={className}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </ShaderRevealCircleTransition>
+    )}
+    title="Circle reveal"
+  />
+);
+
+export default ShaderRevealCircleTransitionDemo;
diff --git a/apps/docs/examples/shader-reveal-luma-transition.tsx b/apps/docs/examples/shader-reveal-luma-transition.tsx
new file mode 100644
index 00000000..a5c35f2f
--- /dev/null
+++ b/apps/docs/examples/shader-reveal-luma-transition.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import ShaderRevealLumaTransition from "@repo/smoothui/components/shader-reveal-luma-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const ShaderRevealLumaTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="Horizontal light bands reveal the next state without overwhelming the content."
+    renderTransition={({ children, className, transitionKey }) => (
+      <ShaderRevealLumaTransition
+        className={className}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </ShaderRevealLumaTransition>
+    )}
+    title="Luma ribbons"
+  />
+);
+
+export default ShaderRevealLumaTransitionDemo;
diff --git a/apps/docs/examples/shader-reveal-noise-transition.tsx b/apps/docs/examples/shader-reveal-noise-transition.tsx
new file mode 100644
index 00000000..98c74b84
--- /dev/null
+++ b/apps/docs/examples/shader-reveal-noise-transition.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import ShaderRevealNoiseTransition from "@repo/smoothui/components/shader-reveal-noise-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const ShaderRevealNoiseTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="A textured threshold reveal for product states that should feel deliberate, not loud."
+    renderTransition={({ children, className, transitionKey }) => (
+      <ShaderRevealNoiseTransition
+        className={className}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </ShaderRevealNoiseTransition>
+    )}
+    title="Noise gate"
+  />
+);
+
+export default ShaderRevealNoiseTransitionDemo;
diff --git a/apps/docs/examples/shader-reveal-planetary-transition.tsx b/apps/docs/examples/shader-reveal-planetary-transition.tsx
new file mode 100644
index 00000000..8708cce1
--- /dev/null
+++ b/apps/docs/examples/shader-reveal-planetary-transition.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import ShaderRevealPlanetaryTransition from "@repo/smoothui/components/shader-reveal-planetary-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const ShaderRevealPlanetaryTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="A rotational field for rare moments where the change should feel spatial."
+    renderTransition={({ children, className, transitionKey }) => (
+      <ShaderRevealPlanetaryTransition
+        className={className}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </ShaderRevealPlanetaryTransition>
+    )}
+    title="Planetary swirl"
+  />
+);
+
+export default ShaderRevealPlanetaryTransitionDemo;
diff --git a/apps/docs/examples/shader-reveal-push-transition.tsx b/apps/docs/examples/shader-reveal-push-transition.tsx
new file mode 100644
index 00000000..4423bda4
--- /dev/null
+++ b/apps/docs/examples/shader-reveal-push-transition.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import ShaderRevealPushTransition from "@repo/smoothui/components/shader-reveal-push-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const ShaderRevealPushTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="A pushed flow for transitions that should feel directional and continuous."
+    renderTransition={({ children, className, transitionKey }) => (
+      <ShaderRevealPushTransition
+        className={className}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </ShaderRevealPushTransition>
+    )}
+    title="Noise push"
+  />
+);
+
+export default ShaderRevealPushTransitionDemo;
diff --git a/apps/docs/examples/shader-reveal-stripes-transition.tsx b/apps/docs/examples/shader-reveal-stripes-transition.tsx
new file mode 100644
index 00000000..53fa8030
--- /dev/null
+++ b/apps/docs/examples/shader-reveal-stripes-transition.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import ShaderRevealStripesTransition from "@repo/smoothui/components/shader-reveal-stripes-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const ShaderRevealStripesTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="Segmented strips create a crisp, mechanical handoff between states."
+    renderTransition={({ children, className, transitionKey }) => (
+      <ShaderRevealStripesTransition
+        className={className}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </ShaderRevealStripesTransition>
+    )}
+    title="Stripe shutter"
+  />
+);
+
+export default ShaderRevealStripesTransitionDemo;
diff --git a/apps/docs/examples/shader-reveal-transition.tsx b/apps/docs/examples/shader-reveal-transition.tsx
new file mode 100644
index 00000000..cd32ce8c
--- /dev/null
+++ b/apps/docs/examples/shader-reveal-transition.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import ShaderRevealTransition, {
+  type ShaderRevealVariant,
+} from "@repo/smoothui/components/shader-reveal-transition";
+import { ArrowRight } from "lucide-react";
+import { useState } from "react";
+
+const VARIANTS: { label: string; value: ShaderRevealVariant }[] = [
+  { label: "Noise", value: "noise" },
+  { label: "Zoom", value: "zoom" },
+  { label: "Circle", value: "circle" },
+  { label: "Wipe", value: "wipe" },
+  { label: "Luma", value: "luma" },
+  { label: "Planetary", value: "planetary" },
+  { label: "Stripes", value: "stripes" },
+  { label: "Push", value: "push" },
+];
+
+const STATES = [
+  {
+    id: "dashboard",
+    eyebrow: "Dashboard",
+    title: "Revenue is ready to review.",
+  },
+  {
+    id: "landing",
+    eyebrow: "Landing",
+    title: "The section has been published.",
+  },
+] as const;
+
+const ShaderRevealTransitionDemo = () => {
+  const [variant, setVariant] = useState<ShaderRevealVariant>("noise");
+  const [index, setIndex] = useState(0);
+  const current = STATES[index];
+
+  return (
+    <div className="flex w-full flex-col items-center gap-4">
+      <ShaderRevealTransition
+        className="min-h-[320px] w-full max-w-[560px] rounded-2xl border bg-background text-foreground shadow-custom"
+        transitionKey={current.id}
+        variant={variant}
+      >
+        <div className="flex min-h-[320px] flex-col items-center justify-center gap-3 p-8 text-center">
+          <span className="font-medium text-brand text-xs uppercase tracking-wide">
+            {current.eyebrow}
+          </span>
+          <h3 className="text-balance font-semibold text-2xl tracking-[-0.02em]">
+            {current.title}
+          </h3>
+        </div>
+      </ShaderRevealTransition>
+
+      <div className="flex flex-wrap items-center justify-center gap-1.5">
+        {VARIANTS.map((item) => (
+          <button
+            aria-pressed={variant === item.value}
+            className={cn(
+              "rounded-full border px-2.5 py-1 font-medium text-xs shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              variant === item.value
+                ? "border-brand bg-brand text-brand-foreground"
+                : "bg-background text-muted-foreground hover:bg-muted"
+            )}
+            key={item.value}
+            onClick={() => setVariant(item.value)}
+            type="button"
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+
+      <button
+        className="inline-flex items-center gap-1.5 rounded-full border bg-background px-4 py-2 font-medium text-sm shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        onClick={() => setIndex((value) => (value + 1) % STATES.length)}
+        type="button"
+      >
+        Trigger transition
+        <ArrowRight className="size-3.5" />
+      </button>
+    </div>
+  );
+};
+
+export default ShaderRevealTransitionDemo;
diff --git a/apps/docs/examples/shader-reveal-wipe-transition.tsx b/apps/docs/examples/shader-reveal-wipe-transition.tsx
new file mode 100644
index 00000000..98cfb0be
--- /dev/null
+++ b/apps/docs/examples/shader-reveal-wipe-transition.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import ShaderRevealWipeTransition from "@repo/smoothui/components/shader-reveal-wipe-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const ShaderRevealWipeTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="A directional shader wipe for moving between adjacent product sections."
+    renderTransition={({ children, className, transitionKey }) => (
+      <ShaderRevealWipeTransition
+        className={className}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </ShaderRevealWipeTransition>
+    )}
+    title="Displacement wipe"
+  />
+);
+
+export default ShaderRevealWipeTransitionDemo;
diff --git a/apps/docs/examples/shader-reveal-zoom-transition.tsx b/apps/docs/examples/shader-reveal-zoom-transition.tsx
new file mode 100644
index 00000000..46d89a78
--- /dev/null
+++ b/apps/docs/examples/shader-reveal-zoom-transition.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import ShaderRevealZoomTransition from "@repo/smoothui/components/shader-reveal-zoom-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const ShaderRevealZoomTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="A soft lens movement for switching between compact dashboard and marketing states."
+    renderTransition={({ children, className, transitionKey }) => (
+      <ShaderRevealZoomTransition
+        className={className}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </ShaderRevealZoomTransition>
+    )}
+    title="Zoom wash"
+  />
+);
+
+export default ShaderRevealZoomTransitionDemo;
diff --git a/apps/docs/examples/shared-axis-x.tsx b/apps/docs/examples/shared-axis-x.tsx
new file mode 100644
index 00000000..cb37f429
--- /dev/null
+++ b/apps/docs/examples/shared-axis-x.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import SharedAxisX from "@repo/smoothui/components/shared-axis-x";
+
+const SharedAxisXDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <SharedAxisX
+      className="font-bold text-4xl tracking-tight"
+      phrases={[
+        "Move with purpose.",
+        "Direction matters.",
+        "Axis of progress.",
+      ]}
+    />
+  </div>
+);
+
+export default SharedAxisXDemo;
diff --git a/apps/docs/examples/shared-axis-y.tsx b/apps/docs/examples/shared-axis-y.tsx
new file mode 100644
index 00000000..1921f4a7
--- /dev/null
+++ b/apps/docs/examples/shared-axis-y.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import SharedAxisY from "@repo/smoothui/components/shared-axis-y";
+
+const SharedAxisYDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <SharedAxisY
+      className="font-bold text-4xl tracking-tight"
+      phrases={[
+        "Layered navigation.",
+        "Hierarchy made clear.",
+        "Depth with restraint.",
+      ]}
+    />
+  </div>
+);
+
+export default SharedAxisYDemo;
diff --git a/apps/docs/examples/shared-axis-z.tsx b/apps/docs/examples/shared-axis-z.tsx
new file mode 100644
index 00000000..005e521d
--- /dev/null
+++ b/apps/docs/examples/shared-axis-z.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import SharedAxisZ from "@repo/smoothui/components/shared-axis-z";
+
+const SharedAxisZDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <SharedAxisZ
+      className="font-bold text-4xl tracking-tight"
+      phrases={[
+        "Zooming between states.",
+        "Elevate and settle.",
+        "Scale with purpose.",
+      ]}
+    />
+  </div>
+);
+
+export default SharedAxisZDemo;
diff --git a/apps/docs/examples/shimmer-sweep.tsx b/apps/docs/examples/shimmer-sweep.tsx
new file mode 100644
index 00000000..ad895ef9
--- /dev/null
+++ b/apps/docs/examples/shimmer-sweep.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import ShimmerSweep from "@repo/smoothui/components/shimmer-sweep";
+
+const ShimmerSweepDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <ShimmerSweep className="font-bold text-4xl tracking-tight">
+      Motion is meaning.
+    </ShimmerSweep>
+    <ShimmerSweep className="text-lg text-muted-foreground" delay={400}>
+      A subtle sweep across a clean headline.
+    </ShimmerSweep>
+  </div>
+);
+
+export default ShimmerSweepDemo;
diff --git a/apps/docs/examples/shine-text.tsx b/apps/docs/examples/shine-text.tsx
new file mode 100644
index 00000000..c9754854
--- /dev/null
+++ b/apps/docs/examples/shine-text.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import ShineText from "@repo/smoothui/components/shine-text";
+
+const ShineTextDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <ShineText className="font-bold text-4xl tracking-tight">
+      Shipping soon
+    </ShineText>
+    <ShineText className="text-lg" duration={2}>
+      A light sweep across the text.
+    </ShineText>
+  </div>
+);
+
+export default ShineTextDemo;
diff --git a/apps/docs/examples/short-slide-down.tsx b/apps/docs/examples/short-slide-down.tsx
new file mode 100644
index 00000000..dc4a297e
--- /dev/null
+++ b/apps/docs/examples/short-slide-down.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import ShortSlideDown from "@repo/smoothui/components/short-slide-down";
+
+const ShortSlideDownDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <ShortSlideDown
+      className="font-bold text-4xl tracking-tight"
+      phrases={["Words drop down", "Lines stack centered", "Build the column"]}
+    />
+  </div>
+);
+
+export default ShortSlideDownDemo;
diff --git a/apps/docs/examples/short-slide-right.tsx b/apps/docs/examples/short-slide-right.tsx
new file mode 100644
index 00000000..7c2ffc04
--- /dev/null
+++ b/apps/docs/examples/short-slide-right.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import ShortSlideRight from "@repo/smoothui/components/short-slide-right";
+
+const ShortSlideRightDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <ShortSlideRight
+      className="font-bold text-4xl tracking-tight"
+      phrases={[
+        "Move with intent.",
+        "Words glide across.",
+        "Build the rhythm.",
+      ]}
+    />
+  </div>
+);
+
+export default ShortSlideRightDemo;
diff --git a/apps/docs/examples/skeleton-loader.tsx b/apps/docs/examples/skeleton-loader.tsx
index f3597b4a..f54e6b2f 100644
--- a/apps/docs/examples/skeleton-loader.tsx
+++ b/apps/docs/examples/skeleton-loader.tsx
@@ -16,7 +16,7 @@ export default function SkeletonLoaderDemo() {
             alt="Surf"
             className="h-40 w-full object-cover"
             height={160}
-            src="https://ik.imagekit.io/16u211libb/smoothui/surf.webp?tr=w-320,h-160"
+            src="/images/figma/bg-5.webp"
             width={320}
           />
           <div className="p-4">
diff --git a/apps/docs/examples/smooth-button.tsx b/apps/docs/examples/smooth-button.tsx
index 1894a45d..cbf438b1 100644
--- a/apps/docs/examples/smooth-button.tsx
+++ b/apps/docs/examples/smooth-button.tsx
@@ -1,36 +1,93 @@
 "use client";
 
 import SmoothButton from "@repo/smoothui/components/smooth-button";
-import { ExternalLink, Heart, Trash2 } from "lucide-react";
+import { ArrowRight, Check, Heart, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+
+const VARIANTS = ["solid", "soft", "outline", "ghost"] as const;
+const COLORS = [
+  "accent",
+  "neutral",
+  "destructive",
+  "blue",
+  "amber",
+  "green",
+] as const;
 
 export default function SmoothButtonDemo() {
+  const [loading, setLoading] = useState(false);
+
+  const runLoading = () => {
+    setLoading(true);
+    setTimeout(() => setLoading(false), 1600);
+  };
+
   return (
-    <div className="flex flex-col items-center gap-6">
-      <div className="flex flex-wrap items-center justify-center gap-3">
-        <SmoothButton variant="default">Default</SmoothButton>
-        <SmoothButton variant="candy">
-          Candy <ExternalLink className="h-4 w-4" />
-        </SmoothButton>
-        <SmoothButton variant="destructive">
-          <Trash2 className="h-4 w-4" /> Delete
-        </SmoothButton>
-        <SmoothButton variant="outline">Outline</SmoothButton>
-        <SmoothButton variant="secondary">Secondary</SmoothButton>
-        <SmoothButton variant="ghost">Ghost</SmoothButton>
-        <SmoothButton variant="link">Link</SmoothButton>
+    <div className="flex w-full flex-col gap-8">
+      {/* Variant × color matrix — the decoupled axes */}
+      <div className="flex flex-col gap-3">
+        {VARIANTS.map((variant) => (
+          <div className="flex flex-wrap items-center gap-2" key={variant}>
+            {COLORS.map((color) => (
+              <SmoothButton color={color} key={color} variant={variant}>
+                {color}
+              </SmoothButton>
+            ))}
+          </div>
+        ))}
+        <div className="flex flex-wrap items-center gap-2">
+          <SmoothButton variant="candy">Candy</SmoothButton>
+          <SmoothButton color="blue" variant="candy">
+            Candy blue
+          </SmoothButton>
+          <SmoothButton color="green" variant="candy">
+            Candy green
+          </SmoothButton>
+          <SmoothButton variant="link">Link</SmoothButton>
+        </div>
+      </div>
+
+      {/* Sizes */}
+      <div className="flex flex-wrap items-center gap-2">
+        <SmoothButton size="xs" variant="solid">
+          xs
+        </SmoothButton>
+        <SmoothButton size="sm" variant="solid">
+          sm
+        </SmoothButton>
+        <SmoothButton size="default" variant="solid">
+          default
+        </SmoothButton>
+        <SmoothButton size="lg" variant="solid">
+          lg
+        </SmoothButton>
+        <SmoothButton size="icon" variant="solid">
+          <Heart />
+        </SmoothButton>
+        <SmoothButton shape="pill" size="icon" variant="soft">
+          <Plus />
+        </SmoothButton>
       </div>
-      <div className="flex flex-wrap items-center justify-center gap-3">
-        <SmoothButton size="sm" variant="candy">
-          Small
+
+      {/* States + slots */}
+      <div className="flex flex-wrap items-center gap-2">
+        <SmoothButton loading={loading} onClick={runLoading} variant="candy">
+          {loading ? "Saving" : "Click to load"}
+        </SmoothButton>
+        <SmoothButton disabled variant="solid">
+          Disabled
+        </SmoothButton>
+        <SmoothButton color="green" prefix={<Check />} variant="soft">
+          Saved
         </SmoothButton>
-        <SmoothButton size="default" variant="candy">
-          Default
+        <SmoothButton suffix={<ArrowRight />} variant="outline">
+          Next
         </SmoothButton>
-        <SmoothButton size="lg" variant="candy">
-          Large
+        <SmoothButton color="destructive" prefix={<Trash2 />} variant="ghost">
+          Delete
         </SmoothButton>
-        <SmoothButton size="icon" variant="candy">
-          <Heart className="h-4 w-4" />
+        <SmoothButton shape="pill" variant="solid">
+          Pill
         </SmoothButton>
       </div>
     </div>
diff --git a/apps/docs/examples/soft-blur-in.tsx b/apps/docs/examples/soft-blur-in.tsx
new file mode 100644
index 00000000..b6a0ccef
--- /dev/null
+++ b/apps/docs/examples/soft-blur-in.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import SoftBlurIn from "@repo/smoothui/components/soft-blur-in";
+
+const SoftBlurInDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <SoftBlurIn className="font-bold text-4xl tracking-tight">
+      Think different.
+    </SoftBlurIn>
+    <SoftBlurIn className="text-lg text-muted-foreground" delay={400}>
+      Per-character blur reveal.
+    </SoftBlurIn>
+  </div>
+);
+
+export default SoftBlurInDemo;
diff --git a/apps/docs/examples/spring-scale-in.tsx b/apps/docs/examples/spring-scale-in.tsx
new file mode 100644
index 00000000..a52d5300
--- /dev/null
+++ b/apps/docs/examples/spring-scale-in.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import SpringScaleIn from "@repo/smoothui/components/spring-scale-in";
+
+const SpringScaleInDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <SpringScaleIn className="font-bold text-4xl tracking-tight">
+      Think different.
+    </SpringScaleIn>
+    <SpringScaleIn className="text-lg text-muted-foreground" delay={400}>
+      Per-word spring scale reveal.
+    </SpringScaleIn>
+  </div>
+);
+
+export default SpringScaleInDemo;
diff --git a/apps/docs/examples/stagger-from-center.tsx b/apps/docs/examples/stagger-from-center.tsx
new file mode 100644
index 00000000..95a0366b
--- /dev/null
+++ b/apps/docs/examples/stagger-from-center.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import StaggerFromCenter from "@repo/smoothui/components/stagger-from-center";
+
+const StaggerFromCenterDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <StaggerFromCenter className="font-bold text-4xl tracking-tight">
+      Beautiful.
+    </StaggerFromCenter>
+    <StaggerFromCenter className="text-lg text-muted-foreground" delay={500}>
+      Center-out reveal.
+    </StaggerFromCenter>
+  </div>
+);
+
+export default StaggerFromCenterDemo;
diff --git a/apps/docs/examples/stagger-from-edges.tsx b/apps/docs/examples/stagger-from-edges.tsx
new file mode 100644
index 00000000..bb010df5
--- /dev/null
+++ b/apps/docs/examples/stagger-from-edges.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import StaggerFromEdges from "@repo/smoothui/components/stagger-from-edges";
+
+const StaggerFromEdgesDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 text-center">
+    <StaggerFromEdges className="font-bold text-4xl tracking-tight">
+      Converge.
+    </StaggerFromEdges>
+    <StaggerFromEdges className="text-lg text-muted-foreground" delay={500}>
+      Edges meet center.
+    </StaggerFromEdges>
+  </div>
+);
+
+export default StaggerFromEdgesDemo;
diff --git a/apps/docs/examples/top-down-letters.tsx b/apps/docs/examples/top-down-letters.tsx
new file mode 100644
index 00000000..b660c4b4
--- /dev/null
+++ b/apps/docs/examples/top-down-letters.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import TopDownLetters from "@repo/smoothui/components/top-down-letters";
+
+const TopDownLettersDemo = () => (
+  <div className="flex min-h-[300px] flex-col items-center justify-center gap-6 text-center">
+    <TopDownLetters className="font-bold text-5xl tracking-tight">
+      Create.
+    </TopDownLetters>
+    <TopDownLetters className="font-semibold text-3xl" delay={600}>
+      Ship.
+    </TopDownLetters>
+  </div>
+);
+
+export default TopDownLettersDemo;
diff --git a/apps/docs/examples/transition-demo-frame.tsx b/apps/docs/examples/transition-demo-frame.tsx
new file mode 100644
index 00000000..f094215d
--- /dev/null
+++ b/apps/docs/examples/transition-demo-frame.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { ArrowRight, Check, Sparkles } from "lucide-react";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+interface TransitionRenderProps {
+  children: ReactNode;
+  className: string;
+  transitionKey: string;
+}
+
+interface TransitionDemoFrameProps {
+  description: string;
+  renderTransition: (props: TransitionRenderProps) => ReactNode;
+  title: string;
+}
+
+const states = [
+  {
+    id: "dashboard",
+    eyebrow: "Dashboard",
+    title: "Revenue is ready to review.",
+    description: "A quiet frame for state changes inside product surfaces.",
+    primary: "$42.8k",
+    secondary: "+12.4%",
+    rows: ["MRR", "Activation", "Retention"],
+    bars: [72, 48, 84],
+  },
+  {
+    id: "landing",
+    eyebrow: "Landing",
+    title: "The section has been published.",
+    description:
+      "A minimal marketing block with just enough structure to read through the shader.",
+    primary: "18.2k",
+    secondary: "visitors",
+    rows: ["Hero", "Pricing", "Proof"],
+    bars: [58, 76, 39],
+  },
+] as const;
+
+export function TransitionDemoFrame({
+  description,
+  renderTransition,
+  title,
+}: TransitionDemoFrameProps) {
+  const [index, setIndex] = useState(0);
+  const current = states[index];
+
+  return renderTransition({
+    className:
+      "min-h-[420px] w-full rounded-none border-0 bg-background text-foreground shadow-none sm:rounded-2xl sm:border sm:shadow-custom",
+    transitionKey: current.id,
+    children: (
+      <div className="relative min-h-[420px] overflow-hidden bg-background p-4 text-foreground sm:p-6">
+        <div className="mx-auto flex min-h-[372px] w-full max-w-[720px] flex-col overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-sm">
+          <div className="flex h-12 items-center justify-between border-b bg-muted/25 px-4 backdrop-blur-sm">
+            <div aria-hidden="true" className="flex items-center gap-1.5">
+              <span className="size-2 rounded-full bg-brand" />
+              <span className="size-2 rounded-full bg-brand/45" />
+              <span className="size-2 rounded-full bg-muted-foreground/30" />
+            </div>
+            <span className="font-medium text-[11px] text-muted-foreground">
+              smoothui.dev/preview
+            </span>
+            <button
+              className="inline-flex items-center gap-1 rounded-full border bg-background/80 px-2.5 py-1 font-medium text-[11px] text-foreground shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              onClick={() => setIndex((value) => (value + 1) % states.length)}
+              type="button"
+            >
+              Transition
+              <ArrowRight className="size-3" />
+            </button>
+          </div>
+
+          <main className="grid flex-1 grid-cols-[1fr_210px] gap-6 p-6 max-sm:grid-cols-1 sm:p-8">
+            <section className="flex min-w-0 flex-col justify-between">
+              <div>
+                <div className="mb-7 inline-flex items-center gap-2 rounded-full border bg-background/70 px-2.5 py-1 text-[12px] text-muted-foreground shadow-sm">
+                  <Sparkles className="size-3 text-brand" />
+                  {current.eyebrow}
+                </div>
+                <p className="mb-2 font-medium text-brand text-sm">{title}</p>
+                <h3 className="max-w-md text-balance font-semibold text-2xl tracking-[-0.03em] sm:text-3xl">
+                  {current.title}
+                </h3>
+                <p className="mt-3 max-w-md text-muted-foreground text-sm leading-6">
+                  {description || current.description}
+                </p>
+              </div>
+
+              <div className="mt-8 grid max-w-md grid-cols-3 gap-2">
+                {current.rows.map((row, rowIndex) => (
+                  <div className="rounded-xl border bg-muted/20 p-3" key={row}>
+                    <div className="mb-2 flex items-center gap-1.5 text-muted-foreground text-xs">
+                      <Check className="size-3 text-brand" />
+                      {row}
+                    </div>
+                    <div className="h-1.5 rounded-full bg-muted">
+                      <div
+                        className="h-full rounded-full bg-brand/70"
+                        style={{ width: `${current.bars[rowIndex]}%` }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <aside className="flex flex-col justify-between rounded-2xl border bg-muted/20 p-4">
+              <div>
+                <p className="text-muted-foreground text-xs">Signal</p>
+                <div className="mt-2 font-semibold text-4xl tracking-[-0.04em]">
+                  {current.primary}
+                </div>
+                <p className="mt-1 text-muted-foreground text-xs">
+                  {current.secondary}
+                </p>
+              </div>
+              <div className="mt-8 space-y-2">
+                <div className="h-16 rounded-xl border bg-background/70" />
+                <div className="grid grid-cols-3 gap-2">
+                  <div className="h-10 rounded-lg bg-brand/15" />
+                  <div className="h-10 rounded-lg bg-muted" />
+                  <div className="h-10 rounded-lg bg-muted" />
+                </div>
+              </div>
+            </aside>
+          </main>
+        </div>
+      </div>
+    ),
+  });
+}
diff --git a/apps/docs/examples/warped-circle-transition.tsx b/apps/docs/examples/warped-circle-transition.tsx
new file mode 100644
index 00000000..c1882388
--- /dev/null
+++ b/apps/docs/examples/warped-circle-transition.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import WarpedCircleTransition from "@repo/smoothui/components/warped-circle-transition";
+import { TransitionDemoFrame } from "./transition-demo-frame";
+
+const WarpedCircleTransitionDemo = () => (
+  <TransitionDemoFrame
+    description="A warped radial edge that gives the transition a handcrafted feel."
+    renderTransition={({ children, className, transitionKey }) => (
+      <WarpedCircleTransition
+        className={className}
+        transitionKey={transitionKey}
+      >
+        {children}
+      </WarpedCircleTransition>
+    )}
+    title="Warped circle"
+  />
+);
+
+export default WarpedCircleTransitionDemo;
diff --git a/apps/docs/lib/changelog-data.ts b/apps/docs/lib/changelog-data.ts
new file mode 100644
index 00000000..326ec022
--- /dev/null
+++ b/apps/docs/lib/changelog-data.ts
@@ -0,0 +1,65 @@
+export interface ChangelogEntry {
+  date: string;
+  description: string;
+  href: string;
+  id: string;
+  title: string;
+  version: string;
+}
+
+export const CHANGELOG: ChangelogEntry[] = [
+  {
+    id: "3.5.0",
+    version: "3.5.0",
+    title: "Theme Studio, Installable Themes & Accessibility",
+    description:
+      "New Theme Studio with live previews for all 70 demos. Six installable registry themes. 100% prefers-reduced-motion compliance across all blocks.",
+    date: "Jun 11, 2026",
+    href: "/docs/guides/changelog",
+  },
+  {
+    id: "3.4.0",
+    version: "3.4.0",
+    title: "AI-First Developer Experience",
+    description:
+      "REST API with 6 endpoints, OpenAPI 3.1 spec, llms-full.txt, Book and Exposure Slider components, and per-component accessibility docs.",
+    date: "Mar 7, 2026",
+    href: "/docs/guides/changelog",
+  },
+  {
+    id: "3.3.0",
+    version: "3.3.0",
+    title: "New Components & Enhancements",
+    description:
+      "Gooey Popover, Agent Avatar, Animated Avatar Group, Animated Tooltip, and Scrubber components. Enhanced Grid Loader and Vercel OSS badge.",
+    date: "Feb 21, 2026",
+    href: "/docs/guides/changelog",
+  },
+  {
+    id: "3.2.0",
+    version: "3.2.0",
+    title: "CLI & Grid Loader",
+    description:
+      "Standalone SmoothUI CLI with ASCII header, Grid Loader with 65 preset patterns, and interactive tutorial blog section.",
+    date: "Feb 6, 2026",
+    href: "/docs/guides/changelog",
+  },
+  {
+    id: "3.1.0",
+    version: "3.1.0",
+    title: "New Components & Blocks Expansion",
+    description:
+      "Magnetic Button, Notification Badge, Skeleton Loader, Animated Tabs, Animated Toggle, plus 6 new blocks including FAQ and Footer variants.",
+    date: "Jan 29, 2026",
+    href: "/docs/guides/changelog",
+  },
+  {
+    id: "3.0.0",
+    version: "3.0.0",
+    title: "Monorepo Remake",
+    description:
+      "Complete monorepo restructure, Next.js 16, Fumadocs integration, Ultracite, Biome, and updated build system.",
+    date: "Nov 5, 2025",
+    href: "/docs/guides/changelog",
+  },
+];
diff --git a/apps/docs/lib/kit-context.tsx b/apps/docs/lib/kit-context.tsx
new file mode 100644
index 00000000..c5298d6a
--- /dev/null
+++ b/apps/docs/lib/kit-context.tsx
@@ -0,0 +1,249 @@
+"use client";
+
+import {
+  applyColorPalette,
+  persistColorPalette,
+} from "@docs/app/lib/color-palette";
+import { THEME_PALETTES } from "@docs/lib/registry-themes";
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useState,
+} from "react";
+
+const STORAGE_KEY = "smoothui-kit-v1";
+
+export type KitItem = {
+  /** Registry slug used in the install command (`@smoothui/<slug>`). */
+  slug: string;
+  title: string;
+};
+
+type State = KitItem[];
+
+type Action =
+  | { type: "hydrate"; items: State }
+  | { type: "add"; item: KitItem }
+  | { type: "addMany"; items: State }
+  | { type: "remove"; slug: string }
+  | { type: "removeMany"; slugs: string[] }
+  | { type: "toggle"; item: KitItem }
+  | { type: "clear" };
+
+const mergeItems = (state: State, incoming: State): State => {
+  const bySlug = new Map(state.map((i) => [i.slug, i]));
+  for (const item of incoming) {
+    if (!bySlug.has(item.slug)) {
+      bySlug.set(item.slug, item);
+    }
+  }
+  return [...bySlug.values()];
+};
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "hydrate":
+      return action.items;
+    case "add":
+      return mergeItems(state, [action.item]);
+    case "addMany":
+      return mergeItems(state, action.items);
+    case "remove":
+      return state.filter((i) => i.slug !== action.slug);
+    case "removeMany": {
+      const drop = new Set(action.slugs);
+      return state.filter((i) => !drop.has(i.slug));
+    }
+    case "toggle":
+      return state.some((i) => i.slug === action.item.slug)
+        ? state.filter((i) => i.slug !== action.item.slug)
+        : [...state, action.item];
+    case "clear":
+      return [];
+    default:
+      return state;
+  }
+};
+
+const parse = (raw: string | null): State => {
+  if (!raw) {
+    return [];
+  }
+  try {
+    const data = JSON.parse(raw);
+    if (
+      Array.isArray(data) &&
+      data.every(
+        (i) => typeof i?.slug === "string" && typeof i?.title === "string"
+      )
+    ) {
+      return data;
+    }
+  } catch {
+    // ignore malformed storage
+  }
+  return [];
+};
+
+/** "agent-avatar" -> "Agent Avatar" (fallback title for slugs without titles). */
+export const prettify = (slug: string) =>
+  slug
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+
+/** Parse a `?kit=slug-a,slug-b` query param into kit items. */
+const parseKitParam = (search: string): State => {
+  const param = new URLSearchParams(search).get("kit");
+  if (!param) {
+    return [];
+  }
+  const seen = new Set<string>();
+  return param
+    .split(",")
+    .map((s) => s.trim().toLowerCase())
+    .filter((s) => /^[a-z0-9-]+$/.test(s) && !seen.has(s) && seen.add(s))
+    .map((slug) => ({ slug, title: prettify(slug) }));
+};
+
+/** Apply a shared `?theme=<name>` by setting the site color palette. */
+const applySharedTheme = (name: string | null) => {
+  if (!name) {
+    return;
+  }
+  const palette = THEME_PALETTES.find((p) => p.name === name.toLowerCase());
+  if (palette) {
+    applyColorPalette(palette.primary, palette.secondary);
+    persistColorPalette(palette.primary, palette.secondary);
+  }
+};
+
+type KitContextValue = {
+  items: KitItem[];
+  count: number;
+  /** Latest human-readable change, for an `aria-live` announcer. */
+  message: string;
+  has: (slug: string) => boolean;
+  add: (item: KitItem) => void;
+  addMany: (items: KitItem[]) => void;
+  remove: (slug: string) => void;
+  removeMany: (slugs: string[]) => void;
+  toggle: (item: KitItem) => void;
+  clear: () => void;
+};
+
+const KitContext = createContext<KitContextValue | null>(null);
+
+export function KitProvider({ children }: { children: ReactNode }) {
+  const [items, dispatch] = useReducer(reducer, []);
+  const [message, setMessage] = useState("");
+  // Gates the persist effect so it can't flush the empty initial state to
+  // storage before hydration (from `?kit=` or localStorage) has landed.
+  const [hasHydrated, setHasHydrated] = useState(false);
+
+  // Hydrate after mount (SSR-safe). A `?kit=` link wins over stored state so
+  // shared kits load as-is (applying the shared theme to the site palette);
+  // then strip the params so edits aren't overwritten.
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const shared = parseKitParam(window.location.search);
+
+    if (shared.length > 0) {
+      dispatch({ type: "hydrate", items: shared });
+      applySharedTheme(params.get("theme"));
+      const url = new URL(window.location.href);
+      url.searchParams.delete("kit");
+      url.searchParams.delete("theme");
+      window.history.replaceState({}, "", url);
+    } else {
+      dispatch({
+        type: "hydrate",
+        items: parse(localStorage.getItem(STORAGE_KEY)),
+      });
+    }
+    setHasHydrated(true);
+
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === STORAGE_KEY) {
+        dispatch({ type: "hydrate", items: parse(e.newValue) });
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+
+  // Persist on every change, once hydration has landed (avoids overwriting
+  // stored/shared items with the empty initial state on first mount).
+  useEffect(() => {
+    if (!hasHydrated) {
+      return;
+    }
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
+  }, [items, hasHydrated]);
+
+  const value = useMemo<KitContextValue>(
+    () => ({
+      items,
+      count: items.length,
+      message,
+      has: (slug) => items.some((i) => i.slug === slug),
+      add: (item) => {
+        dispatch({ type: "add", item });
+        setMessage(`${item.title} added to bundle`);
+      },
+      addMany: (next) => {
+        dispatch({ type: "addMany", items: next });
+        setMessage(
+          next.length === 1
+            ? `${next[0].title} added to bundle`
+            : `${next.length} components added to bundle`
+        );
+      },
+      remove: (slug) => {
+        const removed = items.find((i) => i.slug === slug);
+        dispatch({ type: "remove", slug });
+        setMessage(
+          removed
+            ? `${removed.title} removed from bundle`
+            : "Item removed from bundle"
+        );
+      },
+      removeMany: (slugs) => {
+        dispatch({ type: "removeMany", slugs });
+        setMessage(
+          slugs.length === 1
+            ? "1 component removed from bundle"
+            : `${slugs.length} components removed from bundle`
+        );
+      },
+      toggle: (item) => {
+        const exists = items.some((i) => i.slug === item.slug);
+        dispatch({ type: "toggle", item });
+        setMessage(
+          exists
+            ? `${item.title} removed from bundle`
+            : `${item.title} added to bundle`
+        );
+      },
+      clear: () => {
+        dispatch({ type: "clear" });
+        setMessage("Bundle cleared");
+      },
+    }),
+    [items, message]
+  );
+
+  return <KitContext.Provider value={value}>{children}</KitContext.Provider>;
+}
+
+export function useKit() {
+  const ctx = useContext(KitContext);
+  if (!ctx) {
+    throw new Error("useKit must be used within a KitProvider");
+  }
+  return ctx;
+}
diff --git a/apps/docs/lib/layout.shared.tsx b/apps/docs/lib/layout.shared.tsx
index 62c42da3..2bb892ca 100644
--- a/apps/docs/lib/layout.shared.tsx
+++ b/apps/docs/lib/layout.shared.tsx
@@ -1,14 +1,27 @@
 import Logo from "@docs/components/logo";
+import {
+  NavDesktopActions,
+  NavSearchTriggerSm,
+} from "@docs/components/nav-search-actions";
 import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+import { FullSearchTrigger } from "fumadocs-ui/layouts/shared/slots/search-trigger";
 
 export function baseOptions(): BaseLayoutProps {
   return {
-    themeSwitch: {
-      enabled: false,
-    },
     nav: {
       title: <Logo />,
     },
-    links: [],
+    // Keep the changelog action next to the search/menu controls: beside the
+    // compact search icon on mobile (searchTrigger.sm), and in the far-right
+    // header cluster on desktop (themeSwitch slot). This keeps it out of the
+    // mobile sidebar drawer. Theme toggling lives only in the FloatNav
+    // (bottom pill) to avoid a duplicate control in the top nav.
+    slots: {
+      searchTrigger: {
+        sm: NavSearchTriggerSm,
+        full: FullSearchTrigger,
+      },
+      themeSwitch: NavDesktopActions,
+    },
   };
 }
diff --git a/apps/docs/lib/nucleo-icons-plugin.ts b/apps/docs/lib/nucleo-icons-plugin.ts
new file mode 100644
index 00000000..81594b04
--- /dev/null
+++ b/apps/docs/lib/nucleo-icons-plugin.ts
@@ -0,0 +1,172 @@
+import {
+  IconAccessibilityFill24,
+  IconAiFill24,
+  IconAlbumFill24,
+  IconBag24Fill24,
+  IconBellFill24,
+  IconBoltFill24,
+  IconBookBookmarkFill24,
+  IconBrainFill24,
+  IconCalendarFill24,
+  IconChartBarTrendUpFill24,
+  IconChatBubblePlusFill24,
+  IconCheckboxChecked2Fill24,
+  IconChevronDownFill24,
+  IconCircleQuestionFill24,
+  IconClock2Fill24,
+  IconCloudFill24,
+  IconCodeFill24,
+  IconCompass2Fill24,
+  IconCopyFill24,
+  IconCursor2Fill24,
+  IconDotsLoaderFill24,
+  IconDownloadFill24,
+  IconDropletFill24,
+  IconExpandFill24,
+  IconFileFill24,
+  IconGlobe2Fill24,
+  IconGrid3Fill24,
+  IconGridLayout10Fill24,
+  IconHashtagFill24,
+  IconHeartFill24,
+  IconImageFill24,
+  IconImagesFill24,
+  IconKeyFill24,
+  IconLayersFill24,
+  IconLayoutBottomFill24,
+  IconLetterAFill24,
+  IconLightbulbFill24,
+  IconListCheckFill24,
+  IconMagnetFill24,
+  IconMagnifierFill24,
+  IconMessage2Fill24,
+  IconPaletteFill24,
+  IconPeople3Fill24,
+  IconPopcornFill24,
+  IconPowerLevelFill24,
+  IconQuoteFill24,
+  IconRefresh2Fill24,
+  IconRocketFill24,
+  IconShareLeft3Fill24,
+  IconSidebarRightFill24,
+  IconSliders2Fill24,
+  IconSparkleFill24,
+  IconStarFill24,
+  IconSunFill24,
+  IconSwapNodesFill24,
+  IconTagFill24,
+  IconToggleFill24,
+  IconTriangleWarningFill24,
+  IconTrophyFill24,
+  IconUploadFill24,
+  IconUserFill24,
+  IconWaveformLinesFill24,
+  IconWrenchFill24,
+} from "nucleo-core-fill-24";
+import { createElement } from "react";
+
+type NucleoIcon = React.ComponentType<{ className?: string; size?: number }>;
+
+const LUCIDE_TO_NUCLEO: Record<string, NucleoIcon> = {
+  Accessibility: IconAccessibilityFill24,
+  Album: IconAlbumFill24,
+  ArrowRightLeft: IconSwapNodesFill24,
+  BadgeDollarSign: IconBoltFill24,
+  BarChart2: IconChartBarTrendUpFill24,
+  Bell: IconBellFill24,
+  Cloud: IconCloudFill24,
+  HelpCircle: IconCircleQuestionFill24,
+  LayoutDashboard: IconGridLayout10Fill24,
+  LayoutGrid: IconGridLayout10Fill24,
+  PanelBottom: IconLayoutBottomFill24,
+  Quote: IconQuoteFill24,
+  BookOpen: IconBookBookmarkFill24,
+  Bot: IconAiFill24,
+  Brain: IconBrainFill24,
+  Briefcase: IconBag24Fill24,
+  Calendar: IconCalendarFill24,
+  ChevronDown: IconChevronDownFill24,
+  CircleDot: IconDotsLoaderFill24,
+  Code: IconCodeFill24,
+  Copy: IconCopyFill24,
+  Download: IconDownloadFill24,
+  Droplets: IconDropletFill24,
+  FileText: IconFileFill24,
+  Globe: IconGlobe2Fill24,
+  Grid3x3: IconGrid3Fill24,
+  Hash: IconHashtagFill24,
+  Heart: IconHeartFill24,
+  History: IconClock2Fill24,
+  Image: IconImageFill24,
+  Images: IconImagesFill24,
+  KeyRound: IconKeyFill24,
+  Lightbulb: IconLightbulbFill24,
+  ListOrdered: IconListCheckFill24,
+  Loader: IconDotsLoaderFill24,
+  Magnet: IconMagnetFill24,
+  MessageSquare: IconMessage2Fill24,
+  MessageSquarePlus: IconChatBubblePlusFill24,
+  MousePointer: IconCursor2Fill24,
+  MousePointerClick: IconCursor2Fill24,
+  MoveHorizontal: IconExpandFill24,
+  Navigation: IconCompass2Fill24,
+  Palette: IconPaletteFill24,
+  PanelLeft: IconSidebarRightFill24,
+  Popcorn: IconPopcornFill24,
+  Power: IconPowerLevelFill24,
+  RectangleEllipsis: IconDotsLoaderFill24,
+  RefreshCw: IconRefresh2Fill24,
+  Rocket: IconRocketFill24,
+  Search: IconMagnifierFill24,
+  Share2: IconShareLeft3Fill24,
+  ShoppingCart: IconBag24Fill24,
+  SlidersHorizontal: IconSliders2Fill24,
+  Sparkles: IconSparkleFill24,
+  Square: IconExpandFill24,
+  SquareCheck: IconCheckboxChecked2Fill24,
+  SquareStack: IconLayersFill24,
+  Star: IconStarFill24,
+  SunMedium: IconSunFill24,
+  Tag: IconTagFill24,
+  TextSearch: IconMagnifierFill24,
+  ToggleLeft: IconToggleFill24,
+  Triangle: IconTriangleWarningFill24,
+  Trophy: IconTrophyFill24,
+  Type: IconLetterAFill24,
+  Upload: IconUploadFill24,
+  User: IconUserFill24,
+  Users: IconPeople3Fill24,
+  Waves: IconWaveformLinesFill24,
+  Wrench: IconWrenchFill24,
+  Zap: IconBoltFill24,
+};
+
+function resolveIcon(name: string | undefined): React.ReactElement | undefined {
+  if (!name) {
+    return;
+  }
+  const Icon = LUCIDE_TO_NUCLEO[name];
+  if (!Icon) {
+    console.warn(`[nucleo-icons-plugin] Unknown icon: ${name}`);
+    return;
+  }
+  return createElement(Icon, { className: "size-4" });
+}
+
+function replaceIcon(node: Record<string, unknown>): Record<string, unknown> {
+  if (node.icon === undefined || typeof node.icon === "string") {
+    node.icon = resolveIcon(node.icon as string | undefined);
+  }
+  return node;
+}
+
+export function nucleoIconsPlugin() {
+  return {
+    name: "smoothui:nucleo-icons",
+    transformPageTree: {
+      file: replaceIcon,
+      folder: replaceIcon,
+      separator: replaceIcon,
+    },
+  } as unknown as import("fumadocs-core/source").LoaderPlugin;
+}
diff --git a/apps/docs/lib/package.ts b/apps/docs/lib/package.ts
index 1e1edd79..3bf1a631 100644
--- a/apps/docs/lib/package.ts
+++ b/apps/docs/lib/package.ts
@@ -8,6 +8,44 @@ import type { RegistryItem } from "shadcn/schema";
 // Regex patterns for detecting imports (hoisted for performance)
 const SHADCN_IMPORT_REGEX = /@\/components\/ui\/([a-z-]+)/g;
 const RELATIVE_IMPORT_REGEX = /from\s+["']\.\.\/([a-z-]+)["']/g;
+const SMOOTHUI_IMPORT_REGEX = /@\/components\/smoothui\/([a-z0-9-]+)/g;
+const SMOOTHUI_DATA_IMPORT_REGEX = /@\/lib\/smoothui-data/;
+
+const REGISTRY_URL = "https://smoothui.dev/r";
+
+// Workspace import specifiers must be rewritten to the paths where the
+// registry installs files in user projects — raw @repo/* or @smoothui/*
+// specifiers don't resolve outside this monorepo.
+const WORKSPACE_IMPORT_REWRITES: ReadonlyArray<readonly [RegExp, string]> = [
+  [/@repo\/shadcn-ui\/lib\/utils/g, "@/lib/utils"],
+  [/@repo\/shadcn-ui\/components\/ui\//g, "@/components/ui/"],
+  [/@repo\/smoothui\/components\//g, "@/components/smoothui/"],
+  [/@smoothui\/data/g, "@/lib/smoothui-data"],
+  // Components import shared animation constants via "../../lib/animation";
+  // the registry installs that file at components/smoothui/lib/animation.ts.
+  [/(?:\.\.\/)+lib\/animation/g, "@/components/smoothui/lib/animation"],
+  // Blocks import the shared helpers barrel via "../../shared", which would
+  // point outside the install dir (components/smoothui/<name>/) in user
+  // projects.
+  [/from\s+["'](?:\.\.\/)+shared["']/g, 'from "@/components/smoothui/shared"'],
+];
+
+const rewriteWorkspaceImports = (content: string): string => {
+  let rewritten = content;
+  for (const [pattern, replacement] of WORKSPACE_IMPORT_REWRITES) {
+    rewritten = rewritten.replace(pattern, replacement);
+  }
+  return rewritten;
+};
+
+const toTitleCase = (name: string): string =>
+  name
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+
+// Workspace package name → registry item short name, when they differ
+const WORKSPACE_DEP_ALIASES = new Map([["blocks-shared", "shared"]]);
 
 // Cache filtered package names for repeated lookups
 const FILTERED_PACKAGES = new Set([
@@ -15,7 +53,12 @@ const FILTERED_PACKAGES = new Set([
   "typescript-config",
   "patterns",
 ]);
-const FILTERED_DEPS = new Set(["react", "react-dom", "@repo/shadcn-ui"]);
+const FILTERED_DEPS = new Set([
+  "react",
+  "react-dom",
+  "@repo/shadcn-ui",
+  "@smoothui/data",
+]);
 const FILTERED_DEV_DEPS = new Set([
   "@repo/typescript-config",
   "@types/react",
@@ -124,26 +167,45 @@ export const getPackage = cache(async (packageName: string) => {
     (dep) => !FILTERED_DEV_DEPS.has(dep)
   );
 
+  const isData = packageName === "data";
+  const isSharedLib = packageName === "smoothui/blocks/shared";
+  const isBlock = packageName.startsWith("smoothui/blocks/") && !isSharedLib;
+
   const packageFiles = await readdir(packageDir, { withFileTypes: true });
-  const tsxFiles = packageFiles.filter(
-    (file) => file.isFile() && file.name.endsWith(".tsx")
+  const sourceFiles = packageFiles.filter(
+    (file) =>
+      file.isFile() &&
+      !file.name.includes(".config.") &&
+      (file.name.endsWith(".tsx") ||
+        (file.name.endsWith(".ts") && !file.name.endsWith(".d.ts")))
   );
 
   const cssFiles = packageFiles.filter(
     (file) => file.isFile() && file.name.endsWith(".css")
   );
 
+  let fileType: RegistryItem["type"] = "registry:ui";
+  if (isData || packageName === "smoothui/lib") {
+    fileType = "registry:lib";
+  } else if (isBlock) {
+    fileType = "registry:block";
+  } else if (isSharedLib) {
+    fileType = "registry:component";
+  }
+
   const files: RegistryItem["files"] = [];
 
-  for (const file of tsxFiles) {
+  for (const file of sourceFiles) {
     const filePath = join(packageDir, file.name);
     const content = await readFile(filePath, "utf-8");
 
     files.push({
-      type: "registry:ui",
+      type: fileType,
       path: file.name,
-      content,
-      target: `components/smoothui/${actualPackageName}/${file.name}`,
+      content: rewriteWorkspaceImports(content),
+      target: isData
+        ? `lib/smoothui-data/${file.name}`
+        : `components/smoothui/${actualPackageName}/${file.name}`,
     });
   }
 
@@ -165,18 +227,34 @@ export const getPackage = cache(async (packageName: string) => {
     .map((match) => match[1])
     .filter((name): name is string => !!name);
 
-  const registryDependencies = [...shadcnDependencies];
+  const registryDependencies = new Set<string>(shadcnDependencies);
 
   // Add smoothui dependencies from package.json
   for (const dep of smoothuiDependencies) {
-    const pkg = dep.replace("@repo/", "");
+    const raw = dep.replace("@repo/", "");
+    const pkg = WORKSPACE_DEP_ALIASES.get(raw) ?? raw;
 
-    registryDependencies.push(`https://smoothui.dev/r/${pkg}.json`);
+    if (pkg !== actualPackageName) {
+      registryDependencies.add(`${REGISTRY_URL}/${pkg}.json`);
+    }
   }
 
   // Add relative imports as registry dependencies
   for (const relativeImport of relativeImports) {
-    registryDependencies.push(`https://smoothui.dev/r/${relativeImport}.json`);
+    registryDependencies.add(`${REGISTRY_URL}/${relativeImport}.json`);
+  }
+
+  // Add cross-item imports detected in the rewritten content
+  // (@/components/smoothui/<name> covers components and the shared barrel)
+  for (const match of allContent.matchAll(SMOOTHUI_IMPORT_REGEX)) {
+    const name = match[1];
+    if (name && name !== actualPackageName) {
+      registryDependencies.add(`${REGISTRY_URL}/${name}.json`);
+    }
+  }
+
+  if (!isData && SMOOTHUI_DATA_IMPORT_REGEX.test(allContent)) {
+    registryDependencies.add(`${REGISTRY_URL}/data.json`);
   }
 
   const css: RegistryItem["css"] = {};
@@ -246,9 +324,9 @@ export const getPackage = cache(async (packageName: string) => {
     });
   }
 
-  let type: RegistryItem["type"] = "registry:ui";
+  let type: RegistryItem["type"] = fileType;
 
-  if (!Object.keys(files).length && Object.keys(css).length) {
+  if (!files.length && Object.keys(css).length) {
     type = "registry:style";
   }
 
@@ -256,12 +334,12 @@ export const getPackage = cache(async (packageName: string) => {
     $schema: "https://ui.shadcn.com/schema/registry-item.json",
     name: actualPackageName,
     type,
-    title: actualPackageName,
+    title: toTitleCase(actualPackageName),
     description: packageJson.description,
     author: "Eduardo Calvo <educlopez93@gmail.com>",
     dependencies,
     devDependencies,
-    registryDependencies,
+    registryDependencies: Array.from(registryDependencies),
     files,
     css,
   };
diff --git a/apps/docs/lib/registry-skill.ts b/apps/docs/lib/registry-skill.ts
new file mode 100644
index 00000000..7ce624d2
--- /dev/null
+++ b/apps/docs/lib/registry-skill.ts
@@ -0,0 +1,31 @@
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { cache } from "react";
+import type { RegistryItem } from "shadcn/schema";
+
+export const SKILL_ITEM_NAME = "skill";
+
+// The SmoothUI skill: a SKILL.md installed into the user's project so AI
+// assistants know how to install and extend SmoothUI correctly.
+export const getSkill = cache(async (): Promise<RegistryItem> => {
+  const skillPath = join(process.cwd(), "registry-assets", "SKILL.md");
+  const content = await readFile(skillPath, "utf-8");
+
+  return {
+    $schema: "https://ui.shadcn.com/schema/registry-item.json",
+    name: SKILL_ITEM_NAME,
+    type: "registry:item",
+    title: "SmoothUI Skill",
+    description:
+      "Teaches AI coding assistants how to install SmoothUI components, blocks, and themes, and how to follow SmoothUI animation conventions.",
+    author: "Eduardo Calvo <educlopez93@gmail.com>",
+    files: [
+      {
+        path: "SKILL.md",
+        type: "registry:file",
+        content,
+        target: ".claude/skills/smoothui/SKILL.md",
+      },
+    ],
+  };
+});
diff --git a/apps/docs/lib/registry-themes.ts b/apps/docs/lib/registry-themes.ts
new file mode 100644
index 00000000..e276c62c
--- /dev/null
+++ b/apps/docs/lib/registry-themes.ts
@@ -0,0 +1,185 @@
+import type { RegistryItem } from "shadcn/schema";
+
+// Installable SmoothUI themes (registry:theme). Each theme maps the SmoothUI
+// design tokens (smooth neutral scale + brand accent from the docs color
+// picker) onto the standard shadcn CSS variable names, so `shadcn add`
+// injects them into any shadcn project — Radix or Base UI based.
+// Palette values mirror PALETTES in components/color-picker-float-nav.tsx
+// and the scales in app/smoothui.css.
+
+export interface ThemePalette {
+  label: string;
+  name: string;
+  /** Closest shadcn/create preset (catalog enums can't carry exact oklch) */
+  presetCode: string;
+  primary: string;
+  secondary: string;
+}
+
+export const THEME_PALETTES: ThemePalette[] = [
+  {
+    name: "candy",
+    presetCode: "b3gmgq",
+    label: "Candy",
+    primary: "oklch(0.72 0.2 352.53)",
+    secondary: "oklch(0.66 0.21 354.31)",
+  },
+  {
+    name: "indigo",
+    presetCode: "b2pzIe",
+    label: "Indigo",
+    primary: "oklch(0.65 0.22 300.21)",
+    secondary: "oklch(0.54 0.23 286.53)",
+  },
+  {
+    name: "blue",
+    presetCode: "b1PzeK",
+    label: "Blue",
+    primary: "oklch(0.67 0.17 257.78)",
+    secondary: "oklch(0.59 0.21 258.02)",
+  },
+  {
+    name: "red",
+    presetCode: "b4Fywy",
+    label: "Red",
+    primary: "oklch(0.67 0.21 24.28)",
+    secondary: "oklch(0.62 0.25 28.23)",
+  },
+  {
+    name: "orange",
+    presetCode: "b3PBYm",
+    label: "Orange",
+    primary: "oklch(0.75 0.17 47.65)",
+    secondary: "oklch(0.68 0.21 40.59)",
+  },
+  {
+    name: "green",
+    presetCode: "b2YOAa",
+    label: "Green",
+    primary: "oklch(0.70 0.15 162.48)",
+    secondary: "oklch(0.60 0.13 163.23)",
+  },
+];
+
+// Perceptually uniform neutral ramp — mirror of app/smoothui.css. Even oklch-L
+// spacing so installed themes inherit WCAG-passing borders/inputs/muted text.
+export const LIGHT_SCALE = {
+  50: "oklch(0.99 0 0)",
+  100: "oklch(0.972 0 0)",
+  200: "oklch(0.945 0 0)",
+  300: "oklch(0.91 0 0)",
+  400: "oklch(0.865 0 0)",
+  500: "oklch(0.81 0 0)",
+  600: "oklch(0.74 0 0)",
+  700: "oklch(0.66 0 0)",
+  800: "oklch(0.56 0 0)",
+  900: "oklch(0.47 0 0)",
+  950: "oklch(0.36 0 0)",
+  1000: "oklch(0.22 0 0)",
+} as const;
+
+export const DARK_SCALE = {
+  50: "oklch(0.2 0 0)",
+  100: "oklch(0.235 0 0)",
+  200: "oklch(0.275 0 0)",
+  300: "oklch(0.315 0 0)",
+  400: "oklch(0.36 0 0)",
+  500: "oklch(0.41 0 0)",
+  600: "oklch(0.47 0 0)",
+  700: "oklch(0.55 0 0)",
+  800: "oklch(0.66 0 0)",
+  900: "oklch(0.74 0 0)",
+  950: "oklch(0.85 0 0)",
+  1000: "oklch(0.96 0 0)",
+} as const;
+
+const WHITE = "oklch(1 0 0)";
+
+const buildModeVars = (
+  scale: typeof LIGHT_SCALE | typeof DARK_SCALE,
+  primary: string,
+  secondary: string,
+  input: string,
+  destructive: string
+): Record<string, string> => ({
+  background: scale[50],
+  foreground: scale[1000],
+  card: scale[50],
+  "card-foreground": scale[1000],
+  popover: scale[50],
+  "popover-foreground": scale[1000],
+  primary: scale[100],
+  "primary-foreground": scale[950],
+  secondary: scale[200],
+  "secondary-foreground": scale[900],
+  muted: scale[200],
+  "muted-foreground": scale[800],
+  accent: primary,
+  "accent-foreground": WHITE,
+  destructive,
+  // Dividers are decorative (WCAG-exempt); keep them subtle. Control
+  // boundaries that need 3:1 live in `input`, not here.
+  border: scale[300],
+  input,
+  ring: primary,
+  "chart-1": primary,
+  "chart-2": secondary,
+  "chart-3": scale[800],
+  "chart-4": scale[600],
+  "chart-5": scale[400],
+  sidebar: scale[100],
+  "sidebar-foreground": scale[1000],
+  "sidebar-primary": primary,
+  "sidebar-primary-foreground": WHITE,
+  "sidebar-accent": scale[200],
+  "sidebar-accent-foreground": scale[900],
+  "sidebar-border": scale[400],
+  "sidebar-ring": primary,
+});
+
+const themeItemName = (paletteName: string): string => `theme-${paletteName}`;
+
+export const getAllThemeNames = (): string[] =>
+  THEME_PALETTES.map((palette) => themeItemName(palette.name));
+
+export const getTheme = (itemName: string): RegistryItem | undefined => {
+  const palette = THEME_PALETTES.find(
+    (entry) => themeItemName(entry.name) === itemName
+  );
+
+  if (!palette) {
+    return;
+  }
+
+  return {
+    $schema: "https://ui.shadcn.com/schema/registry-item.json",
+    name: itemName,
+    type: "registry:theme",
+    title: `SmoothUI ${palette.label}`,
+    description: `SmoothUI ${palette.label} theme: smooth neutral scale with a ${palette.label.toLowerCase()} accent, light and dark mode included.`,
+    author: "Eduardo Calvo <educlopez93@gmail.com>",
+    cssVars: {
+      theme: {
+        // SmoothUI brand font; falls back gracefully when Inter isn't loaded.
+        "font-sans": "Inter, sans-serif",
+      },
+      light: {
+        ...buildModeVars(
+          LIGHT_SCALE,
+          palette.primary,
+          palette.secondary,
+          LIGHT_SCALE[700],
+          "oklch(0.577 0.245 27.325)"
+        ),
+        radius: "0.625rem",
+      },
+      dark: buildModeVars(
+        DARK_SCALE,
+        palette.primary,
+        palette.secondary,
+        DARK_SCALE[700],
+        "oklch(0.704 0.191 22.216)"
+      ),
+    },
+  };
+};
diff --git a/apps/docs/lib/source.ts b/apps/docs/lib/source.ts
index 26769b31..2f91ad21 100644
--- a/apps/docs/lib/source.ts
+++ b/apps/docs/lib/source.ts
@@ -1,12 +1,12 @@
+import { nucleoIconsPlugin } from "@docs/lib/nucleo-icons-plugin";
 import { type InferPageType, loader } from "fumadocs-core/source";
-import { lucideIconsPlugin } from "fumadocs-core/source/lucide-icons";
 import { blog, docs } from "@/.source/server";
 
 // See https://fumadocs.dev/docs/headless/source-api for more info
 export const source = loader({
   baseUrl: "/docs",
   source: docs.toFumadocsSource(),
-  plugins: [lucideIconsPlugin()],
+  plugins: [nucleoIconsPlugin()],
 });
 
 export const blogSource = loader({
diff --git a/apps/docs/lib/starter-kits.ts b/apps/docs/lib/starter-kits.ts
new file mode 100644
index 00000000..75439543
--- /dev/null
+++ b/apps/docs/lib/starter-kits.ts
@@ -0,0 +1,48 @@
+export type StarterKit = {
+  id: string;
+  label: string;
+  description: string;
+  /** Registry slugs added when the kit is loaded. */
+  slugs: string[];
+};
+
+export const STARTER_KITS: StarterKit[] = [
+  {
+    id: "landing",
+    label: "Landing page",
+    description: "Hero-ready motion and flair",
+    slugs: [
+      "scramble-hover",
+      "number-flow",
+      "animated-tags",
+      "expandable-cards",
+      "siri-orb",
+      "button-copy",
+    ],
+  },
+  {
+    id: "ios",
+    label: "iOS feel",
+    description: "Apple-style interactions",
+    slugs: [
+      "dynamic-island",
+      "apple-invites",
+      "power-off-slide",
+      "photo-stack",
+      "phototab",
+    ],
+  },
+  {
+    id: "dashboard",
+    label: "Dashboard",
+    description: "Data display and inputs",
+    slugs: [
+      "number-flow",
+      "price-flow",
+      "animated-stepper",
+      "searchable-dropdown",
+      "combobox",
+      "user-account-avatar",
+    ],
+  },
+];
diff --git a/apps/docs/lib/studio-preset.ts b/apps/docs/lib/studio-preset.ts
new file mode 100644
index 00000000..1475c241
--- /dev/null
+++ b/apps/docs/lib/studio-preset.ts
@@ -0,0 +1,245 @@
+import {
+  DARK_SCALE,
+  getTheme,
+  LIGHT_SCALE,
+  THEME_PALETTES,
+} from "@docs/lib/registry-themes";
+import type { RegistryItem } from "shadcn/schema";
+
+// SmoothUI's own preset system. Unlike shadcn/create presets (limited to
+// their catalog enums), these codes carry the full studio state — exact
+// palette, continuous radius, accent lightness shift, font and neutral
+// tint — and decode both in the studio (shareable URLs) and in the
+// registry route, where they become installable registry:theme items:
+//   npx shadcn@latest add https://smoothui.dev/r/theme-custom-<code>.json
+
+export const FONT_OPTIONS = [
+  { id: "sans", label: "Sans", stack: "Inter, ui-sans-serif, sans-serif" },
+  { id: "serif", label: "Serif", stack: "Georgia, ui-serif, serif" },
+  {
+    id: "mono",
+    label: "Mono",
+    stack: '"Geist Mono", ui-monospace, monospace',
+  },
+] as const;
+
+export type FontId = (typeof FONT_OPTIONS)[number]["id"];
+
+export const TINT_OPTIONS = [
+  { id: "neutral", label: "Neutral", hue: 0, chroma: 0 },
+  { id: "warm", label: "Warm", hue: 75, chroma: 0.009 },
+  { id: "cool", label: "Cool", hue: 255, chroma: 0.009 },
+] as const;
+
+export type TintId = (typeof TINT_OPTIONS)[number]["id"];
+
+export interface StudioPresetState {
+  accent: number;
+  font: FontId;
+  palette: string;
+  radius: number;
+  tint: TintId;
+}
+
+export const DEFAULT_STUDIO_STATE: StudioPresetState = {
+  accent: 0,
+  font: "sans",
+  palette: "candy",
+  radius: 10,
+  tint: "neutral",
+};
+
+export const fontStack = (font: FontId): string =>
+  FONT_OPTIONS.find((option) => option.id === font)?.stack ??
+  FONT_OPTIONS[0].stack;
+
+const OKLCH_REGEX = /oklch\((\S+) (\S+) (\S+)\)/;
+
+/** Shift an oklch color's lightness by a percentage-point delta. */
+export const shiftLightness = (color: string, delta: number): string => {
+  const match = color.match(OKLCH_REGEX);
+  if (!match) {
+    return color;
+  }
+  const lightness = Math.min(
+    1,
+    Math.max(0, Number.parseFloat(match[1]) + delta / 100)
+  );
+  return `oklch(${Number(lightness.toFixed(3))} ${match[2]} ${match[3]})`;
+};
+
+/** Re-tint an achromatic oklch scale value with a subtle hue/chroma. */
+const tintColor = (color: string, tint: TintId): string => {
+  const option = TINT_OPTIONS.find((entry) => entry.id === tint);
+  if (!option || option.chroma === 0) {
+    return color;
+  }
+  const match = color.match(OKLCH_REGEX);
+  if (!match) {
+    return color;
+  }
+  return `oklch(${match[1]} ${option.chroma} ${option.hue})`;
+};
+
+export const tintScale = (
+  scale: Record<string, string>,
+  tint: TintId
+): Record<string, string> => {
+  const next: Record<string, string> = {};
+  for (const [stop, value] of Object.entries(scale)) {
+    next[stop] = tintColor(value, tint);
+  }
+  return next;
+};
+
+// ---------------------------------------------------------------------------
+// Encoding: compact, URL-safe, versioned ("s1").
+// Format: s1.<palette>.<radius>.<accent+15>.<font>.<tint>
+// ---------------------------------------------------------------------------
+
+const CODE_VERSION = "s1";
+const ACCENT_OFFSET = 15;
+
+export const encodeStudioPreset = (state: StudioPresetState): string =>
+  [
+    CODE_VERSION,
+    state.palette,
+    state.radius,
+    state.accent + ACCENT_OFFSET,
+    state.font,
+    state.tint,
+  ].join(".");
+
+export const decodeStudioPreset = (
+  code: string
+): StudioPresetState | undefined => {
+  const [version, palette, radius, accent, font, tint] = code.split(".");
+  if (version !== CODE_VERSION) {
+    return;
+  }
+  if (!THEME_PALETTES.some((entry) => entry.name === palette)) {
+    return;
+  }
+  const radiusPx = Number.parseInt(radius, 10);
+  const accentDelta = Number.parseInt(accent, 10) - ACCENT_OFFSET;
+  if (
+    !(Number.isFinite(radiusPx) && Number.isFinite(accentDelta)) ||
+    radiusPx < 0 ||
+    radiusPx > 24 ||
+    accentDelta < -ACCENT_OFFSET ||
+    accentDelta > ACCENT_OFFSET
+  ) {
+    return;
+  }
+  if (!FONT_OPTIONS.some((option) => option.id === font)) {
+    return;
+  }
+  if (!TINT_OPTIONS.some((option) => option.id === tint)) {
+    return;
+  }
+  return {
+    accent: accentDelta,
+    font: font as FontId,
+    palette,
+    radius: radiusPx,
+    tint: tint as TintId,
+  };
+};
+
+// ---------------------------------------------------------------------------
+// Custom theme registry item built from a preset code
+// ---------------------------------------------------------------------------
+
+const PX_PER_REM = 16;
+
+// cssVars keys that carry the brand accent and must follow accent shifts
+const ACCENT_KEYS = [
+  "accent",
+  "ring",
+  "chart-1",
+  "sidebar-primary",
+  "sidebar-ring",
+];
+const SECONDARY_KEYS = ["chart-2"];
+
+export const applyAccent = (
+  vars: Record<string, string>,
+  delta: number
+): Record<string, string> => {
+  if (delta === 0) {
+    return vars;
+  }
+  const next = { ...vars };
+  for (const key of [...ACCENT_KEYS, ...SECONDARY_KEYS]) {
+    if (next[key]) {
+      next[key] = shiftLightness(next[key], delta);
+    }
+  }
+  return next;
+};
+
+const applyTintToVars = (
+  vars: Record<string, string>,
+  scale: Record<string, string>,
+  tinted: Record<string, string>
+): Record<string, string> => {
+  const byValue = new Map(
+    Object.entries(scale).map(([stop, value]) => [value, tinted[stop]])
+  );
+  const next: Record<string, string> = {};
+  for (const [key, value] of Object.entries(vars)) {
+    next[key] = byValue.get(value) ?? value;
+  }
+  return next;
+};
+
+export const buildStudioCssVars = (
+  state: StudioPresetState
+): RegistryItem["cssVars"] | undefined => {
+  const theme = getTheme(`theme-${state.palette}`);
+  if (!(theme?.cssVars?.light && theme.cssVars.dark)) {
+    return;
+  }
+  const lightTinted = tintScale(LIGHT_SCALE, state.tint);
+  const darkTinted = tintScale(DARK_SCALE, state.tint);
+  const light = applyAccent(
+    applyTintToVars(theme.cssVars.light, LIGHT_SCALE, lightTinted),
+    state.accent
+  );
+  const dark = applyAccent(
+    applyTintToVars(theme.cssVars.dark, DARK_SCALE, darkTinted),
+    state.accent
+  );
+  return {
+    theme: { "font-sans": fontStack(state.font) },
+    light: { ...light, radius: `${state.radius / PX_PER_REM}rem` },
+    dark,
+  };
+};
+
+export const CUSTOM_THEME_PREFIX = "theme-custom-";
+
+export const getCustomTheme = (itemName: string): RegistryItem | undefined => {
+  if (!itemName.startsWith(CUSTOM_THEME_PREFIX)) {
+    return;
+  }
+  const code = itemName.slice(CUSTOM_THEME_PREFIX.length);
+  const state = decodeStudioPreset(code);
+  if (!state) {
+    return;
+  }
+  const cssVars = buildStudioCssVars(state);
+  if (!cssVars) {
+    return;
+  }
+  const palette = THEME_PALETTES.find((entry) => entry.name === state.palette);
+  return {
+    $schema: "https://ui.shadcn.com/schema/registry-item.json",
+    name: itemName,
+    type: "registry:theme",
+    title: `SmoothUI ${palette?.label ?? state.palette} (custom)`,
+    description: `Custom SmoothUI ${state.palette} theme from the Theme Studio: radius ${state.radius}px, accent ${state.accent >= 0 ? "+" : ""}${state.accent}, ${state.font} font, ${state.tint} neutrals.`,
+    author: "Eduardo Calvo <educlopez93@gmail.com>",
+    cssVars,
+  };
+};
diff --git a/apps/docs/next.config.ts b/apps/docs/next.config.ts
index 917e481b..e35c546c 100644
--- a/apps/docs/next.config.ts
+++ b/apps/docs/next.config.ts
@@ -38,6 +38,10 @@ const config: NextConfig = {
         protocol: "https",
         hostname: "abs.twimg.com",
       },
+      {
+        protocol: "https",
+        hostname: "unavatar.io",
+      },
     ],
   },
   redirects() {
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 847e8d36..aafa1540 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "build": "next build --turbopack",
     "dev": "next dev --turbopack",
-    "start": "next start"
+    "start": "next start",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@next/bundle-analyzer": "^16.0.7",
@@ -33,6 +34,8 @@
     "motion": "^12.23.25",
     "next": "16.2.6",
     "next-themes": "^0.4.6",
+    "nucleo-core-fill-24": "^1.1.3",
+    "nucleo-social-media": "^1.0.2",
     "oxc-transform": "^0.126.0",
     "popmotion": "^11.0.3",
     "postcss-nested": "^7.0.2",
@@ -46,11 +49,12 @@
     "remark-math": "^6.0.0",
     "remark-mdx": "^3.1.1",
     "remark-rehype": "^11.1.2",
-    "shadcn": "^4.3.0",
+    "shadcn": "^4.11.0",
     "shiki": "^4.0.2",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
-    "twoslash": "^0.3.4"
+    "twoslash": "^0.3.4",
+    "use-sound": "^5.0.0"
   },
   "devDependencies": {
     "@repo/typescript-config": "workspace:*",
diff --git a/apps/docs/public/blog/ai-design-slop.webp b/apps/docs/public/blog/ai-design-slop.webp
new file mode 100644
index 00000000..45565c02
Binary files /dev/null and b/apps/docs/public/blog/ai-design-slop.webp differ
diff --git a/apps/docs/public/blog/best-react-animation-libraries.webp b/apps/docs/public/blog/best-react-animation-libraries.webp
new file mode 100644
index 00000000..5b4d8c88
Binary files /dev/null and b/apps/docs/public/blog/best-react-animation-libraries.webp differ
diff --git a/apps/docs/public/blog/building-animated-tabs.webp b/apps/docs/public/blog/building-animated-tabs.webp
new file mode 100644
index 00000000..a61aa650
Binary files /dev/null and b/apps/docs/public/blog/building-animated-tabs.webp differ
diff --git a/apps/docs/public/blog/building-magnetic-button.webp b/apps/docs/public/blog/building-magnetic-button.webp
new file mode 100644
index 00000000..5049ca06
Binary files /dev/null and b/apps/docs/public/blog/building-magnetic-button.webp differ
diff --git a/apps/docs/public/blog/building-number-flow.webp b/apps/docs/public/blog/building-number-flow.webp
new file mode 100644
index 00000000..ad538627
Binary files /dev/null and b/apps/docs/public/blog/building-number-flow.webp differ
diff --git a/apps/docs/public/blog/building-rich-popover.webp b/apps/docs/public/blog/building-rich-popover.webp
new file mode 100644
index 00000000..de097370
Binary files /dev/null and b/apps/docs/public/blog/building-rich-popover.webp differ
diff --git a/apps/docs/public/blog/building-scramble-hover.webp b/apps/docs/public/blog/building-scramble-hover.webp
new file mode 100644
index 00000000..d931a925
Binary files /dev/null and b/apps/docs/public/blog/building-scramble-hover.webp differ
diff --git a/apps/docs/public/blog/building-social-selector.webp b/apps/docs/public/blog/building-social-selector.webp
new file mode 100644
index 00000000..73fffea0
Binary files /dev/null and b/apps/docs/public/blog/building-social-selector.webp differ
diff --git a/apps/docs/public/blog/building-user-account-avatar.webp b/apps/docs/public/blog/building-user-account-avatar.webp
new file mode 100644
index 00000000..e7cdf080
Binary files /dev/null and b/apps/docs/public/blog/building-user-account-avatar.webp differ
diff --git a/apps/docs/public/blog/framer-motion-tutorial.webp b/apps/docs/public/blog/framer-motion-tutorial.webp
new file mode 100644
index 00000000..fc94fe79
Binary files /dev/null and b/apps/docs/public/blog/framer-motion-tutorial.webp differ
diff --git a/apps/docs/public/blog/introducing-ui-craft.webp b/apps/docs/public/blog/introducing-ui-craft.webp
new file mode 100644
index 00000000..4652a506
Binary files /dev/null and b/apps/docs/public/blog/introducing-ui-craft.webp differ
diff --git a/apps/docs/public/images/figma/bg-1.webp b/apps/docs/public/images/figma/bg-1.webp
new file mode 100644
index 00000000..9b6ce13b
Binary files /dev/null and b/apps/docs/public/images/figma/bg-1.webp differ
diff --git a/apps/docs/public/images/figma/bg-11.webp b/apps/docs/public/images/figma/bg-11.webp
new file mode 100644
index 00000000..a77eefd8
Binary files /dev/null and b/apps/docs/public/images/figma/bg-11.webp differ
diff --git a/apps/docs/public/images/figma/bg-13.webp b/apps/docs/public/images/figma/bg-13.webp
new file mode 100644
index 00000000..3bd997dd
Binary files /dev/null and b/apps/docs/public/images/figma/bg-13.webp differ
diff --git a/apps/docs/public/images/figma/bg-5.webp b/apps/docs/public/images/figma/bg-5.webp
new file mode 100644
index 00000000..9c85e375
Binary files /dev/null and b/apps/docs/public/images/figma/bg-5.webp differ
diff --git a/apps/docs/public/images/figma/bg-8.webp b/apps/docs/public/images/figma/bg-8.webp
new file mode 100644
index 00000000..125509ab
Binary files /dev/null and b/apps/docs/public/images/figma/bg-8.webp differ
diff --git a/apps/docs/public/images/figma/bg-9.webp b/apps/docs/public/images/figma/bg-9.webp
new file mode 100644
index 00000000..ae7e36d6
Binary files /dev/null and b/apps/docs/public/images/figma/bg-9.webp differ
diff --git a/apps/docs/public/scenes/ai-mcp.webp b/apps/docs/public/scenes/ai-mcp.webp
new file mode 100644
index 00000000..8ea2f577
Binary files /dev/null and b/apps/docs/public/scenes/ai-mcp.webp differ
diff --git a/apps/docs/public/scenes/skill-meadow.webp b/apps/docs/public/scenes/skill-meadow.webp
new file mode 100644
index 00000000..a3106f86
Binary files /dev/null and b/apps/docs/public/scenes/skill-meadow.webp differ
diff --git a/apps/docs/public/scenes/testimonial-1.jpg b/apps/docs/public/scenes/testimonial-1.jpg
new file mode 100644
index 00000000..052ebe39
Binary files /dev/null and b/apps/docs/public/scenes/testimonial-1.jpg differ
diff --git a/apps/docs/public/scenes/testimonial-2.jpg b/apps/docs/public/scenes/testimonial-2.jpg
new file mode 100644
index 00000000..8a0b0b8a
Binary files /dev/null and b/apps/docs/public/scenes/testimonial-2.jpg differ
diff --git a/apps/docs/public/scenes/why-choose.webp b/apps/docs/public/scenes/why-choose.webp
new file mode 100644
index 00000000..6a95c44e
Binary files /dev/null and b/apps/docs/public/scenes/why-choose.webp differ
diff --git a/apps/docs/public/sounds/button.wav b/apps/docs/public/sounds/button.wav
new file mode 100644
index 00000000..aec020e6
Binary files /dev/null and b/apps/docs/public/sounds/button.wav differ
diff --git a/apps/docs/public/sounds/celebration.wav b/apps/docs/public/sounds/celebration.wav
new file mode 100644
index 00000000..f42d50c6
Binary files /dev/null and b/apps/docs/public/sounds/celebration.wav differ
diff --git a/apps/docs/public/sounds/toggle_off.wav b/apps/docs/public/sounds/toggle_off.wav
new file mode 100644
index 00000000..52090161
Binary files /dev/null and b/apps/docs/public/sounds/toggle_off.wav differ
diff --git a/apps/docs/public/sounds/toggle_on.wav b/apps/docs/public/sounds/toggle_on.wav
new file mode 100644
index 00000000..0b5611d8
Binary files /dev/null and b/apps/docs/public/sounds/toggle_on.wav differ
diff --git a/apps/docs/public/vercel-oss-badge.svg b/apps/docs/public/vercel-oss-badge.svg
new file mode 100644
index 00000000..fe925cf1
--- /dev/null
+++ b/apps/docs/public/vercel-oss-badge.svg
@@ -0,0 +1,55 @@
+<svg width="240" height="24" viewBox="0 0 240 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+:root {
+  --primary: #000;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary: #fff;
+  }
+}
+</style>
+<path d="M13.4283 0.610352L26.8565 23.8046H0L13.4283 0.610352Z" fill="var(--primary)"/>
+<path d="M236.436 22.7547L235.081 17.1148V23.8045H233.849V15.1372H235.557L236.924 20.7405L238.291 15.1372H240V23.8045H238.767V17.1148L237.412 22.7547H236.436Z" fill="var(--primary)"/>
+<path d="M226.237 23.8045L228.776 15.1372H230.436L232.974 23.8045H231.644L231.022 21.5462H228.19L227.568 23.8045H226.237ZM229.606 16.4678L228.52 20.362H230.692L229.606 16.4678Z" fill="var(--primary)"/>
+<path d="M219.444 23.8045V15.1372H222.142C223.972 15.1372 225.095 16.126 225.095 17.7252C225.095 18.7628 224.436 19.5197 223.631 19.7761C224.485 19.9348 224.9 20.4109 224.973 21.3386L225.193 23.8045H223.911L223.716 21.5828C223.643 20.716 223.301 20.4231 222.239 20.4231H220.726V23.8045H219.444ZM220.726 19.2267H222.117C223.179 19.2267 223.777 18.7018 223.777 17.7862C223.777 16.8585 223.179 16.3458 222.117 16.3458H220.726V19.2267Z" fill="var(--primary)"/>
+<path d="M214.957 23.9999C213.09 23.9999 211.748 22.4251 211.748 19.4831C211.748 16.6876 212.956 14.9419 214.994 14.9419C216.63 14.9419 217.704 16.0772 218.082 17.8107L216.752 17.8961C216.508 16.8341 215.934 16.1504 215.006 16.1504C213.774 16.1504 213.078 17.3468 213.078 19.4831C213.078 21.6072 213.798 22.7913 215.067 22.7913C216.178 22.7913 216.861 21.8758 216.91 20.4963H215.006V19.3854H218.094V23.8045H217.057L217.02 22.6937C216.642 23.4749 215.983 23.9999 214.957 23.9999Z" fill="var(--primary)"/>
+<path d="M207.651 23.9999C205.589 23.9999 204.429 22.3763 204.429 19.4831C204.429 16.5655 205.589 14.9419 207.651 14.9419C209.714 14.9419 210.873 16.5655 210.873 19.4831C210.873 22.3763 209.714 23.9999 207.651 23.9999ZM207.651 22.8035C208.872 22.8035 209.543 21.6804 209.543 19.4831C209.543 17.2857 208.872 16.1382 207.651 16.1382C206.431 16.1382 205.76 17.2857 205.76 19.4831C205.76 21.6804 206.431 22.8035 207.651 22.8035Z" fill="var(--primary)"/>
+<path d="M197.489 23.8045V15.1372H200.187C202.017 15.1372 203.14 16.126 203.14 17.7252C203.14 18.7628 202.481 19.5197 201.676 19.7761C202.53 19.9348 202.945 20.4109 203.018 21.3386L203.238 23.8045H201.956L201.761 21.5828C201.688 20.716 201.346 20.4231 200.284 20.4231H198.771V23.8045H197.489ZM198.771 19.2267H200.162C201.224 19.2267 201.822 18.7018 201.822 17.7862C201.822 16.8585 201.224 16.3458 200.162 16.3458H198.771V19.2267Z" fill="var(--primary)"/>
+<path d="M190.403 23.8045V15.1372H193.088C194.894 15.1372 196.09 16.1626 196.09 17.8351C196.09 19.4953 194.894 20.5207 193.088 20.5207H191.684V23.8045H190.403ZM191.684 19.3122H192.954C194.186 19.3122 194.76 18.7995 194.76 17.8351C194.76 16.8707 194.186 16.3458 192.954 16.3458H191.684V19.3122Z" fill="var(--primary)"/>
+<path d="M175.791 23.8045V15.1372H181.112V16.3458H177.073V18.8727H180.966V20.0446H177.073V22.596H181.21V23.8045H175.791Z" fill="var(--primary)"/>
+<path d="M168.216 23.8045V15.1372H170.914C172.744 15.1372 173.867 16.126 173.867 17.7252C173.867 18.7628 173.208 19.5197 172.403 19.7761C173.257 19.9348 173.672 20.4109 173.745 21.3386L173.965 23.8045H172.683L172.488 21.5828C172.415 20.716 172.073 20.4231 171.011 20.4231H169.498V23.8045H168.216ZM169.498 19.2267H170.889C171.951 19.2267 172.549 18.7018 172.549 17.7862C172.549 16.8585 171.951 16.3458 170.889 16.3458H169.498V19.2267Z" fill="var(--primary)"/>
+<path d="M160.374 23.8045L162.912 15.1372H164.572L167.111 23.8045H165.78L165.158 21.5462H162.326L161.704 23.8045H160.374ZM163.742 16.4678L162.656 20.362H164.828L163.742 16.4678Z" fill="var(--primary)"/>
+<path d="M154.032 23.8045L153.104 15.1372H154.386L155.045 22.1565L155.862 16.1138H156.985L157.803 22.1565L158.462 15.1372H159.744L158.816 23.8045H157.144L156.424 18.5309L155.704 23.8045H154.032Z" fill="var(--primary)"/>
+<path d="M148.471 23.8045V16.3458H145.932V15.1372H152.279V16.3458H149.74V23.8045H148.471Z" fill="var(--primary)"/>
+<path d="M139.322 23.8045V15.1372H144.741V16.3213H140.604V18.9826H144.522V20.1545H140.604V23.8045H139.322Z" fill="var(--primary)"/>
+<path d="M134.469 23.9999C132.407 23.9999 131.247 22.3763 131.247 19.4831C131.247 16.5655 132.407 14.9419 134.469 14.9419C136.532 14.9419 137.691 16.5655 137.691 19.4831C137.691 22.3763 136.532 23.9999 134.469 23.9999ZM134.469 22.8035C135.69 22.8035 136.361 21.6804 136.361 19.4831C136.361 17.2857 135.69 16.1382 134.469 16.1382C133.249 16.1382 132.577 17.2857 132.577 19.4831C132.577 21.6804 133.249 22.8035 134.469 22.8035Z" fill="var(--primary)"/>
+<path d="M127.261 23.9999C125.381 23.9999 124.161 22.8035 124.014 20.9846L125.332 20.8992C125.503 22.1443 126.211 22.8035 127.31 22.8035C128.371 22.8035 128.969 22.3763 128.969 21.6072C128.969 20.8381 128.554 20.3987 126.736 19.8859C124.954 19.3976 124.209 18.7995 124.209 17.4566C124.209 15.9673 125.308 14.9419 127.126 14.9419C128.933 14.9419 129.97 16.0772 130.141 17.7496L128.823 17.8229C128.689 16.8219 128.127 16.1382 127.09 16.1382C126.138 16.1382 125.528 16.6387 125.528 17.3956C125.528 18.1525 125.955 18.4332 127.493 18.8605C129.567 19.4221 130.288 20.1911 130.288 21.6072C130.288 23.0355 129.079 23.9999 127.261 23.9999Z" fill="var(--primary)"/>
+<path d="M109.927 23.8045V15.1372H115.248V16.3458H111.208V18.8727H115.102V20.0446H111.208V22.596H115.346V23.8045H109.927Z" fill="var(--primary)"/>
+<path d="M105.232 23.9999C103.145 23.9999 101.974 22.2664 101.974 19.4831C101.974 16.6876 103.145 14.9419 105.232 14.9419C106.807 14.9419 107.942 16.0284 108.296 17.9083L106.953 17.9816C106.709 16.773 106.05 16.1382 105.232 16.1382C103.975 16.1382 103.304 17.3468 103.304 19.4831C103.304 21.6072 103.975 22.8035 105.232 22.8035C106.123 22.8035 106.795 22.1077 107.014 20.7893L108.345 20.8503C108.04 22.8279 106.892 23.9999 105.232 23.9999Z" fill="var(--primary)"/>
+<path d="M95.0342 23.8045V15.1372H97.7315C99.5622 15.1372 100.685 16.126 100.685 17.7252C100.685 18.7628 100.026 19.5197 99.2205 19.7761C100.075 19.9348 100.49 20.4109 100.563 21.3386L100.783 23.8045H99.5012L99.3059 21.5828C99.2327 20.716 98.891 20.4231 97.8291 20.4231H96.3157V23.8045H95.0342ZM96.3157 19.2267H97.7071C98.7689 19.2267 99.367 18.7018 99.367 17.7862C99.367 16.8585 98.7689 16.3458 97.7071 16.3458H96.3157V19.2267Z" fill="var(--primary)"/>
+<path d="M90.5596 23.9999C88.7166 23.9999 87.606 22.8035 87.606 20.7893V15.1372H88.8875V20.8381C88.8875 22.1077 89.4733 22.8035 90.5596 22.8035C91.6458 22.8035 92.2317 22.1077 92.2317 20.8381V15.1372H93.5132V20.7893C93.5132 22.8035 92.4025 23.9999 90.5596 23.9999Z" fill="var(--primary)"/>
+<path d="M83.2417 23.9999C81.179 23.9999 80.0195 22.3763 80.0195 19.4831C80.0195 16.5655 81.179 14.9419 83.2417 14.9419C85.3043 14.9419 86.4638 16.5655 86.4638 19.4831C86.4638 22.3763 85.3043 23.9999 83.2417 23.9999ZM83.2417 22.8035C84.4622 22.8035 85.1334 21.6804 85.1334 19.4831C85.1334 17.2857 84.4622 16.1382 83.2417 16.1382C82.0212 16.1382 81.3499 17.2857 81.3499 19.4831C81.3499 21.6804 82.0212 22.8035 83.2417 22.8035Z" fill="var(--primary)"/>
+<path d="M76.0332 23.9999C74.1536 23.9999 72.9331 22.8035 72.7866 20.9846L74.1048 20.8992C74.2756 22.1443 74.9835 22.8035 76.082 22.8035C77.1438 22.8035 77.7419 22.3763 77.7419 21.6072C77.7419 20.8381 77.3269 20.3987 75.5083 19.8859C73.7264 19.3976 72.9819 18.7995 72.9819 17.4566C72.9819 15.9673 74.0804 14.9419 75.8989 14.9419C77.7052 14.9419 78.7427 16.0772 78.9135 17.7496L77.5954 17.8229C77.4611 16.8219 76.8997 16.1382 75.8623 16.1382C74.9103 16.1382 74.3 16.6387 74.3 17.3956C74.3 18.1525 74.7272 18.4332 76.265 18.8605C78.3399 19.4221 79.06 20.1911 79.06 21.6072C79.06 23.0355 77.8517 23.9999 76.0332 23.9999Z" fill="var(--primary)"/>
+<path d="M58.4556 23.8045V15.1372H60.0178L62.8616 21.9856V15.1372H64.1187V23.8045H62.5564L59.7127 16.9561V23.8045H58.4556Z" fill="var(--primary)"/>
+<path d="M51.3813 23.8045V15.1372H56.7027V16.3458H52.6629V18.8727H56.5563V20.0446H52.6629V22.596H56.8004V23.8045H51.3813Z" fill="var(--primary)"/>
+<path d="M44.0386 23.8045V15.1372H46.7237C48.53 15.1372 49.7261 16.1626 49.7261 17.8351C49.7261 19.4953 48.53 20.5207 46.7237 20.5207H45.3201V23.8045H44.0386ZM45.3201 19.3122H46.5894C47.8221 19.3122 48.3958 18.7995 48.3958 17.8351C48.3958 16.8707 47.8221 16.3458 46.5894 16.3458H45.3201V19.3122Z" fill="var(--primary)"/>
+<path d="M39.332 23.9999C37.2693 23.9999 36.1099 22.3763 36.1099 19.4831C36.1099 16.5655 37.2693 14.9419 39.332 14.9419C41.3946 14.9419 42.5541 16.5655 42.5541 19.4831C42.5541 22.3763 41.3946 23.9999 39.332 23.9999ZM39.332 22.8035C40.5525 22.8035 41.2238 21.6804 41.2238 19.4831C41.2238 17.2857 40.5525 16.1382 39.332 16.1382C38.1115 16.1382 37.4402 17.2857 37.4402 19.4831C37.4402 21.6804 38.1115 22.8035 39.332 22.8035Z" fill="var(--primary)"/>
+<path d="M171.085 9.35094C169.083 9.35094 167.96 7.95929 167.96 5.46895C167.96 2.60019 168.864 0.292969 171.414 0.292969C173.013 0.292969 173.819 1.1597 174.148 2.38045L172.83 2.49032C172.659 1.89215 172.269 1.48931 171.414 1.48931C170.243 1.48931 169.474 2.36825 169.303 4.2482C169.718 3.71107 170.426 3.32043 171.329 3.32043C173.05 3.32043 174.161 4.48015 174.161 6.25024C174.161 8.16681 172.916 9.35094 171.085 9.35094ZM171.085 8.1424C172.147 8.1424 172.83 7.45878 172.83 6.27465C172.83 5.17597 172.196 4.48015 171.183 4.48015C170.096 4.48015 169.315 5.17597 169.315 6.27465C169.315 7.34891 169.999 8.1424 171.085 8.1424Z" fill="var(--primary)" fill-opacity="0.5"/>
+<path d="M160.667 9.15562C160.667 7.22684 161.387 6.01829 163.925 4.67547C165.011 4.10171 165.475 3.72328 165.475 2.88096C165.475 2.05085 164.95 1.48931 163.937 1.48931C162.827 1.48931 162.217 2.09968 162.046 3.18615L160.715 3.1007C160.898 1.37944 162.021 0.292969 163.937 0.292969C165.78 0.292969 166.806 1.3184 166.806 2.83213C166.806 4.17496 166.22 4.83416 164.45 5.78635C162.949 6.59205 162.241 7.36112 162.192 7.94708H166.818V9.15562H160.667Z" fill="var(--primary)" fill-opacity="0.5"/>
+<path d="M156.424 9.35094C154.508 9.35094 153.348 7.61748 153.348 4.83416C153.348 2.03864 154.508 0.292969 156.424 0.292969C158.34 0.292969 159.499 2.03864 159.499 4.83416C159.499 7.61748 158.34 9.35094 156.424 9.35094ZM154.678 4.83416C154.678 5.55441 154.752 6.1892 154.91 6.68971L157.449 1.98981C157.181 1.66021 156.827 1.48931 156.424 1.48931C155.338 1.48931 154.678 2.72226 154.678 4.83416ZM156.424 8.15461C157.51 8.15461 158.169 6.92165 158.169 4.83416C158.169 4.10171 158.096 3.46692 157.937 2.96641L155.386 7.6541C155.667 7.9837 156.021 8.15461 156.424 8.15461Z" fill="var(--primary)" fill-opacity="0.5"/>
+<path d="M146.03 9.15562C146.03 7.22684 146.75 6.01829 149.289 4.67547C150.375 4.10171 150.839 3.72328 150.839 2.88096C150.839 2.05085 150.314 1.48931 149.301 1.48931C148.19 1.48931 147.58 2.09968 147.409 3.18615L146.079 3.1007C146.262 1.37944 147.385 0.292969 149.301 0.292969C151.144 0.292969 152.169 1.3184 152.169 2.83213C152.169 4.17496 151.583 4.83416 149.813 5.78635C148.312 6.59205 147.604 7.36112 147.555 7.94708H152.181V9.15562H146.03Z" fill="var(--primary)" fill-opacity="0.5"/>
+<path d="M132.041 10.4985L135.727 0H136.899L133.212 10.4985H132.041Z" fill="var(--primary)" fill-opacity="0.5"/>
+<path d="M124.722 10.4985L128.409 0H129.581L125.894 10.4985H124.722Z" fill="var(--primary)" fill-opacity="0.5"/>
+<path d="M111.684 9.15582V7.54443H113.344V9.15582H111.684Z" fill="var(--primary)"/>
+<path d="M105.232 9.35094C103.145 9.35094 101.974 7.61748 101.974 4.83416C101.974 2.03864 103.145 0.292969 105.232 0.292969C106.807 0.292969 107.942 1.37944 108.296 3.25939L106.953 3.33264C106.709 2.1241 106.05 1.48931 105.232 1.48931C103.975 1.48931 103.304 2.69785 103.304 4.83416C103.304 6.95827 103.975 8.15461 105.232 8.15461C106.123 8.15461 106.795 7.45878 107.014 6.14037L108.345 6.20141C108.04 8.17902 106.892 9.35094 105.232 9.35094Z" fill="var(--primary)"/>
+<path d="M95.0464 9.15562V0.488281H96.6086L99.4524 7.3367V0.488281H100.71V9.15562H99.1473L96.3035 2.3072V9.15562H95.0464Z" fill="var(--primary)"/>
+<path d="M87.8501 9.15562V7.94707H89.9249V1.69683H87.8501V0.488281H93.2691V1.69683H91.1943V7.94707H93.2691V9.15562H87.8501Z" fill="var(--primary)"/>
+<path d="M73.4575 9.15562V0.488281H74.739V7.94707H78.8765V9.15562H73.4575Z" fill="var(--primary)"/>
+<path d="M66.0171 9.15562V0.488281H71.3385V1.69683H67.2986V4.22378H71.192V5.3957H67.2986V7.94707H71.4361V9.15562H66.0171Z" fill="var(--primary)"/>
+<path d="M61.3232 9.35094C59.2361 9.35094 58.0645 7.61748 58.0645 4.83416C58.0645 2.03864 59.2361 0.292969 61.3232 0.292969C62.8976 0.292969 64.0327 1.37944 64.3866 3.25939L63.0441 3.33264C62.8 2.1241 62.1409 1.48931 61.3232 1.48931C60.0661 1.48931 59.3948 2.69785 59.3948 4.83416C59.3948 6.95827 60.0661 8.15461 61.3232 8.15461C62.2142 8.15461 62.8854 7.45878 63.1051 6.14037L64.4355 6.20141C64.1303 8.17902 62.9831 9.35094 61.3232 9.35094Z" fill="var(--primary)"/>
+<path d="M51.125 9.15562V0.488281H53.8223C55.6531 0.488281 56.7759 1.47709 56.7759 3.07627C56.7759 4.11391 56.1168 4.87078 55.3113 5.12714C56.1657 5.28583 56.5806 5.76193 56.6539 6.6897L56.8736 9.15562H55.592L55.3968 6.93385C55.3235 6.06711 54.9818 5.77413 53.9199 5.77413H52.4065V9.15562H51.125ZM52.4065 4.5778H53.7979C54.8597 4.5778 55.4578 4.05288 55.4578 3.13731C55.4578 2.20954 54.8597 1.69683 53.7979 1.69683H52.4065V4.5778Z" fill="var(--primary)"/>
+<path d="M44.063 9.15562V0.488281H49.3844V1.69683H45.3445V4.22378H49.2379V5.3957H45.3445V7.94707H49.482V9.15562H44.063Z" fill="var(--primary)"/>
+<path d="M38.5753 9.15562L36 0.488281H37.3548L39.332 7.44656L41.3092 0.488281H42.6639L40.0887 9.15562H38.5753Z" fill="var(--primary)"/>
+</svg>
diff --git a/apps/docs/registry-assets/SKILL.md b/apps/docs/registry-assets/SKILL.md
new file mode 100644
index 00000000..5b4e8c16
--- /dev/null
+++ b/apps/docs/registry-assets/SKILL.md
@@ -0,0 +1,64 @@
+---
+name: smoothui
+description: Install and use SmoothUI — animated React components and blocks built with Tailwind CSS v4 and Motion, distributed through a shadcn-compatible registry. Use when adding animated UI components, page blocks, or SmoothUI themes to a project.
+---
+
+# SmoothUI
+
+SmoothUI is a registry of animated React components (buttons, inputs, cards, AI chat primitives) and page blocks (heroes, pricing, testimonials, FAQs, CTAs) built with React 19, Tailwind CSS v4, and Motion (Framer Motion). Docs: https://smoothui.dev
+
+## Installing components
+
+Every item installs through the shadcn CLI. Browse names at https://smoothui.dev/doc or fetch the machine-readable index at https://smoothui.dev/r/registry.json
+
+```bash
+# Single component
+npx shadcn@latest add https://smoothui.dev/r/smooth-button.json
+
+# Page block (brings its dependencies automatically)
+npx shadcn@latest add https://smoothui.dev/r/pricing-1.json
+```
+
+To enable the short `@smoothui/<name>` syntax, add the namespace to `components.json`:
+
+```json
+{
+  "registries": {
+    "@smoothui": "https://smoothui.dev/r/{name}.json"
+  }
+}
+```
+
+Then: `npx shadcn@latest add @smoothui/smooth-button`
+
+## Where files land
+
+- Components and blocks: `components/smoothui/<name>/`
+- Shared block helpers: `components/smoothui/shared/`
+- Animation constants: `components/smoothui/lib/animation.ts`
+- Demo data helpers: `lib/smoothui-data/`
+
+Imports inside installed files use the `@/` alias and resolve out of the box in any shadcn-initialized project.
+
+## Themes
+
+SmoothUI ships installable color themes (light + dark, standard shadcn CSS variables, compatible with Radix UI and Base UI projects):
+
+```bash
+npx shadcn@latest add https://smoothui.dev/r/theme-candy.json
+# Also: theme-indigo, theme-blue, theme-red, theme-orange, theme-green
+```
+
+## Animation conventions (follow when extending SmoothUI components)
+
+- Animate only `transform` and `opacity`; durations 0.2–0.3s for UI.
+- Spring animations: `{ type: "spring", duration: 0.25, bounce: 0.1 }`; bounce above 0.1 only for playful or drag interactions.
+- Easing: `cubic-bezier` values, never string easing like `"easeInOut"`. Entering elements: `cubic-bezier(.23, 1, .32, 1)`.
+- Accessibility is mandatory: import `useReducedMotion` from `motion/react`, and disable or reduce animations when it returns true.
+- Hover-driven animation needs hover-capable device detection: `window.matchMedia("(hover: hover) and (pointer: fine)")`.
+
+## AI-friendly endpoints
+
+- `https://smoothui.dev/llms.txt` — index for LLMs
+- `https://smoothui.dev/llms-full.txt` — full documentation dump
+- `https://smoothui.dev/llms-components.json` — structured component metadata
diff --git a/apps/docs/scripts/verify-registry.mts b/apps/docs/scripts/verify-registry.mts
new file mode 100644
index 00000000..b9934c2b
--- /dev/null
+++ b/apps/docs/scripts/verify-registry.mts
@@ -0,0 +1,59 @@
+// CI regression check for the shadcn registry output:
+// 1. No workspace import specifiers may leak into served file content.
+// 2. Every served item (components, blocks, libs, themes) must satisfy the
+//    shadcn registry-item schema.
+import { registryItemSchema } from "shadcn/schema";
+import { getAllPackageNames, getPackage } from "../lib/package";
+import { getSkill, SKILL_ITEM_NAME } from "../lib/registry-skill";
+import { getAllThemeNames, getTheme } from "../lib/registry-themes";
+
+// Match workspace specifiers only inside import/export/require statements so
+// doc comments mentioning package names don't trip the check.
+const LEAK_REGEX =
+  /(?:from\s+|import\s*\(\s*|require\s*\(\s*)["'](?:@repo\/|@smoothui\/data|(?:\.\.\/){2,})/;
+
+const names = await getAllPackageNames();
+let leaks = 0;
+let schemaErrors = 0;
+
+const validateSchema = (name: string, item: unknown) => {
+  const result = registryItemSchema.safeParse(item);
+  if (!result.success) {
+    schemaErrors++;
+    console.log(`SCHEMA ${name}: ${result.error.message}`);
+  }
+};
+
+for (const name of names) {
+  const item = await getPackage(name);
+
+  // Empty items (no files, no css) are skipped by the registry index route,
+  // so they don't need to validate.
+  const isServed =
+    (item.files?.length ?? 0) > 0 || Object.keys(item.css ?? {}).length > 0;
+  if (isServed) {
+    validateSchema(name, item);
+  }
+
+  for (const file of item.files ?? []) {
+    const lines = (file.content ?? "").split("\n");
+    for (const [i, line] of lines.entries()) {
+      if (LEAK_REGEX.test(line)) {
+        leaks++;
+        console.log(`LEAK ${name} ${file.path}:${i + 1} ${line.trim()}`);
+      }
+    }
+  }
+}
+
+const themeNames = getAllThemeNames();
+for (const themeName of themeNames) {
+  validateSchema(themeName, getTheme(themeName));
+}
+
+validateSchema(SKILL_ITEM_NAME, await getSkill());
+
+console.log(
+  `Items: ${names.length} packages + ${themeNames.length} themes + skill, leaks: ${leaks}, schema errors: ${schemaErrors}`
+);
+process.exit(leaks || schemaErrors ? 1 : 0);
diff --git a/package.json b/package.json
index c1a6cdc3..6c991307 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "check": "ultracite check",
     "fix": "ultracite fix",
     "test": "turbo test",
+    "typecheck": "turbo typecheck",
     "analyze": "turbo analyze",
     "bump-deps": "npx npm-check-updates --deep -u -x shiki,next,recharts,require-in-the-middle && pnpm install",
     "bump-ui": "npx shadcn@latest add --all --overwrite -c packages/shadcn-ui && npx shadcn@latest migrate radix -c packages/shadcn-ui",
diff --git a/packages/data/package.json b/packages/data/package.json
index ce766502..8ea59915 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -20,7 +20,8 @@
   },
   "scripts": {
     "build": "tsc",
-    "dev": "tsc --watch"
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "typescript": "^5.0.0",
diff --git a/packages/shadcn-ui/package.json b/packages/shadcn-ui/package.json
index 3d77c56c..bc389ce6 100644
--- a/packages/shadcn-ui/package.json
+++ b/packages/shadcn-ui/package.json
@@ -2,6 +2,9 @@
   "name": "@repo/shadcn-ui",
   "version": "0.0.0",
   "private": true,
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-icons": "^1.3.2",
diff --git a/packages/smoothui/blocks/ctas/cta-1/__tests__/cta-1.test.tsx b/packages/smoothui/blocks/ctas/cta-1/__tests__/cta-1.test.tsx
new file mode 100644
index 00000000..c2ff7449
--- /dev/null
+++ b/packages/smoothui/blocks/ctas/cta-1/__tests__/cta-1.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Cta1", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/ctas/cta-2/__tests__/cta-2.test.tsx b/packages/smoothui/blocks/ctas/cta-2/__tests__/cta-2.test.tsx
new file mode 100644
index 00000000..99d17fdd
--- /dev/null
+++ b/packages/smoothui/blocks/ctas/cta-2/__tests__/cta-2.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Cta2", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/ctas/cta-2/index.tsx b/packages/smoothui/blocks/ctas/cta-2/index.tsx
index 1e0be3e0..05eeac7e 100644
--- a/packages/smoothui/blocks/ctas/cta-2/index.tsx
+++ b/packages/smoothui/blocks/ctas/cta-2/index.tsx
@@ -62,6 +62,7 @@ export function CtaSplit() {
               <img
                 alt="Product preview showing animated UI components"
                 className="h-auto w-full object-cover"
+                draggable={false}
                 src={getImageKitUrl("/images/hero-smoothui.png", {
                   width: 800,
                   quality: 85,
diff --git a/packages/smoothui/blocks/ctas/cta-3/__tests__/cta-3.test.tsx b/packages/smoothui/blocks/ctas/cta-3/__tests__/cta-3.test.tsx
new file mode 100644
index 00000000..0febb30a
--- /dev/null
+++ b/packages/smoothui/blocks/ctas/cta-3/__tests__/cta-3.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Cta3", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/faqs/faq-1/__tests__/faq-1.test.tsx b/packages/smoothui/blocks/faqs/faq-1/__tests__/faq-1.test.tsx
new file mode 100644
index 00000000..fb2cb48d
--- /dev/null
+++ b/packages/smoothui/blocks/faqs/faq-1/__tests__/faq-1.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Faq1", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/faqs/faq-1/index.tsx b/packages/smoothui/blocks/faqs/faq-1/index.tsx
index c549a4af..cef5d884 100644
--- a/packages/smoothui/blocks/faqs/faq-1/index.tsx
+++ b/packages/smoothui/blocks/faqs/faq-1/index.tsx
@@ -17,7 +17,7 @@ import {
   WalletCards,
   Zap,
 } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { useState } from "react";
 
 const ANIMATION_DURATION = 0.3;
@@ -139,6 +139,7 @@ export function FaqsGrid({
     },
   ],
 }: FaqsGridProps) {
+  const shouldReduceMotion = useReducedMotion();
   const [activeTab, setActiveTab] = useState(0);
 
   return (
@@ -164,20 +165,24 @@ export function FaqsGrid({
                 key={category.id}
                 onClick={() => setActiveTab(index)}
                 type="button"
-                whileHover={{ scale: HOVER_SCALE }}
-                whileTap={{ scale: TAP_SCALE }}
+                whileHover={shouldReduceMotion ? {} : { scale: HOVER_SCALE }}
+                whileTap={shouldReduceMotion ? {} : { scale: TAP_SCALE }}
               >
                 {category.name}
                 {activeTab === index && (
                   <motion.div
                     className="absolute right-0 bottom-0 left-0 h-0.5 rounded-t-full bg-brand"
                     initial={false}
-                    layoutId="activeTab"
-                    transition={{
-                      type: "spring" as const,
-                      stiffness: SPRING_STIFFNESS,
-                      damping: SPRING_DAMPING,
-                    }}
+                    layoutId={shouldReduceMotion ? undefined : "activeTab"}
+                    transition={
+                      shouldReduceMotion
+                        ? { duration: 0 }
+                        : {
+                            type: "spring" as const,
+                            stiffness: SPRING_STIFFNESS,
+                            damping: SPRING_DAMPING,
+                          }
+                    }
                   />
                 )}
               </motion.button>
@@ -189,11 +194,25 @@ export function FaqsGrid({
         <div className="mt-8 md:mt-8">
           <AnimatePresence mode="wait">
             <motion.div
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: EXIT_Y_OFFSET }}
-              initial={{ opacity: 0, y: INITIAL_Y_OFFSET }}
+              animate={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+              }
+              exit={
+                shouldReduceMotion
+                  ? { opacity: 0, transition: { duration: 0 } }
+                  : { opacity: 0, y: EXIT_Y_OFFSET }
+              }
+              initial={
+                shouldReduceMotion
+                  ? { opacity: 1 }
+                  : { opacity: 0, y: INITIAL_Y_OFFSET }
+              }
               key={activeTab}
-              transition={{ duration: ANIMATION_DURATION, ease: "easeInOut" }}
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : { duration: ANIMATION_DURATION, ease: "easeInOut" }
+              }
             >
               <div className="space-y-6">
                 <dl className="grid gap-12 sm:grid-cols-2 lg:grid-cols-3">
@@ -203,19 +222,31 @@ export function FaqsGrid({
 
                     return (
                       <motion.div
-                        animate={{ opacity: 1, y: 0 }}
+                        animate={
+                          shouldReduceMotion
+                            ? { opacity: 1 }
+                            : { opacity: 1, y: 0 }
+                        }
                         className="space-y-3"
-                        initial={{ opacity: 0, y: INITIAL_Y_OFFSET }}
+                        initial={
+                          shouldReduceMotion
+                            ? { opacity: 1 }
+                            : { opacity: 0, y: INITIAL_Y_OFFSET }
+                        }
                         key={`${categories[activeTab].id}-${faqIndex}`}
-                        transition={{
-                          duration: 0.4,
-                          delay: faqIndex * FAQ_STAGGER_DELAY,
-                        }}
+                        transition={
+                          shouldReduceMotion
+                            ? { duration: 0 }
+                            : {
+                                duration: 0.4,
+                                delay: faqIndex * FAQ_STAGGER_DELAY,
+                              }
+                        }
                       >
-                        <div className="flex size-8 items-center justify-center rounded-md border bg-card *:m-auto *:size-4">
-                          <IconComponent className="h-4 w-4" />
-                        </div>
-                        <dt className="font-semibold text-foreground">
+                        <dt className="space-y-3 font-semibold text-foreground">
+                          <div className="flex size-8 items-center justify-center rounded-md border bg-card *:m-auto *:size-4">
+                            <IconComponent className="h-4 w-4" />
+                          </div>
                           {faq.question}
                         </dt>
                         <dd className="text-muted-foreground">{faq.answer}</dd>
diff --git a/packages/smoothui/blocks/faqs/faq-2/__tests__/faq-2.test.tsx b/packages/smoothui/blocks/faqs/faq-2/__tests__/faq-2.test.tsx
new file mode 100644
index 00000000..527a9083
--- /dev/null
+++ b/packages/smoothui/blocks/faqs/faq-2/__tests__/faq-2.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Faq2", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/faqs/faq-2/index.tsx b/packages/smoothui/blocks/faqs/faq-2/index.tsx
index 417b7c11..68699c35 100644
--- a/packages/smoothui/blocks/faqs/faq-2/index.tsx
+++ b/packages/smoothui/blocks/faqs/faq-2/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { useState } from "react";
 
 const ANIMATION_DURATION = 0.6;
@@ -58,6 +58,7 @@ export function FaqsAccordion({
     },
   ],
 }: FaqsAccordionProps) {
+  const shouldReduceMotion = useReducedMotion();
   const [openIndex, setOpenIndex] = useState<number | null>(0);
 
   const toggleAccordion = (index: number) => {
@@ -68,12 +69,22 @@ export function FaqsAccordion({
     <section className="py-20">
       <div className="mx-auto max-w-4xl px-6">
         <motion.div
-          animate={{ opacity: 1, y: 0 }}
+          animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
           className="mb-16 text-center"
-          initial={{ opacity: 0, y: INITIAL_Y_OFFSET }}
-          transition={{ duration: ANIMATION_DURATION }}
+          initial={
+            shouldReduceMotion
+              ? { opacity: 1 }
+              : { opacity: 0, y: INITIAL_Y_OFFSET }
+          }
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : { duration: ANIMATION_DURATION }
+          }
           viewport={{ once: true }}
-          whileInView={{ opacity: 1, y: 0 }}
+          whileInView={
+            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+          }
         >
           <h2 className="mb-4 font-bold text-3xl text-foreground lg:text-4xl">
             {title}
@@ -86,37 +97,61 @@ export function FaqsAccordion({
         <div className="space-y-4">
           {faqs.map((faq, index) => (
             <motion.div
-              animate={{ opacity: 1, y: 0 }}
+              animate={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+              }
               className="group overflow-hidden rounded-2xl border border-border bg-background transition-all hover:border-brand hover:shadow-lg"
-              initial={{ opacity: 0, y: INITIAL_Y_OFFSET }}
+              initial={
+                shouldReduceMotion
+                  ? { opacity: 1 }
+                  : { opacity: 0, y: INITIAL_Y_OFFSET }
+              }
               key={faq.question}
-              transition={{
-                duration: ANIMATION_DURATION,
-                delay: index * STAGGER_DELAY,
-              }}
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : {
+                      duration: ANIMATION_DURATION,
+                      delay: index * STAGGER_DELAY,
+                    }
+              }
               viewport={{ once: true }}
-              whileInView={{ opacity: 1, y: 0 }}
+              whileInView={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+              }
             >
               <motion.button
                 className="flex w-full items-center justify-between p-6 text-left transition-colors hover:bg-background/50"
                 onClick={() => toggleAccordion(index)}
                 type="button"
-                whileHover={{ scale: HOVER_SCALE }}
-                whileTap={{ scale: TAP_SCALE }}
+                whileHover={shouldReduceMotion ? {} : { scale: HOVER_SCALE }}
+                whileTap={shouldReduceMotion ? {} : { scale: TAP_SCALE }}
               >
                 <h3 className="pr-4 font-semibold text-foreground text-lg">
                   {faq.question}
                 </h3>
                 <motion.div
-                  animate={{
-                    rotate:
-                      openIndex === index ? ROTATION_OPEN : ROTATION_CLOSED,
-                  }}
+                  animate={
+                    shouldReduceMotion
+                      ? {
+                          rotate:
+                            openIndex === index
+                              ? ROTATION_OPEN
+                              : ROTATION_CLOSED,
+                        }
+                      : {
+                          rotate:
+                            openIndex === index
+                              ? ROTATION_OPEN
+                              : ROTATION_CLOSED,
+                        }
+                  }
                   className="flex-shrink-0"
-                  transition={{
-                    duration: ANIMATION_DURATION,
-                    ease: "easeInOut",
-                  }}
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : { duration: ANIMATION_DURATION, ease: "easeInOut" }
+                  }
                 >
                   <svg
                     aria-hidden="true"
@@ -140,22 +175,41 @@ export function FaqsAccordion({
                   <motion.div
                     animate={{ height: "auto", opacity: 1 }}
                     className="overflow-hidden"
-                    exit={{ height: 0, opacity: 0 }}
-                    initial={{ height: 0, opacity: 0 }}
-                    transition={{
-                      duration: ANIMATION_DURATION,
-                      ease: "easeInOut",
-                    }}
+                    exit={
+                      shouldReduceMotion
+                        ? { opacity: 0, transition: { duration: 0 } }
+                        : { height: 0, opacity: 0 }
+                    }
+                    initial={
+                      shouldReduceMotion
+                        ? { opacity: 1 }
+                        : { height: 0, opacity: 0 }
+                    }
+                    transition={
+                      shouldReduceMotion
+                        ? { duration: 0 }
+                        : { duration: ANIMATION_DURATION, ease: "easeInOut" }
+                    }
                   >
                     <motion.div
                       animate={{ y: 0 }}
                       className="px-6 pb-6"
-                      exit={{ y: INITIAL_CONTENT_Y }}
-                      initial={{ y: INITIAL_CONTENT_Y }}
-                      transition={{
-                        duration: ANIMATION_DURATION,
-                        delay: CONTENT_DELAY,
-                      }}
+                      exit={
+                        shouldReduceMotion
+                          ? { transition: { duration: 0 } }
+                          : { y: INITIAL_CONTENT_Y }
+                      }
+                      initial={
+                        shouldReduceMotion ? { y: 0 } : { y: INITIAL_CONTENT_Y }
+                      }
+                      transition={
+                        shouldReduceMotion
+                          ? { duration: 0 }
+                          : {
+                              duration: ANIMATION_DURATION,
+                              delay: CONTENT_DELAY,
+                            }
+                      }
                     >
                       <p className="text-foreground/70 leading-relaxed">
                         {faq.answer}
diff --git a/packages/smoothui/blocks/faqs/faq-3/__tests__/faq-3.test.tsx b/packages/smoothui/blocks/faqs/faq-3/__tests__/faq-3.test.tsx
new file mode 100644
index 00000000..1301a42f
--- /dev/null
+++ b/packages/smoothui/blocks/faqs/faq-3/__tests__/faq-3.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Faq3", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/faqs/faq-4/__tests__/faq-4.test.tsx b/packages/smoothui/blocks/faqs/faq-4/__tests__/faq-4.test.tsx
new file mode 100644
index 00000000..7152c193
--- /dev/null
+++ b/packages/smoothui/blocks/faqs/faq-4/__tests__/faq-4.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Faq4", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/features/features-1/__tests__/features-1.test.tsx b/packages/smoothui/blocks/features/features-1/__tests__/features-1.test.tsx
new file mode 100644
index 00000000..b5540c21
--- /dev/null
+++ b/packages/smoothui/blocks/features/features-1/__tests__/features-1.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Features1", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/features/features-2/__tests__/features-2.test.tsx b/packages/smoothui/blocks/features/features-2/__tests__/features-2.test.tsx
new file mode 100644
index 00000000..30e23d27
--- /dev/null
+++ b/packages/smoothui/blocks/features/features-2/__tests__/features-2.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Features2", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/features/features-3/__tests__/features-3.test.tsx b/packages/smoothui/blocks/features/features-3/__tests__/features-3.test.tsx
new file mode 100644
index 00000000..050adfc4
--- /dev/null
+++ b/packages/smoothui/blocks/features/features-3/__tests__/features-3.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Features3", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/features/features-3/index.tsx b/packages/smoothui/blocks/features/features-3/index.tsx
index 02d0516e..1b75cee1 100644
--- a/packages/smoothui/blocks/features/features-3/index.tsx
+++ b/packages/smoothui/blocks/features/features-3/index.tsx
@@ -113,6 +113,7 @@ export function FeaturesAlternating() {
                       <img
                         alt={feature.imageAlt}
                         className="aspect-video h-auto w-full object-cover"
+                        draggable={false}
                         src={feature.image}
                       />
                     </div>
diff --git a/packages/smoothui/blocks/footers/footer-1/__tests__/footer-1.test.tsx b/packages/smoothui/blocks/footers/footer-1/__tests__/footer-1.test.tsx
new file mode 100644
index 00000000..7cda57e9
--- /dev/null
+++ b/packages/smoothui/blocks/footers/footer-1/__tests__/footer-1.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Footer1", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/footers/footer-1/index.tsx b/packages/smoothui/blocks/footers/footer-1/index.tsx
index 0e277225..f903bc9d 100644
--- a/packages/smoothui/blocks/footers/footer-1/index.tsx
+++ b/packages/smoothui/blocks/footers/footer-1/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 
 const ANIMATION_DURATION = 0.6;
 const DELAY_INCREMENT = 0.1;
@@ -59,28 +59,45 @@ export function FooterSimple({
   },
   copyright = "© 2024 Smoothui. All rights reserved.",
 }: FooterSimpleProps) {
+  const shouldReduceMotion = useReducedMotion();
   return (
     <footer className="border-border border-t bg-background">
       <div className="mx-auto max-w-7xl px-6 py-12">
         <motion.div
-          animate={{ opacity: 1, y: 0 }}
+          animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
           className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-5"
-          initial={{ opacity: 0, y: 20 }}
-          transition={{ duration: ANIMATION_DURATION }}
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : { duration: ANIMATION_DURATION }
+          }
           viewport={{ once: true }}
-          whileInView={{ opacity: 1, y: 0 }}
+          whileInView={
+            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+          }
         >
           {/* Company Info */}
           <div className="lg:col-span-2">
             <motion.div
-              animate={{ opacity: 1, y: 0 }}
-              initial={{ opacity: 0, y: 20 }}
-              transition={{
-                duration: ANIMATION_DURATION,
-                delay: DELAY_INCREMENT,
-              }}
+              animate={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+              }
+              initial={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+              }
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : {
+                      duration: ANIMATION_DURATION,
+                      delay: DELAY_INCREMENT,
+                    }
+              }
               viewport={{ once: true }}
-              whileInView={{ opacity: 1, y: 0 }}
+              whileInView={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+              }
             >
               <h3 className="mb-4 font-bold text-2xl text-foreground">
                 {companyName}
@@ -97,8 +114,10 @@ export function FooterSimple({
                     href={social.twitter}
                     rel="noopener noreferrer"
                     target="_blank"
-                    whileHover={{ scale: HOVER_SCALE }}
-                    whileTap={{ scale: TAP_SCALE }}
+                    whileHover={
+                      shouldReduceMotion ? {} : { scale: HOVER_SCALE }
+                    }
+                    whileTap={shouldReduceMotion ? {} : { scale: TAP_SCALE }}
                   >
                     <svg
                       aria-hidden="true"
@@ -117,8 +136,10 @@ export function FooterSimple({
                     href={social.linkedin}
                     rel="noopener noreferrer"
                     target="_blank"
-                    whileHover={{ scale: HOVER_SCALE }}
-                    whileTap={{ scale: TAP_SCALE }}
+                    whileHover={
+                      shouldReduceMotion ? {} : { scale: HOVER_SCALE }
+                    }
+                    whileTap={shouldReduceMotion ? {} : { scale: TAP_SCALE }}
                   >
                     <svg
                       aria-hidden="true"
@@ -137,8 +158,10 @@ export function FooterSimple({
                     href={social.github}
                     rel="noopener noreferrer"
                     target="_blank"
-                    whileHover={{ scale: HOVER_SCALE }}
-                    whileTap={{ scale: TAP_SCALE }}
+                    whileHover={
+                      shouldReduceMotion ? {} : { scale: HOVER_SCALE }
+                    }
+                    whileTap={shouldReduceMotion ? {} : { scale: TAP_SCALE }}
                   >
                     <svg
                       aria-hidden="true"
@@ -157,8 +180,10 @@ export function FooterSimple({
                     href={social.discord}
                     rel="noopener noreferrer"
                     target="_blank"
-                    whileHover={{ scale: HOVER_SCALE }}
-                    whileTap={{ scale: TAP_SCALE }}
+                    whileHover={
+                      shouldReduceMotion ? {} : { scale: HOVER_SCALE }
+                    }
+                    whileTap={shouldReduceMotion ? {} : { scale: TAP_SCALE }}
                   >
                     <svg
                       aria-hidden="true"
@@ -179,14 +204,21 @@ export function FooterSimple({
           <div className="grid grid-cols-1 gap-8 sm:grid-cols-3 lg:col-span-3">
             {links.product && (
               <motion.div
-                animate={{ opacity: 1, y: 0 }}
-                initial={{ opacity: 0, y: 20 }}
-                transition={{
-                  duration: ANIMATION_DURATION,
-                  delay: DELAY_PRODUCT,
-                }}
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
+                initial={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+                }
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { duration: ANIMATION_DURATION, delay: DELAY_PRODUCT }
+                }
                 viewport={{ once: true }}
-                whileInView={{ opacity: 1, y: 0 }}
+                whileInView={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
               >
                 <h4 className="mb-4 font-semibold text-foreground text-sm uppercase tracking-wide">
                   Product
@@ -208,14 +240,21 @@ export function FooterSimple({
 
             {links.company && (
               <motion.div
-                animate={{ opacity: 1, y: 0 }}
-                initial={{ opacity: 0, y: 20 }}
-                transition={{
-                  duration: ANIMATION_DURATION,
-                  delay: DELAY_COMPANY,
-                }}
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
+                initial={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+                }
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { duration: ANIMATION_DURATION, delay: DELAY_COMPANY }
+                }
                 viewport={{ once: true }}
-                whileInView={{ opacity: 1, y: 0 }}
+                whileInView={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
               >
                 <h4 className="mb-4 font-semibold text-foreground text-sm uppercase tracking-wide">
                   Company
@@ -237,14 +276,21 @@ export function FooterSimple({
 
             {links.support && (
               <motion.div
-                animate={{ opacity: 1, y: 0 }}
-                initial={{ opacity: 0, y: 20 }}
-                transition={{
-                  duration: ANIMATION_DURATION,
-                  delay: DELAY_SUPPORT,
-                }}
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
+                initial={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+                }
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { duration: ANIMATION_DURATION, delay: DELAY_SUPPORT }
+                }
                 viewport={{ once: true }}
-                whileInView={{ opacity: 1, y: 0 }}
+                whileInView={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
               >
                 <h4 className="mb-4 font-semibold text-foreground text-sm uppercase tracking-wide">
                   Support
@@ -268,15 +314,18 @@ export function FooterSimple({
 
         {/* Copyright */}
         <motion.div
-          animate={{ opacity: 1, y: 0 }}
+          animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
           className="mt-12 border-border border-t pt-8 text-center"
-          initial={{ opacity: 0, y: 20 }}
-          transition={{
-            duration: ANIMATION_DURATION,
-            delay: DELAY_COPYRIGHT,
-          }}
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : { duration: ANIMATION_DURATION, delay: DELAY_COPYRIGHT }
+          }
           viewport={{ once: true }}
-          whileInView={{ opacity: 1, y: 0 }}
+          whileInView={
+            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+          }
         >
           <p className="text-foreground/60 text-sm">{copyright}</p>
         </motion.div>
diff --git a/packages/smoothui/blocks/footers/footer-2/__tests__/footer-2.test.tsx b/packages/smoothui/blocks/footers/footer-2/__tests__/footer-2.test.tsx
new file mode 100644
index 00000000..184ce54b
--- /dev/null
+++ b/packages/smoothui/blocks/footers/footer-2/__tests__/footer-2.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Footer2", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/footers/footer-2/index.tsx b/packages/smoothui/blocks/footers/footer-2/index.tsx
index b62256bb..2917d238 100644
--- a/packages/smoothui/blocks/footers/footer-2/index.tsx
+++ b/packages/smoothui/blocks/footers/footer-2/index.tsx
@@ -1,14 +1,12 @@
 "use client";
 
 import SmoothButton from "@repo/smoothui/components/smooth-button";
-import { motion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 
 const ANIMATION_DURATION = 0.6;
 const DELAY_INCREMENT = 0.1;
 const HOVER_SCALE = 1.1;
 const TAP_SCALE = 0.9;
-const BUTTON_HOVER_SCALE = 1.02;
-const BUTTON_TAP_SCALE = 0.98;
 const DELAY_PRODUCT = DELAY_INCREMENT * 2;
 const DELAY_COMPANY = DELAY_INCREMENT * 3;
 const DELAY_SUPPORT = DELAY_INCREMENT * 4;
@@ -87,28 +85,44 @@ export function FooterComplex({
   },
   copyright = "© 2024 Smoothui. All rights reserved.",
 }: FooterComplexProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const socialHover = shouldReduceMotion ? {} : { scale: HOVER_SCALE };
+  const socialTap = shouldReduceMotion ? {} : { scale: TAP_SCALE };
   return (
     <footer className="border-border border-t bg-background">
       <div className="mx-auto max-w-7xl px-6 py-16">
         <motion.div
-          animate={{ opacity: 1, y: 0 }}
+          animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
           className="grid grid-cols-1 gap-12 lg:grid-cols-12"
-          initial={{ opacity: 0, y: 20 }}
-          transition={{ duration: ANIMATION_DURATION }}
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : { duration: ANIMATION_DURATION }
+          }
           viewport={{ once: true }}
-          whileInView={{ opacity: 1, y: 0 }}
+          whileInView={
+            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+          }
         >
           {/* Company Info & Newsletter */}
           <div className="lg:col-span-5">
             <motion.div
-              animate={{ opacity: 1, y: 0 }}
-              initial={{ opacity: 0, y: 20 }}
-              transition={{
-                duration: ANIMATION_DURATION,
-                delay: DELAY_INCREMENT,
-              }}
+              animate={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+              }
+              initial={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+              }
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : { duration: ANIMATION_DURATION, delay: DELAY_INCREMENT }
+              }
               viewport={{ once: true }}
-              whileInView={{ opacity: 1, y: 0 }}
+              whileInView={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+              }
             >
               <h3 className="mb-4 font-bold text-2xl text-foreground">
                 {companyName}
@@ -146,8 +160,8 @@ export function FooterComplex({
                     href={social.twitter}
                     rel="noopener noreferrer"
                     target="_blank"
-                    whileHover={{ scale: HOVER_SCALE }}
-                    whileTap={{ scale: TAP_SCALE }}
+                    whileHover={socialHover}
+                    whileTap={socialTap}
                   >
                     <svg
                       aria-hidden="true"
@@ -166,8 +180,8 @@ export function FooterComplex({
                     href={social.linkedin}
                     rel="noopener noreferrer"
                     target="_blank"
-                    whileHover={{ scale: HOVER_SCALE }}
-                    whileTap={{ scale: TAP_SCALE }}
+                    whileHover={socialHover}
+                    whileTap={socialTap}
                   >
                     <svg
                       aria-hidden="true"
@@ -186,8 +200,8 @@ export function FooterComplex({
                     href={social.github}
                     rel="noopener noreferrer"
                     target="_blank"
-                    whileHover={{ scale: HOVER_SCALE }}
-                    whileTap={{ scale: TAP_SCALE }}
+                    whileHover={socialHover}
+                    whileTap={socialTap}
                   >
                     <svg
                       aria-hidden="true"
@@ -206,8 +220,8 @@ export function FooterComplex({
                     href={social.discord}
                     rel="noopener noreferrer"
                     target="_blank"
-                    whileHover={{ scale: HOVER_SCALE }}
-                    whileTap={{ scale: TAP_SCALE }}
+                    whileHover={socialHover}
+                    whileTap={socialTap}
                   >
                     <svg
                       aria-hidden="true"
@@ -226,8 +240,8 @@ export function FooterComplex({
                     href={social.youtube}
                     rel="noopener noreferrer"
                     target="_blank"
-                    whileHover={{ scale: HOVER_SCALE }}
-                    whileTap={{ scale: TAP_SCALE }}
+                    whileHover={socialHover}
+                    whileTap={socialTap}
                   >
                     <svg
                       aria-hidden="true"
@@ -248,14 +262,21 @@ export function FooterComplex({
           <div className="grid grid-cols-2 gap-8 lg:col-span-7 lg:grid-cols-4">
             {links.product && (
               <motion.div
-                animate={{ opacity: 1, y: 0 }}
-                initial={{ opacity: 0, y: 20 }}
-                transition={{
-                  duration: ANIMATION_DURATION,
-                  delay: DELAY_PRODUCT,
-                }}
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
+                initial={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+                }
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { duration: ANIMATION_DURATION, delay: DELAY_PRODUCT }
+                }
                 viewport={{ once: true }}
-                whileInView={{ opacity: 1, y: 0 }}
+                whileInView={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
               >
                 <h4 className="mb-4 font-semibold text-foreground text-sm uppercase tracking-wide">
                   Product
@@ -277,14 +298,21 @@ export function FooterComplex({
 
             {links.company && (
               <motion.div
-                animate={{ opacity: 1, y: 0 }}
-                initial={{ opacity: 0, y: 20 }}
-                transition={{
-                  duration: ANIMATION_DURATION,
-                  delay: DELAY_COMPANY,
-                }}
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
+                initial={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+                }
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { duration: ANIMATION_DURATION, delay: DELAY_COMPANY }
+                }
                 viewport={{ once: true }}
-                whileInView={{ opacity: 1, y: 0 }}
+                whileInView={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
               >
                 <h4 className="mb-4 font-semibold text-foreground text-sm uppercase tracking-wide">
                   Company
@@ -306,14 +334,21 @@ export function FooterComplex({
 
             {links.support && (
               <motion.div
-                animate={{ opacity: 1, y: 0 }}
-                initial={{ opacity: 0, y: 20 }}
-                transition={{
-                  duration: ANIMATION_DURATION,
-                  delay: DELAY_SUPPORT,
-                }}
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
+                initial={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+                }
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { duration: ANIMATION_DURATION, delay: DELAY_SUPPORT }
+                }
                 viewport={{ once: true }}
-                whileInView={{ opacity: 1, y: 0 }}
+                whileInView={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
               >
                 <h4 className="mb-4 font-semibold text-foreground text-sm uppercase tracking-wide">
                   Support
@@ -335,14 +370,21 @@ export function FooterComplex({
 
             {links.legal && (
               <motion.div
-                animate={{ opacity: 1, y: 0 }}
-                initial={{ opacity: 0, y: 20 }}
-                transition={{
-                  duration: ANIMATION_DURATION,
-                  delay: DELAY_LEGAL,
-                }}
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
+                initial={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+                }
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { duration: ANIMATION_DURATION, delay: DELAY_LEGAL }
+                }
                 viewport={{ once: true }}
-                whileInView={{ opacity: 1, y: 0 }}
+                whileInView={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
               >
                 <h4 className="mb-4 font-semibold text-foreground text-sm uppercase tracking-wide">
                   Legal
diff --git a/packages/smoothui/blocks/footers/footer-3/__tests__/footer-3.test.tsx b/packages/smoothui/blocks/footers/footer-3/__tests__/footer-3.test.tsx
new file mode 100644
index 00000000..13fb2ae4
--- /dev/null
+++ b/packages/smoothui/blocks/footers/footer-3/__tests__/footer-3.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Footer3", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/footers/footer-4/__tests__/footer-4.test.tsx b/packages/smoothui/blocks/footers/footer-4/__tests__/footer-4.test.tsx
new file mode 100644
index 00000000..ec1ac7a0
--- /dev/null
+++ b/packages/smoothui/blocks/footers/footer-4/__tests__/footer-4.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Footer4", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/headers/header-1/__tests__/header-1.test.tsx b/packages/smoothui/blocks/headers/header-1/__tests__/header-1.test.tsx
new file mode 100644
index 00000000..7c1484c0
--- /dev/null
+++ b/packages/smoothui/blocks/headers/header-1/__tests__/header-1.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Header1", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/headers/header-2/__tests__/header-2.test.tsx b/packages/smoothui/blocks/headers/header-2/__tests__/header-2.test.tsx
new file mode 100644
index 00000000..5d611bde
--- /dev/null
+++ b/packages/smoothui/blocks/headers/header-2/__tests__/header-2.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Header2", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/headers/header-2/index.tsx b/packages/smoothui/blocks/headers/header-2/index.tsx
index 5665f466..9b199ad2 100644
--- a/packages/smoothui/blocks/headers/header-2/index.tsx
+++ b/packages/smoothui/blocks/headers/header-2/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { getImageKitUrl } from "@smoothui/data";
-import { motion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 import { AnimatedGroup, AnimatedText, Button, HeroHeader } from "../../shared";
 
 interface HeroProductProps {
@@ -39,31 +39,52 @@ export function HeroProduct({
   }),
   imageAlt = "SmoothUI desktop application interface",
 }: HeroProductProps) {
+  const shouldReduceMotion = useReducedMotion();
   return (
     <div className="relative">
       <HeroHeader />
       <main>
         <motion.section
-          animate={{ opacity: 1, scale: 1 }}
+          animate={
+            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }
+          }
           className="relative overflow-hidden"
-          initial={{ opacity: 0, scale: 1.02 }}
-          transition={{
-            duration: 0.8,
-            ease: [0.25, 0.46, 0.45, 0.94], // ease-out-quad
-          }}
+          initial={
+            shouldReduceMotion ? { opacity: 1 } : { opacity: 0, scale: 1.02 }
+          }
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : {
+                  duration: 0.8,
+                  ease: [0.25, 0.46, 0.45, 0.94], // ease-out-quad
+                }
+          }
         >
           <div className="py-20 md:py-36">
             <div className="relative z-10 mx-auto max-w-5xl px-6 text-center">
               <AnimatedGroup className="space-y-8" preset="blur-slide">
                 {/* Badge with animated sparkle */}
                 <motion.div
-                  animate={{ opacity: 1, y: 0, scale: 1 }}
-                  initial={{ opacity: 0, y: 20, scale: 0.9 }}
-                  transition={{
-                    duration: 0.6,
-                    delay: 0.1,
-                    ease: [0.25, 0.46, 0.45, 0.94],
-                  }}
+                  animate={
+                    shouldReduceMotion
+                      ? { opacity: 1 }
+                      : { opacity: 1, y: 0, scale: 1 }
+                  }
+                  initial={
+                    shouldReduceMotion
+                      ? { opacity: 1 }
+                      : { opacity: 0, y: 20, scale: 0.9 }
+                  }
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : {
+                          duration: 0.6,
+                          delay: 0.1,
+                          ease: [0.25, 0.46, 0.45, 0.94],
+                        }
+                  }
                 >
                   <a
                     className="mx-auto flex w-fit items-center justify-center gap-2 rounded-md py-0.5 pr-3 pl-1 transition-colors duration-200 ease-out hover:bg-foreground/5"
@@ -119,14 +140,22 @@ export function HeroProduct({
 
                 {/* CTA buttons with staggered animation */}
                 <motion.div
-                  animate={{ opacity: 1, y: 0 }}
+                  animate={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                  }
                   className="flex items-center justify-center gap-3"
-                  initial={{ opacity: 0, y: 20 }}
-                  transition={{
-                    duration: 0.6,
-                    delay: 0.4,
-                    ease: [0.25, 0.46, 0.45, 0.94],
-                  }}
+                  initial={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+                  }
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : {
+                          duration: 0.6,
+                          delay: 0.4,
+                          ease: [0.25, 0.46, 0.45, 0.94],
+                        }
+                  }
                 >
                   <motion.div
                     transition={{
@@ -134,8 +163,8 @@ export function HeroProduct({
                       stiffness: 400,
                       damping: 10,
                     }}
-                    whileHover={{ scale: 1.05 }}
-                    whileTap={{ scale: 0.95 }}
+                    whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
+                    whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
                   >
                     <Button asChild size="lg" variant="candy">
                       <a href={primaryButton.url}>
@@ -152,8 +181,8 @@ export function HeroProduct({
                       stiffness: 400,
                       damping: 10,
                     }}
-                    whileHover={{ scale: 1.05 }}
-                    whileTap={{ scale: 0.95 }}
+                    whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
+                    whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
                   >
                     <Button asChild size="lg" variant="outline">
                       <a href={secondaryButton.url}>
@@ -186,10 +215,14 @@ export function HeroProduct({
                     stiffness: 300,
                     damping: 20,
                   }}
-                  whileHover={{
-                    scale: 1.02,
-                    rotateY: 2,
-                  }}
+                  whileHover={
+                    shouldReduceMotion
+                      ? {}
+                      : {
+                          scale: 1.02,
+                          rotateY: 2,
+                        }
+                  }
                 >
                   <motion.div
                     className="relative mx-auto overflow-hidden rounded-(--radius) border border-transparent bg-background shadow-black/10 shadow-lg ring-1 ring-black/10"
@@ -201,23 +234,34 @@ export function HeroProduct({
                       duration: 0.3,
                       ease: [0.25, 0.46, 0.45, 0.94],
                     }}
-                    whileHover={{
-                      boxShadow:
-                        "0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1)",
-                    }}
+                    whileHover={
+                      shouldReduceMotion
+                        ? {}
+                        : {
+                            boxShadow:
+                              "0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1)",
+                          }
+                    }
                   >
                     <motion.div
                       animate={{ scale: 1 }}
-                      initial={{ scale: 1.05 }}
-                      transition={{
-                        duration: 1.2,
-                        delay: 0.8,
-                        ease: [0.25, 0.46, 0.45, 0.94],
-                      }}
+                      initial={
+                        shouldReduceMotion ? { scale: 1 } : { scale: 1.05 }
+                      }
+                      transition={
+                        shouldReduceMotion
+                          ? { duration: 0 }
+                          : {
+                              duration: 1.2,
+                              delay: 0.8,
+                              ease: [0.25, 0.46, 0.45, 0.94],
+                            }
+                      }
                     >
                       <img
                         alt={imageAlt}
                         className="h-auto w-full"
+                        draggable={false}
                         height="1842"
                         src={imageSrc}
                         width="2880"
diff --git a/packages/smoothui/blocks/headers/header-3/__tests__/header-3.test.tsx b/packages/smoothui/blocks/headers/header-3/__tests__/header-3.test.tsx
new file mode 100644
index 00000000..ebf6fa92
--- /dev/null
+++ b/packages/smoothui/blocks/headers/header-3/__tests__/header-3.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Header3", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/headers/header-3/index.tsx b/packages/smoothui/blocks/headers/header-3/index.tsx
index c000e561..cfa2e408 100644
--- a/packages/smoothui/blocks/headers/header-3/index.tsx
+++ b/packages/smoothui/blocks/headers/header-3/index.tsx
@@ -3,7 +3,7 @@
 import { Avatar, AvatarImage } from "@repo/shadcn-ui/components/ui/avatar";
 import { getAllPeople, getAvatarUrl, getImageKitUrl } from "@smoothui/data";
 import { ArrowDownRight, Star } from "lucide-react";
-import { motion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 import { AnimatedGroup, AnimatedText, Button, HeroHeader } from "../../shared";
 
 interface HeroShowcaseProps {
@@ -53,15 +53,28 @@ export function HeroShowcase({
       })),
   },
 }: HeroShowcaseProps) {
+  const shouldReduceMotion = useReducedMotion();
   return (
     <>
       <HeroHeader />
       <main>
         <motion.section
-          animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+          animate={
+            shouldReduceMotion
+              ? { opacity: 1 }
+              : { opacity: 1, scale: 1, filter: "blur(0px)" }
+          }
           className="relative overflow-hidden bg-gradient-to-b from-background to-muted"
-          initial={{ opacity: 0, scale: 1.04, filter: "blur(12px)" }}
-          transition={{ type: "spring" as const, bounce: 0.32, duration: 0.9 }}
+          initial={
+            shouldReduceMotion
+              ? { opacity: 1 }
+              : { opacity: 0, scale: 1.04, filter: "blur(12px)" }
+          }
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : { type: "spring" as const, bounce: 0.32, duration: 0.9 }
+          }
         >
           <div className="mx-auto grid max-w-5xl items-center gap-10 px-6 py-24 lg:grid-cols-2 lg:gap-20">
             <AnimatedGroup
@@ -95,7 +108,7 @@ export function HeroShowcase({
                         stiffness: 300,
                         damping: 20,
                       }}
-                      whileHover={{ y: -8 }}
+                      whileHover={shouldReduceMotion ? {} : { y: -8 }}
                     >
                       <Avatar className="size-12 border">
                         <AvatarImage alt={avatar.alt} src={avatar.src} />
@@ -144,6 +157,7 @@ export function HeroShowcase({
               <img
                 alt="app screen"
                 className="h-full w-full rounded-md object-cover"
+                draggable={false}
                 height={1842}
                 src={getImageKitUrl("/images/hero-example_xertaz.png", {
                   width: 1200,
diff --git a/packages/smoothui/blocks/headers/header-4/__tests__/header-4.test.tsx b/packages/smoothui/blocks/headers/header-4/__tests__/header-4.test.tsx
new file mode 100644
index 00000000..0e21d140
--- /dev/null
+++ b/packages/smoothui/blocks/headers/header-4/__tests__/header-4.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Header4", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/headers/header-5/__tests__/header-5.test.tsx b/packages/smoothui/blocks/headers/header-5/__tests__/header-5.test.tsx
new file mode 100644
index 00000000..8da2072d
--- /dev/null
+++ b/packages/smoothui/blocks/headers/header-5/__tests__/header-5.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Header5", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/headers/header-6/__tests__/header-6.test.tsx b/packages/smoothui/blocks/headers/header-6/__tests__/header-6.test.tsx
new file mode 100644
index 00000000..1cb17b86
--- /dev/null
+++ b/packages/smoothui/blocks/headers/header-6/__tests__/header-6.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Header6", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/logos/logo-cloud-1/__tests__/logo-cloud-1.test.tsx b/packages/smoothui/blocks/logos/logo-cloud-1/__tests__/logo-cloud-1.test.tsx
new file mode 100644
index 00000000..bd21f1fc
--- /dev/null
+++ b/packages/smoothui/blocks/logos/logo-cloud-1/__tests__/logo-cloud-1.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("LogoCloud1", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/logos/logo-cloud-2/__tests__/logo-cloud-2.test.tsx b/packages/smoothui/blocks/logos/logo-cloud-2/__tests__/logo-cloud-2.test.tsx
new file mode 100644
index 00000000..1de38ede
--- /dev/null
+++ b/packages/smoothui/blocks/logos/logo-cloud-2/__tests__/logo-cloud-2.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("LogoCloud2", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/logos/logo-cloud-2/index.tsx b/packages/smoothui/blocks/logos/logo-cloud-2/index.tsx
index 318428ea..0ad0a0f8 100644
--- a/packages/smoothui/blocks/logos/logo-cloud-2/index.tsx
+++ b/packages/smoothui/blocks/logos/logo-cloud-2/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 import type React from "react";
 import {
   Canpoy,
@@ -44,14 +44,15 @@ export function LogoCloudAnimated({
     { name: "Clearbit", logo: Clearbit, url: "https://clearbit.com" },
   ],
 }: LogoCloudAnimatedProps) {
+  const shouldReduceMotion = useReducedMotion();
   return (
     <section className="overflow-hidden py-20">
       <div className="mx-auto max-w-7xl px-6">
         <motion.div
-          animate={{ opacity: 1, y: 0 }}
+          animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
           className="mb-16 text-center"
-          initial={{ opacity: 0, y: 20 }}
-          transition={{ duration: 0.6 }}
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
         >
           <h2 className="mb-4 font-bold text-2xl text-foreground lg:text-3xl">
             {title}
@@ -69,41 +70,63 @@ export function LogoCloudAnimated({
           }}
         >
           <motion.div
-            animate={{
-              x: [0, -SCROLL_DISTANCE_FACTOR * logos.length],
-            }}
+            animate={
+              shouldReduceMotion
+                ? { x: 0 }
+                : { x: [0, -SCROLL_DISTANCE_FACTOR * logos.length] }
+            }
             className="flex min-w-full shrink-0 items-center justify-around gap-8"
-            transition={{
-              x: {
-                repeat: Number.POSITIVE_INFINITY,
-                repeatType: "loop",
-                duration: ANIMATION_DURATION,
-                ease: "linear",
-              },
-            }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : {
+                    x: {
+                      repeat: Number.POSITIVE_INFINITY,
+                      repeatType: "loop",
+                      duration: ANIMATION_DURATION,
+                      ease: "linear",
+                    },
+                  }
+            }
           >
             {/* First set */}
             {logos.map((logo, index) => (
               <motion.a
-                animate={{ opacity: 1, scale: 1 }}
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }
+                }
+                aria-label={`Visit ${logo.name}`}
                 className="group flex shrink-0 flex-col items-center justify-center p-6 transition-all hover:scale-105"
                 href={logo.url}
-                initial={{ opacity: 0, scale: 0.8 }}
+                initial={
+                  shouldReduceMotion
+                    ? { opacity: 1 }
+                    : { opacity: 0, scale: 0.8 }
+                }
                 key={`first-${logo.name}`}
                 rel="noopener noreferrer"
                 target="_blank"
-                transition={{
-                  duration: 0.4,
-                  delay: index * STAGGER_DELAY,
-                }}
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : {
+                        duration: 0.4,
+                        delay: index * STAGGER_DELAY,
+                      }
+                }
               >
                 <motion.div
                   className="mb-2 text-4xl *:fill-foreground"
-                  transition={{
-                    type: "spring" as const,
-                    stiffness: SPRING_STIFFNESS,
-                  }}
-                  whileHover={{ scale: HOVER_SCALE, rotate: HOVER_ROTATE }}
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : { type: "spring" as const, stiffness: SPRING_STIFFNESS }
+                  }
+                  whileHover={
+                    shouldReduceMotion
+                      ? {}
+                      : { scale: HOVER_SCALE, rotate: HOVER_ROTATE }
+                  }
                 >
                   <logo.logo />
                 </motion.div>
@@ -112,25 +135,38 @@ export function LogoCloudAnimated({
             {/* Second set for seamless loop */}
             {logos.map((logo, index) => (
               <motion.a
-                animate={{ opacity: 1, scale: 1 }}
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }
+                }
+                aria-label={`Visit ${logo.name}`}
                 className="group flex shrink-0 flex-col items-center justify-center p-6 transition-all hover:scale-105"
                 href={logo.url}
-                initial={{ opacity: 0, scale: 0.8 }}
+                initial={
+                  shouldReduceMotion
+                    ? { opacity: 1 }
+                    : { opacity: 0, scale: 0.8 }
+                }
                 key={`second-${logo.name}`}
                 rel="noopener noreferrer"
                 target="_blank"
-                transition={{
-                  duration: 0.4,
-                  delay: index * STAGGER_DELAY,
-                }}
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { duration: 0.4, delay: index * STAGGER_DELAY }
+                }
               >
                 <motion.div
                   className="mb-2 text-4xl *:fill-foreground"
-                  transition={{
-                    type: "spring" as const,
-                    stiffness: SPRING_STIFFNESS,
-                  }}
-                  whileHover={{ scale: HOVER_SCALE, rotate: HOVER_ROTATE }}
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : { type: "spring" as const, stiffness: SPRING_STIFFNESS }
+                  }
+                  whileHover={
+                    shouldReduceMotion
+                      ? {}
+                      : { scale: HOVER_SCALE, rotate: HOVER_ROTATE }
+                  }
                 >
                   <logo.logo />
                 </motion.div>
@@ -139,25 +175,38 @@ export function LogoCloudAnimated({
             {/* Third set for even smoother loop */}
             {logos.map((logo, index) => (
               <motion.a
-                animate={{ opacity: 1, scale: 1 }}
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }
+                }
+                aria-label={`Visit ${logo.name}`}
                 className="group flex shrink-0 flex-col items-center justify-center p-6 transition-all hover:scale-105"
                 href={logo.url}
-                initial={{ opacity: 0, scale: 0.8 }}
+                initial={
+                  shouldReduceMotion
+                    ? { opacity: 1 }
+                    : { opacity: 0, scale: 0.8 }
+                }
                 key={`third-${logo.name}`}
                 rel="noopener noreferrer"
                 target="_blank"
-                transition={{
-                  duration: 0.4,
-                  delay: index * STAGGER_DELAY,
-                }}
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { duration: 0.4, delay: index * STAGGER_DELAY }
+                }
               >
                 <motion.div
                   className="mb-2 text-4xl *:fill-foreground"
-                  transition={{
-                    type: "spring" as const,
-                    stiffness: SPRING_STIFFNESS,
-                  }}
-                  whileHover={{ scale: HOVER_SCALE, rotate: HOVER_ROTATE }}
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : { type: "spring" as const, stiffness: SPRING_STIFFNESS }
+                  }
+                  whileHover={
+                    shouldReduceMotion
+                      ? {}
+                      : { scale: HOVER_SCALE, rotate: HOVER_ROTATE }
+                  }
                 >
                   <logo.logo />
                 </motion.div>
diff --git a/packages/smoothui/blocks/logos/logo-cloud-3/__tests__/logo-cloud-3.test.tsx b/packages/smoothui/blocks/logos/logo-cloud-3/__tests__/logo-cloud-3.test.tsx
new file mode 100644
index 00000000..9c1ab7f5
--- /dev/null
+++ b/packages/smoothui/blocks/logos/logo-cloud-3/__tests__/logo-cloud-3.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("LogoCloud3", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/logos/logo-cloud-4/__tests__/logo-cloud-4.test.tsx b/packages/smoothui/blocks/logos/logo-cloud-4/__tests__/logo-cloud-4.test.tsx
new file mode 100644
index 00000000..3c5535df
--- /dev/null
+++ b/packages/smoothui/blocks/logos/logo-cloud-4/__tests__/logo-cloud-4.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("LogoCloud4", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/pricing/pricing-1/__tests__/pricing-1.test.tsx b/packages/smoothui/blocks/pricing/pricing-1/__tests__/pricing-1.test.tsx
new file mode 100644
index 00000000..3c394528
--- /dev/null
+++ b/packages/smoothui/blocks/pricing/pricing-1/__tests__/pricing-1.test.tsx
@@ -0,0 +1,89 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Pricing1", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("defaults to the annual plan with the annual price shown", () => {
+    const { container } = render(<Block />);
+
+    expect(screen.getByRole("button", { name: "Annually" })).toHaveAttribute(
+      "data-active",
+      "true"
+    );
+    expect(screen.getByRole("button", { name: "Monthly" })).toHaveAttribute(
+      "data-active",
+      "false"
+    );
+    expect(container.textContent).toContain("15");
+  });
+
+  it("switches to the monthly price when the Monthly toggle is clicked", () => {
+    const { container } = render(<Block />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Monthly" }));
+
+    expect(screen.getByRole("button", { name: "Monthly" })).toHaveAttribute(
+      "data-active",
+      "true"
+    );
+    expect(screen.getByRole("button", { name: "Annually" })).toHaveAttribute(
+      "data-active",
+      "false"
+    );
+    expect(container.textContent).toContain("19");
+  });
+
+  it("switches back to the annual price when the Annually toggle is clicked again", () => {
+    const { container } = render(<Block />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Monthly" }));
+    fireEvent.click(screen.getByRole("button", { name: "Annually" }));
+
+    expect(screen.getByRole("button", { name: "Annually" })).toHaveAttribute(
+      "data-active",
+      "true"
+    );
+    expect(container.textContent).toContain("15");
+  });
+
+  it("renders every included feature", () => {
+    render(<Block />);
+
+    const features = [
+      "Unlimited Projects",
+      "Email Support",
+      "All Features",
+      "Advanced Analytics",
+      "Team Collaboration",
+      "Custom Domains",
+      "Priority Updates",
+      "API Access",
+    ];
+
+    for (const feature of features) {
+      expect(screen.getByText(feature)).toBeInTheDocument();
+    }
+  });
+
+  it("renders the CTA button and heading", () => {
+    render(<Block />);
+
+    expect(
+      screen.getByRole("button", { name: "Get Started" })
+    ).toBeInTheDocument();
+    expect(screen.getByText("Simple pricing for everyone")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/blocks/pricing/pricing-1/index.tsx b/packages/smoothui/blocks/pricing/pricing-1/index.tsx
index eb3ab4e1..a7995dfc 100644
--- a/packages/smoothui/blocks/pricing/pricing-1/index.tsx
+++ b/packages/smoothui/blocks/pricing/pricing-1/index.tsx
@@ -2,7 +2,7 @@
 
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import SmoothButton from "@repo/smoothui/components/smooth-button";
-import { motion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 
 interface PriceFlowProps {
@@ -116,6 +116,7 @@ function PriceFlow({ value, className = "" }: PriceFlowProps) {
 }
 
 export function PricingSimple() {
+  const shouldReduceMotion = useReducedMotion();
   const [isAnnual, setIsAnnual] = useState(true);
 
   return (
@@ -166,11 +167,19 @@ export function PricingSimple() {
           <div className="container">
             <div className="mx-auto max-w-md">
               <motion.div
-                animate={{ opacity: 1, y: 0 }}
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
                 className="group relative flex h-[650px] cursor-pointer flex-col overflow-hidden rounded-2xl border bg-background p-8"
                 data-animate-card
-                initial={{ opacity: 0, y: 40 }}
-                transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
+                initial={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 40 }
+                }
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { duration: 0.3, ease: [0.22, 1, 0.36, 1] }
+                }
               >
                 {/* Gradient Accent */}
                 <div className="gradient-accent absolute top-0 right-0 h-4 w-32 rounded-bl-2xl bg-gradient-to-r from-green-400 via-blue-400 to-purple-400" />
diff --git a/packages/smoothui/blocks/pricing/pricing-2/__tests__/pricing-2.test.tsx b/packages/smoothui/blocks/pricing/pricing-2/__tests__/pricing-2.test.tsx
new file mode 100644
index 00000000..4e19f17e
--- /dev/null
+++ b/packages/smoothui/blocks/pricing/pricing-2/__tests__/pricing-2.test.tsx
@@ -0,0 +1,79 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Pricing2", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("shows annual prices for all metered plans by default", () => {
+    const { container } = render(<Block />);
+
+    expect(container.textContent).toContain("10");
+    expect(container.textContent).toContain("25");
+    expect(screen.getByRole("button", { name: "Annually" })).toHaveAttribute(
+      "data-active",
+      "true"
+    );
+  });
+
+  it("switches every metered plan to the monthly price on toggle", () => {
+    const { container } = render(<Block />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Monthly" }));
+
+    expect(container.textContent).toContain("15");
+    expect(container.textContent).toContain("35");
+    expect(screen.getByRole("button", { name: "Monthly" })).toHaveAttribute(
+      "data-active",
+      "true"
+    );
+  });
+
+  it("always shows a custom price for the Enterprise plan", () => {
+    render(<Block />);
+
+    expect(screen.getByText("Custom")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Monthly" }));
+
+    expect(screen.getByText("Custom")).toBeInTheDocument();
+  });
+
+  it("highlights the Pro plan as most popular", () => {
+    render(<Block />);
+
+    expect(screen.getByText("Most Popular")).toBeInTheDocument();
+  });
+
+  it("renders each plan's title and CTA label", () => {
+    render(<Block />);
+
+    expect(screen.getByText("Basic")).toBeInTheDocument();
+    expect(screen.getByText("Enterprise")).toBeInTheDocument();
+    expect(screen.getAllByRole("button", { name: "Get Started" })).toHaveLength(
+      2
+    );
+    expect(
+      screen.getByRole("button", { name: "Contact Sales" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders plan-specific feature lists", () => {
+    render(<Block />);
+
+    expect(screen.getByText("1 Project")).toBeInTheDocument();
+    expect(screen.getByText("White-label Options")).toBeInTheDocument();
+    expect(screen.getByText("24/7 Phone Support")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/blocks/pricing/pricing-2/index.tsx b/packages/smoothui/blocks/pricing/pricing-2/index.tsx
index 09eb96d2..d764896b 100644
--- a/packages/smoothui/blocks/pricing/pricing-2/index.tsx
+++ b/packages/smoothui/blocks/pricing/pricing-2/index.tsx
@@ -2,7 +2,7 @@
 
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import SmoothButton from "@repo/smoothui/components/smooth-button";
-import { motion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 
 const CARD_ANIMATION_DELAY = 0.1;
@@ -118,6 +118,7 @@ function PriceFlow({ value, className = "" }: PriceFlowProps) {
 }
 
 export function PricingModern() {
+  const shouldReduceMotion = useReducedMotion();
   const [isAnnual, setIsAnnual] = useState(true);
 
   return (
@@ -167,11 +168,19 @@ export function PricingModern() {
               <div className="grid grid-cols-1 gap-6 *:p-8 md:grid-cols-3">
                 {/* Basic Plan */}
                 <motion.div
-                  animate={{ opacity: 1, y: 0 }}
+                  animate={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                  }
                   className="group relative flex h-[650px] cursor-pointer flex-col overflow-hidden rounded-2xl border bg-background p-8"
                   data-animate-card
-                  initial={{ opacity: 0, y: 40 }}
-                  transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
+                  initial={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 40 }
+                  }
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : { duration: 0.3, ease: [0.22, 1, 0.36, 1] }
+                  }
                 >
                   <div className="card-content relative z-10 flex h-full flex-col">
                     {/* Title */}
@@ -238,15 +247,23 @@ export function PricingModern() {
                 </motion.div>
                 {/* Pro Plan (Featured) */}
                 <motion.div
-                  animate={{ opacity: 1, y: 0 }}
+                  animate={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                  }
                   className="group relative flex h-[650px] cursor-pointer flex-col overflow-hidden rounded-2xl border bg-primary p-8"
                   data-animate-card
-                  initial={{ opacity: 0, y: 40 }}
-                  transition={{
-                    duration: 0.3,
-                    ease: [0.22, 1, 0.36, 1],
-                    delay: CARD_ANIMATION_DELAY,
-                  }}
+                  initial={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 40 }
+                  }
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : {
+                          duration: 0.3,
+                          ease: [0.22, 1, 0.36, 1],
+                          delay: CARD_ANIMATION_DELAY,
+                        }
+                  }
                 >
                   {/* Gradient Accent */}
                   <div className="gradient-accent absolute top-0 right-0 h-4 w-32 rounded-bl-2xl bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400" />
@@ -319,15 +336,23 @@ export function PricingModern() {
                 </motion.div>
                 {/* Enterprise Plan */}
                 <motion.div
-                  animate={{ opacity: 1, y: 0 }}
+                  animate={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                  }
                   className="group relative flex h-[650px] cursor-pointer flex-col overflow-hidden rounded-2xl border bg-background p-8"
                   data-animate-card
-                  initial={{ opacity: 0, y: 40 }}
-                  transition={{
-                    duration: 0.3,
-                    ease: [0.22, 1, 0.36, 1],
-                    delay: CARD_ANIMATION_DELAY * 2,
-                  }}
+                  initial={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 40 }
+                  }
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : {
+                          duration: 0.3,
+                          ease: [0.22, 1, 0.36, 1],
+                          delay: CARD_ANIMATION_DELAY * 2,
+                        }
+                  }
                 >
                   <div className="card-content relative z-10 flex h-full flex-col">
                     {/* Title */}
diff --git a/packages/smoothui/blocks/pricing/pricing-3/__tests__/pricing-3.test.tsx b/packages/smoothui/blocks/pricing/pricing-3/__tests__/pricing-3.test.tsx
new file mode 100644
index 00000000..844fe399
--- /dev/null
+++ b/packages/smoothui/blocks/pricing/pricing-3/__tests__/pricing-3.test.tsx
@@ -0,0 +1,61 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Pricing3", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("shows the annual Pro price by default", () => {
+    const { container } = render(<Block />);
+
+    expect(container.textContent).toContain("12");
+    expect(screen.getByRole("button", { name: "Annually" })).toHaveAttribute(
+      "data-active",
+      "true"
+    );
+  });
+
+  it("switches the Pro price to monthly on toggle", () => {
+    const { container } = render(<Block />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Monthly" }));
+
+    expect(container.textContent).toContain("25");
+    expect(screen.getByRole("button", { name: "Monthly" })).toHaveAttribute(
+      "data-active",
+      "true"
+    );
+  });
+
+  it("keeps the Hobby plan free regardless of the billing toggle", () => {
+    render(<Block />);
+
+    expect(screen.getByText("Hobby")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Monthly" }));
+
+    expect(screen.getByText("Hobby")).toBeInTheDocument();
+  });
+
+  it("renders both plan titles, CTAs, and feature lists", () => {
+    render(<Block />);
+
+    expect(screen.getByText("Pro")).toBeInTheDocument();
+    expect(screen.getAllByRole("button", { name: "Get Started" })).toHaveLength(
+      2
+    );
+    expect(screen.getByText("100GB Bandwidth")).toBeInTheDocument();
+    expect(screen.getByText("Cron Jobs")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/blocks/pricing/pricing-3/index.tsx b/packages/smoothui/blocks/pricing/pricing-3/index.tsx
index d716b5e3..415cd1d0 100644
--- a/packages/smoothui/blocks/pricing/pricing-3/index.tsx
+++ b/packages/smoothui/blocks/pricing/pricing-3/index.tsx
@@ -2,7 +2,7 @@
 
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import SmoothButton from "@repo/smoothui/components/smooth-button";
-import { motion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 
 const CARD_ANIMATION_DELAY = 0.1;
@@ -118,6 +118,7 @@ function PriceFlow({ value, className = "" }: PriceFlowProps) {
 }
 
 export function PricingCreative() {
+  const shouldReduceMotion = useReducedMotion();
   const [isAnnual, setIsAnnual] = useState(true);
 
   return (
@@ -167,11 +168,19 @@ export function PricingCreative() {
               <div className="grid grid-cols-2 gap-6 *:p-8">
                 {/* Free Plan */}
                 <motion.div
-                  animate={{ opacity: 1, y: 0 }}
+                  animate={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                  }
                   className="group relative flex h-[650px] cursor-pointer flex-col overflow-hidden rounded-2xl border bg-background p-8"
                   data-animate-card
-                  initial={{ opacity: 0, y: 40 }}
-                  transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
+                  initial={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 40 }
+                  }
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : { duration: 0.3, ease: [0.22, 1, 0.36, 1] }
+                  }
                 >
                   <div className="card-content relative z-10 flex h-full flex-col">
                     {/* Title */}
@@ -243,15 +252,23 @@ export function PricingCreative() {
                 </motion.div>
                 {/* Pro Plan */}
                 <motion.div
-                  animate={{ opacity: 1, y: 0 }}
+                  animate={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                  }
                   className="group relative flex h-[650px] cursor-pointer flex-col overflow-hidden rounded-2xl border bg-primary p-8"
                   data-animate-card
-                  initial={{ opacity: 0, y: 40 }}
-                  transition={{
-                    duration: 0.3,
-                    ease: [0.22, 1, 0.36, 1],
-                    delay: CARD_ANIMATION_DELAY,
-                  }}
+                  initial={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 40 }
+                  }
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : {
+                          duration: 0.3,
+                          ease: [0.22, 1, 0.36, 1],
+                          delay: CARD_ANIMATION_DELAY,
+                        }
+                  }
                 >
                   {/* Gradient Accent */}
                   <div className="gradient-accent absolute top-0 right-0 h-4 w-32 rounded-bl-2xl bg-gradient-to-r from-purple-400 via-pink-400 to-orange-400" />
diff --git a/packages/smoothui/blocks/shared/animated-group.tsx b/packages/smoothui/blocks/shared/animated-group.tsx
index f7232ace..1d9c6c5b 100644
--- a/packages/smoothui/blocks/shared/animated-group.tsx
+++ b/packages/smoothui/blocks/shared/animated-group.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, type Variants } from "motion/react";
+import { motion, useReducedMotion, type Variants } from "motion/react";
 import React, { type ReactNode } from "react";
 
 export type PresetType =
@@ -95,6 +95,16 @@ const presetVariants: Record<PresetType, Variants> = {
   },
 };
 
+const reducedContainerVariants: Variants = {
+  hidden: { opacity: 1 },
+  visible: { opacity: 1, transition: { staggerChildren: 0 } },
+};
+
+const reducedItemVariants: Variants = {
+  hidden: { opacity: 1 },
+  visible: { opacity: 1 },
+};
+
 const addDefaultVariants = (variants: Variants) => ({
   hidden: { ...defaultItemVariants.hidden, ...variants.hidden },
   visible: { ...defaultItemVariants.visible, ...variants.visible },
@@ -108,12 +118,18 @@ function AnimatedGroup({
   as = "div",
   asChild = "div",
 }: AnimatedGroupProps) {
+  const shouldReduceMotion = useReducedMotion();
+
   const selectedVariants = {
     item: addDefaultVariants(preset ? presetVariants[preset] : {}),
     container: addDefaultVariants(defaultContainerVariants),
   };
-  const containerVariants = variants?.container || selectedVariants.container;
-  const itemVariants = variants?.item || selectedVariants.item;
+  const containerVariants = shouldReduceMotion
+    ? reducedContainerVariants
+    : (variants?.container ?? selectedVariants.container);
+  const itemVariants = shouldReduceMotion
+    ? reducedItemVariants
+    : (variants?.item ?? selectedVariants.item);
 
   const MotionComponent = motion(as);
 
diff --git a/packages/smoothui/blocks/shared/animated-text.tsx b/packages/smoothui/blocks/shared/animated-text.tsx
index 09de8676..052f6a90 100644
--- a/packages/smoothui/blocks/shared/animated-text.tsx
+++ b/packages/smoothui/blocks/shared/animated-text.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 import type { ElementType, ReactNode } from "react";
 
 interface AnimatedTextProps {
@@ -16,16 +16,30 @@ export function AnimatedText({
   className,
   delay = 0,
 }: AnimatedTextProps) {
+  const shouldReduceMotion = useReducedMotion();
+
   return (
     <motion.div
-      animate={{ opacity: 1, filter: "blur(0px)", y: 0 }}
-      initial={{ opacity: 0, filter: "blur(12px)", y: 12 }}
-      transition={{
-        type: "spring" as const,
-        bounce: 0.3,
-        duration: 1.5,
-        delay,
-      }}
+      animate={
+        shouldReduceMotion
+          ? { opacity: 1 }
+          : { opacity: 1, filter: "blur(0px)", y: 0 }
+      }
+      initial={
+        shouldReduceMotion
+          ? { opacity: 1 }
+          : { opacity: 0, filter: "blur(12px)", y: 12 }
+      }
+      transition={
+        shouldReduceMotion
+          ? { duration: 0 }
+          : {
+              type: "spring" as const,
+              bounce: 0.3,
+              duration: 1.5,
+              delay,
+            }
+      }
     >
       <Tag className={className}>{children}</Tag>
     </motion.div>
diff --git a/packages/smoothui/blocks/shared/hero-header.tsx b/packages/smoothui/blocks/shared/hero-header.tsx
index 030bda99..0503acbd 100644
--- a/packages/smoothui/blocks/shared/hero-header.tsx
+++ b/packages/smoothui/blocks/shared/hero-header.tsx
@@ -3,7 +3,7 @@
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import SmoothButton from "@repo/smoothui/components/smooth-button";
 import { Menu, X } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { useState } from "react";
 
 const menuItems = [
@@ -32,6 +32,7 @@ const TRANSLATE_Y_OFFSET = -10;
 const TRANSLATE_X_OFFSET = -10;
 
 export const HeroHeader = () => {
+  const shouldReduceMotion = useReducedMotion();
   const [menuState, setMenuState] = useState(false);
 
   return (
@@ -50,6 +51,7 @@ export const HeroHeader = () => {
                   <img
                     alt="SmoothUI logo"
                     className={cn("h-6 w-auto", "dark:filter", "dark:invert")}
+                    draggable={false}
                     height={28}
                     src="/logo-smoothui.svg"
                     width={140}
@@ -65,43 +67,75 @@ export const HeroHeader = () => {
                   <AnimatePresence mode="wait">
                     {menuState ? (
                       <motion.div
-                        animate={{ opacity: 1, rotate: 0, scale: SCALE_MAX }}
-                        exit={{
-                          opacity: 0,
-                          rotate: -ROTATION_ANGLE,
-                          scale: SCALE_MIN,
-                        }}
-                        initial={{
-                          opacity: 0,
-                          rotate: ROTATION_ANGLE,
-                          scale: SCALE_MIN,
-                        }}
+                        animate={
+                          shouldReduceMotion
+                            ? { opacity: 1 }
+                            : { opacity: 1, rotate: 0, scale: SCALE_MAX }
+                        }
+                        exit={
+                          shouldReduceMotion
+                            ? { opacity: 0, transition: { duration: 0 } }
+                            : {
+                                opacity: 0,
+                                rotate: -ROTATION_ANGLE,
+                                scale: SCALE_MIN,
+                              }
+                        }
+                        initial={
+                          shouldReduceMotion
+                            ? { opacity: 1 }
+                            : {
+                                opacity: 0,
+                                rotate: ROTATION_ANGLE,
+                                scale: SCALE_MIN,
+                              }
+                        }
                         key="close"
-                        transition={{
-                          duration: ANIMATION_DURATION,
-                          ease: EASE_OUT_QUART,
-                        }}
+                        transition={
+                          shouldReduceMotion
+                            ? { duration: 0 }
+                            : {
+                                duration: ANIMATION_DURATION,
+                                ease: EASE_OUT_QUART,
+                              }
+                        }
                       >
                         <X className="m-auto size-6" />
                       </motion.div>
                     ) : (
                       <motion.div
-                        animate={{ opacity: 1, rotate: 0, scale: SCALE_MAX }}
-                        exit={{
-                          opacity: 0,
-                          rotate: ROTATION_ANGLE,
-                          scale: SCALE_MIN,
-                        }}
-                        initial={{
-                          opacity: 0,
-                          rotate: -ROTATION_ANGLE,
-                          scale: SCALE_MIN,
-                        }}
+                        animate={
+                          shouldReduceMotion
+                            ? { opacity: 1 }
+                            : { opacity: 1, rotate: 0, scale: SCALE_MAX }
+                        }
+                        exit={
+                          shouldReduceMotion
+                            ? { opacity: 0, transition: { duration: 0 } }
+                            : {
+                                opacity: 0,
+                                rotate: ROTATION_ANGLE,
+                                scale: SCALE_MIN,
+                              }
+                        }
+                        initial={
+                          shouldReduceMotion
+                            ? { opacity: 1 }
+                            : {
+                                opacity: 0,
+                                rotate: -ROTATION_ANGLE,
+                                scale: SCALE_MIN,
+                              }
+                        }
                         key="menu"
-                        transition={{
-                          duration: ANIMATION_DURATION,
-                          ease: EASE_OUT_QUART,
-                        }}
+                        transition={
+                          shouldReduceMotion
+                            ? { duration: 0 }
+                            : {
+                                duration: ANIMATION_DURATION,
+                                ease: EASE_OUT_QUART,
+                              }
+                        }
                       >
                         <Menu className="m-auto size-6" />
                       </motion.div>
@@ -127,27 +161,55 @@ export const HeroHeader = () => {
               <AnimatePresence>
                 {menuState && (
                   <motion.div
-                    animate={{ opacity: 1, y: 0, scale: SCALE_MAX }}
+                    animate={
+                      shouldReduceMotion
+                        ? { opacity: 1 }
+                        : { opacity: 1, y: 0, scale: SCALE_MAX }
+                    }
                     className="mb-6 w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border bg-background p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent"
-                    exit={{ opacity: 0, y: TRANSLATE_Y_OFFSET, scale: 0.95 }}
-                    initial={{ opacity: 0, y: TRANSLATE_Y_OFFSET, scale: 0.95 }}
-                    transition={{
-                      duration: ANIMATION_DURATION,
-                      ease: EASE_OUT_QUART,
-                    }}
+                    exit={
+                      shouldReduceMotion
+                        ? { opacity: 0, transition: { duration: 0 } }
+                        : { opacity: 0, y: TRANSLATE_Y_OFFSET, scale: 0.95 }
+                    }
+                    initial={
+                      shouldReduceMotion
+                        ? { opacity: 1 }
+                        : { opacity: 0, y: TRANSLATE_Y_OFFSET, scale: 0.95 }
+                    }
+                    transition={
+                      shouldReduceMotion
+                        ? { duration: 0 }
+                        : {
+                            duration: ANIMATION_DURATION,
+                            ease: EASE_OUT_QUART,
+                          }
+                    }
                   >
                     <div className="lg:hidden">
                       <ul className="space-y-6 text-base">
                         {menuItems.map((item, index) => (
                           <motion.li
-                            animate={{ opacity: 1, x: 0 }}
-                            initial={{ opacity: 0, x: TRANSLATE_X_OFFSET }}
+                            animate={
+                              shouldReduceMotion
+                                ? { opacity: 1 }
+                                : { opacity: 1, x: 0 }
+                            }
+                            initial={
+                              shouldReduceMotion
+                                ? { opacity: 1 }
+                                : { opacity: 0, x: TRANSLATE_X_OFFSET }
+                            }
                             key={item.id}
-                            transition={{
-                              delay: index * STAGGER_DELAY,
-                              duration: ANIMATION_DURATION,
-                              ease: EASE_OUT_QUART,
-                            }}
+                            transition={
+                              shouldReduceMotion
+                                ? { duration: 0 }
+                                : {
+                                    delay: index * STAGGER_DELAY,
+                                    duration: ANIMATION_DURATION,
+                                    ease: EASE_OUT_QUART,
+                                  }
+                            }
                           >
                             <a
                               className="block text-muted-foreground duration-150 hover:text-accent-foreground"
@@ -161,14 +223,28 @@ export const HeroHeader = () => {
                       </ul>
                     </div>
                     <motion.div
-                      animate={{ opacity: 1, y: 0 }}
+                      animate={
+                        shouldReduceMotion
+                          ? { opacity: 1 }
+                          : { opacity: 1, y: 0 }
+                      }
                       className="flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit"
-                      initial={{ opacity: 0, y: 10 }}
-                      transition={{
-                        delay: menuItems.length * STAGGER_DELAY + STAGGER_DELAY,
-                        duration: ANIMATION_DURATION,
-                        ease: EASE_OUT_QUART,
-                      }}
+                      initial={
+                        shouldReduceMotion
+                          ? { opacity: 1 }
+                          : { opacity: 0, y: 10 }
+                      }
+                      transition={
+                        shouldReduceMotion
+                          ? { duration: 0 }
+                          : {
+                              delay:
+                                menuItems.length * STAGGER_DELAY +
+                                STAGGER_DELAY,
+                              duration: ANIMATION_DURATION,
+                              ease: EASE_OUT_QUART,
+                            }
+                      }
                     >
                       <SmoothButton
                         onClick={() => setMenuState(false)}
diff --git a/packages/smoothui/blocks/stats/stats-1/__tests__/stats-1.test.tsx b/packages/smoothui/blocks/stats/stats-1/__tests__/stats-1.test.tsx
new file mode 100644
index 00000000..a3771930
--- /dev/null
+++ b/packages/smoothui/blocks/stats/stats-1/__tests__/stats-1.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Stats1", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/stats/stats-1/index.tsx b/packages/smoothui/blocks/stats/stats-1/index.tsx
index a66a8d03..d9149082 100644
--- a/packages/smoothui/blocks/stats/stats-1/index.tsx
+++ b/packages/smoothui/blocks/stats/stats-1/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, useInView } from "motion/react";
+import { motion, useInView, useReducedMotion } from "motion/react";
 import { useRef } from "react";
 
 const STAGGER_DELAY = 0.1;
@@ -44,16 +44,19 @@ export function StatsGrid({
 }: StatsGridProps) {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
 
   return (
     <section className="py-20">
       <div className="mx-auto max-w-7xl px-6">
         <motion.div
           className="mb-16 text-center"
-          initial={{ opacity: 0, y: 20 }}
-          transition={{ duration: 0.6 }}
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
           viewport={{ once: true }}
-          whileInView={{ opacity: 1, y: 0 }}
+          whileInView={
+            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+          }
         >
           <h2 className="mb-4 font-bold text-3xl text-foreground lg:text-4xl">
             {title}
@@ -68,22 +71,42 @@ export function StatsGrid({
         >
           {stats.map((stat, index) => (
             <motion.div
-              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              animate={(() => {
+                if (shouldReduceMotion) {
+                  return { opacity: 1 };
+                }
+                return isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 };
+              })()}
               className="group relative overflow-hidden rounded-2xl border border-border bg-background p-8 text-center transition-all hover:border-brand hover:shadow-lg"
-              initial={{ opacity: 0, y: 30 }}
+              initial={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 30 }
+              }
               key={stat.label}
-              transition={{ duration: 0.6, delay: index * STAGGER_DELAY }}
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : { duration: 0.6, delay: index * STAGGER_DELAY }
+              }
             >
               <motion.div
-                animate={isInView ? { scale: 1 } : { scale: 0.5 }}
+                animate={(() => {
+                  if (shouldReduceMotion) {
+                    return { scale: 1 };
+                  }
+                  return isInView ? { scale: 1 } : { scale: 0.5 };
+                })()}
                 className="mb-2 font-bold text-4xl text-brand lg:text-5xl"
-                initial={{ scale: 0.5 }}
-                transition={{
-                  duration: 0.8,
-                  delay: index * STAGGER_DELAY + VALUE_DELAY_OFFSET,
-                  type: "spring" as const,
-                  stiffness: 200,
-                }}
+                initial={shouldReduceMotion ? { scale: 1 } : { scale: 0.5 }}
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : {
+                        duration: 0.8,
+                        delay: index * STAGGER_DELAY + VALUE_DELAY_OFFSET,
+                        type: "spring" as const,
+                        stiffness: 200,
+                      }
+                }
               >
                 {stat.value}
               </motion.div>
diff --git a/packages/smoothui/blocks/stats/stats-2/__tests__/stats-2.test.tsx b/packages/smoothui/blocks/stats/stats-2/__tests__/stats-2.test.tsx
new file mode 100644
index 00000000..a11f33ae
--- /dev/null
+++ b/packages/smoothui/blocks/stats/stats-2/__tests__/stats-2.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Stats2", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/stats/stats-2/index.tsx b/packages/smoothui/blocks/stats/stats-2/index.tsx
index 4d3f3a1c..604a6bac 100644
--- a/packages/smoothui/blocks/stats/stats-2/index.tsx
+++ b/packages/smoothui/blocks/stats/stats-2/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { DollarSign, Smartphone, Star, Users } from "lucide-react";
-import { motion, useInView } from "motion/react";
+import { motion, useInView, useReducedMotion } from "motion/react";
 import React, { useRef } from "react";
 
 const STAGGER_DELAY = 0.1;
@@ -67,16 +67,19 @@ export function StatsCards({
 }: StatsCardsProps) {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
 
   return (
     <section className="py-20">
       <div className="mx-auto max-w-7xl px-6">
         <motion.div
           className="mb-16 text-center"
-          initial={{ opacity: 0, y: 20 }}
-          transition={{ duration: 0.6 }}
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
           viewport={{ once: true }}
-          whileInView={{ opacity: 1, y: 0 }}
+          whileInView={
+            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+          }
         >
           <h2 className="mb-4 font-bold text-3xl text-foreground lg:text-4xl">
             {title}
@@ -92,36 +95,58 @@ export function StatsCards({
         >
           {stats.map((stat, index) => (
             <motion.div
-              animate={
-                isInView
+              animate={(() => {
+                if (shouldReduceMotion) {
+                  return { opacity: 1 };
+                }
+                return isInView
                   ? { opacity: 1, y: 0, scale: 1 }
+                  : { opacity: 0, y: 30, scale: 0.9 };
+              })()}
+              className="group relative overflow-hidden rounded-2xl border border-border bg-gradient-to-br from-background to-background/50 p-6 transition-all hover:scale-105 hover:border-brand hover:shadow-xl"
+              initial={
+                shouldReduceMotion
+                  ? { opacity: 1 }
                   : { opacity: 0, y: 30, scale: 0.9 }
               }
-              className="group relative overflow-hidden rounded-2xl border border-border bg-gradient-to-br from-background to-background/50 p-6 transition-all hover:scale-105 hover:border-brand hover:shadow-xl"
-              initial={{ opacity: 0, y: 30, scale: 0.9 }}
               key={stat.label}
-              transition={{
-                duration: 0.6,
-                delay: index * STAGGER_DELAY,
-                type: "spring" as const,
-                stiffness: 100,
-              }}
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : {
+                      duration: 0.6,
+                      delay: index * STAGGER_DELAY,
+                      type: "spring" as const,
+                      stiffness: 100,
+                    }
+              }
             >
               {/* Icon */}
               <motion.div
-                animate={
-                  isInView
+                animate={(() => {
+                  if (shouldReduceMotion) {
+                    return { rotate: 0, scale: 1 };
+                  }
+                  return isInView
+                    ? { rotate: 0, scale: 1 }
+                    : { rotate: -10, scale: 0.8 };
+                })()}
+                className="mb-4 text-3xl"
+                initial={
+                  shouldReduceMotion
                     ? { rotate: 0, scale: 1 }
                     : { rotate: -10, scale: 0.8 }
                 }
-                className="mb-4 text-3xl"
-                initial={{ rotate: -10, scale: 0.8 }}
-                transition={{
-                  duration: 0.6,
-                  delay: index * STAGGER_DELAY + ICON_STAGGER_OFFSET,
-                  type: "spring" as const,
-                  stiffness: 200,
-                }}
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : {
+                        duration: 0.6,
+                        delay: index * STAGGER_DELAY + ICON_STAGGER_OFFSET,
+                        type: "spring" as const,
+                        stiffness: 200,
+                      }
+                }
               >
                 {React.createElement(
                   iconMap[stat.icon as keyof typeof iconMap] || DollarSign,
@@ -133,15 +158,24 @@ export function StatsCards({
 
               {/* Value */}
               <motion.div
-                animate={isInView ? { scale: 1 } : { scale: 0.5 }}
+                animate={(() => {
+                  if (shouldReduceMotion) {
+                    return { scale: 1 };
+                  }
+                  return isInView ? { scale: 1 } : { scale: 0.5 };
+                })()}
                 className="mb-1 font-bold text-2xl text-foreground lg:text-3xl"
-                initial={{ scale: 0.5 }}
-                transition={{
-                  duration: 0.8,
-                  delay: index * STAGGER_DELAY + VALUE_DELAY_OFFSET,
-                  type: "spring" as const,
-                  stiffness: 200,
-                }}
+                initial={shouldReduceMotion ? { scale: 1 } : { scale: 0.5 }}
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : {
+                        duration: 0.8,
+                        delay: index * STAGGER_DELAY + VALUE_DELAY_OFFSET,
+                        type: "spring" as const,
+                        stiffness: 200,
+                      }
+                }
               >
                 {stat.value}
               </motion.div>
@@ -161,19 +195,30 @@ export function StatsCards({
               {/* Trend */}
               {stat.trend && (
                 <motion.div
-                  animate={
-                    isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -10 }
-                  }
+                  animate={(() => {
+                    if (shouldReduceMotion) {
+                      return { opacity: 1 };
+                    }
+                    return isInView
+                      ? { opacity: 1, x: 0 }
+                      : { opacity: 0, x: -10 };
+                  })()}
                   className={`inline-flex items-center rounded-full px-2 py-1 font-medium text-xs ${
                     stat.trend.direction === "up"
                       ? "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400"
                       : "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400"
                   }`}
-                  initial={{ opacity: 0, x: -10 }}
-                  transition={{
-                    duration: 0.4,
-                    delay: index * STAGGER_DELAY + TREND_STAGGER_OFFSET,
-                  }}
+                  initial={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: -10 }
+                  }
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : {
+                          duration: 0.4,
+                          delay: index * STAGGER_DELAY + TREND_STAGGER_OFFSET,
+                        }
+                  }
                 >
                   <span className="mr-1">
                     {stat.trend.direction === "up" ? "↗" : "↘"}
diff --git a/packages/smoothui/blocks/team/team-1/__tests__/team-1.test.tsx b/packages/smoothui/blocks/team/team-1/__tests__/team-1.test.tsx
new file mode 100644
index 00000000..d87b563e
--- /dev/null
+++ b/packages/smoothui/blocks/team/team-1/__tests__/team-1.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Team1", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/team/team-1/index.tsx b/packages/smoothui/blocks/team/team-1/index.tsx
index d3e2c39a..c99cbbee 100644
--- a/packages/smoothui/blocks/team/team-1/index.tsx
+++ b/packages/smoothui/blocks/team/team-1/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { getAllPeople, getAvatarUrl, type Person } from "@smoothui/data";
-import { motion, useInView } from "motion/react";
+import { motion, useInView, useReducedMotion } from "motion/react";
 import { useRef } from "react";
 
 const DEFAULT_MEMBER_COUNT = 4;
@@ -19,6 +19,7 @@ export function TeamGrid({
   description = "We're a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.",
   members = getAllPeople().slice(0, DEFAULT_MEMBER_COUNT),
 }: TeamGridProps) {
+  const shouldReduceMotion = useReducedMotion();
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true });
 
@@ -27,10 +28,12 @@ export function TeamGrid({
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <motion.div
           className="mx-auto max-w-2xl lg:mx-0"
-          initial={{ opacity: 0, y: 20 }}
-          transition={{ duration: 0.6 }}
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
           viewport={{ once: true }}
-          whileInView={{ opacity: 1, y: 0 }}
+          whileInView={
+            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+          }
         >
           <h2 className="text-pretty font-semibold text-4xl text-foreground tracking-tight sm:text-5xl">
             {title}
@@ -43,33 +46,45 @@ export function TeamGrid({
         >
           {members.map((member, index) => (
             <motion.li
-              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-              initial={{ opacity: 0, y: 30 }}
+              animate={(() => {
+                if (shouldReduceMotion) {
+                  return { opacity: 1 };
+                }
+                return isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 };
+              })()}
+              initial={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 30 }
+              }
               key={member.name}
-              transition={{ duration: 0.6, delay: index * STAGGER_DELAY }}
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : { duration: 0.6, delay: index * STAGGER_DELAY }
+              }
             >
               <motion.div
                 className="group"
-                transition={{
-                  type: "spring" as const,
-                  stiffness: 300,
-                  damping: 20,
-                }}
-                whileHover={{ scale: 1.02 }}
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { type: "spring" as const, stiffness: 300, damping: 20 }
+                }
+                whileHover={shouldReduceMotion ? {} : { scale: 1.02 }}
               >
                 {/* Avatar */}
                 <motion.div
                   className="relative overflow-hidden rounded-2xl"
-                  transition={{
-                    type: "spring" as const,
-                    stiffness: 300,
-                    damping: 20,
-                  }}
-                  whileHover={{ scale: 1.05 }}
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : { type: "spring" as const, stiffness: 300, damping: 20 }
+                  }
+                  whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
                 >
                   <img
                     alt={`Photo of ${member.name}`}
                     className="aspect-14/13 w-full rounded-2xl object-cover outline-1 outline-black/5 -outline-offset-1 transition-all duration-300 group-hover:outline-black/10 dark:outline-white/10 dark:group-hover:outline-white/20"
+                    draggable={false}
                     height={AVATAR_SIZE}
                     src={getAvatarUrl(member.avatar, AVATAR_SIZE)}
                     width={AVATAR_SIZE}
@@ -77,8 +92,10 @@ export function TeamGrid({
                   <motion.div
                     className="absolute inset-0 bg-gradient-to-br from-black/5 to-transparent opacity-0 group-hover:opacity-100"
                     initial={{ opacity: 0 }}
-                    transition={{ duration: 0.3 }}
-                    whileHover={{ opacity: 1 }}
+                    transition={
+                      shouldReduceMotion ? { duration: 0 } : { duration: 0.3 }
+                    }
+                    whileHover={shouldReduceMotion ? {} : { opacity: 1 }}
                   />
                 </motion.div>
                 {/* Name */}
diff --git a/packages/smoothui/blocks/team/team-2/__tests__/team-2.test.tsx b/packages/smoothui/blocks/team/team-2/__tests__/team-2.test.tsx
new file mode 100644
index 00000000..a4c2795c
--- /dev/null
+++ b/packages/smoothui/blocks/team/team-2/__tests__/team-2.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Team2", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/team/team-2/index.tsx b/packages/smoothui/blocks/team/team-2/index.tsx
index 2731c7a3..37170dd9 100644
--- a/packages/smoothui/blocks/team/team-2/index.tsx
+++ b/packages/smoothui/blocks/team/team-2/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { getAllPeople, getAvatarUrl, type Person } from "@smoothui/data";
-import { motion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 import { useEffect, useState } from "react";
 
 const CARDS_PER_VIEW = 3; // Number of cards visible at once
@@ -25,6 +25,7 @@ export function TeamCarousel({
   description = "We bring together brilliant developers, engineers, and tech innovators to create groundbreaking digital solutions.",
   members = getAllPeople(),
 }: TeamCarouselProps) {
+  const shouldReduceMotion = useReducedMotion();
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isAutoPlaying, setIsAutoPlaying] = useState(true);
   const [isTransitioning, setIsTransitioning] = useState(false);
@@ -84,10 +85,12 @@ export function TeamCarousel({
     <section className="overflow-hidden py-32">
       <div className="mx-auto max-w-5xl px-8 lg:px-0">
         <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          transition={{ duration: 0.6 }}
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
           viewport={{ once: true }}
-          whileInView={{ opacity: 1, y: 0 }}
+          whileInView={
+            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+          }
         >
           <h2 className="font-medium text-5xl md:text-6xl">
             {title} <br />
@@ -104,8 +107,8 @@ export function TeamCarousel({
               disabled={currentIndex === 0 || isTransitioning}
               onClick={prevSlide}
               type="button"
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
+              whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
+              whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
             >
               <svg
                 aria-hidden="true"
@@ -133,8 +136,8 @@ export function TeamCarousel({
               }
               onClick={nextSlide}
               type="button"
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
+              whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
+              whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
             >
               <svg
                 aria-hidden="true"
@@ -160,15 +163,13 @@ export function TeamCarousel({
           <div className="mt-16 [&>div[data-slot=carousel-content]]:overflow-visible">
             <div className="overflow-hidden" data-slot="carousel-content">
               <motion.div
-                animate={{
-                  x: `-${currentIndex * (CARD_WIDTH + CARD_GAP)}px`,
-                }}
+                animate={{ x: `-${currentIndex * (CARD_WIDTH + CARD_GAP)}px` }}
                 className="-ml-4 flex max-w-[min(calc(100vw-4rem),24rem)] select-none"
-                transition={{
-                  type: "spring" as const,
-                  stiffness: 300,
-                  damping: 30,
-                }}
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : { type: "spring" as const, stiffness: 300, damping: 30 }
+                }
               >
                 {members.map((member, index) => (
                   <div
@@ -178,17 +179,27 @@ export function TeamCarousel({
                   >
                     <motion.div
                       className="rounded-2xl border border-border bg-background p-7 text-center"
-                      initial={{ opacity: 0, y: 20 }}
-                      transition={{
-                        duration: 0.5,
-                        delay: index * STAGGER_DELAY,
-                      }}
+                      initial={
+                        shouldReduceMotion
+                          ? { opacity: 1 }
+                          : { opacity: 0, y: 20 }
+                      }
+                      transition={
+                        shouldReduceMotion
+                          ? { duration: 0 }
+                          : { duration: 0.5, delay: index * STAGGER_DELAY }
+                      }
                       viewport={{ once: true }}
-                      whileInView={{ opacity: 1, y: 0 }}
+                      whileInView={
+                        shouldReduceMotion
+                          ? { opacity: 1 }
+                          : { opacity: 1, y: 0 }
+                      }
                     >
                       <img
                         alt={member.name}
                         className="mx-auto size-20 rounded-full border border-border"
+                        draggable={false}
                         height={80}
                         src={getAvatarUrl(member.avatar, AVATAR_SIZE)}
                         width={80}
diff --git a/packages/smoothui/blocks/testimonials/testimonials-1/__tests__/testimonials-1.test.tsx b/packages/smoothui/blocks/testimonials/testimonials-1/__tests__/testimonials-1.test.tsx
new file mode 100644
index 00000000..74b76b34
--- /dev/null
+++ b/packages/smoothui/blocks/testimonials/testimonials-1/__tests__/testimonials-1.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Testimonials1", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/testimonials/testimonials-1/index.tsx b/packages/smoothui/blocks/testimonials/testimonials-1/index.tsx
index 964f0f6d..909cb6d4 100644
--- a/packages/smoothui/blocks/testimonials/testimonials-1/index.tsx
+++ b/packages/smoothui/blocks/testimonials/testimonials-1/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { getAvatarUrl, getTestimonials } from "@smoothui/data";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 
 const TESTIMONIAL_COUNT = 4;
@@ -21,6 +21,7 @@ const testimonials = getTestimonials(TESTIMONIAL_COUNT).map((testimonial) => ({
 }));
 
 export function TestimonialsSimple() {
+  const shouldReduceMotion = useReducedMotion();
   const [index, setIndex] = useState(0);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -42,12 +43,24 @@ export function TestimonialsSimple() {
         <div className="min-h-[120px] w-full">
           <AnimatePresence mode="wait">
             <motion.blockquote
-              animate={{ opacity: 1, y: 0 }}
+              animate={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+              }
               className="mb-8 text-center font-semibold text-2xl text-foreground leading-tight md:text-4xl"
-              exit={{ opacity: 0, y: -30 }}
-              initial={{ opacity: 0, y: 30 }}
+              exit={
+                shouldReduceMotion
+                  ? { opacity: 0, transition: { duration: 0 } }
+                  : { opacity: 0, y: -30 }
+              }
+              initial={
+                shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 30 }
+              }
               key={index}
-              transition={{ type: "spring" as const, duration: 0.5 }}
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : { type: "spring" as const, duration: 0.5 }
+              }
             >
               &ldquo;{testimonials[index].quote}&rdquo;
             </motion.blockquote>
@@ -56,16 +69,33 @@ export function TestimonialsSimple() {
         <div className="flex w-full max-w-lg items-center justify-center gap-8 pt-8">
           <AnimatePresence initial={false} mode="wait">
             <motion.div
-              animate={{ opacity: 1, filter: "blur(0px)" }}
+              animate={
+                shouldReduceMotion
+                  ? { opacity: 1 }
+                  : { opacity: 1, filter: "blur(0px)" }
+              }
               className="flex items-center gap-4"
-              exit={{ opacity: 0, filter: "blur(8px)" }}
-              initial={{ opacity: 0, filter: "blur(8px)" }}
+              exit={
+                shouldReduceMotion
+                  ? { opacity: 0, transition: { duration: 0 } }
+                  : { opacity: 0, filter: "blur(8px)" }
+              }
+              initial={
+                shouldReduceMotion
+                  ? { opacity: 1 }
+                  : { opacity: 0, filter: "blur(8px)" }
+              }
               key={index}
-              transition={{ type: "spring" as const, duration: 0.5 }}
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : { type: "spring" as const, duration: 0.5 }
+              }
             >
               <img
                 alt={`${testimonials[index].name} avatar`}
                 className="h-12 w-12 rounded-full border bg-foreground/10 object-cover"
+                draggable={false}
                 height={48}
                 src={getAvatarUrl(testimonials[index].avatar, AVATAR_SIZE)}
                 width={48}
@@ -88,40 +118,60 @@ export function TestimonialsSimple() {
             const isActive = i === index;
             return (
               <motion.span
-                animate={{
-                  width: isActive ? BAR_WIDTH : CIRCLE_SIZE,
-                  height: CIRCLE_SIZE,
-                  borderRadius: isActive
-                    ? BORDER_RADIUS_ACTIVE
-                    : BORDER_RADIUS_INACTIVE,
-                }}
+                animate={
+                  shouldReduceMotion
+                    ? {
+                        width: isActive ? BAR_WIDTH : CIRCLE_SIZE,
+                        height: CIRCLE_SIZE,
+                        borderRadius: isActive
+                          ? BORDER_RADIUS_ACTIVE
+                          : BORDER_RADIUS_INACTIVE,
+                      }
+                    : {
+                        width: isActive ? BAR_WIDTH : CIRCLE_SIZE,
+                        height: CIRCLE_SIZE,
+                        borderRadius: isActive
+                          ? BORDER_RADIUS_ACTIVE
+                          : BORDER_RADIUS_INACTIVE,
+                      }
+                }
                 className="relative block overflow-hidden bg-foreground/10"
                 initial={false}
                 key={`testimonial-${testimonial.name}-${i}`}
-                layout
+                layout={!shouldReduceMotion}
                 style={{
                   minWidth: CIRCLE_SIZE,
                   maxWidth: BAR_WIDTH,
                   border: "none",
                 }}
-                transition={{
-                  type: "spring" as const,
-                  stiffness: 300,
-                  damping: 30,
-                  duration: 0.4,
-                }}
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : {
+                        type: "spring" as const,
+                        stiffness: 300,
+                        damping: 30,
+                        duration: 0.4,
+                      }
+                }
               >
                 {isActive && (
                   <motion.div
                     animate={{ width: "100%" }}
                     className="absolute top-0 left-0 h-full rounded-lg bg-brand"
                     exit={{ width: 0 }}
-                    initial={{ width: 0 }}
+                    initial={
+                      shouldReduceMotion ? { width: "100%" } : { width: 0 }
+                    }
                     key={index}
-                    transition={{
-                      duration: DURATION / MILLISECONDS_TO_SECONDS,
-                      ease: "linear",
-                    }}
+                    transition={
+                      shouldReduceMotion
+                        ? { duration: 0 }
+                        : {
+                            duration: DURATION / MILLISECONDS_TO_SECONDS,
+                            ease: "linear",
+                          }
+                    }
                   />
                 )}
               </motion.span>
diff --git a/packages/smoothui/blocks/testimonials/testimonials-2/__tests__/testimonials-2.test.tsx b/packages/smoothui/blocks/testimonials/testimonials-2/__tests__/testimonials-2.test.tsx
new file mode 100644
index 00000000..3da79ff9
--- /dev/null
+++ b/packages/smoothui/blocks/testimonials/testimonials-2/__tests__/testimonials-2.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Testimonials2", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/testimonials/testimonials-2/index.tsx b/packages/smoothui/blocks/testimonials/testimonials-2/index.tsx
index cca45f7a..b1bf0d96 100644
--- a/packages/smoothui/blocks/testimonials/testimonials-2/index.tsx
+++ b/packages/smoothui/blocks/testimonials/testimonials-2/index.tsx
@@ -7,12 +7,13 @@ import {
 } from "@repo/shadcn-ui/components/ui/avatar";
 import { getAvatarUrl, getTestimonials } from "@smoothui/data";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { useCallback, useEffect, useState } from "react";
 
 const testimonials = getTestimonials(7);
 
 export function TestimonialsGrid() {
+  const shouldReduceMotion = useReducedMotion();
   const [active, setActive] = useState(0);
   const [autoplay] = useState(false);
 
@@ -38,10 +39,16 @@ export function TestimonialsGrid() {
       <div className="min-h-auto bg-muted py-24">
         <div className="container mx-auto w-full max-w-6xl px-6">
           <motion.div
-            animate={{ opacity: 1, y: 0 }}
+            animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
             className="mb-12"
-            initial={{ opacity: 0, y: 20 }}
-            transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
+            initial={
+              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+            }
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
+            }
           >
             {/* Layout: Title on left, Testimonial on right */}
             <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12">
@@ -61,26 +68,48 @@ export function TestimonialsGrid() {
                 {/* Navigation Arrows - Above the card */}
                 <div className="mb-4 flex justify-center gap-2">
                   <motion.button
-                    animate={{ opacity: 1, x: 0 }}
+                    animate={
+                      shouldReduceMotion ? { opacity: 1 } : { opacity: 1, x: 0 }
+                    }
+                    aria-label="Previous testimonial"
                     className="group/button flex h-8 w-8 items-center justify-center rounded-full border bg-background shadow-lg transition-all duration-200 hover:scale-110 hover:shadow-xl"
-                    initial={{ opacity: 0, x: -20 }}
+                    initial={
+                      shouldReduceMotion
+                        ? { opacity: 1 }
+                        : { opacity: 0, x: -20 }
+                    }
                     onClick={handlePrev}
-                    transition={{ duration: 0.3, delay: 0.4 }}
+                    transition={
+                      shouldReduceMotion
+                        ? { duration: 0 }
+                        : { duration: 0.3, delay: 0.4 }
+                    }
                     type="button"
-                    whileHover={{ scale: 1.1 }}
-                    whileTap={{ scale: 0.95 }}
+                    whileHover={shouldReduceMotion ? {} : { scale: 1.1 }}
+                    whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
                   >
                     <ChevronLeft className="h-5 w-5 text-foreground transition-transform duration-300 group-hover/button:-rotate-12" />
                   </motion.button>
                   <motion.button
-                    animate={{ opacity: 1, x: 0 }}
+                    animate={
+                      shouldReduceMotion ? { opacity: 1 } : { opacity: 1, x: 0 }
+                    }
+                    aria-label="Next testimonial"
                     className="group/button flex h-8 w-8 items-center justify-center rounded-full border bg-background shadow-lg transition-all duration-200 hover:scale-110 hover:shadow-xl"
-                    initial={{ opacity: 0, x: 20 }}
+                    initial={
+                      shouldReduceMotion
+                        ? { opacity: 1 }
+                        : { opacity: 0, x: 20 }
+                    }
                     onClick={handleNext}
-                    transition={{ duration: 0.3, delay: 0.4 }}
+                    transition={
+                      shouldReduceMotion
+                        ? { duration: 0 }
+                        : { duration: 0.3, delay: 0.4 }
+                    }
                     type="button"
-                    whileHover={{ scale: 1.1 }}
-                    whileTap={{ scale: 0.95 }}
+                    whileHover={shouldReduceMotion ? {} : { scale: 1.1 }}
+                    whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
                   >
                     <ChevronRight className="h-5 w-5 text-foreground transition-transform duration-300 group-hover/button:rotate-12" />
                   </motion.button>
@@ -89,67 +118,119 @@ export function TestimonialsGrid() {
                   <AnimatePresence>
                     {testimonials.map((testimonial, index) => (
                       <motion.div
-                        animate={{
-                          opacity: isActive(index) ? 1 : 0,
-                          scale: isActive(index) ? 1 : 0.95,
-                          y: isActive(index) ? 0 : 30,
-                        }}
+                        animate={
+                          shouldReduceMotion
+                            ? { opacity: isActive(index) ? 1 : 0 }
+                            : {
+                                opacity: isActive(index) ? 1 : 0,
+                                scale: isActive(index) ? 1 : 0.95,
+                                y: isActive(index) ? 0 : 30,
+                              }
+                        }
                         className={`absolute inset-0 min-h-fit ${isActive(index) ? "z-10" : "z-0"}`}
-                        exit={{
-                          opacity: 0,
-                          scale: 0.9,
-                          y: -30,
-                        }}
-                        initial={{
-                          opacity: 0,
-                          scale: 0.9,
-                          y: 30,
-                        }}
+                        exit={
+                          shouldReduceMotion
+                            ? { opacity: 0, transition: { duration: 0 } }
+                            : {
+                                opacity: 0,
+                                scale: 0.9,
+                                y: -30,
+                              }
+                        }
+                        initial={
+                          shouldReduceMotion
+                            ? { opacity: 0 }
+                            : {
+                                opacity: 0,
+                                scale: 0.9,
+                                y: 30,
+                              }
+                        }
                         key={testimonial.name}
-                        transition={{
-                          duration: 0.4,
-                          ease: "easeInOut",
-                        }}
+                        transition={
+                          shouldReduceMotion
+                            ? { duration: 0 }
+                            : {
+                                duration: 0.4,
+                                ease: "easeInOut",
+                              }
+                        }
                       >
                         <div className="rounded-2xl border bg-background px-6 py-6 shadow-lg transition-all duration-200">
                           <motion.p
-                            animate={{ opacity: 1, y: 0 }}
+                            animate={
+                              shouldReduceMotion
+                                ? { opacity: 1 }
+                                : { opacity: 1, y: 0 }
+                            }
                             className="mb-6 text-foreground text-lg"
-                            initial={{ opacity: 0, y: 10 }}
+                            initial={
+                              shouldReduceMotion
+                                ? { opacity: 1 }
+                                : { opacity: 0, y: 10 }
+                            }
                             key={active}
-                            transition={{ duration: 0.3 }}
+                            transition={
+                              shouldReduceMotion
+                                ? { duration: 0 }
+                                : { duration: 0.3 }
+                            }
                           >
                             {(testimonial.content || "")
                               .split(" ")
                               .map((word, wordIndex) => (
                                 <motion.span
-                                  animate={{
-                                    filter: "blur(0px)",
-                                    opacity: 1,
-                                    y: 0,
-                                  }}
+                                  animate={
+                                    shouldReduceMotion
+                                      ? { opacity: 1 }
+                                      : {
+                                          filter: "blur(0px)",
+                                          opacity: 1,
+                                          y: 0,
+                                        }
+                                  }
                                   className="inline-block"
-                                  initial={{
-                                    filter: "blur(4px)",
-                                    opacity: 0,
-                                    y: 5,
-                                  }}
+                                  initial={
+                                    shouldReduceMotion
+                                      ? { opacity: 1 }
+                                      : {
+                                          filter: "blur(4px)",
+                                          opacity: 0,
+                                          y: 5,
+                                        }
+                                  }
                                   key={`${testimonial.name}-word-${wordIndex}`}
-                                  transition={{
-                                    duration: 0.2,
-                                    ease: "easeInOut",
-                                    delay: wordIndex * 0.02,
-                                  }}
+                                  transition={
+                                    shouldReduceMotion
+                                      ? { duration: 0 }
+                                      : {
+                                          duration: 0.2,
+                                          ease: "easeInOut",
+                                          delay: wordIndex * 0.02,
+                                        }
+                                  }
                                 >
                                   {word}&nbsp;
                                 </motion.span>
                               ))}
                           </motion.p>
                           <motion.div
-                            animate={{ opacity: 1, y: 0 }}
+                            animate={
+                              shouldReduceMotion
+                                ? { opacity: 1 }
+                                : { opacity: 1, y: 0 }
+                            }
                             className="flex items-center gap-3"
-                            initial={{ opacity: 0, y: 10 }}
-                            transition={{ duration: 0.3, delay: 0.2 }}
+                            initial={
+                              shouldReduceMotion
+                                ? { opacity: 1 }
+                                : { opacity: 0, y: 10 }
+                            }
+                            transition={
+                              shouldReduceMotion
+                                ? { duration: 0 }
+                                : { duration: 0.3, delay: 0.2 }
+                            }
                           >
                             <Avatar className="size-8 border border-transparent shadow ring-1 ring-foreground/10">
                               <AvatarImage
diff --git a/packages/smoothui/blocks/testimonials/testimonials-3/__tests__/testimonials-3.test.tsx b/packages/smoothui/blocks/testimonials/testimonials-3/__tests__/testimonials-3.test.tsx
new file mode 100644
index 00000000..ac4400ab
--- /dev/null
+++ b/packages/smoothui/blocks/testimonials/testimonials-3/__tests__/testimonials-3.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "../../../../test-utils/render";
+import Block from "../index";
+
+describe("Testimonials3", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Block />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Block />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/packages/smoothui/blocks/testimonials/testimonials-3/index.tsx b/packages/smoothui/blocks/testimonials/testimonials-3/index.tsx
index b465452b..d7ca0a65 100644
--- a/packages/smoothui/blocks/testimonials/testimonials-3/index.tsx
+++ b/packages/smoothui/blocks/testimonials/testimonials-3/index.tsx
@@ -8,20 +8,27 @@ import {
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import { getAvatarUrl, getTestimonials } from "@smoothui/data";
 import { Star } from "lucide-react";
-import { motion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 
 const testimonials = getTestimonials(4);
 
 export function TestimonialsStars() {
+  const shouldReduceMotion = useReducedMotion();
   return (
     <section>
       <div className="py-24">
         <div className="container mx-auto w-full max-w-5xl px-6">
           <motion.div
-            animate={{ opacity: 1, y: 0 }}
+            animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
             className="mb-12"
-            initial={{ opacity: 0, y: 20 }}
-            transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
+            initial={
+              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+            }
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
+            }
           >
             <h2 className="font-semibold text-4xl text-foreground">
               Developer Reviews
@@ -33,47 +40,87 @@ export function TestimonialsStars() {
           </motion.div>
 
           <motion.div
-            animate={{ opacity: 1 }}
+            animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1 }}
             className="grid 3xl:grid-cols-3 3xl:gap-12 gap-6 lg:grid-cols-2"
-            initial={{ opacity: 0 }}
-            transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1], delay: 0.2 }}
+            initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0 }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : { duration: 0.6, ease: [0.22, 1, 0.36, 1], delay: 0.2 }
+            }
           >
             {testimonials.map((testimonial, index) => (
               <motion.div
-                animate={{ opacity: 1, y: 0 }}
+                animate={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                }
                 className="group rounded-2xl border border-transparent px-4 py-3 duration-200 hover:border-border hover:bg-background/50"
-                initial={{ opacity: 0, y: 30 }}
+                initial={
+                  shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 30 }
+                }
                 key={testimonial.name}
-                transition={{
-                  duration: 0.5,
-                  ease: [0.22, 1, 0.36, 1],
-                  delay: index * 0.15,
-                }}
-                whileHover={{
-                  y: -4,
-                  transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },
-                }}
+                transition={
+                  shouldReduceMotion
+                    ? { duration: 0 }
+                    : {
+                        duration: 0.5,
+                        ease: [0.22, 1, 0.36, 1],
+                        delay: index * 0.15,
+                      }
+                }
+                whileHover={
+                  shouldReduceMotion
+                    ? {}
+                    : {
+                        y: -4,
+                        transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },
+                      }
+                }
               >
                 <motion.div
-                  animate={{ opacity: 1, scale: 1 }}
+                  animate={
+                    shouldReduceMotion
+                      ? { opacity: 1 }
+                      : { opacity: 1, scale: 1 }
+                  }
                   className="flex gap-1"
-                  initial={{ opacity: 0, scale: 0.8 }}
-                  transition={{
-                    duration: 0.4,
-                    delay: index * 0.15 + 0.2,
-                    ease: [0.22, 1, 0.36, 1],
-                  }}
+                  initial={
+                    shouldReduceMotion
+                      ? { opacity: 1 }
+                      : { opacity: 0, scale: 0.8 }
+                  }
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : {
+                          duration: 0.4,
+                          delay: index * 0.15 + 0.2,
+                          ease: [0.22, 1, 0.36, 1],
+                        }
+                  }
                 >
                   {Array.from({ length: 5 }).map((_, i) => (
                     <motion.div
-                      animate={{ opacity: 1, scale: 1 }}
-                      initial={{ opacity: 0, scale: 0 }}
+                      animate={
+                        shouldReduceMotion
+                          ? { opacity: 1 }
+                          : { opacity: 1, scale: 1 }
+                      }
+                      initial={
+                        shouldReduceMotion
+                          ? { opacity: 1 }
+                          : { opacity: 0, scale: 0 }
+                      }
                       key={`${testimonial.name}-star-${i}`}
-                      transition={{
-                        duration: 0.3,
-                        delay: index * 0.15 + 0.2 + i * 0.05,
-                        ease: [0.68, -0.55, 0.265, 1.55],
-                      }}
+                      transition={
+                        shouldReduceMotion
+                          ? { duration: 0 }
+                          : {
+                              duration: 0.3,
+                              delay: index * 0.15 + 0.2 + i * 0.05,
+                              ease: [0.68, -0.55, 0.265, 1.55],
+                            }
+                      }
                     >
                       <Star
                         className={cn(
@@ -88,27 +135,43 @@ export function TestimonialsStars() {
                 </motion.div>
 
                 <motion.p
-                  animate={{ opacity: 1, y: 0 }}
+                  animate={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+                  }
                   className="my-4 text-foreground"
-                  initial={{ opacity: 0, y: 10 }}
-                  transition={{
-                    duration: 0.4,
-                    delay: index * 0.15 + 0.4,
-                    ease: [0.22, 1, 0.36, 1],
-                  }}
+                  initial={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 10 }
+                  }
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : {
+                          duration: 0.4,
+                          delay: index * 0.15 + 0.4,
+                          ease: [0.22, 1, 0.36, 1],
+                        }
+                  }
                 >
                   {testimonial.content}
                 </motion.p>
 
                 <motion.div
-                  animate={{ opacity: 1, x: 0 }}
+                  animate={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 1, x: 0 }
+                  }
                   className="flex items-center gap-2"
-                  initial={{ opacity: 0, x: -10 }}
-                  transition={{
-                    duration: 0.3,
-                    delay: index * 0.15 + 0.5,
-                    ease: [0.22, 1, 0.36, 1],
-                  }}
+                  initial={
+                    shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: -10 }
+                  }
+                  transition={
+                    shouldReduceMotion
+                      ? { duration: 0 }
+                      : {
+                          duration: 0.3,
+                          delay: index * 0.15 + 0.5,
+                          ease: [0.22, 1, 0.36, 1],
+                        }
+                  }
                 >
                   <Avatar className="size-6 border border-transparent shadow ring-1 ring-foreground/10">
                     <AvatarImage
diff --git a/packages/smoothui/components/agent-avatar/__tests__/agent-avatar.test.tsx b/packages/smoothui/components/agent-avatar/__tests__/agent-avatar.test.tsx
index 86a89462..d7c038a5 100644
--- a/packages/smoothui/components/agent-avatar/__tests__/agent-avatar.test.tsx
+++ b/packages/smoothui/components/agent-avatar/__tests__/agent-avatar.test.tsx
@@ -1,10 +1,141 @@
-import { describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { render } from "../../../test-utils/render";
 import AgentAvatar from "../index";
 
+type MockContext2D = {
+  arc: ReturnType<typeof vi.fn>;
+  beginPath: ReturnType<typeof vi.fn>;
+  clearRect: ReturnType<typeof vi.fn>;
+  clip: ReturnType<typeof vi.fn>;
+  fillRect: ReturnType<typeof vi.fn>;
+  restore: ReturnType<typeof vi.fn>;
+  save: ReturnType<typeof vi.fn>;
+  scale: ReturnType<typeof vi.fn>;
+  stroke: ReturnType<typeof vi.fn>;
+  translate: ReturnType<typeof vi.fn>;
+  fillStyle: string;
+  shadowBlur: number;
+  shadowColor: string;
+  strokeStyle: string;
+  lineWidth: number;
+  globalCompositeOperation: string;
+};
+
+const createMockContext = (): MockContext2D => ({
+  arc: vi.fn(),
+  beginPath: vi.fn(),
+  clearRect: vi.fn(),
+  clip: vi.fn(),
+  fillRect: vi.fn(),
+  restore: vi.fn(),
+  save: vi.fn(),
+  scale: vi.fn(),
+  stroke: vi.fn(),
+  translate: vi.fn(),
+  fillStyle: "",
+  shadowBlur: 0,
+  shadowColor: "",
+  strokeStyle: "",
+  lineWidth: 0,
+  globalCompositeOperation: "",
+});
+
+const mockMatchMedia = (matches: boolean) => {
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+};
+
 describe("AgentAvatar", () => {
-  it("renders without throwing", () => {
+  let mockCtx: MockContext2D;
+  let rafCallbacks: FrameRequestCallback[];
+
+  beforeEach(() => {
+    mockCtx = createMockContext();
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(
+      mockCtx as unknown as CanvasRenderingContext2D
+    );
+    rafCallbacks = [];
+    vi.stubGlobal(
+      "requestAnimationFrame",
+      vi.fn((cb: FrameRequestCallback) => {
+        rafCallbacks.push(cb);
+        return rafCallbacks.length;
+      })
+    );
+    vi.stubGlobal("cancelAnimationFrame", vi.fn());
+    mockMatchMedia(false);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("renders a canvas with the seed as an accessible label", () => {
     const { container } = render(<AgentAvatar seed="test-seed" />);
-    expect(container).toBeInTheDocument();
+    const canvas = container.querySelector("canvas");
+
+    expect(canvas).toBeInTheDocument();
+    expect(canvas).toHaveAttribute("aria-label", "Avatar for test-seed");
+    expect(canvas).toHaveAttribute("role", "img");
+  });
+
+  it("schedules a frame and draws the pixel grid once the frame runs", () => {
+    render(<AgentAvatar animated seed="alpha" />);
+
+    expect(requestAnimationFrame).toHaveBeenCalled();
+    expect(rafCallbacks).toHaveLength(1);
+
+    rafCallbacks[0](16);
+
+    expect(mockCtx.clearRect).toHaveBeenCalled();
+    expect(mockCtx.fillRect).toHaveBeenCalled();
+    // shouldAnimate keeps re-scheduling the next frame
+    expect(rafCallbacks).toHaveLength(2);
+  });
+
+  it("draws once without scheduling a frame when animated is false", () => {
+    render(<AgentAvatar animated={false} seed="beta" />);
+
+    expect(mockCtx.fillRect).toHaveBeenCalled();
+    expect(requestAnimationFrame).not.toHaveBeenCalled();
+  });
+
+  it("skips the animation loop when reduced motion is preferred", () => {
+    mockMatchMedia(true);
+    render(<AgentAvatar animated seed="gamma" />);
+
+    expect(mockCtx.fillRect).toHaveBeenCalled();
+    expect(requestAnimationFrame).not.toHaveBeenCalled();
+  });
+
+  it("applies the size prop to the canvas style dimensions", () => {
+    const { container } = render(<AgentAvatar seed="sized" size={128} />);
+    const canvas = container.querySelector("canvas") as HTMLCanvasElement;
+
+    expect(canvas.style.width).toBe("128px");
+    expect(canvas.style.height).toBe("128px");
+  });
+
+  it("cancels the animation frame and removes listeners on unmount", () => {
+    const { unmount } = render(<AgentAvatar animated seed="delta" />);
+
+    unmount();
+
+    expect(cancelAnimationFrame).toHaveBeenCalled();
+  });
+
+  it("does not throw when the canvas context is unavailable", () => {
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
+
+    expect(() => render(<AgentAvatar seed="no-ctx" />)).not.toThrow();
   });
 });
diff --git a/packages/smoothui/components/ai-branch/__tests__/ai-branch.test.tsx b/packages/smoothui/components/ai-branch/__tests__/ai-branch.test.tsx
index 85156a21..dc71338a 100644
--- a/packages/smoothui/components/ai-branch/__tests__/ai-branch.test.tsx
+++ b/packages/smoothui/components/ai-branch/__tests__/ai-branch.test.tsx
@@ -1,23 +1,175 @@
-import { describe, expect, it } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
 import { render } from "../../../test-utils/render";
-import AiBranch from "../index";
+import AiBranch, {
+  AIBranch,
+  AIBranchMessages,
+  AIBranchNext,
+  AIBranchPage,
+  AIBranchPrevious,
+  AIBranchSelector,
+} from "../index";
 
-describe("AiBranch", () => {
+const branches = [
+  {
+    id: "1",
+    userMessage: "Hello",
+    aiResponse: "Hi there",
+    timestamp: new Date(),
+    isActive: true,
+  },
+  {
+    id: "2",
+    userMessage: "How are you?",
+    aiResponse: "I'm good",
+    timestamp: new Date(),
+    isActive: false,
+  },
+  {
+    id: "3",
+    userMessage: "Bye",
+    aiResponse: "See you",
+    timestamp: new Date(),
+    isActive: false,
+  },
+];
+
+describe("AiBranch (legacy)", () => {
   it("renders without throwing", () => {
     const { container } = render(
-      <AiBranch
-        branches={[
-          {
-            id: "1",
-            userMessage: "Hello",
-            aiResponse: "Hi there",
-            timestamp: new Date(),
-            isActive: true,
-          },
-        ]}
-        onBranchSelect={() => {}}
-      />
+      <AiBranch branches={branches.slice(0, 1)} onBranchSelect={() => {}} />
     );
     expect(container).toBeInTheDocument();
   });
+
+  it("shows the active branch's messages", () => {
+    const { getByText } = render(
+      <AiBranch branches={branches} onBranchSelect={() => {}} />
+    );
+    expect(getByText("Hello")).toBeInTheDocument();
+    expect(getByText("Hi there")).toBeInTheDocument();
+  });
+
+  it("navigates to the next branch and calls onBranchSelect", () => {
+    const onBranchSelect = vi.fn();
+    const { getByLabelText, getByText } = render(
+      <AiBranch branches={branches} onBranchSelect={onBranchSelect} />
+    );
+
+    fireEvent.click(getByLabelText("Next branch"));
+
+    expect(getByText("How are you?")).toBeInTheDocument();
+    expect(onBranchSelect).toHaveBeenCalledWith("2");
+  });
+
+  it("wraps around to the last branch when going previous from the first", () => {
+    const onBranchSelect = vi.fn();
+    const { getByLabelText, getByText } = render(
+      <AiBranch branches={branches} onBranchSelect={onBranchSelect} />
+    );
+
+    fireEvent.click(getByLabelText("Previous branch"));
+
+    expect(getByText("Bye")).toBeInTheDocument();
+    expect(onBranchSelect).toHaveBeenCalledWith("3");
+  });
+
+  it("wraps around to the first branch when going next from the last", () => {
+    const onBranchSelect = vi.fn();
+    const { getByLabelText, getByText } = render(
+      <AiBranch branches={branches} onBranchSelect={onBranchSelect} />
+    );
+
+    fireEvent.click(getByLabelText("Next branch"));
+    fireEvent.click(getByLabelText("Next branch"));
+
+    expect(getByText("Bye")).toBeInTheDocument();
+
+    fireEvent.click(getByLabelText("Next branch"));
+
+    expect(getByText("Hello")).toBeInTheDocument();
+    expect(onBranchSelect).toHaveBeenLastCalledWith("1");
+  });
+
+  it("shows the branch counter", () => {
+    const { getByText } = render(
+      <AiBranch branches={branches} onBranchSelect={() => {}} />
+    );
+    expect(getByText("1/3")).toBeInTheDocument();
+  });
+
+  it("hides navigation controls when there is a single branch", () => {
+    const { queryByLabelText } = render(
+      <AiBranch branches={branches.slice(0, 1)} onBranchSelect={() => {}} />
+    );
+    expect(queryByLabelText("Previous branch")).not.toBeInTheDocument();
+    expect(queryByLabelText("Next branch")).not.toBeInTheDocument();
+  });
+});
+
+describe("AIBranch (compound API)", () => {
+  it("renders the current branch and hides others", () => {
+    const { getByText } = render(
+      <AIBranch>
+        <AIBranchMessages>
+          <div>Branch one</div>
+          <div>Branch two</div>
+        </AIBranchMessages>
+      </AIBranch>
+    );
+
+    expect(getByText("Branch one")).toBeInTheDocument();
+    expect(getByText("Branch two")).toBeInTheDocument();
+  });
+
+  it("navigates between branches and calls onBranchChange", () => {
+    const onBranchChange = vi.fn();
+    const { getByLabelText, getByText } = render(
+      <AIBranch onBranchChange={onBranchChange}>
+        <AIBranchMessages>
+          <div>Branch one</div>
+          <div>Branch two</div>
+        </AIBranchMessages>
+        <AIBranchSelector from="assistant">
+          <AIBranchPrevious />
+          <AIBranchPage />
+          <AIBranchNext />
+        </AIBranchSelector>
+      </AIBranch>
+    );
+
+    expect(getByText("1 of 2")).toBeInTheDocument();
+
+    fireEvent.click(getByLabelText("Next branch"));
+
+    expect(getByText("2 of 2")).toBeInTheDocument();
+    expect(onBranchChange).toHaveBeenCalledWith(1);
+
+    fireEvent.click(getByLabelText("Previous branch"));
+
+    expect(getByText("1 of 2")).toBeInTheDocument();
+    expect(onBranchChange).toHaveBeenCalledWith(0);
+  });
+
+  it("does not render the selector when there is only one branch", () => {
+    const { queryByLabelText } = render(
+      <AIBranch>
+        <AIBranchMessages>
+          <div>Only branch</div>
+        </AIBranchMessages>
+        <AIBranchSelector from="user">
+          <AIBranchPrevious />
+          <AIBranchNext />
+        </AIBranchSelector>
+      </AIBranch>
+    );
+
+    expect(queryByLabelText("Next branch")).not.toBeInTheDocument();
+  });
+
+  it("throws when branch sub-components are used outside AIBranch", () => {
+    expect(() => render(<AIBranchPage />)).toThrow(
+      "AIBranch components must be used within AIBranch"
+    );
+  });
 });
diff --git a/packages/smoothui/components/animated-avatar-group/index.tsx b/packages/smoothui/components/animated-avatar-group/index.tsx
index 4dba5578..fd29fc08 100644
--- a/packages/smoothui/components/animated-avatar-group/index.tsx
+++ b/packages/smoothui/components/animated-avatar-group/index.tsx
@@ -79,6 +79,7 @@ const AnimatedAvatarGroup = ({
                   }
             }
             className="rounded-full object-cover"
+            draggable={false}
             height={size}
             initial={
               shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }
diff --git a/packages/smoothui/components/animated-file-upload/__tests__/animated-file-upload.test.tsx b/packages/smoothui/components/animated-file-upload/__tests__/animated-file-upload.test.tsx
index 3035214f..b64f8c2c 100644
--- a/packages/smoothui/components/animated-file-upload/__tests__/animated-file-upload.test.tsx
+++ b/packages/smoothui/components/animated-file-upload/__tests__/animated-file-upload.test.tsx
@@ -1,7 +1,12 @@
-import { describe, expect, it } from "vitest";
-import { render } from "../../../test-utils/render";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "../../../test-utils/render";
 import AnimatedFileUpload from "../index";
 
+const createFile = (name: string, size: number, type = "image/png") => {
+  const file = new File([new Uint8Array(size)], name, { type });
+  return file;
+};
+
 describe("AnimatedFileUpload", () => {
   it("renders without throwing", () => {
     const { container } = render(
@@ -9,4 +14,157 @@ describe("AnimatedFileUpload", () => {
     );
     expect(container).toBeInTheDocument();
   });
+
+  it("adds a file selected through the input and calls onFilesSelected", () => {
+    const onFilesSelected = vi.fn();
+    const { container } = render(
+      <AnimatedFileUpload onFilesSelected={onFilesSelected} />
+    );
+    const input = container.querySelector(
+      'input[type="file"]'
+    ) as HTMLInputElement;
+    const file = createFile("photo.png", 2048);
+
+    fireEvent.change(input, { target: { files: [file] } });
+
+    expect(screen.getByText("photo.png")).toBeInTheDocument();
+    expect(screen.getByText("2.0 KB")).toBeInTheDocument();
+    expect(onFilesSelected).toHaveBeenCalledWith([file]);
+  });
+
+  it("removes a file when the remove button is clicked", () => {
+    const onFilesSelected = vi.fn();
+    const { container } = render(
+      <AnimatedFileUpload onFilesSelected={onFilesSelected} />
+    );
+    const input = container.querySelector(
+      'input[type="file"]'
+    ) as HTMLInputElement;
+    const file = createFile("doc.pdf", 512, "application/pdf");
+
+    fireEvent.change(input, { target: { files: [file] } });
+    fireEvent.click(screen.getByLabelText("Remove doc.pdf"));
+
+    expect(screen.queryByText("doc.pdf")).not.toBeInTheDocument();
+    expect(onFilesSelected).toHaveBeenLastCalledWith([]);
+  });
+
+  it("keeps only the first file when multiple is false", () => {
+    const onFilesSelected = vi.fn();
+    const { container } = render(
+      <AnimatedFileUpload multiple={false} onFilesSelected={onFilesSelected} />
+    );
+    const input = container.querySelector(
+      'input[type="file"]'
+    ) as HTMLInputElement;
+    const first = createFile("a.png", 100);
+    const second = createFile("b.png", 100);
+
+    fireEvent.change(input, { target: { files: [first, second] } });
+
+    expect(screen.getByText("a.png")).toBeInTheDocument();
+    expect(screen.queryByText("b.png")).not.toBeInTheDocument();
+    expect(onFilesSelected).toHaveBeenCalledWith([first]);
+  });
+
+  it("rejects files over maxSize and shows an error", () => {
+    const onFilesSelected = vi.fn();
+    const { container } = render(
+      <AnimatedFileUpload maxSize={1024} onFilesSelected={onFilesSelected} />
+    );
+    const input = container.querySelector(
+      'input[type="file"]'
+    ) as HTMLInputElement;
+    const oversized = createFile("big.png", 2048);
+
+    fireEvent.change(input, { target: { files: [oversized] } });
+
+    expect(
+      screen.getByText("1 file(s) exceed the 1.0 KB limit")
+    ).toBeInTheDocument();
+    expect(onFilesSelected).not.toHaveBeenCalled();
+  });
+
+  it("toggles drag-over state on drag enter and leave", () => {
+    const { getByLabelText } = render(
+      <AnimatedFileUpload onFilesSelected={() => {}} />
+    );
+    const dropzone = getByLabelText(
+      "File upload area. Drag and drop files or press to browse"
+    );
+
+    fireEvent.dragEnter(dropzone);
+    expect(dropzone.className).toContain("border-primary");
+
+    fireEvent.dragLeave(dropzone);
+    expect(dropzone.className).not.toContain("border-primary");
+  });
+
+  it("adds files dropped on the dropzone", () => {
+    const onFilesSelected = vi.fn();
+    const { getByLabelText } = render(
+      <AnimatedFileUpload onFilesSelected={onFilesSelected} />
+    );
+    const dropzone = getByLabelText(
+      "File upload area. Drag and drop files or press to browse"
+    );
+    const file = createFile("dropped.png", 100);
+
+    fireEvent.drop(dropzone, { dataTransfer: { files: [file] } });
+
+    expect(screen.getByText("dropped.png")).toBeInTheDocument();
+    expect(onFilesSelected).toHaveBeenCalledWith([file]);
+  });
+
+  it("does not open the file picker or accept drops when disabled", () => {
+    const onFilesSelected = vi.fn();
+    const { getByLabelText } = render(
+      <AnimatedFileUpload disabled onFilesSelected={onFilesSelected} />
+    );
+    const dropzone = getByLabelText(
+      "File upload area. Drag and drop files or press to browse"
+    );
+
+    expect(dropzone).toHaveAttribute("tabIndex", "-1");
+
+    fireEvent.drop(dropzone, {
+      dataTransfer: { files: [createFile("nope.png", 10)] },
+    });
+
+    expect(screen.queryByText("nope.png")).not.toBeInTheDocument();
+    expect(onFilesSelected).not.toHaveBeenCalled();
+  });
+
+  it("opens the file picker on Enter and Space keys", () => {
+    const { getByLabelText } = render(
+      <AnimatedFileUpload onFilesSelected={() => {}} />
+    );
+    const dropzone = getByLabelText(
+      "File upload area. Drag and drop files or press to browse"
+    );
+    const input = dropzone.querySelector(
+      'input[type="file"]'
+    ) as HTMLInputElement;
+    const clickSpy = vi.spyOn(input, "click");
+
+    fireEvent.keyDown(dropzone, { key: "Enter" });
+    fireEvent.keyDown(dropzone, { key: " " });
+
+    expect(clickSpy.mock.calls.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("formats megabyte-sized files", () => {
+    const onFilesSelected = vi.fn();
+    const { container } = render(
+      <AnimatedFileUpload onFilesSelected={onFilesSelected} />
+    );
+    const input = container.querySelector(
+      'input[type="file"]'
+    ) as HTMLInputElement;
+    const big = createFile("video.mp4", 5 * 1024 * 1024, "video/mp4");
+
+    fireEvent.change(input, { target: { files: [big] } });
+
+    expect(screen.getByText("5.0 MB")).toBeInTheDocument();
+  });
 });
diff --git a/packages/smoothui/components/animated-input/index.tsx b/packages/smoothui/components/animated-input/index.tsx
index ab74886b..830b86f8 100644
--- a/packages/smoothui/components/animated-input/index.tsx
+++ b/packages/smoothui/components/animated-input/index.tsx
@@ -1,13 +1,10 @@
 import { motion, useReducedMotion } from "motion/react";
-import { useRef, useState } from "react";
+import { useId, useRef, useState } from "react";
 
 const EASE_IN_OUT_CUBIC_X1 = 0.4;
 const EASE_IN_OUT_CUBIC_Y1 = 0;
 const EASE_IN_OUT_CUBIC_X2 = 0.2;
 const EASE_IN_OUT_CUBIC_Y2 = 1;
-const RADIX_BASE_36 = 36;
-const RANDOM_ID_START_INDEX = 2;
-const RANDOM_ID_LENGTH = 9;
 
 const LABEL_TRANSITION = {
   duration: 0.28,
@@ -51,7 +48,8 @@ export default function AnimatedInput({
   const [isFocused, setIsFocused] = useState(false);
   const isFloating = !!val || isFocused;
   const shouldReduceMotion = useReducedMotion();
-  const inputId = `animated-input-${Math.random().toString(RADIX_BASE_36).substring(RANDOM_ID_START_INDEX, RANDOM_ID_LENGTH)}`;
+  const reactId = useId();
+  const inputId = `animated-input-${reactId.replace(/:/g, "")}`;
 
   const getLabelAnimation = () => {
     if (shouldReduceMotion) {
diff --git a/packages/smoothui/components/aperture-blur-transition/__tests__/aperture-blur-transition.test.tsx b/packages/smoothui/components/aperture-blur-transition/__tests__/aperture-blur-transition.test.tsx
new file mode 100644
index 00000000..ed9c4426
--- /dev/null
+++ b/packages/smoothui/components/aperture-blur-transition/__tests__/aperture-blur-transition.test.tsx
@@ -0,0 +1,121 @@
+import { useReducedMotion } from "motion/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "../../../test-utils/render";
+import {
+  flushFrames,
+  installWebglMock,
+  runFramesFor,
+  uninstallWebglMock,
+} from "../../../test-utils/webgl-mock";
+import ApertureBlurTransition from "../index";
+
+vi.mock("motion/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("motion/react")>();
+  return { ...actual, useReducedMotion: vi.fn(() => false) };
+});
+
+describe("ApertureBlurTransition", () => {
+  beforeEach(() => {
+    installWebglMock();
+  });
+
+  afterEach(() => {
+    uninstallWebglMock();
+    vi.mocked(useReducedMotion).mockReturnValue(false);
+  });
+
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <ApertureBlurTransition transitionKey="draft">
+        Draft saved
+      </ApertureBlurTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+
+  it("runs the aperture sweep, swaps content at the midpoint, and calls onRest", () => {
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <ApertureBlurTransition duration={100} onRest={onRest} transitionKey="a">
+        First
+      </ApertureBlurTransition>
+    );
+
+    expect(getByText("First")).toBeInTheDocument();
+
+    rerender(
+      <ApertureBlurTransition duration={100} onRest={onRest} transitionKey="b">
+        Second
+      </ApertureBlurTransition>
+    );
+
+    runFramesFor(400);
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("skips the animation and swaps content immediately when reduced motion is preferred", () => {
+    vi.mocked(useReducedMotion).mockReturnValue(true);
+
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <ApertureBlurTransition onRest={onRest} transitionKey="a">
+        First
+      </ApertureBlurTransition>
+    );
+
+    rerender(
+      <ApertureBlurTransition onRest={onRest} transitionKey="b">
+        Second
+      </ApertureBlurTransition>
+    );
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("swaps content immediately when WebGL is unavailable", () => {
+    uninstallWebglMock();
+    installWebglMock({ supported: false });
+
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <ApertureBlurTransition onRest={onRest} transitionKey="a">
+        First
+      </ApertureBlurTransition>
+    );
+
+    rerender(
+      <ApertureBlurTransition onRest={onRest} transitionKey="b">
+        Second
+      </ApertureBlurTransition>
+    );
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not throw when unmounted mid-animation", () => {
+    const { rerender, unmount } = render(
+      <ApertureBlurTransition duration={200} transitionKey="a">
+        First
+      </ApertureBlurTransition>
+    );
+
+    rerender(
+      <ApertureBlurTransition duration={200} transitionKey="b">
+        Second
+      </ApertureBlurTransition>
+    );
+
+    flushFrames(2);
+
+    expect(() => unmount()).not.toThrow();
+    expect(() => flushFrames(2)).not.toThrow();
+  });
+});
diff --git a/packages/smoothui/components/aperture-blur-transition/index.tsx b/packages/smoothui/components/aperture-blur-transition/index.tsx
new file mode 100644
index 00000000..e40852bd
--- /dev/null
+++ b/packages/smoothui/components/aperture-blur-transition/index.tsx
@@ -0,0 +1,325 @@
+"use client";
+
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import { useReducedMotion } from "motion/react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+
+export interface ApertureBlurTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const DEFAULT_DURATION_MS = 760;
+const MIDPOINT = 0.48;
+const MAX_DPR = 2;
+const VERTEX_SHADER =
+  "attribute vec2 a; void main(){ gl_Position = vec4(a, 0.0, 1.0); }";
+const FRAGMENT_SHADER = `
+precision mediump float;
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uProgress;
+uniform float uAlpha;
+#define PI 3.14159265359
+
+float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / uRes;
+  vec2 aspect = vec2(uRes.x / uRes.y, 1.0);
+  vec2 p = (uv - 0.5) * aspect;
+  float r = length(p);
+  float a = atan(p.y, p.x);
+
+  float progress = smoothstep(0.0, 1.0, uProgress);
+  float radius = mix(0.05, 0.82, progress);
+  float apertureNoise = sin(a * 8.0 + uTime * 0.9) * 0.018 + sin(a * 17.0 - uTime * 0.6) * 0.006;
+  float d = r - radius - apertureNoise;
+
+  float exitFade = smoothstep(0.94, 0.58, progress);
+  float ring = exp(-d * d * 210.0) * exitFade;
+  float innerGlow = smoothstep(radius + 0.18, radius - 0.02, r) * smoothstep(0.0, 0.34, progress) * exitFade;
+  float outerFeather = smoothstep(radius + 0.22, radius - 0.04, r) * exitFade * 0.55;
+  float grain = hash(floor(uv * uRes / 3.0) + floor(uTime * 18.0)) * 0.045;
+
+  vec3 champagne = vec3(1.0, 0.82, 0.56);
+  vec3 rose = vec3(1.0, 0.34, 0.62);
+  vec3 cyan = vec3(0.62, 0.92, 1.0);
+  vec3 color = mix(champagne, rose, smoothstep(-0.4, 0.4, sin(a * 2.0 + uTime * 0.7)));
+  color = mix(color, cyan, ring * 0.38 + smoothstep(0.74, 1.0, progress) * 0.18);
+
+  float highlight = ring * (0.82 + grain) + innerGlow * 0.18 + outerFeather * 0.08;
+  float alpha = clamp(highlight * uAlpha, 0.0, 0.88);
+  gl_FragColor = vec4(color * alpha + vec3(1.0) * ring * 0.22 * uAlpha, alpha);
+}
+`;
+const STRIP = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+
+interface Playback {
+  cancel: () => void;
+}
+
+interface Controller {
+  destroy: () => void;
+  getProgress: () => number;
+  setAlpha: (alpha: number) => void;
+  setProgress: (progress: number) => void;
+}
+
+const clamp01 = (value: number) => Math.max(0, Math.min(1, value));
+const easeOutCubic = (value: number) => 1 - (1 - value) ** 3;
+const easeInOutCubic = (value: number) =>
+  value < 0.5 ? 4 * value ** 3 : 1 - (-2 * value + 2) ** 3 / 2;
+
+const compile = (gl: WebGLRenderingContext, type: number, source: string) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    return null;
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+};
+
+const resize = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) => {
+  const rect = canvas.getBoundingClientRect();
+  const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);
+  const width = Math.max(1, Math.round(rect.width * dpr));
+  const height = Math.max(1, Math.round(rect.height * dpr));
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+  gl.viewport(0, 0, width, height);
+};
+
+const createController = (canvas: HTMLCanvasElement): Controller | null => {
+  const gl = canvas.getContext("webgl", {
+    alpha: true,
+    antialias: false,
+    premultipliedAlpha: true,
+  });
+  if (!gl) {
+    return null;
+  }
+  const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+  const program = gl.createProgram();
+  if (!(vertex && fragment && program)) {
+    return null;
+  }
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+
+  // biome-ignore lint/correctness/useHookAtTopLevel: WebGLRenderingContext.useProgram is not a React hook.
+  gl.useProgram(program);
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, STRIP, gl.STATIC_DRAW);
+  const position = gl.getAttribLocation(program, "a");
+  gl.enableVertexAttribArray(position);
+  gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+  const uRes = gl.getUniformLocation(program, "uRes");
+  const uTime = gl.getUniformLocation(program, "uTime");
+  const uProgress = gl.getUniformLocation(program, "uProgress");
+  const uAlpha = gl.getUniformLocation(program, "uAlpha");
+  const startedAt = performance.now();
+  let progress = 0;
+  let alpha = 0;
+  let frame = 0;
+  let destroyed = false;
+
+  const tick = () => {
+    if (destroyed) {
+      return;
+    }
+    resize(canvas, gl);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.uniform2f(uRes, canvas.width, canvas.height);
+    gl.uniform1f(uTime, (performance.now() - startedAt) / 1000);
+    gl.uniform1f(uProgress, progress);
+    gl.uniform1f(uAlpha, alpha);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    frame = requestAnimationFrame(tick);
+  };
+  frame = requestAnimationFrame(tick);
+
+  return {
+    destroy: () => {
+      destroyed = true;
+      cancelAnimationFrame(frame);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      if (buffer) {
+        gl.deleteBuffer(buffer);
+      }
+      gl.deleteProgram(program);
+    },
+    getProgress: () => progress,
+    setAlpha: (nextAlpha: number) => {
+      alpha = clamp01(nextAlpha);
+    },
+    setProgress: (nextProgress: number) => {
+      progress = clamp01(nextProgress);
+    },
+  };
+};
+
+const play = (
+  controller: Controller,
+  duration: number,
+  onMidpoint: () => void,
+  onComplete: () => void
+): Playback => {
+  let frame = 0;
+  let cancelled = false;
+  let didSwap = false;
+  const startedAt = performance.now();
+  controller.setAlpha(1);
+
+  const advance = () => {
+    if (cancelled) {
+      return;
+    }
+    const raw = clamp01((performance.now() - startedAt) / duration);
+    const progress = easeOutCubic(raw);
+    controller.setProgress(progress);
+    if (!(didSwap || progress < MIDPOINT)) {
+      didSwap = true;
+      onMidpoint();
+    }
+    if (raw < 1) {
+      frame = requestAnimationFrame(advance);
+      return;
+    }
+    if (!didSwap) {
+      onMidpoint();
+    }
+    const fadeStartedAt = performance.now();
+    const fade = () => {
+      if (cancelled) {
+        return;
+      }
+      const fadeRaw = clamp01((performance.now() - fadeStartedAt) / 70);
+      controller.setAlpha(1 - easeInOutCubic(fadeRaw));
+      if (fadeRaw < 1) {
+        frame = requestAnimationFrame(fade);
+        return;
+      }
+      controller.setAlpha(0);
+      controller.setProgress(0);
+      onComplete();
+    };
+    frame = requestAnimationFrame(fade);
+  };
+  frame = requestAnimationFrame(advance);
+
+  return {
+    cancel: () => {
+      cancelled = true;
+      cancelAnimationFrame(frame);
+    },
+  };
+};
+
+const ApertureBlurTransition = ({
+  children,
+  className,
+  duration = DEFAULT_DURATION_MS,
+  onRest,
+  transitionKey,
+}: ApertureBlurTransitionProps) => {
+  const shouldReduceMotion = useReducedMotion();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const controllerRef = useRef<Controller | null>(null);
+  const playbackRef = useRef<Playback | null>(null);
+  const previousKey = useRef(transitionKey);
+  const [renderedChildren, setRenderedChildren] = useState(children);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const controller = createController(canvas);
+    controllerRef.current = controller;
+    return () => {
+      playbackRef.current?.cancel();
+      controller?.destroy();
+      controllerRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (previousKey.current === transitionKey) {
+      setRenderedChildren(children);
+      return;
+    }
+    previousKey.current = transitionKey;
+    playbackRef.current?.cancel();
+
+    if (shouldReduceMotion) {
+      setRenderedChildren(children);
+      setIsActive(false);
+      onRest?.();
+      return;
+    }
+
+    const controller = controllerRef.current;
+    if (!controller) {
+      setRenderedChildren(children);
+      onRest?.();
+      return;
+    }
+    setIsActive(true);
+    playbackRef.current = play(
+      controller,
+      duration,
+      () => setRenderedChildren(children),
+      () => {
+        setIsActive(false);
+        playbackRef.current = null;
+        onRest?.();
+      }
+    );
+  }, [children, duration, onRest, shouldReduceMotion, transitionKey]);
+
+  return (
+    <div
+      className={cn(
+        "relative isolate overflow-hidden rounded-2xl bg-background text-foreground",
+        className
+      )}
+      data-transitioning={isActive ? "true" : "false"}
+    >
+      <div className="relative z-0">{renderedChildren}</div>
+      <canvas
+        className={cn(
+          "pointer-events-none absolute inset-0 z-10 h-full w-full transition-opacity duration-75",
+          isActive && !shouldReduceMotion ? "opacity-100" : "opacity-0"
+        )}
+        ref={canvasRef}
+      />
+    </div>
+  );
+};
+
+export default ApertureBlurTransition;
diff --git a/packages/smoothui/components/aperture-blur-transition/package.json b/packages/smoothui/components/aperture-blur-transition/package.json
new file mode 100644
index 00000000..5d465a87
--- /dev/null
+++ b/packages/smoothui/components/aperture-blur-transition/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@repo/aperture-blur-transition",
+  "description": "Persistent WebGL shader transition wrapper that swaps content behind a cinematic aperture bloom.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "page-transition",
+      "state-change",
+      "frame",
+      "motion"
+    ],
+    "complexity": "moderate",
+    "animationType": "tween",
+    "useCases": [
+      "Punctuate major route or state changes",
+      "Wrap onboarding, checkout, or publish flows",
+      "Make demos and previews feel more premium"
+    ],
+    "compositionHints": [
+      "Use sparingly for meaningful changes only",
+      "Wrap the whole preview or route frame instead of a tiny card"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/aperture-blur-transition/tsconfig.json b/packages/smoothui/components/aperture-blur-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/aperture-blur-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/app-download-stack/__tests__/app-download-stack.test.tsx b/packages/smoothui/components/app-download-stack/__tests__/app-download-stack.test.tsx
index 7d48b74a..560cb570 100644
--- a/packages/smoothui/components/app-download-stack/__tests__/app-download-stack.test.tsx
+++ b/packages/smoothui/components/app-download-stack/__tests__/app-download-stack.test.tsx
@@ -1,10 +1,148 @@
-import { describe, expect, it } from "vitest";
-import { render } from "../../../test-utils/render";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "../../../test-utils/render";
 import AppDownloadStack from "../index";
 
+const apps = [
+  { id: 1, name: "GitHub", icon: "https://example.com/github.png" },
+  { id: 2, name: "Figma", icon: "https://example.com/figma.png" },
+];
+
+/** Fully controlled wrapper mirroring real-world usage of selectedApps + onChange. */
+const ControlledStack = ({
+  onChangeSpy,
+}: {
+  onChangeSpy: (ids: number[]) => void;
+}) => {
+  const [selected, setSelected] = useState<number[]>([]);
+  return (
+    <AppDownloadStack
+      apps={apps}
+      isExpanded
+      onChange={(ids: number[]) => {
+        setSelected(ids);
+        onChangeSpy(ids);
+      }}
+      selectedApps={selected}
+    />
+  );
+};
+
 describe("AppDownloadStack", () => {
   it("renders without throwing", () => {
     const { container } = render(<AppDownloadStack />);
     expect(container).toBeInTheDocument();
   });
+
+  it("expands the app selector on trigger click", async () => {
+    const user = userEvent.setup();
+    render(<AppDownloadStack apps={apps} title="My Apps" />);
+
+    await user.click(
+      screen.getByRole("button", { name: "Expand app selection" })
+    );
+
+    expect(screen.getByText("My Apps")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /GitHub/ })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Figma/ })).toBeInTheDocument();
+  });
+
+  it("collapses the selector when the header is clicked again", async () => {
+    const user = userEvent.setup();
+    render(<AppDownloadStack apps={apps} title="My Apps" />);
+
+    await user.click(
+      screen.getByRole("button", { name: "Expand app selection" })
+    );
+    await user.click(screen.getByText("My Apps"));
+
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Expand app selection" })
+      ).toBeInTheDocument()
+    );
+  });
+
+  it("toggles app selection cumulatively and calls onChange", async () => {
+    const user = userEvent.setup();
+    const onChangeSpy = vi.fn();
+    render(<ControlledStack onChangeSpy={onChangeSpy} />);
+
+    await user.click(screen.getByRole("button", { name: /GitHub/ }));
+    expect(onChangeSpy).toHaveBeenLastCalledWith([1]);
+
+    await user.click(screen.getByRole("button", { name: /Figma/ }));
+    expect(onChangeSpy).toHaveBeenLastCalledWith([1, 2]);
+
+    await user.click(screen.getByRole("button", { name: /GitHub/ }));
+    expect(onChangeSpy).toHaveBeenLastCalledWith([2]);
+  });
+
+  it("disables the download button until an app is selected", async () => {
+    const user = userEvent.setup();
+    render(<AppDownloadStack apps={apps} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "Expand app selection" })
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Download Selected" })
+    ).toBeDisabled();
+
+    await user.click(screen.getByRole("button", { name: /GitHub/ }));
+
+    expect(
+      screen.getByRole("button", { name: "Download Selected" })
+    ).toBeEnabled();
+  });
+
+  it("runs the full download flow and calls onDownload, resetting after completion", async () => {
+    const user = userEvent.setup();
+    const onDownload = vi.fn();
+    render(<AppDownloadStack apps={apps} onDownload={onDownload} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "Expand app selection" })
+    );
+    await user.click(screen.getByRole("button", { name: /GitHub/ }));
+    await user.click(screen.getByRole("button", { name: "Download Selected" }));
+
+    expect(onDownload).toHaveBeenCalledWith([1]);
+    await waitFor(() =>
+      expect(screen.getByText("Downloading...")).toBeInTheDocument()
+    );
+
+    await waitFor(
+      () => expect(screen.getByText("Download Complete!")).toBeInTheDocument(),
+      { timeout: 4000 }
+    );
+
+    await waitFor(
+      () =>
+        expect(
+          screen.getByRole("button", { name: "Expand app selection" })
+        ).toBeInTheDocument(),
+      { timeout: 2000 }
+    );
+  }, 10_000);
+
+  it("supports controlled selectedApps and isExpanded", () => {
+    const noSelection: number[] = [];
+    render(
+      <AppDownloadStack
+        apps={apps}
+        isExpanded
+        onChange={vi.fn()}
+        selectedApps={noSelection}
+      />
+    );
+
+    expect(screen.getByRole("button", { name: /GitHub/ })).toBeInTheDocument();
+    // Controlled + expanded: renders the selector panel directly, no toggle needed.
+    expect(
+      screen.getByRole("button", { name: "Download Selected" })
+    ).toBeDisabled();
+  });
 });
diff --git a/packages/smoothui/components/app-download-stack/index.tsx b/packages/smoothui/components/app-download-stack/index.tsx
index 3c1a639b..d723da24 100644
--- a/packages/smoothui/components/app-download-stack/index.tsx
+++ b/packages/smoothui/components/app-download-stack/index.tsx
@@ -230,6 +230,7 @@ export default function AppDownloadStack({
                   }
                   className="absolute inset-0 rounded-xl border-none"
                   custom={index}
+                  draggable={false}
                   height={64}
                   initial="initial"
                   key={app.id}
@@ -342,6 +343,7 @@ export default function AppDownloadStack({
                       <img
                         alt={app.name}
                         className="rounded-lg"
+                        draggable={false}
                         height={40}
                         src={app.icon}
                         width={40}
@@ -395,6 +397,7 @@ export default function AppDownloadStack({
                     }
                     className="absolute inset-0 rounded-xl border-none"
                     custom={index}
+                    draggable={false}
                     height={64}
                     initial="initial"
                     key={app.id}
diff --git a/packages/smoothui/components/apple-invites/__tests__/apple-invites.test.tsx b/packages/smoothui/components/apple-invites/__tests__/apple-invites.test.tsx
new file mode 100644
index 00000000..9af74830
--- /dev/null
+++ b/packages/smoothui/components/apple-invites/__tests__/apple-invites.test.tsx
@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import AppleInvites, { type Event } from "../index";
+
+const events: Event[] = [
+  {
+    id: 1,
+    title: "Launch party",
+    location: "Madrid",
+    image: "https://example.com/a.jpg",
+  },
+  {
+    id: 2,
+    title: "Demo day",
+    location: "Barcelona",
+    image: "https://example.com/b.jpg",
+  },
+];
+
+describe("AppleInvites", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<AppleInvites events={events} />);
+    expect(container).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/apple-invites/index.tsx b/packages/smoothui/components/apple-invites/index.tsx
index 503f68a5..c09d4619 100644
--- a/packages/smoothui/components/apple-invites/index.tsx
+++ b/packages/smoothui/components/apple-invites/index.tsx
@@ -384,6 +384,7 @@ export default function AppleInvites({
         <img
           alt={event.title || ""}
           className="h-full w-full object-cover"
+          draggable={false}
           height={400}
           src={event.image}
           width={400}
@@ -454,6 +455,7 @@ export default function AppleInvites({
                     <img
                       alt={`Participant ${idx + 1}`}
                       className="rounded-full"
+                      draggable={false}
                       height={avatarSize}
                       key={`participant-${participant.avatar}-${idx}`}
                       src={participant.avatar}
diff --git a/packages/smoothui/components/basic-accordion/index.tsx b/packages/smoothui/components/basic-accordion/index.tsx
index f5ecbd84..48ed4d75 100644
--- a/packages/smoothui/components/basic-accordion/index.tsx
+++ b/packages/smoothui/components/basic-accordion/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ChevronDown } from "lucide-react";
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 import { useState } from "react";
 
 const CHEVRON_ROTATION_DEGREES = 180;
@@ -69,54 +69,38 @@ export default function BasicAccordion({
               </motion.div>
             </button>
 
-            <AnimatePresence initial={false}>
-              {isExpanded && (
-                <motion.div
-                  animate={
-                    shouldReduceMotion
-                      ? { height: "auto", opacity: 1 }
-                      : {
-                          height: "auto",
-                          opacity: 1,
-                          transition: {
-                            height: {
-                              type: "spring" as const,
-                              stiffness: 500,
-                              damping: 40,
-                              duration: 0.25,
-                            },
-                            opacity: { duration: 0.2 },
-                          },
-                        }
-                  }
-                  aria-labelledby={`accordion-header-${item.id}`}
-                  className="overflow-hidden"
-                  exit={
-                    shouldReduceMotion
-                      ? { height: 0, opacity: 0, transition: { duration: 0 } }
-                      : {
-                          height: 0,
-                          opacity: 0,
-                          transition: {
-                            height: { duration: 0.2 },
-                            opacity: { duration: 0.15 },
-                          },
-                        }
-                  }
-                  id={`accordion-content-${item.id}`}
-                  initial={
-                    shouldReduceMotion
-                      ? { height: "auto", opacity: 1 }
-                      : { height: 0, opacity: 0 }
-                  }
-                  role="region"
-                >
-                  <div className="border-t bg-background px-4 py-3">
-                    {item.content}
-                  </div>
-                </motion.div>
-              )}
-            </AnimatePresence>
+            {/* Content stays mounted (height-animated, not unmounted) so the
+                accordion keeps a stable width whether open or closed. `inert`
+                removes collapsed content from tab order and the a11y tree. */}
+            <motion.div
+              animate={{
+                height: isExpanded ? "auto" : 0,
+                opacity: isExpanded ? 1 : 0,
+              }}
+              aria-labelledby={`accordion-header-${item.id}`}
+              className="overflow-hidden"
+              id={`accordion-content-${item.id}`}
+              inert={!isExpanded}
+              initial={false}
+              role="region"
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : {
+                      height: {
+                        type: "spring" as const,
+                        stiffness: 500,
+                        damping: 40,
+                        duration: 0.25,
+                      },
+                      opacity: { duration: 0.2 },
+                    }
+              }
+            >
+              <div className="border-t bg-background px-4 py-3">
+                {item.content}
+              </div>
+            </motion.div>
           </div>
         );
       })}
diff --git a/packages/smoothui/components/basic-dropdown/__tests__/basic-dropdown.test.tsx b/packages/smoothui/components/basic-dropdown/__tests__/basic-dropdown.test.tsx
index a0e808d6..75517513 100644
--- a/packages/smoothui/components/basic-dropdown/__tests__/basic-dropdown.test.tsx
+++ b/packages/smoothui/components/basic-dropdown/__tests__/basic-dropdown.test.tsx
@@ -1,18 +1,130 @@
-import { describe, expect, it } from "vitest";
-import { render } from "../../../test-utils/render";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "../../../test-utils/render";
 import BasicDropdown from "../index";
 
+const items = [
+  { id: "1", label: "Option 1" },
+  { id: "2", label: "Option 2" },
+  { id: "3", label: "Option 3" },
+];
+
 describe("BasicDropdown", () => {
   it("renders without throwing", () => {
     const { container } = render(
-      <BasicDropdown
-        items={[
-          { id: "1", label: "Option 1" },
-          { id: "2", label: "Option 2" },
-        ]}
-        label="Select option"
-      />
+      <BasicDropdown items={items} label="Select option" />
     );
     expect(container).toBeInTheDocument();
   });
+
+  it("opens the dropdown list on trigger click", async () => {
+    const user = userEvent.setup();
+    render(<BasicDropdown items={items} label="Select option" />);
+
+    const trigger = screen.getByRole("button", { name: "Select option" });
+    await user.click(trigger);
+
+    expect(
+      screen.getByRole("list", { name: "Dropdown options" })
+    ).toBeInTheDocument();
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("selects an item on click, updates the trigger label, and calls onChange", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <BasicDropdown items={items} label="Select option" onChange={onChange} />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Select option" }));
+    await user.click(screen.getByRole("button", { name: "Option 2" }));
+
+    expect(onChange).toHaveBeenCalledWith(items[1]);
+    expect(
+      screen.getByRole("button", { name: "Select option: Option 2" })
+    ).toBeInTheDocument();
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("list", { name: "Dropdown options" })
+      ).not.toBeInTheDocument()
+    );
+  });
+
+  it("closes the dropdown on outside click", async () => {
+    const user = userEvent.setup();
+    render(<BasicDropdown items={items} label="Select option" />);
+
+    await user.click(screen.getByRole("button", { name: "Select option" }));
+    expect(
+      screen.getByRole("list", { name: "Dropdown options" })
+    ).toBeInTheDocument();
+
+    await user.click(document.body);
+
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("list", { name: "Dropdown options" })
+      ).not.toBeInTheDocument()
+    );
+  });
+
+  it("opens on Enter when the trigger is focused", () => {
+    render(<BasicDropdown items={items} label="Select option" />);
+
+    const trigger = screen.getByRole("button", { name: "Select option" });
+    trigger.focus();
+    fireEvent.keyDown(trigger, { key: "Enter" });
+
+    expect(
+      screen.getByRole("list", { name: "Dropdown options" })
+    ).toBeInTheDocument();
+  });
+
+  it("navigates with ArrowDown/ArrowUp and selects the focused item with Enter", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <BasicDropdown items={items} label="Select option" onChange={onChange} />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Select option" }));
+    fireEvent.keyDown(document, { key: "ArrowDown" });
+    fireEvent.keyDown(document, { key: "ArrowDown" });
+    fireEvent.keyDown(document, { key: "ArrowUp" });
+    fireEvent.keyDown(document, { key: "Enter" });
+
+    expect(onChange).toHaveBeenCalledWith(items[0]);
+  });
+
+  it("moves focus to first/last item with Home/End", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <BasicDropdown items={items} label="Select option" onChange={onChange} />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Select option" }));
+    fireEvent.keyDown(document, { key: "End" });
+    fireEvent.keyDown(document, { key: "Enter" });
+
+    expect(onChange).toHaveBeenCalledWith(items[2]);
+  });
+
+  it("closes on Escape and refocuses the trigger", async () => {
+    const user = userEvent.setup();
+    render(<BasicDropdown items={items} label="Select option" />);
+
+    const trigger = screen.getByRole("button", { name: "Select option" });
+    await user.click(trigger);
+
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("list", { name: "Dropdown options" })
+      ).not.toBeInTheDocument()
+    );
+    expect(trigger).toHaveFocus();
+  });
 });
diff --git a/packages/smoothui/components/blur-out-up/index.tsx b/packages/smoothui/components/blur-out-up/index.tsx
new file mode 100644
index 00000000..9d240338
--- /dev/null
+++ b/packages/smoothui/components/blur-out-up/index.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+/**
+ * BlurOutUp — words arrive clean from a gentle blur and upward drift,
+ * Apple-style airy entrance. From the animate-text catalog (`blur-out-up`).
+ */
+export interface BlurOutUpProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Per-word stagger, in milliseconds. */
+  stagger?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.56;
+const MS = 1000;
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+export default function BlurOutUp({
+  children,
+  className = "",
+  delay = 0,
+  stagger = 28,
+  triggerOnView = false,
+}: BlurOutUpProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+  const words = children.split(" ");
+
+  return (
+    <span aria-label={children} className={className} ref={ref}>
+      {words.map((word, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: words have no stable id
+        <span key={index}>
+          <motion.span
+            animate={
+              play ? { opacity: 1, y: 0, filter: "blur(0px)" } : undefined
+            }
+            aria-hidden="true"
+            initial={
+              shouldReduceMotion
+                ? { opacity: 1 }
+                : { opacity: 0, y: 10, filter: "blur(6px)" }
+            }
+            style={{ display: "inline-block", whiteSpace: "pre" }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : {
+                    duration: DURATION_S,
+                    delay: delay / MS + (index * stagger) / MS,
+                    ease: EASE,
+                  }
+            }
+          >
+            {word}
+          </motion.span>
+          {index < words.length - 1 && (
+            <span
+              aria-hidden="true"
+              style={{ display: "inline-block", whiteSpace: "pre" }}
+            >
+              {" "}
+            </span>
+          )}
+        </span>
+      ))}
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/blur-out-up/package.json b/packages/smoothui/components/blur-out-up/package.json
new file mode 100644
index 00000000..91b14920
--- /dev/null
+++ b/packages/smoothui/components/blur-out-up/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/blur-out-up",
+  "description": "A BlurOutUp text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "blur",
+      "per-word",
+      "entrance",
+      "airy",
+      "apple",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Apple-style airy word entrance",
+      "Short phrase reveal with soft blur",
+      "Light typography heading animation"
+    ],
+    "compositionHints": [
+      "Best for short phrases",
+      "Fast stagger keeps total duration tight"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/blur-out-up/tsconfig.json b/packages/smoothui/components/blur-out-up/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/blur-out-up/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/bottom-up-letters/index.tsx b/packages/smoothui/components/bottom-up-letters/index.tsx
new file mode 100644
index 00000000..e2acd6c2
--- /dev/null
+++ b/packages/smoothui/components/bottom-up-letters/index.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface BottomUpLettersProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Per-character stagger, in milliseconds. */
+  stagger?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.4;
+const MS = 1000;
+// Pronounced ease-out for a tall, staged lift from below.
+const EASE = [0.18, 1, 0.32, 1] as const;
+
+/**
+ * BottomUpLetters — letters rise from below in a pronounced staircase,
+ * one symbol at a time, with zero blur. Best for short single words or
+ * compact headlines at 40px+. From the animate-text catalog (`bottom-up-letters`).
+ */
+export default function BottomUpLetters({
+  children,
+  className = "",
+  delay = 0,
+  stagger = 88,
+  triggerOnView = false,
+}: BottomUpLettersProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+  const characters = Array.from(children);
+
+  return (
+    <span aria-label={children} className={className} ref={ref}>
+      {characters.map((char, index) => (
+        <motion.span
+          animate={play ? { opacity: 1, y: 0 } : undefined}
+          aria-hidden="true"
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 46 }}
+          // biome-ignore lint/suspicious/noArrayIndexKey: characters have no stable id
+          key={index}
+          style={{ display: "inline-block", whiteSpace: "pre" }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : {
+                  duration: DURATION_S,
+                  delay: delay / MS + (index * stagger) / MS,
+                  ease: EASE,
+                }
+          }
+        >
+          {char === " " ? " " : char}
+        </motion.span>
+      ))}
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/bottom-up-letters/package.json b/packages/smoothui/components/bottom-up-letters/package.json
new file mode 100644
index 00000000..d37d7744
--- /dev/null
+++ b/packages/smoothui/components/bottom-up-letters/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/bottom-up-letters",
+  "description": "A BottomUpLetters text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "per-character",
+      "bottom-up",
+      "staircase",
+      "entrance",
+      "apple",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Short word or label reveal with pronounced staircase",
+      "Compact headline entrance for editorial layouts",
+      "Lower-thirds and sharp word swaps"
+    ],
+    "compositionHints": [
+      "Best for single words or short phrases at 40px+",
+      "High stagger (88ms default) creates a deliberate, staged effect"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/bottom-up-letters/tsconfig.json b/packages/smoothui/components/bottom-up-letters/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/bottom-up-letters/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/chroma-blur-transition/__tests__/chroma-blur-transition.test.tsx b/packages/smoothui/components/chroma-blur-transition/__tests__/chroma-blur-transition.test.tsx
new file mode 100644
index 00000000..54fc741a
--- /dev/null
+++ b/packages/smoothui/components/chroma-blur-transition/__tests__/chroma-blur-transition.test.tsx
@@ -0,0 +1,121 @@
+import { useReducedMotion } from "motion/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "../../../test-utils/render";
+import {
+  flushFrames,
+  installWebglMock,
+  runFramesFor,
+  uninstallWebglMock,
+} from "../../../test-utils/webgl-mock";
+import ChromaBlurTransition from "../index";
+
+vi.mock("motion/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("motion/react")>();
+  return { ...actual, useReducedMotion: vi.fn(() => false) };
+});
+
+describe("ChromaBlurTransition", () => {
+  beforeEach(() => {
+    installWebglMock();
+  });
+
+  afterEach(() => {
+    uninstallWebglMock();
+    vi.mocked(useReducedMotion).mockReturnValue(false);
+  });
+
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <ChromaBlurTransition transitionKey="draft">
+        Draft saved
+      </ChromaBlurTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+
+  it("runs the chroma sweep, swaps content at the midpoint, and calls onRest", () => {
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <ChromaBlurTransition duration={100} onRest={onRest} transitionKey="a">
+        First
+      </ChromaBlurTransition>
+    );
+
+    expect(getByText("First")).toBeInTheDocument();
+
+    rerender(
+      <ChromaBlurTransition duration={100} onRest={onRest} transitionKey="b">
+        Second
+      </ChromaBlurTransition>
+    );
+
+    runFramesFor(400);
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("skips the animation and swaps content immediately when reduced motion is preferred", () => {
+    vi.mocked(useReducedMotion).mockReturnValue(true);
+
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <ChromaBlurTransition onRest={onRest} transitionKey="a">
+        First
+      </ChromaBlurTransition>
+    );
+
+    rerender(
+      <ChromaBlurTransition onRest={onRest} transitionKey="b">
+        Second
+      </ChromaBlurTransition>
+    );
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("swaps content immediately when WebGL is unavailable", () => {
+    uninstallWebglMock();
+    installWebglMock({ supported: false });
+
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <ChromaBlurTransition onRest={onRest} transitionKey="a">
+        First
+      </ChromaBlurTransition>
+    );
+
+    rerender(
+      <ChromaBlurTransition onRest={onRest} transitionKey="b">
+        Second
+      </ChromaBlurTransition>
+    );
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not throw when unmounted mid-animation", () => {
+    const { rerender, unmount } = render(
+      <ChromaBlurTransition duration={200} transitionKey="a">
+        First
+      </ChromaBlurTransition>
+    );
+
+    rerender(
+      <ChromaBlurTransition duration={200} transitionKey="b">
+        Second
+      </ChromaBlurTransition>
+    );
+
+    flushFrames(2);
+
+    expect(() => unmount()).not.toThrow();
+    expect(() => flushFrames(2)).not.toThrow();
+  });
+});
diff --git a/packages/smoothui/components/chroma-blur-transition/index.tsx b/packages/smoothui/components/chroma-blur-transition/index.tsx
new file mode 100644
index 00000000..a7cef15a
--- /dev/null
+++ b/packages/smoothui/components/chroma-blur-transition/index.tsx
@@ -0,0 +1,330 @@
+"use client";
+
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import { useReducedMotion } from "motion/react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+
+export interface ChromaBlurTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const DEFAULT_DURATION_MS = 1040;
+const MIDPOINT = 0.5;
+const MAX_DPR = 2;
+const VERTEX_SHADER =
+  "attribute vec2 a; void main(){ gl_Position = vec4(a, 0.0, 1.0); }";
+const FRAGMENT_SHADER = `
+precision mediump float;
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uProgress;
+uniform float uAlpha;
+#define PI 3.14159265359
+
+float hash(vec2 p){ return fract(sin(dot(p, vec2(41.0, 289.0))) * 45758.5453); }
+float noise(vec2 p){
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  float a = hash(i);
+  float b = hash(i + vec2(1.0, 0.0));
+  float c = hash(i + vec2(0.0, 1.0));
+  float d = hash(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+}
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / uRes;
+  float p = smoothstep(0.0, 1.0, uProgress);
+  float field = uv.x * 0.62 + uv.y * 0.38;
+  float n = noise(uv * 10.0 + vec2(uTime * 0.28, -uTime * 0.18));
+  float wave = sin((uv.y + n * 0.12) * 28.0 + uTime * 2.2) * 0.018;
+  float front = p * 1.42 - 0.2;
+  float d = field + wave - front;
+
+  float curtain = exp(-d * d * 34.0);
+  float softGrain = noise(uv * 34.0 + uTime * 0.18) * 0.055;
+  float chroma = exp(-(d + 0.045) * (d + 0.045) * 52.0) + exp(-(d - 0.045) * (d - 0.045) * 52.0);
+  float exitFade = smoothstep(1.0, 0.74, p);
+  float entryFade = smoothstep(0.0, 0.16, p);
+
+  vec3 brandPink = vec3(1.0, 0.32, 0.64);
+  vec3 champagne = vec3(1.0, 0.82, 0.56);
+  vec3 seafoam = vec3(0.52, 0.90, 0.78);
+  vec3 porcelain = vec3(1.0, 0.97, 0.90);
+  vec3 color = mix(brandPink, champagne, smoothstep(-0.18, 0.18, sin((uv.y + n) * PI * 2.0)));
+  color = mix(color, seafoam, smoothstep(0.2, 1.0, chroma) * 0.34);
+  color = mix(color, porcelain, 0.16);
+
+  float alpha = (curtain * 0.72 + chroma * 0.18 + softGrain * curtain) * entryFade * exitFade * uAlpha;
+  gl_FragColor = vec4(color * alpha, clamp(alpha, 0.0, 0.86));
+}
+`;
+const STRIP = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+
+interface Playback {
+  cancel: () => void;
+}
+interface Controller {
+  destroy: () => void;
+  setAlpha: (alpha: number) => void;
+  setProgress: (progress: number) => void;
+}
+
+const clamp01 = (value: number) => Math.max(0, Math.min(1, value));
+const easeOutQuart = (value: number) => 1 - (1 - value) ** 4;
+const easeInOutCubic = (value: number) =>
+  value < 0.5 ? 4 * value ** 3 : 1 - (-2 * value + 2) ** 3 / 2;
+
+const compile = (gl: WebGLRenderingContext, type: number, source: string) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    return null;
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+};
+
+const resize = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) => {
+  const rect = canvas.getBoundingClientRect();
+  const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);
+  const width = Math.max(1, Math.round(rect.width * dpr));
+  const height = Math.max(1, Math.round(rect.height * dpr));
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+  gl.viewport(0, 0, width, height);
+};
+
+const createController = (canvas: HTMLCanvasElement): Controller | null => {
+  const gl = canvas.getContext("webgl", {
+    alpha: true,
+    antialias: false,
+    premultipliedAlpha: true,
+  });
+  if (!gl) {
+    return null;
+  }
+  const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+  const program = gl.createProgram();
+  if (!(vertex && fragment && program)) {
+    return null;
+  }
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+
+  // biome-ignore lint/correctness/useHookAtTopLevel: WebGLRenderingContext.useProgram is not a React hook.
+  gl.useProgram(program);
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, STRIP, gl.STATIC_DRAW);
+  const position = gl.getAttribLocation(program, "a");
+  gl.enableVertexAttribArray(position);
+  gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+  const uRes = gl.getUniformLocation(program, "uRes");
+  const uTime = gl.getUniformLocation(program, "uTime");
+  const uProgress = gl.getUniformLocation(program, "uProgress");
+  const uAlpha = gl.getUniformLocation(program, "uAlpha");
+  const startedAt = performance.now();
+  let progress = 0;
+  let alpha = 0;
+  let frame = 0;
+  let destroyed = false;
+
+  const tick = () => {
+    if (destroyed) {
+      return;
+    }
+    resize(canvas, gl);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.uniform2f(uRes, canvas.width, canvas.height);
+    gl.uniform1f(uTime, (performance.now() - startedAt) / 1000);
+    gl.uniform1f(uProgress, progress);
+    gl.uniform1f(uAlpha, alpha);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    frame = requestAnimationFrame(tick);
+  };
+  frame = requestAnimationFrame(tick);
+
+  return {
+    destroy: () => {
+      destroyed = true;
+      cancelAnimationFrame(frame);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      if (buffer) {
+        gl.deleteBuffer(buffer);
+      }
+      gl.deleteProgram(program);
+    },
+    setAlpha: (nextAlpha: number) => {
+      alpha = clamp01(nextAlpha);
+    },
+    setProgress: (nextProgress: number) => {
+      progress = clamp01(nextProgress);
+    },
+  };
+};
+
+const play = (
+  controller: Controller,
+  duration: number,
+  onMidpoint: () => void,
+  onComplete: () => void
+): Playback => {
+  let frame = 0;
+  let cancelled = false;
+  let didSwap = false;
+  const startedAt = performance.now();
+  controller.setAlpha(1);
+
+  const advance = () => {
+    if (cancelled) {
+      return;
+    }
+    const raw = clamp01((performance.now() - startedAt) / duration);
+    const progress = easeOutQuart(raw);
+    controller.setProgress(progress);
+    if (!(didSwap || progress < MIDPOINT)) {
+      didSwap = true;
+      onMidpoint();
+    }
+    if (raw < 1) {
+      frame = requestAnimationFrame(advance);
+      return;
+    }
+    if (!didSwap) {
+      onMidpoint();
+    }
+    const fadeStartedAt = performance.now();
+    const fade = () => {
+      if (cancelled) {
+        return;
+      }
+      const fadeRaw = clamp01((performance.now() - fadeStartedAt) / 90);
+      controller.setAlpha(1 - easeInOutCubic(fadeRaw));
+      if (fadeRaw < 1) {
+        frame = requestAnimationFrame(fade);
+        return;
+      }
+      controller.setAlpha(0);
+      controller.setProgress(0);
+      onComplete();
+    };
+    frame = requestAnimationFrame(fade);
+  };
+  frame = requestAnimationFrame(advance);
+
+  return {
+    cancel: () => {
+      cancelled = true;
+      cancelAnimationFrame(frame);
+    },
+  };
+};
+
+const ChromaBlurTransition = ({
+  children,
+  className,
+  duration = DEFAULT_DURATION_MS,
+  onRest,
+  transitionKey,
+}: ChromaBlurTransitionProps) => {
+  const shouldReduceMotion = useReducedMotion();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const controllerRef = useRef<Controller | null>(null);
+  const playbackRef = useRef<Playback | null>(null);
+  const previousKey = useRef(transitionKey);
+  const [renderedChildren, setRenderedChildren] = useState(children);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const controller = createController(canvas);
+    controllerRef.current = controller;
+    return () => {
+      playbackRef.current?.cancel();
+      controller?.destroy();
+      controllerRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (previousKey.current === transitionKey) {
+      setRenderedChildren(children);
+      return;
+    }
+    previousKey.current = transitionKey;
+    playbackRef.current?.cancel();
+
+    if (shouldReduceMotion) {
+      setRenderedChildren(children);
+      setIsActive(false);
+      onRest?.();
+      return;
+    }
+
+    const controller = controllerRef.current;
+    if (!controller) {
+      setRenderedChildren(children);
+      onRest?.();
+      return;
+    }
+    setIsActive(true);
+    playbackRef.current = play(
+      controller,
+      duration,
+      () => setRenderedChildren(children),
+      () => {
+        setIsActive(false);
+        playbackRef.current = null;
+        onRest?.();
+      }
+    );
+  }, [children, duration, onRest, shouldReduceMotion, transitionKey]);
+
+  return (
+    <div
+      className={cn(
+        "relative isolate overflow-hidden rounded-2xl bg-background text-foreground",
+        className
+      )}
+      data-transitioning={isActive ? "true" : "false"}
+    >
+      <div className="relative z-0">{renderedChildren}</div>
+      <canvas
+        className={cn(
+          "pointer-events-none absolute inset-0 z-10 h-full w-full transition-opacity duration-75",
+          isActive && !shouldReduceMotion ? "opacity-100" : "opacity-0"
+        )}
+        ref={canvasRef}
+      />
+    </div>
+  );
+};
+
+export default ChromaBlurTransition;
diff --git a/packages/smoothui/components/chroma-blur-transition/package.json b/packages/smoothui/components/chroma-blur-transition/package.json
new file mode 100644
index 00000000..ec632df4
--- /dev/null
+++ b/packages/smoothui/components/chroma-blur-transition/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@repo/chroma-blur-transition",
+  "description": "Persistent WebGL shader transition wrapper that swaps content under a soft chromatic blur wash.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "page-transition",
+      "state-change",
+      "frame",
+      "motion"
+    ],
+    "complexity": "moderate",
+    "animationType": "tween",
+    "useCases": [
+      "Punctuate major route or state changes",
+      "Wrap onboarding, checkout, or publish flows",
+      "Make demos and previews feel more premium"
+    ],
+    "compositionHints": [
+      "Use sparingly for meaningful changes only",
+      "Wrap the whole preview or route frame instead of a tiny card"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/chroma-blur-transition/tsconfig.json b/packages/smoothui/components/chroma-blur-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/chroma-blur-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/depth-parallax-words/index.tsx b/packages/smoothui/components/depth-parallax-words/index.tsx
new file mode 100644
index 00000000..f864c9fd
--- /dev/null
+++ b/packages/smoothui/components/depth-parallax-words/index.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+/**
+ * DepthParallaxWords — per-word depth motion with scale, vertical drift and blur for layered readability.
+ * From the animate-text catalog (`depth-parallax-words`).
+ */
+export interface DepthParallaxWordsProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Per-word stagger, in milliseconds. */
+  stagger?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.7;
+const MS = 1000;
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+export default function DepthParallaxWords({
+  children,
+  className = "",
+  delay = 0,
+  stagger = 70,
+  triggerOnView = false,
+}: DepthParallaxWordsProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+  const words = children.split(" ");
+
+  return (
+    <span aria-label={children} className={className} ref={ref}>
+      {words.map((word, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: words have no stable id
+        <span key={index}>
+          <motion.span
+            animate={
+              play
+                ? { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }
+                : undefined
+            }
+            aria-hidden="true"
+            initial={
+              shouldReduceMotion
+                ? { opacity: 1 }
+                : { opacity: 0, y: 18, scale: 0.92, filter: "blur(3px)" }
+            }
+            style={{ display: "inline-block", whiteSpace: "pre" }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : {
+                    duration: DURATION_S,
+                    delay: delay / MS + (index * stagger) / MS,
+                    ease: EASE,
+                  }
+            }
+          >
+            {word}
+          </motion.span>
+          {index < words.length - 1 && (
+            <span
+              aria-hidden="true"
+              style={{ display: "inline-block", whiteSpace: "pre" }}
+            >
+              {" "}
+            </span>
+          )}
+        </span>
+      ))}
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/depth-parallax-words/package.json b/packages/smoothui/components/depth-parallax-words/package.json
new file mode 100644
index 00000000..ace84900
--- /dev/null
+++ b/packages/smoothui/components/depth-parallax-words/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@repo/depth-parallax-words",
+  "description": "A DepthParallaxWords text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "blur",
+      "scale",
+      "parallax",
+      "per-word",
+      "depth",
+      "entrance",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Product landing page hero heading",
+      "Depth-cued section title reveal",
+      "Layered typography entrance on scroll"
+    ],
+    "compositionHints": [
+      "Use short copy blocks",
+      "Moderate stagger avoids visual overload"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/depth-parallax-words/tsconfig.json b/packages/smoothui/components/depth-parallax-words/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/depth-parallax-words/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/expandable-cards/index.tsx b/packages/smoothui/components/expandable-cards/index.tsx
index bd14eb03..ddc2e29d 100644
--- a/packages/smoothui/components/expandable-cards/index.tsx
+++ b/packages/smoothui/components/expandable-cards/index.tsx
@@ -123,6 +123,7 @@ export default function ExpandableCards({
               <img
                 alt={card.title}
                 className="h-full w-full object-cover"
+                draggable={false}
                 height={300}
                 src={card.image || "/placeholder.svg"}
                 width={200}
@@ -207,6 +208,7 @@ export default function ExpandableCards({
                           <img
                             alt={card.author.name}
                             className="h-full w-full object-cover"
+                            draggable={false}
                             height={48}
                             src={card.author.image}
                             width={48}
diff --git a/packages/smoothui/components/fade-through/index.tsx b/packages/smoothui/components/fade-through/index.tsx
new file mode 100644
index 00000000..ca63d705
--- /dev/null
+++ b/packages/smoothui/components/fade-through/index.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+
+export interface FadeThroughProps {
+  className?: string;
+  /** Interval between phrase transitions, in milliseconds. */
+  interval?: number;
+  phrases: string[];
+}
+
+const ENTER_DURATION_S = 0.42;
+const EXIT_DURATION_S = 0.26;
+const ENTER_EASE = [0.2, 0, 0, 1] as const;
+const EXIT_EASE = [0.4, 0, 1, 1] as const;
+
+/**
+ * FadeThrough — Material-style phrase cycling: old text fades out,
+ * new text fades in with a soft delay. From the animate-text catalog
+ * (`fade-through`). Best for hero copy swaps and rotating taglines.
+ */
+export default function FadeThrough({
+  phrases,
+  className = "",
+  interval = 2500,
+}: FadeThroughProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    if (shouldReduceMotion || phrases.length <= 1) {
+      return;
+    }
+    const id = setInterval(() => {
+      setIndex((prev) => (prev + 1) % phrases.length);
+    }, interval);
+    return () => clearInterval(id);
+  }, [shouldReduceMotion, phrases.length, interval]);
+
+  const current = phrases[index] ?? "";
+
+  return (
+    <span
+      aria-live="polite"
+      className={className}
+      style={{ display: "inline-block", position: "relative" }}
+    >
+      <AnimatePresence mode="wait">
+        <motion.span
+          animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
+          exit={{
+            opacity: 0,
+            y: -4,
+            scale: 1,
+            filter: "blur(0px)",
+            transition: { duration: EXIT_DURATION_S, ease: EXIT_EASE },
+          }}
+          initial={
+            shouldReduceMotion
+              ? { opacity: 1 }
+              : { opacity: 0, y: 6, scale: 0.99, filter: "blur(2px)" }
+          }
+          key={index}
+          style={{ display: "inline-block" }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : { duration: ENTER_DURATION_S, ease: ENTER_EASE }
+          }
+        >
+          {current}
+        </motion.span>
+      </AnimatePresence>
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/fade-through/package.json b/packages/smoothui/components/fade-through/package.json
new file mode 100644
index 00000000..5ced1b3b
--- /dev/null
+++ b/packages/smoothui/components/fade-through/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@repo/fade-through",
+  "description": "A FadeThrough text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "fade",
+      "swap",
+      "loop",
+      "material",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Hero headline that cycles through value propositions",
+      "Rotating taglines in landing pages",
+      "Material-style content transitions for phrases"
+    ],
+    "compositionHints": [
+      "Use on hero titles 32px+ for maximum visual impact",
+      "Keep phrases similar in length to avoid layout shifts"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/fade-through/tsconfig.json b/packages/smoothui/components/fade-through/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/fade-through/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/figma-comment/__tests__/figma-comment.test.tsx b/packages/smoothui/components/figma-comment/__tests__/figma-comment.test.tsx
new file mode 100644
index 00000000..079ad7bf
--- /dev/null
+++ b/packages/smoothui/components/figma-comment/__tests__/figma-comment.test.tsx
@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import Component from "../index";
+
+describe("FigmaComment", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Component />);
+    expect(container).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/focus-blur-resolve/index.tsx b/packages/smoothui/components/focus-blur-resolve/index.tsx
new file mode 100644
index 00000000..2a11fa6d
--- /dev/null
+++ b/packages/smoothui/components/focus-blur-resolve/index.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface FocusBlurResolveProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.76;
+const MS = 1000;
+// Smooth deceleration — premium focus-pull ease-out.
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+/**
+ * FocusBlurResolve — whole-text entrance that pulls from heavy blur to crisp,
+ * with a subtle upward drift and scale settle. Ideal for hero headlines and
+ * section titles where the moment of resolution feels intentional.
+ * From the animate-text catalog (`focus-blur-resolve`).
+ */
+export default function FocusBlurResolve({
+  children,
+  className = "",
+  delay = 0,
+  triggerOnView = false,
+}: FocusBlurResolveProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+
+  return (
+    <span aria-label={children} className={className} ref={ref}>
+      <motion.span
+        animate={
+          play ? { opacity: 1, y: 0, filter: "blur(0px)", scale: 1 } : undefined
+        }
+        aria-hidden="true"
+        initial={
+          shouldReduceMotion
+            ? { opacity: 1, y: 0, filter: "blur(0px)", scale: 1 }
+            : { opacity: 0, y: 14, filter: "blur(14px)", scale: 1.01 }
+        }
+        style={{ display: "inline-block" }}
+        transition={
+          shouldReduceMotion
+            ? { duration: 0 }
+            : {
+                duration: DURATION_S,
+                delay: delay / MS,
+                ease: EASE,
+              }
+        }
+      >
+        {children}
+      </motion.span>
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/focus-blur-resolve/package.json b/packages/smoothui/components/focus-blur-resolve/package.json
new file mode 100644
index 00000000..edb4f5b9
--- /dev/null
+++ b/packages/smoothui/components/focus-blur-resolve/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/focus-blur-resolve",
+  "description": "A FocusBlurResolve text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "blur",
+      "whole",
+      "entrance",
+      "focus",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Hero headlines",
+      "Section titles",
+      "Modal headings",
+      "Attention-drawing reveals"
+    ],
+    "compositionHints": [
+      "Pair with a subtitle using a longer delay",
+      "Use triggerOnView for scroll-triggered sections"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/focus-blur-resolve/tsconfig.json b/packages/smoothui/components/focus-blur-resolve/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/focus-blur-resolve/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/github-stars-animation/__tests__/github-stars-animation.test.tsx b/packages/smoothui/components/github-stars-animation/__tests__/github-stars-animation.test.tsx
new file mode 100644
index 00000000..0b1f5a16
--- /dev/null
+++ b/packages/smoothui/components/github-stars-animation/__tests__/github-stars-animation.test.tsx
@@ -0,0 +1,154 @@
+import { waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "../../../test-utils/render";
+import Component, { type Stargazer } from "../index";
+
+const stargazers: Stargazer[] = [
+  {
+    login: "octocat",
+    avatar_url: "https://example.com/octocat.png",
+    html_url: "https://github.com/octocat",
+  },
+  {
+    login: "hubot",
+    avatar_url: "https://example.com/hubot.png",
+    html_url: "https://github.com/hubot",
+  },
+];
+
+describe("GithubStarsAnimation", () => {
+  beforeEach(() => {
+    // The count-up animation reads Date.now() to compute progress. Jumping
+    // it forward on every call guarantees the very next read after the
+    // effect captures `startTime` already exceeds COUNTDOWN_DURATION, so the
+    // animation resolves to its final value on the first synchronous tick
+    // instead of requiring real requestAnimationFrame timing in jsdom.
+    let now = 0;
+    vi.spyOn(Date, "now").mockImplementation(() => {
+      now += 10_000;
+      return now;
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("renders without throwing", () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(() => new Promise(() => {}))
+    );
+    const { container } = render(<Component />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("shows a loading skeleton while fetching", () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(() => new Promise(() => {}))
+    );
+    const { container } = render(<Component />);
+    expect(container.querySelectorAll(".animate-pulse").length).toBeGreaterThan(
+      0
+    );
+  });
+
+  it("does not fetch when stargazers and starCount are provided", () => {
+    const fetchMock = vi.fn();
+    vi.stubGlobal("fetch", fetchMock);
+
+    render(<Component starCount={42} stargazers={stargazers} />);
+
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it("renders provided avatars with accessible links", () => {
+    const { getByLabelText } = render(
+      <Component starCount={2} stargazers={stargazers} />
+    );
+
+    const link = getByLabelText("octocat's GitHub profile");
+    expect(link).toHaveAttribute("href", "https://github.com/octocat");
+  });
+
+  it("hides avatars when showAvatars is false", () => {
+    const { queryByLabelText, getByText } = render(
+      <Component showAvatars={false} starCount={2} stargazers={stargazers} />
+    );
+
+    expect(
+      queryByLabelText("octocat's GitHub profile")
+    ).not.toBeInTheDocument();
+    expect(getByText("2")).toBeInTheDocument();
+  });
+
+  it("formats the count with thousands separators and pluralizes stars", () => {
+    const { getByText } = render(
+      <Component starCount={1234} stargazers={stargazers} />
+    );
+
+    expect(getByText("1,234")).toBeInTheDocument();
+    expect(getByText("stars")).toBeInTheDocument();
+  });
+
+  it("uses the singular label when the star count is 1", () => {
+    const { getByText } = render(
+      <Component starCount={1} stargazers={stargazers} />
+    );
+
+    expect(getByText("star")).toBeInTheDocument();
+  });
+
+  it("fetches from a custom apiEndpoint and renders the result", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            stargazers,
+            stars: 99,
+          }),
+      })
+    );
+
+    const { findByText } = render(<Component apiEndpoint="/api/stars" />);
+
+    expect(await findByText("99")).toBeInTheDocument();
+  });
+
+  it("falls back to the GitHub API when no apiEndpoint is given", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((url: string) => {
+        if (url.includes("/stargazers")) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve(stargazers),
+          });
+        }
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({ stargazers_count: 7 }),
+        });
+      })
+    );
+
+    const { findByText } = render(<Component />);
+
+    expect(await findByText("7")).toBeInTheDocument();
+  });
+
+  it("renders nothing when fetching fails and there is no star count", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(() => Promise.reject(new Error("network error")))
+    );
+
+    const { container } = render(<Component />);
+
+    await waitFor(() => expect(container).toBeEmptyDOMElement());
+  });
+});
diff --git a/packages/smoothui/components/github-stars-animation/index.tsx b/packages/smoothui/components/github-stars-animation/index.tsx
index cf15e1d8..b2f65df9 100644
--- a/packages/smoothui/components/github-stars-animation/index.tsx
+++ b/packages/smoothui/components/github-stars-animation/index.tsx
@@ -244,6 +244,7 @@ export default function GitHubStarsAnimation({
               <img
                 alt={`${stargazer.login}'s avatar`}
                 className="h-full w-full object-cover"
+                draggable={false}
                 src={stargazer.avatar_url}
               />
             </motion.a>
diff --git a/packages/smoothui/components/glow-hover-card/__tests__/glow-hover-card.test.tsx b/packages/smoothui/components/glow-hover-card/__tests__/glow-hover-card.test.tsx
new file mode 100644
index 00000000..bd13abbb
--- /dev/null
+++ b/packages/smoothui/components/glow-hover-card/__tests__/glow-hover-card.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import GlowHover, { type GlowHoverItem } from "../index";
+
+const items: GlowHoverItem[] = [
+  { id: "one", element: <div>One</div> },
+  { id: "two", element: <div>Two</div> },
+];
+
+describe("GlowHoverCard", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<GlowHover items={items} />);
+    expect(container).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/gooey-popover/__tests__/gooey-popover.test.tsx b/packages/smoothui/components/gooey-popover/__tests__/gooey-popover.test.tsx
new file mode 100644
index 00000000..12880242
--- /dev/null
+++ b/packages/smoothui/components/gooey-popover/__tests__/gooey-popover.test.tsx
@@ -0,0 +1,172 @@
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "../../../test-utils/render";
+import GooeyPopover from "../index";
+
+const mockMatchMedia = (matches: boolean) => {
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+};
+
+/** jsdom never computes layout, so scrollHeight is always 0. Stub it so the
+ * content-measurement effect reports a real height and the GSAP animation
+ * branches (which only run once contentHeight > 0) actually execute. */
+const mockScrollHeight = (height: number) => {
+  Object.defineProperty(HTMLElement.prototype, "scrollHeight", {
+    configurable: true,
+    value: height,
+  });
+};
+
+describe("GooeyPopover", () => {
+  afterEach(() => {
+    mockMatchMedia(false);
+  });
+
+  it("renders without throwing", () => {
+    const { container } = render(<GooeyPopover>Open</GooeyPopover>);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("opens the dialog on trigger click and shows children", async () => {
+    const user = userEvent.setup();
+    render(<GooeyPopover>Popover content</GooeyPopover>);
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toBeInTheDocument();
+    expect(within(dialog).getByText("Popover content")).toBeInTheDocument();
+  });
+
+  it("closes the dialog when the trigger is clicked again", async () => {
+    const user = userEvent.setup();
+    render(<GooeyPopover>Popover content</GooeyPopover>);
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("calls onOpenChange and supports controlled isOpen", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    const { rerender } = render(
+      <GooeyPopover isOpen={false} onOpenChange={onOpenChange}>
+        Content
+      </GooeyPopover>
+    );
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    // Controlled: state does not flip on its own without the prop changing.
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    rerender(
+      <GooeyPopover isOpen onOpenChange={onOpenChange}>
+        Content
+      </GooeyPopover>
+    );
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("closes on outside click", async () => {
+    const user = userEvent.setup();
+    render(<GooeyPopover>Popover content</GooeyPopover>);
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    await user.click(document.body);
+
+    await waitFor(() =>
+      expect(trigger).toHaveAttribute("aria-expanded", "false")
+    );
+  });
+
+  it("closes on Escape key when open", async () => {
+    const user = userEvent.setup();
+    render(<GooeyPopover>Popover content</GooeyPopover>);
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    fireEvent.keyDown(window, { key: "Escape" });
+
+    await waitFor(() =>
+      expect(trigger).toHaveAttribute("aria-expanded", "false")
+    );
+  });
+
+  it("does not render the goo filter layer when prefers-reduced-motion is set", async () => {
+    mockMatchMedia(true);
+    const user = userEvent.setup();
+    render(<GooeyPopover>Reduced motion content</GooeyPopover>);
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    // The goo filter layer is skipped entirely in reduced-motion mode.
+    expect(document.querySelector("[style*='url(#']")).not.toBeInTheDocument();
+  });
+
+  it("animates the content panel open with GSAP once its height is measured", async () => {
+    mockScrollHeight(120);
+    const user = userEvent.setup();
+    render(<GooeyPopover contentWidth={240}>Popover content</GooeyPopover>);
+
+    await user.click(screen.getByRole("button"));
+
+    const dialog = screen.getByRole("dialog");
+    await waitFor(() => expect(dialog).toHaveStyle({ width: "240px" }), {
+      timeout: 2000,
+    });
+  });
+
+  it("applies the reduced-motion end state instantly once measured", async () => {
+    mockMatchMedia(true);
+    mockScrollHeight(120);
+    const user = userEvent.setup();
+    render(<GooeyPopover contentWidth={240}>Popover content</GooeyPopover>);
+
+    await user.click(screen.getByRole("button"));
+
+    const dialog = screen.getByRole("dialog");
+    await waitFor(() => expect(dialog).toHaveStyle({ width: "240px" }));
+
+    await user.click(screen.getByRole("button"));
+    await waitFor(() =>
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    );
+  });
+
+  it("renders a custom trigger node", () => {
+    render(
+      <GooeyPopover trigger={<span>Custom Trigger</span>}>Content</GooeyPopover>
+    );
+
+    expect(screen.getByText("Custom Trigger")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/grid-loader/__tests__/grid-loader.test.tsx b/packages/smoothui/components/grid-loader/__tests__/grid-loader.test.tsx
new file mode 100644
index 00000000..06a2f827
--- /dev/null
+++ b/packages/smoothui/components/grid-loader/__tests__/grid-loader.test.tsx
@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import Component from "../index";
+
+describe("GridLoader", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<Component />);
+    expect(container).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/image-metadata-preview/__tests__/image-metadata-preview.test.tsx b/packages/smoothui/components/image-metadata-preview/__tests__/image-metadata-preview.test.tsx
new file mode 100644
index 00000000..763f7a98
--- /dev/null
+++ b/packages/smoothui/components/image-metadata-preview/__tests__/image-metadata-preview.test.tsx
@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import ImageMetadataPreview, { type ImageMetadata } from "../index";
+
+const metadata: ImageMetadata = {
+  by: "Eduardo",
+  created: "2026-01-01",
+  source: "Camera",
+  updated: "2026-01-02",
+};
+
+describe("ImageMetadataPreview", () => {
+  it("renders without throwing", () => {
+    const { container } = render(
+      <ImageMetadataPreview
+        imageSrc="https://example.com/photo.jpg"
+        metadata={metadata}
+      />
+    );
+    expect(container).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/image-metadata-preview/index.tsx b/packages/smoothui/components/image-metadata-preview/index.tsx
index 21dd9e5d..c81178aa 100644
--- a/packages/smoothui/components/image-metadata-preview/index.tsx
+++ b/packages/smoothui/components/image-metadata-preview/index.tsx
@@ -61,7 +61,13 @@ export default function ImageMetadataPreview({
         className="pointer-events-none overflow-hidden rounded-xl"
         transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.25 }}
       >
-        <img alt={alt} height={437} src={imageSrc} width={300} />
+        <img
+          alt={alt}
+          draggable={false}
+          height={437}
+          src={imageSrc}
+          width={300}
+        />
       </motion.div>
 
       <div className="relative flex w-full flex-col items-center gap-4">
diff --git a/packages/smoothui/components/index.ts b/packages/smoothui/components/index.ts
index 61d25bf0..f0d769c5 100644
--- a/packages/smoothui/components/index.ts
+++ b/packages/smoothui/components/index.ts
@@ -12,21 +12,27 @@ export { default as AnimatedTabs } from "./animated-tabs";
 export { default as AnimatedTags } from "./animated-tags";
 export { default as AnimatedToggle } from "./animated-toggle";
 export { default as AnimatedTooltip } from "./animated-tooltip";
+export { default as ApertureBlurTransition } from "./aperture-blur-transition";
 export { default as AppDownloadStack } from "./app-download-stack";
 export { default as AppleInvites } from "./apple-invites";
 export { default as BasicAccordion } from "./basic-accordion";
 export { default as BasicDropdown } from "./basic-dropdown";
 export { default as BasicModal } from "./basic-modal";
 export { default as BasicToast } from "./basic-toast";
+// Text animation components (animate-text catalog)
+export { default as BlurOutUp } from "./blur-out-up";
 export { default as Book } from "./book";
+export { default as BottomUpLetters } from "./bottom-up-letters";
 export { default as Breadcrumb } from "./breadcrumb";
 export { default as ButtonCopy } from "./button-copy";
 export { default as Checkbox } from "./checkbox";
+export { default as ChromaBlurTransition } from "./chroma-blur-transition";
 export { default as ClipCornersButton } from "./clip-corners-button";
 export { default as Combobox } from "./combobox";
 export { default as ContextMenu } from "./context-menu";
 export { default as ContributionGraph } from "./contribution-graph";
 export { default as CursorFollow } from "./cursor-follow";
+export { default as DepthParallaxWords } from "./depth-parallax-words";
 export { AlertDialog, default as Dialog } from "./dialog";
 export { default as DotMorphButton } from "./dot-morph-button";
 export { default as Drawer } from "./drawer";
@@ -34,7 +40,9 @@ export { default as DropdownMenu } from "./dropdown-menu";
 export { default as DynamicIsland } from "./dynamic-island";
 export { default as ExpandableCards } from "./expandable-cards";
 export { default as ExposureSlider } from "./exposure-slider";
+export { default as FadeThrough } from "./fade-through";
 export { default as FigmaComment } from "./figma-comment";
+export { default as FocusBlurResolve } from "./focus-blur-resolve";
 export {
   default as Form,
   FormControl,
@@ -51,29 +59,63 @@ export { default as ImageMetadataPreview } from "./image-metadata-preview";
 export { default as InfiniteSlider } from "./infinite-slider";
 export { default as InteractiveImageSelector } from "./interactive-image-selector";
 export { default as JobListingComponent } from "./job-listing-component";
+export { default as KineticCenterBuild } from "./kinetic-center-build";
+export { default as LineByLineSlide } from "./line-by-line-slide";
 export { default as MagneticButton } from "./magnetic-button";
+export { default as MaskRevealUp } from "./mask-reveal-up";
+export { default as MicroScaleFade } from "./micro-scale-fade";
 export { default as NotificationBadge } from "./notification-badge";
 export { default as NumberFlow } from "./number-flow";
+export { default as OrganicMergeTransition } from "./organic-merge-transition";
 export { default as Pagination } from "./pagination";
+export { default as PerCharacterRise } from "./per-character-rise";
+export { default as PerWordCrossfade } from "./per-word-crossfade";
+export { default as PhotoStack } from "./photo-stack";
 export { default as Phototab } from "./phototab";
 export { default as PowerOffSlide } from "./power-off-slide";
 export { default as PriceFlow } from "./price-flow";
+export { default as PrismSweepTransition } from "./prism-sweep-transition";
 export { default as ProductCard } from "./product-card";
+export { default as RadialCirclesTransition } from "./radial-circles-transition";
 export { default as RadioGroup, Radio } from "./radio-group";
 export { default as RevealText } from "./reveal-text";
 export { default as ReviewsCarousel } from "./reviews-carousel";
 export { default as RichPopover } from "./rich-popover";
+export { default as ScaleDownFade } from "./scale-down-fade";
 export { default as ScrambleHover } from "./scramble-hover";
 export { default as ScrollRevealParagraph } from "./scroll-reveal-paragraph";
 export { default as ScrollableCardStack } from "./scrollable-card-stack";
 export { default as Scrubber } from "./scrubber";
+export { default as SdfBlobTransition } from "./sdf-blob-transition";
+export { default as SdfCircleTransition } from "./sdf-circle-transition";
 export { default as SearchableDropdown } from "./searchable-dropdown";
 export { default as Select } from "./select";
+export { default as ShaderRevealCircleTransition } from "./shader-reveal-circle-transition";
+export { default as ShaderRevealLumaTransition } from "./shader-reveal-luma-transition";
+export { default as ShaderRevealNoiseTransition } from "./shader-reveal-noise-transition";
+export { default as ShaderRevealPlanetaryTransition } from "./shader-reveal-planetary-transition";
+export { default as ShaderRevealPushTransition } from "./shader-reveal-push-transition";
+export { default as ShaderRevealStripesTransition } from "./shader-reveal-stripes-transition";
+export { default as ShaderRevealTransition } from "./shader-reveal-transition";
+export { default as ShaderRevealWipeTransition } from "./shader-reveal-wipe-transition";
+export { default as ShaderRevealZoomTransition } from "./shader-reveal-zoom-transition";
+export { default as SharedAxisX } from "./shared-axis-x";
+export { default as SharedAxisY } from "./shared-axis-y";
+export { default as SharedAxisZ } from "./shared-axis-z";
+export { default as ShimmerSweep } from "./shimmer-sweep";
+export { default as ShineText } from "./shine-text";
+export { default as ShortSlideDown } from "./short-slide-down";
+export { default as ShortSlideRight } from "./short-slide-right";
 export { default as SiriOrb } from "./siri-orb";
 export { default as Skeleton } from "./skeleton-loader";
 export { default as SmoothButton } from "./smooth-button";
 export { default as SocialSelector } from "./social-selector";
+export { default as SoftBlurIn } from "./soft-blur-in";
+export { default as SpringScaleIn } from "./spring-scale-in";
+export { default as StaggerFromCenter } from "./stagger-from-center";
+export { default as StaggerFromEdges } from "./stagger-from-edges";
 export { default as SwitchboardCard } from "./switchboard-card";
+export { default as TopDownLetters } from "./top-down-letters";
 export {
   ClientTweetCard,
   default as TweetCard,
@@ -82,4 +124,5 @@ export {
 } from "./tweet-card";
 export { default as TypewriterText } from "./typewriter-text";
 export { default as UserAccountAvatar } from "./user-account-avatar";
+export { default as WarpedCircleTransition } from "./warped-circle-transition";
 export { default as WaveText } from "./wave-text";
diff --git a/packages/smoothui/components/infinite-slider/__tests__/infinite-slider.test.tsx b/packages/smoothui/components/infinite-slider/__tests__/infinite-slider.test.tsx
new file mode 100644
index 00000000..3bfc2792
--- /dev/null
+++ b/packages/smoothui/components/infinite-slider/__tests__/infinite-slider.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import InfiniteSlider from "../index";
+
+describe("InfiniteSlider", () => {
+  it("renders without throwing", () => {
+    const { container } = render(
+      <InfiniteSlider>
+        <span>One</span>
+        <span>Two</span>
+      </InfiniteSlider>
+    );
+    expect(container).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/interactive-image-selector/__tests__/interactive-image-selector.test.tsx b/packages/smoothui/components/interactive-image-selector/__tests__/interactive-image-selector.test.tsx
new file mode 100644
index 00000000..3a29a58f
--- /dev/null
+++ b/packages/smoothui/components/interactive-image-selector/__tests__/interactive-image-selector.test.tsx
@@ -0,0 +1,159 @@
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { render } from "../../../test-utils/render";
+import InteractiveImageSelector, { type ImageData } from "../index";
+
+const images: ImageData[] = [
+  { id: 1, src: "https://example.com/1.jpg" },
+  { id: 2, src: "https://example.com/2.jpg" },
+];
+
+const findButtonByIconClass = (
+  buttons: HTMLElement[],
+  iconClass: string
+): HTMLElement | undefined =>
+  buttons.find(
+    (button) =>
+      !button.hasAttribute("disabled") &&
+      button.querySelector(`svg.${iconClass}`)
+  );
+
+describe("InteractiveImageSelector", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<InteractiveImageSelector images={images} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders all provided images", () => {
+    const { getAllByRole } = render(
+      <InteractiveImageSelector images={images} />
+    );
+    expect(getAllByRole("img")).toHaveLength(2);
+  });
+
+  it("enters selection mode when Select is clicked", () => {
+    const { getByRole, getByText } = render(
+      <InteractiveImageSelector images={images} />
+    );
+
+    fireEvent.click(getByRole("button", { name: "Select images" }));
+
+    expect(getByText("0 selected")).toBeInTheDocument();
+    expect(
+      getByRole("button", { name: "Cancel selection" })
+    ).toBeInTheDocument();
+  });
+
+  it("selects an image and reports the count uncontrolled", () => {
+    const { getAllByRole, getByRole, getByText } = render(
+      <InteractiveImageSelector images={images} />
+    );
+
+    fireEvent.click(getByRole("button", { name: "Select images" }));
+    fireEvent.click(getAllByRole("img")[0]);
+
+    expect(getByText("1 selected")).toBeInTheDocument();
+  });
+
+  it("calls onChange with the newly selected ids when controlled", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(
+      <InteractiveImageSelector
+        images={images}
+        onChange={onChange}
+        selectable
+        selectedImages={[]}
+      />
+    );
+
+    fireEvent.click(getAllByRole("img")[1]);
+
+    expect(onChange).toHaveBeenCalledWith([2]);
+  });
+
+  it("does not select images when not in selecting mode", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(
+      <InteractiveImageSelector images={images} onChange={onChange} />
+    );
+
+    fireEvent.click(getAllByRole("img")[0]);
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("calls onShare with selected image ids", () => {
+    const onShare = vi.fn();
+    const { getAllByRole } = render(
+      <InteractiveImageSelector images={images} onShare={onShare} selectable />
+    );
+
+    fireEvent.click(getAllByRole("img")[0]);
+    const shareButton = findButtonByIconClass(
+      getAllByRole("button"),
+      "lucide-share2"
+    );
+    expect(shareButton).toBeDefined();
+    if (shareButton) {
+      fireEvent.click(shareButton);
+    }
+
+    expect(onShare).toHaveBeenCalledWith([1]);
+  });
+
+  it("calls onDelete and removes the selected image", async () => {
+    const onDelete = vi.fn();
+    const { getAllByRole } = render(
+      <InteractiveImageSelector
+        images={images}
+        onDelete={onDelete}
+        selectable
+      />
+    );
+
+    fireEvent.click(getAllByRole("img")[0]);
+    const deleteButton = findButtonByIconClass(
+      getAllByRole("button"),
+      "lucide-trash2"
+    );
+    expect(deleteButton).toBeDefined();
+    if (deleteButton) {
+      fireEvent.click(deleteButton);
+    }
+
+    expect(onDelete).toHaveBeenCalledWith([1]);
+    await waitFor(() => expect(getAllByRole("img")).toHaveLength(1));
+  });
+
+  it("cancels selection and clears selected images", async () => {
+    const { getAllByRole, getByRole, queryByText } = render(
+      <InteractiveImageSelector images={images} selectable />
+    );
+
+    fireEvent.click(getAllByRole("img")[0]);
+    fireEvent.click(getByRole("button", { name: "Cancel selection" }));
+
+    await waitFor(() =>
+      expect(queryByText("1 selected")).not.toBeInTheDocument()
+    );
+  });
+
+  it("resets images after the reset delay", () => {
+    vi.useFakeTimers();
+    const { getAllByRole, getByRole } = render(
+      <InteractiveImageSelector images={images} selectable />
+    );
+
+    fireEvent.click(getAllByRole("img")[0]);
+    fireEvent.click(getByRole("button", { name: "Reset selection" }));
+
+    expect(getByRole("button", { name: "Reset selection" })).toBeDisabled();
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(getByRole("button", { name: "Reset selection" })).not.toBeDisabled();
+    vi.useRealTimers();
+  });
+});
diff --git a/packages/smoothui/components/interactive-image-selector/index.tsx b/packages/smoothui/components/interactive-image-selector/index.tsx
index 620d50cf..1cba8831 100644
--- a/packages/smoothui/components/interactive-image-selector/index.tsx
+++ b/packages/smoothui/components/interactive-image-selector/index.tsx
@@ -249,6 +249,7 @@ export default function InteractiveImageSelector({
                 className={`h-full w-full rounded-lg object-cover ${
                   selected.includes(img.id) && isSelecting ? "opacity-75" : ""
                 }`}
+                draggable={false}
                 height={200}
                 loading="lazy"
                 src={img.src}
diff --git a/packages/smoothui/components/job-listing-component/__tests__/job-listing-component.test.tsx b/packages/smoothui/components/job-listing-component/__tests__/job-listing-component.test.tsx
new file mode 100644
index 00000000..9a7fb97b
--- /dev/null
+++ b/packages/smoothui/components/job-listing-component/__tests__/job-listing-component.test.tsx
@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import JobListingComponent, { type Job } from "../index";
+
+const jobs: Job[] = [
+  {
+    company: "SmoothUI",
+    title: "Frontend Engineer",
+    job_description: "Build animated UIs.",
+    job_time: "Full-time",
+    location: "Remote",
+    logo: <span>S</span>,
+    remote: "Yes",
+    salary: "100k",
+  },
+];
+
+describe("JobListingComponent", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<JobListingComponent jobs={jobs} />);
+    expect(container).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/kinetic-center-build/__tests__/kinetic-center-build.test.tsx b/packages/smoothui/components/kinetic-center-build/__tests__/kinetic-center-build.test.tsx
new file mode 100644
index 00000000..d7c25731
--- /dev/null
+++ b/packages/smoothui/components/kinetic-center-build/__tests__/kinetic-center-build.test.tsx
@@ -0,0 +1,113 @@
+import { act, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "../../../test-utils/render";
+import KineticCenterBuild from "../index";
+
+describe("KineticCenterBuild", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders only the first word of the first phrase initially", () => {
+    render(<KineticCenterBuild phrases={["Hello World", "Second Phrase"]} />);
+
+    expect(screen.getByText("Hello")).toBeInTheDocument();
+    expect(screen.queryByText("World")).not.toBeInTheDocument();
+  });
+
+  it("reveals subsequent words as the build schedule advances", () => {
+    render(<KineticCenterBuild phrases={["Hello World"]} />);
+
+    act(() => {
+      vi.advanceTimersByTime(430);
+    });
+
+    expect(screen.getByText("World")).toBeInTheDocument();
+  });
+
+  it("cycles to the next phrase after the build completes and interval elapses", () => {
+    const { container } = render(
+      <KineticCenterBuild interval={100} phrases={["Hi", "Bye"]} />
+    );
+
+    expect(container.textContent).toContain("Hi");
+
+    act(() => {
+      vi.advanceTimersByTime(340 + 100 + 260 + 220);
+    });
+
+    expect(container.textContent).toContain("Bye");
+  });
+
+  it("wraps back to the first phrase after the last one", () => {
+    const { container } = render(
+      <KineticCenterBuild interval={100} phrases={["Hi", "Bye"]} />
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(340 + 100 + 260 + 220);
+    });
+    act(() => {
+      vi.advanceTimersByTime(340 + 100 + 260 + 220);
+    });
+
+    expect(container.textContent).toContain("Hi");
+  });
+
+  it("applies a custom className to the wrapper", () => {
+    const { container } = render(
+      <KineticCenterBuild className="custom-class" phrases={["Hi"]} />
+    );
+
+    expect(container.querySelector("span.custom-class")).toBeInTheDocument();
+  });
+
+  it("marks the wrapper as an aria-live region", () => {
+    const { container } = render(<KineticCenterBuild phrases={["Hi"]} />);
+
+    expect(
+      container.querySelector("span[aria-live='polite']")
+    ).toBeInTheDocument();
+  });
+});
+
+describe("KineticCenterBuild with reduced motion", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.resetModules();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.doUnmock("motion/react");
+  });
+
+  it("shows the full phrase immediately and advances only via the interval", async () => {
+    vi.doMock("motion/react", async (importOriginal) => {
+      const actual = await importOriginal<typeof import("motion/react")>();
+      return { ...actual, useReducedMotion: () => true };
+    });
+    const { default: KineticCenterBuildReduced } = await import("../index");
+
+    render(
+      <KineticCenterBuildReduced
+        interval={200}
+        phrases={["Hello there", "Goodbye now"]}
+      />
+    );
+
+    expect(screen.getByText("Hello")).toBeInTheDocument();
+    expect(screen.getByText("there")).toBeInTheDocument();
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(screen.getByText("Goodbye")).toBeInTheDocument();
+    expect(screen.getByText("now")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/kinetic-center-build/index.tsx b/packages/smoothui/components/kinetic-center-build/index.tsx
new file mode 100644
index 00000000..fcaaa8b9
--- /dev/null
+++ b/packages/smoothui/components/kinetic-center-build/index.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+
+export interface KineticCenterBuildProps {
+  className?: string;
+  /** Interval between phrase completions in milliseconds. */
+  interval?: number;
+  phrases: string[];
+}
+
+const BUILD_EASE = [0.2, 0.8, 0.2, 1] as const;
+const EXIT_EASE = [0.4, 0, 0.2, 1] as const;
+
+/**
+ * KineticCenterBuild — Apple keynote-style word-by-word build.
+ * Each new word enters from the right and pushes the line until the full phrase locks centered.
+ * From the animate-text catalog (`kinetic-center-build`).
+ */
+export default function KineticCenterBuild({
+  phrases,
+  className = "",
+  interval = 2500,
+}: KineticCenterBuildProps) {
+  const [phraseIndex, setPhraseIndex] = useState(0);
+  const [wordCount, setWordCount] = useState(1);
+  const [exiting, setExiting] = useState(false);
+  const shouldReduceMotion = useReducedMotion();
+
+  const currentPhrase = phrases[phraseIndex] ?? "";
+  const words = currentPhrase.split(" ");
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: words.length drives the build schedule
+  useEffect(() => {
+    if (shouldReduceMotion) {
+      const holdId = setTimeout(() => {
+        setPhraseIndex((prev) => (prev + 1) % phrases.length);
+      }, interval);
+      return () => clearTimeout(holdId);
+    }
+
+    setWordCount(1);
+    setExiting(false);
+
+    const buildTimers: ReturnType<typeof setTimeout>[] = [];
+
+    for (let i = 1; i < words.length; i++) {
+      buildTimers.push(
+        setTimeout(() => {
+          setWordCount(i + 1);
+        }, i * 430)
+      );
+    }
+
+    const totalBuild = (words.length - 1) * 430 + 340;
+    const holdId = setTimeout(() => {
+      setExiting(true);
+      setTimeout(() => {
+        setPhraseIndex((prev) => (prev + 1) % phrases.length);
+        setWordCount(1);
+        setExiting(false);
+      }, 260 + 220);
+    }, totalBuild + interval);
+
+    buildTimers.push(holdId);
+    return () => {
+      for (const t of buildTimers) {
+        clearTimeout(t);
+      }
+    };
+  }, [phraseIndex, phrases.length, interval, shouldReduceMotion, words.length]);
+
+  const visibleWords = shouldReduceMotion ? words : words.slice(0, wordCount);
+  const restingAnimate = shouldReduceMotion
+    ? { opacity: 1 }
+    : { opacity: 1, x: 0, y: 0, scale: 1, filter: "blur(0px)" };
+  const exitAnimate = {
+    opacity: 0,
+    y: -6,
+    filter: "blur(2.5px)",
+    transition: { duration: 0.26, ease: EXIT_EASE },
+  };
+
+  return (
+    <span
+      aria-live="polite"
+      className={`flex flex-wrap items-center justify-center ${className}`}
+      style={{ gap: 10 }}
+    >
+      <AnimatePresence mode="popLayout">
+        {visibleWords.map((word, i) => (
+          <motion.span
+            animate={exiting ? exitAnimate : restingAnimate}
+            initial={
+              shouldReduceMotion
+                ? { opacity: 1 }
+                : {
+                    opacity: 0,
+                    x: 88,
+                    y: 6,
+                    scale: 0.992,
+                    filter: "blur(3.5px)",
+                  }
+            }
+            // biome-ignore lint/suspicious/noArrayIndexKey: word position is the stable identity within a phrase
+            key={`${phraseIndex}-${i}`}
+            layout
+            style={{ display: "inline-block" }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : {
+                    duration: i === 0 ? 0.34 : 0.43,
+                    ease: BUILD_EASE,
+                    layout: { duration: 0.43, ease: BUILD_EASE },
+                  }
+            }
+          >
+            {word}
+          </motion.span>
+        ))}
+      </AnimatePresence>
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/kinetic-center-build/package.json b/packages/smoothui/components/kinetic-center-build/package.json
new file mode 100644
index 00000000..3d1ea693
--- /dev/null
+++ b/packages/smoothui/components/kinetic-center-build/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/kinetic-center-build",
+  "description": "A KineticCenterBuild text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "build",
+      "kinetic",
+      "per-word",
+      "center",
+      "apple",
+      "animated"
+    ],
+    "complexity": "moderate",
+    "animationType": "kinetic-build",
+    "useCases": [
+      "Apple keynote-style word builds for hero headings",
+      "Short three-word editorial phrases with kinetic push",
+      "Centered typography builds for feature highlights"
+    ],
+    "compositionHints": [
+      "Best on 2-4 word phrases; longer phrases may overflow on mobile",
+      "Use large font sizes (48px+) for the push motion to read clearly"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/kinetic-center-build/tsconfig.json b/packages/smoothui/components/kinetic-center-build/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/kinetic-center-build/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/line-by-line-slide/index.tsx b/packages/smoothui/components/line-by-line-slide/index.tsx
new file mode 100644
index 00000000..46cdf126
--- /dev/null
+++ b/packages/smoothui/components/line-by-line-slide/index.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface LineByLineSlideProps {
+  /** Text content. Use "\n" to separate lines, or pass `lines` instead. */
+  children?: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Explicit line array. Takes precedence over children. */
+  lines?: string[];
+  /** Per-line stagger, in milliseconds. */
+  stagger?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.9;
+const MS = 1000;
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+/**
+ * LineByLineSlide — per-line slide-in from the left with a staggered entrance,
+ * inspired by Apple landing page subheads. Each line enters from the left for a
+ * flowing paragraph reveal. From the animate-text catalog (`line-by-line-slide`).
+ * Best for 2-line or 3-line headings.
+ */
+export default function LineByLineSlide({
+  children,
+  lines: linesProp,
+  className = "",
+  delay = 0,
+  stagger = 120,
+  triggerOnView = false,
+}: LineByLineSlideProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+
+  const lines = linesProp ?? (children ? children.split("\n") : []);
+  const label = lines.join(" ");
+
+  return (
+    <span
+      aria-label={label}
+      className={className}
+      ref={ref}
+      style={{ display: "block" }}
+    >
+      {lines.map((line, index) => (
+        <motion.span
+          animate={play ? { opacity: 1, x: 0 } : undefined}
+          aria-hidden="true"
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: -48 }}
+          // biome-ignore lint/suspicious/noArrayIndexKey: lines have no stable id
+          key={index}
+          style={{ display: "block" }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : {
+                  duration: DURATION_S,
+                  delay: delay / MS + (index * stagger) / MS,
+                  ease: EASE,
+                }
+          }
+        >
+          {line}
+        </motion.span>
+      ))}
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/line-by-line-slide/package.json b/packages/smoothui/components/line-by-line-slide/package.json
new file mode 100644
index 00000000..daa8a22e
--- /dev/null
+++ b/packages/smoothui/components/line-by-line-slide/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@repo/line-by-line-slide",
+  "description": "A LineByLineSlide text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "slide",
+      "per-line",
+      "entrance",
+      "apple",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Apple-style subhead line-by-line entrance",
+      "Flowing paragraph reveal with stagger",
+      "Section header animated on scroll"
+    ],
+    "compositionHints": [
+      "Great for 2-line or 3-line headings",
+      "Reduce x-distance for narrow layouts to keep motion tight on mobile"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/line-by-line-slide/tsconfig.json b/packages/smoothui/components/line-by-line-slide/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/line-by-line-slide/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/magnetic-button/__tests__/magnetic-button.test.tsx b/packages/smoothui/components/magnetic-button/__tests__/magnetic-button.test.tsx
new file mode 100644
index 00000000..422bb9d3
--- /dev/null
+++ b/packages/smoothui/components/magnetic-button/__tests__/magnetic-button.test.tsx
@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import MagneticButton from "../index";
+
+describe("MagneticButton", () => {
+  it("renders without throwing", () => {
+    const { container } = render(<MagneticButton>Pull me</MagneticButton>);
+    expect(container).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/mask-reveal-up/index.tsx b/packages/smoothui/components/mask-reveal-up/index.tsx
new file mode 100644
index 00000000..d7afdad4
--- /dev/null
+++ b/packages/smoothui/components/mask-reveal-up/index.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface MaskRevealUpProps {
+  /** Text content. Use "\n" to separate lines, or pass `lines` instead. */
+  children?: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Explicit line array. Takes precedence over children. */
+  lines?: string[];
+  /** Per-line stagger, in milliseconds. */
+  stagger?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.76;
+const MS = 1000;
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+/**
+ * MaskRevealUp — per-line masked reveal with upward motion and soft blur,
+ * inspired by Apple section transitions. Each line rises from beneath an
+ * overflow-hidden mask. From the animate-text catalog (`mask-reveal-up`).
+ * Best for two-line and three-line headings.
+ */
+export default function MaskRevealUp({
+  children,
+  lines: linesProp,
+  className = "",
+  delay = 0,
+  stagger = 90,
+  triggerOnView = false,
+}: MaskRevealUpProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+
+  const lines = linesProp ?? (children ? children.split("\n") : []);
+  const label = lines.join(" ");
+
+  return (
+    <span
+      aria-label={label}
+      className={className}
+      ref={ref}
+      style={{ display: "block" }}
+    >
+      {lines.map((line, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: lines have no stable id
+        <span key={index} style={{ display: "block", overflow: "hidden" }}>
+          <motion.span
+            animate={
+              play ? { opacity: 1, y: 0, filter: "blur(0px)" } : undefined
+            }
+            aria-hidden="true"
+            initial={
+              shouldReduceMotion
+                ? { opacity: 1 }
+                : { opacity: 0, y: 30, filter: "blur(6px)" }
+            }
+            style={{ display: "block" }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : {
+                    duration: DURATION_S,
+                    delay: delay / MS + (index * stagger) / MS,
+                    ease: EASE,
+                  }
+            }
+          >
+            {line}
+          </motion.span>
+        </span>
+      ))}
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/mask-reveal-up/package.json b/packages/smoothui/components/mask-reveal-up/package.json
new file mode 100644
index 00000000..903c7037
--- /dev/null
+++ b/packages/smoothui/components/mask-reveal-up/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@repo/mask-reveal-up",
+  "description": "A MaskRevealUp text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "mask",
+      "per-line",
+      "entrance",
+      "apple",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Apple-style section heading reveal",
+      "Two-line or three-line masked headline entrance",
+      "Section copy animated on scroll"
+    ],
+    "compositionHints": [
+      "Best for two-line and three-line headings where line order should stay readable",
+      "Pair with soft-blur-in for mixed hero sections"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/mask-reveal-up/tsconfig.json b/packages/smoothui/components/mask-reveal-up/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/mask-reveal-up/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/micro-scale-fade/index.tsx b/packages/smoothui/components/micro-scale-fade/index.tsx
new file mode 100644
index 00000000..cc94b9a4
--- /dev/null
+++ b/packages/smoothui/components/micro-scale-fade/index.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface MicroScaleFadeProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.6;
+const MS = 1000;
+const EASE = [0.32, 0.72, 0, 1] as const;
+
+/**
+ * MicroScaleFade — calm, tiny scale pop used as subtle premium polish for
+ * labels and headings. The whole text animates as a single element from
+ * scale 0.96 to 1. From the animate-text catalog (`micro-scale-fade`).
+ * Best for single words or short titles.
+ */
+export default function MicroScaleFade({
+  children,
+  className = "",
+  delay = 0,
+  triggerOnView = false,
+}: MicroScaleFadeProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+
+  return (
+    <motion.span
+      animate={play ? { opacity: 1, scale: 1 } : undefined}
+      aria-label={children}
+      className={className}
+      initial={
+        shouldReduceMotion ? { opacity: 1 } : { opacity: 0, scale: 0.96 }
+      }
+      ref={ref}
+      style={{ display: "inline-block" }}
+      transition={
+        shouldReduceMotion
+          ? { duration: 0 }
+          : {
+              duration: DURATION_S,
+              delay: delay / MS,
+              ease: EASE,
+            }
+      }
+    >
+      {children}
+    </motion.span>
+  );
+}
diff --git a/packages/smoothui/components/micro-scale-fade/package.json b/packages/smoothui/components/micro-scale-fade/package.json
new file mode 100644
index 00000000..1b0934bd
--- /dev/null
+++ b/packages/smoothui/components/micro-scale-fade/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@repo/micro-scale-fade",
+  "description": "A MicroScaleFade text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "scale",
+      "fade",
+      "whole",
+      "premium",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Apple system status copy and secondary UI labels",
+      "Lightweight onboarding micro-animations",
+      "Single word or short title premium entrance"
+    ],
+    "compositionHints": [
+      "Use for single words or short titles",
+      "For paragraphs, switch to a per-word variant to avoid perceivable lag"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/micro-scale-fade/tsconfig.json b/packages/smoothui/components/micro-scale-fade/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/micro-scale-fade/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/number-flow/index.tsx b/packages/smoothui/components/number-flow/index.tsx
index e84c6d23..f610b651 100644
--- a/packages/smoothui/components/number-flow/index.tsx
+++ b/packages/smoothui/components/number-flow/index.tsx
@@ -135,7 +135,7 @@ export default function NumberFlow({
   return (
     <div
       className={cn(
-        "flex min-h-screen flex-col items-center justify-center gap-8",
+        "flex flex-col items-center justify-center gap-8",
         className
       )}
     >
diff --git a/packages/smoothui/components/organic-merge-transition/__tests__/organic-merge-transition.test.tsx b/packages/smoothui/components/organic-merge-transition/__tests__/organic-merge-transition.test.tsx
new file mode 100644
index 00000000..0b895fb6
--- /dev/null
+++ b/packages/smoothui/components/organic-merge-transition/__tests__/organic-merge-transition.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import OrganicMergeTransition from "../index";
+
+describe("OrganicMergeTransition", () => {
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <OrganicMergeTransition transitionKey="draft">
+        Draft saved
+      </OrganicMergeTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/organic-merge-transition/index.tsx b/packages/smoothui/components/organic-merge-transition/index.tsx
new file mode 100644
index 00000000..00a0b8d2
--- /dev/null
+++ b/packages/smoothui/components/organic-merge-transition/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import SdfBlobTransition from "../sdf-blob-transition";
+
+export interface OrganicMergeTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const OrganicMergeTransition = ({
+  children,
+  className,
+  duration = 1120,
+  onRest,
+  transitionKey,
+}: OrganicMergeTransitionProps) => (
+  <SdfBlobTransition
+    className={className}
+    duration={duration}
+    onRest={onRest}
+    transitionKey={transitionKey}
+    variant="merge"
+  >
+    {children}
+  </SdfBlobTransition>
+);
+
+export default OrganicMergeTransition;
diff --git a/packages/smoothui/components/organic-merge-transition/package.json b/packages/smoothui/components/organic-merge-transition/package.json
new file mode 100644
index 00000000..fed584fb
--- /dev/null
+++ b/packages/smoothui/components/organic-merge-transition/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@repo/organic-merge-transition",
+  "description": "A soft-min SDF merge transition with two organic expanding shapes.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/sdf-blob-transition": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "sdf",
+      "codrops",
+      "state-change"
+    ],
+    "complexity": "moderate",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/organic-merge-transition/tsconfig.json b/packages/smoothui/components/organic-merge-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/organic-merge-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/per-character-rise/index.tsx b/packages/smoothui/components/per-character-rise/index.tsx
new file mode 100644
index 00000000..9bfd5868
--- /dev/null
+++ b/packages/smoothui/components/per-character-rise/index.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface PerCharacterRiseProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Per-character stagger, in milliseconds. */
+  stagger?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.7;
+const MS = 1000;
+// Apple's clean tvOS-style ease-out.
+const EASE = [0.2, 0.8, 0.2, 1] as const;
+
+/**
+ * PerCharacterRise — letters slide up from below with no blur, crisp and
+ * deliberate. Apple's clean tvOS-style reveal. From the animate-text catalog
+ * (`per-character-rise`). Best on 40px+ headlines.
+ */
+export default function PerCharacterRise({
+  children,
+  className = "",
+  delay = 0,
+  stagger = 24,
+  triggerOnView = false,
+}: PerCharacterRiseProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+  const characters = Array.from(children);
+
+  return (
+    <span aria-label={children} className={className} ref={ref}>
+      {characters.map((char, index) => (
+        <motion.span
+          animate={play ? { opacity: 1, y: 0 } : undefined}
+          aria-hidden="true"
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 32 }}
+          // biome-ignore lint/suspicious/noArrayIndexKey: characters have no stable id
+          key={index}
+          style={{ display: "inline-block", whiteSpace: "pre" }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : {
+                  duration: DURATION_S,
+                  delay: delay / MS + (index * stagger) / MS,
+                  ease: EASE,
+                }
+          }
+        >
+          {char === " " ? " " : char}
+        </motion.span>
+      ))}
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/per-character-rise/package.json b/packages/smoothui/components/per-character-rise/package.json
new file mode 100644
index 00000000..f6d47e9f
--- /dev/null
+++ b/packages/smoothui/components/per-character-rise/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/per-character-rise",
+  "description": "A PerCharacterRise text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "per-character",
+      "rise",
+      "entrance",
+      "apple",
+      "tvos",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Apple tvOS-style headline reveal",
+      "Crisp kinetic title entrance without blur",
+      "Section heading animated on scroll"
+    ],
+    "compositionHints": [
+      "Use on 40px+ headlines over any background",
+      "Zero blur keeps it sharp — key distinction from soft-blur-in"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/per-character-rise/tsconfig.json b/packages/smoothui/components/per-character-rise/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/per-character-rise/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/per-word-crossfade/index.tsx b/packages/smoothui/components/per-word-crossfade/index.tsx
new file mode 100644
index 00000000..d8b39518
--- /dev/null
+++ b/packages/smoothui/components/per-word-crossfade/index.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface PerWordCrossfadeProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Per-word stagger, in milliseconds. */
+  stagger?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.7;
+const MS = 1000;
+// Calm keynote ease-out.
+const EASE = [0.16, 1, 0.3, 1] as const;
+
+/**
+ * PerWordCrossfade — per-word fade-in with a subtle upward drift,
+ * calm keynote rhythm. From the animate-text catalog
+ * (`per-word-crossfade`).
+ */
+export default function PerWordCrossfade({
+  children,
+  className = "",
+  delay = 0,
+  stagger = 70,
+  triggerOnView = false,
+}: PerWordCrossfadeProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+  const words = children.split(" ");
+
+  return (
+    <span aria-label={children} className={className} ref={ref}>
+      {words.map((word, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: words have no stable id
+        <span key={index} style={{ display: "inline-block" }}>
+          <motion.span
+            animate={play ? { opacity: 1, y: 0 } : undefined}
+            aria-hidden="true"
+            initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 8 }}
+            style={{ display: "inline-block", whiteSpace: "pre" }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : {
+                    duration: DURATION_S,
+                    delay: delay / MS + (index * stagger) / MS,
+                    ease: EASE,
+                  }
+            }
+          >
+            {word}
+          </motion.span>
+          {index < words.length - 1 && (
+            <span
+              aria-hidden="true"
+              style={{ display: "inline-block", whiteSpace: "pre" }}
+            >
+              {" "}
+            </span>
+          )}
+        </span>
+      ))}
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/per-word-crossfade/package.json b/packages/smoothui/components/per-word-crossfade/package.json
new file mode 100644
index 00000000..03f3cf60
--- /dev/null
+++ b/packages/smoothui/components/per-word-crossfade/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@repo/per-word-crossfade",
+  "description": "A PerWordCrossfade text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "fade",
+      "per-word",
+      "entrance",
+      "crossfade",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Calm keynote-style heading reveal",
+      "Section title entrance on scroll",
+      "Medium phrase animated text"
+    ],
+    "compositionHints": [
+      "Best for medium phrases up to 16–18 words",
+      "Pair with SoftBlurIn for mixed granularity"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/per-word-crossfade/tsconfig.json b/packages/smoothui/components/per-word-crossfade/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/per-word-crossfade/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/photo-stack/index.tsx b/packages/smoothui/components/photo-stack/index.tsx
new file mode 100644
index 00000000..97286de6
--- /dev/null
+++ b/packages/smoothui/components/photo-stack/index.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import { motion, useReducedMotion } from "motion/react";
+import { useRef, useState } from "react";
+
+export interface PhotoStackPhoto {
+  alt: string;
+  id: string;
+  /** Optional caption shown over the front card. */
+  name?: string;
+  role?: string;
+  src: string;
+}
+
+export interface PhotoStackProps {
+  className?: string;
+  /** Fired after the top card is sent to the back, with the new id order. */
+  onCycle?: (order: string[]) => void;
+  /** Cards to stack. The first item starts on top. */
+  photos: PhotoStackPhoto[];
+}
+
+// Resting offset/scale per stack position (0 = front).
+const POSITIONS = [
+  { x: 0, y: 0, scale: 1 },
+  { x: 16, y: 12, scale: 0.95 },
+  { x: 32, y: 24, scale: 0.9 },
+];
+
+/**
+ * PhotoStack — a draggable deck of photo cards. Drag the top card (Tinder-style)
+ * in either direction, or tap it, to send it to the back and reveal the next.
+ * Inspired by Josh Puckett's dialkit Photo Stack.
+ */
+export default function PhotoStack({
+  className,
+  photos,
+  onCycle,
+}: PhotoStackProps) {
+  const reduceMotion = useReducedMotion();
+  const [order, setOrder] = useState<number[]>(() => photos.map((_, i) => i));
+  // A real drag fires both onDragEnd and a trailing onClick. Without this guard
+  // a short drag would cycle twice and land the card in 2nd place, not last.
+  const justDragged = useRef(false);
+
+  const cycle = () => {
+    setOrder((prev) => {
+      const next = [...prev.slice(1), prev[0]];
+      onCycle?.(next.map((i) => photos[i].id));
+      return next;
+    });
+  };
+
+  return (
+    <div className={cn("relative h-72 w-56 select-none", className)}>
+      {order.map((photoIndex, pos) => {
+        const photo = photos[photoIndex];
+        const rest = POSITIONS[Math.min(pos, POSITIONS.length - 1)];
+        const isFront = pos === 0;
+
+        return (
+          <motion.div
+            animate={{ x: rest.x, y: rest.y, scale: rest.scale, rotate: 0 }}
+            aria-label={
+              isFront ? `${photo.name ?? photo.alt} — next` : undefined
+            }
+            className="absolute inset-0 overflow-hidden rounded-2xl border border-black/10 bg-white shadow-[0_1px_2px_rgba(0,0,0,0.06),0_14px_32px_rgba(0,0,0,0.14)] focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2"
+            drag={isFront && !reduceMotion ? "x" : false}
+            dragSnapToOrigin
+            key={photo.id}
+            onClick={() => {
+              if (!isFront) {
+                return;
+              }
+              // Swallow the click that trails a drag so it doesn't double-cycle.
+              if (justDragged.current) {
+                justDragged.current = false;
+                return;
+              }
+              cycle();
+            }}
+            onDragEnd={() => {
+              // Any drag release sends the dragged (front) card to the back.
+              justDragged.current = true;
+              cycle();
+            }}
+            onKeyDown={(e: React.KeyboardEvent) => {
+              if (isFront && (e.key === "Enter" || e.key === " ")) {
+                e.preventDefault();
+                cycle();
+              }
+            }}
+            role={isFront ? "button" : undefined}
+            style={{
+              zIndex: photos.length - pos,
+              cursor: isFront ? "grab" : "default",
+            }}
+            tabIndex={isFront ? 0 : -1}
+            transition={
+              reduceMotion
+                ? { duration: 0 }
+                : { type: "spring", stiffness: 320, damping: 30 }
+            }
+            whileDrag={{ cursor: "grabbing" }}
+          >
+            <img
+              alt={photo.alt}
+              className="h-full w-full object-cover object-top"
+              draggable={false}
+              src={photo.src}
+            />
+            {(photo.name || photo.role) && (
+              <figcaption
+                className={cn(
+                  "absolute inset-x-0 bottom-0 flex flex-col gap-px bg-gradient-to-t from-black/60 to-transparent p-3.5 text-white transition-opacity",
+                  !isFront && "opacity-0"
+                )}
+              >
+                {photo.name && (
+                  <span className="font-semibold text-sm">{photo.name}</span>
+                )}
+                {photo.role && (
+                  <span className="text-xs opacity-85">{photo.role}</span>
+                )}
+              </figcaption>
+            )}
+            {pos > 0 && (
+              <span
+                aria-hidden
+                className="pointer-events-none absolute inset-0 bg-white"
+                style={{ opacity: pos === 1 ? 0.2 : 0.36 }}
+              />
+            )}
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/packages/smoothui/components/photo-stack/package.json b/packages/smoothui/components/photo-stack/package.json
new file mode 100644
index 00000000..6b57cb78
--- /dev/null
+++ b/packages/smoothui/components/photo-stack/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@repo/photo-stack",
+  "description": "A PhotoStack component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "data-display",
+    "tags": [
+      "photo",
+      "cards",
+      "stack",
+      "draggable",
+      "gesture",
+      "interactive"
+    ],
+    "complexity": "moderate",
+    "animationType": "gesture",
+    "useCases": [
+      "Draggable photo or testimonial deck",
+      "Portfolio image gallery with flick-to-next interaction",
+      "Persona / team showcase you can swipe through"
+    ],
+    "compositionHints": [
+      "Pair with basic-modal for lightbox viewing of the front card",
+      "Drive the order from data and react to onCycle for analytics"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/photo-stack/tsconfig.json b/packages/smoothui/components/photo-stack/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/photo-stack/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/phototab/index.tsx b/packages/smoothui/components/phototab/index.tsx
index 23f4e839..e8b11a77 100644
--- a/packages/smoothui/components/phototab/index.tsx
+++ b/packages/smoothui/components/phototab/index.tsx
@@ -150,6 +150,7 @@ export default function Phototab({
           <img
             alt={tab.name}
             className={`h-full w-full rounded-2xl bg-primary object-cover ${imageClassName}`}
+            draggable={false}
             height={height}
             loading="lazy"
             src={tab.image}
diff --git a/packages/smoothui/components/prism-sweep-transition/__tests__/prism-sweep-transition.test.tsx b/packages/smoothui/components/prism-sweep-transition/__tests__/prism-sweep-transition.test.tsx
new file mode 100644
index 00000000..b8980326
--- /dev/null
+++ b/packages/smoothui/components/prism-sweep-transition/__tests__/prism-sweep-transition.test.tsx
@@ -0,0 +1,189 @@
+import { useReducedMotion } from "motion/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "../../../test-utils/render";
+import {
+  flushFrames,
+  installWebglMock,
+  runFramesFor,
+  uninstallWebglMock,
+} from "../../../test-utils/webgl-mock";
+import PrismSweepTransition, {
+  type PrismSweepDirection,
+  type PrismSweepTone,
+} from "../index";
+
+vi.mock("motion/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("motion/react")>();
+  return { ...actual, useReducedMotion: vi.fn(() => false) };
+});
+
+const ALL_TONES: PrismSweepTone[] = ["prism", "chroma", "aperture", "beam"];
+const ALL_DIRECTIONS: PrismSweepDirection[] = ["left", "right", "up", "down"];
+
+describe("PrismSweepTransition", () => {
+  beforeEach(() => {
+    installWebglMock();
+  });
+
+  afterEach(() => {
+    uninstallWebglMock();
+    vi.mocked(useReducedMotion).mockReturnValue(false);
+  });
+
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <PrismSweepTransition transitionKey="draft">
+        Draft saved
+      </PrismSweepTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+
+  it("runs the sweep, swaps content mid-sweep, and calls onRest", () => {
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <PrismSweepTransition duration={100} onRest={onRest} transitionKey="a">
+        First
+      </PrismSweepTransition>
+    );
+
+    expect(getByText("First")).toBeInTheDocument();
+
+    rerender(
+      <PrismSweepTransition duration={100} onRest={onRest} transitionKey="b">
+        Second
+      </PrismSweepTransition>
+    );
+
+    runFramesFor(500);
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("skips the animation and swaps content immediately when reduced motion is preferred", () => {
+    vi.mocked(useReducedMotion).mockReturnValue(true);
+
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <PrismSweepTransition onRest={onRest} transitionKey="a">
+        First
+      </PrismSweepTransition>
+    );
+
+    rerender(
+      <PrismSweepTransition onRest={onRest} transitionKey="b">
+        Second
+      </PrismSweepTransition>
+    );
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("swaps content immediately when WebGL is unavailable", () => {
+    uninstallWebglMock();
+    installWebglMock({ supported: false });
+
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <PrismSweepTransition onRest={onRest} transitionKey="a">
+        First
+      </PrismSweepTransition>
+    );
+
+    rerender(
+      <PrismSweepTransition onRest={onRest} transitionKey="b">
+        Second
+      </PrismSweepTransition>
+    );
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not throw when unmounted mid-animation", () => {
+    const { rerender, unmount } = render(
+      <PrismSweepTransition duration={300} transitionKey="a">
+        First
+      </PrismSweepTransition>
+    );
+
+    rerender(
+      <PrismSweepTransition duration={300} transitionKey="b">
+        Second
+      </PrismSweepTransition>
+    );
+
+    flushFrames(2);
+
+    expect(() => unmount()).not.toThrow();
+    expect(() => flushFrames(2)).not.toThrow();
+  });
+
+  for (const tone of ALL_TONES) {
+    it(`renders and animates the "${tone}" tone without throwing`, () => {
+      const onRest = vi.fn();
+      const { getByText, rerender } = render(
+        <PrismSweepTransition
+          duration={80}
+          onRest={onRest}
+          tone={tone}
+          transitionKey="a"
+        >
+          First
+        </PrismSweepTransition>
+      );
+
+      rerender(
+        <PrismSweepTransition
+          duration={80}
+          onRest={onRest}
+          tone={tone}
+          transitionKey="b"
+        >
+          Second
+        </PrismSweepTransition>
+      );
+
+      expect(() => runFramesFor(400)).not.toThrow();
+      expect(getByText("Second")).toBeInTheDocument();
+      expect(onRest).toHaveBeenCalledTimes(1);
+    });
+  }
+
+  for (const direction of ALL_DIRECTIONS) {
+    it(`renders and animates the "${direction}" direction without throwing`, () => {
+      const onRest = vi.fn();
+      const { getByText, rerender } = render(
+        <PrismSweepTransition
+          direction={direction}
+          duration={80}
+          onRest={onRest}
+          transitionKey="a"
+        >
+          First
+        </PrismSweepTransition>
+      );
+
+      rerender(
+        <PrismSweepTransition
+          direction={direction}
+          duration={80}
+          onRest={onRest}
+          transitionKey="b"
+        >
+          Second
+        </PrismSweepTransition>
+      );
+
+      expect(() => runFramesFor(400)).not.toThrow();
+      expect(getByText("Second")).toBeInTheDocument();
+      expect(onRest).toHaveBeenCalledTimes(1);
+    });
+  }
+});
diff --git a/packages/smoothui/components/prism-sweep-transition/index.tsx b/packages/smoothui/components/prism-sweep-transition/index.tsx
new file mode 100644
index 00000000..003ce2a0
--- /dev/null
+++ b/packages/smoothui/components/prism-sweep-transition/index.tsx
@@ -0,0 +1,684 @@
+"use client";
+
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import { useReducedMotion } from "motion/react";
+import {
+  type ReactNode,
+  type RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+export type PrismSweepDirection = "left" | "right" | "up" | "down";
+export type PrismSweepTone = "prism" | "chroma" | "aperture" | "beam";
+
+export interface PrismSweepTransitionProps {
+  /** Content rendered underneath the sweep. */
+  children: ReactNode;
+  /** Optional wrapper className. */
+  className?: string;
+  /** Direction the prism field travels from. */
+  direction?: PrismSweepDirection;
+  /** Total sweep duration, in milliseconds. */
+  duration?: number;
+  /** Called after the sweep finishes. */
+  onRest?: () => void;
+  /** Optional tone preset for the shader palette and field behavior. */
+  tone?: PrismSweepTone;
+  /** Key that starts a new sweep when it changes. */
+  transitionKey: string | number;
+}
+
+const DEFAULT_DURATION_MS = 1240;
+const OUTRO_MS = 82;
+const CONTENT_SWAP_RATIO = 0.52;
+const MAX_DEVICE_PIXEL_RATIO = 2;
+const MIN_PHASE_MS = 80;
+const HIDDEN_OPACITY = 0;
+const VISIBLE_OPACITY = 1;
+
+const VERTEX_SHADER = `
+attribute vec2 position;
+varying vec2 vUv;
+
+void main() {
+  vUv = position * 0.5 + 0.5;
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const FRAGMENT_SHADER = `
+precision mediump float;
+
+varying vec2 vUv;
+
+uniform vec2 uResolution;
+uniform float uClock;
+uniform float uTravel;
+uniform float uOpacity;
+uniform float uAxis;
+uniform float uForward;
+uniform float uSpan;
+uniform float uSoftness;
+uniform float uBend;
+uniform float uFacet;
+uniform float uBloom;
+uniform vec3 uInk;
+uniform vec3 uPearl;
+uniform vec3 uWarm;
+uniform vec3 uCool;
+
+float saturate(float value) {
+  return clamp(value, 0.0, 1.0);
+}
+
+float triangleWave(float value) {
+  return abs(fract(value) * 2.0 - 1.0);
+}
+
+float softRidge(float distance, float width) {
+  return exp(-distance * distance / max(width, 0.0001));
+}
+
+void main() {
+  vec2 uv = vUv;
+  vec2 pixel = 1.0 / max(uResolution, vec2(1.0));
+
+  float mainAxis = mix(uv.x, uv.y, uAxis);
+  float crossAxis = mix(uv.y, uv.x, uAxis);
+  mainAxis = mix(mainAxis, 1.0 - mainAxis, step(0.0, -uForward));
+
+  float time = uClock * 0.42;
+  float drift =
+      sin(crossAxis * 7.0 + time * 1.8) * 0.024
+    + sin(crossAxis * 17.0 - time * 1.1 + 1.6) * 0.010
+    + sin((mainAxis + crossAxis) * 11.0 + time * 0.7) * 0.006;
+  drift *= uBend;
+
+  float travel = -0.34 + uTravel * 1.68;
+  float d = mainAxis - travel - drift;
+  float ad = abs(d);
+
+  float field = 1.0 - smoothstep(uSpan, uSpan + uSoftness, ad);
+  float inner = 1.0 - smoothstep(uSpan * 0.28, uSpan, ad);
+  float frontRidge = softRidge(d - uSpan * 0.34, 0.0017 + pixel.x * 16.0);
+  float backRidge = softRidge(d + uSpan * 0.54, 0.0035 + pixel.y * 14.0) * 0.55;
+
+  float facetGrid = triangleWave(crossAxis * uFacet + mainAxis * 2.1 + time * 0.35);
+  float facetCuts = smoothstep(0.18, 0.92, facetGrid);
+  float diagonal = triangleWave((crossAxis - mainAxis * 0.36) * (uFacet * 0.44) - time * 0.2);
+  float caustic = pow(1.0 - diagonal, 4.0) * 0.42 + pow(facetCuts, 2.2) * 0.22;
+
+  float glass = saturate(field * (0.5 + inner * 0.42) + frontRidge * 0.52 + backRidge * 0.2);
+  float gateIn = smoothstep(0.02, 0.14, uTravel);
+  float gateOut = 1.0 - smoothstep(0.9, 1.0, uTravel);
+  float envelope = gateIn * gateOut;
+
+  vec3 base = mix(uCool, uWarm, saturate(crossAxis * 0.82 + drift * 4.5));
+  vec3 prism = mix(base, uPearl, inner * 0.36 + frontRidge * 0.5);
+  prism = mix(prism, uInk, smoothstep(0.55, 0.0, ad) * 0.1);
+  prism += caustic * uBloom * mix(uWarm, uPearl, 0.38);
+  prism += frontRidge * uBloom * mix(uWarm, uCool, 0.22) * 0.72;
+  prism += backRidge * uBloom * uCool * 0.7;
+
+  float vignette = smoothstep(0.0, 0.025, crossAxis) * smoothstep(1.0, 0.975, crossAxis);
+  float alpha = saturate(glass * 0.64 + frontRidge * 0.24 + backRidge * 0.14);
+  alpha *= uOpacity * envelope * vignette;
+
+  gl_FragColor = vec4(prism * alpha, alpha);
+}
+`;
+
+const FULLSCREEN_TRIANGLES = new Float32Array([
+  -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1,
+]);
+
+const TONE_CONFIGS = {
+  aperture: {
+    bend: 0.42,
+    bloom: 0.86,
+    cool: [0.92, 0.78, 0.66],
+    facet: 9.5,
+    ink: [0.24, 0.16, 0.12],
+    pearl: [1, 0.96, 0.88],
+    softness: 0.076,
+    span: 0.17,
+    warm: [1, 0.62, 0.38],
+  },
+  beam: {
+    bend: 0.12,
+    bloom: 1.08,
+    cool: [0.86, 0.72, 0.5],
+    facet: 18,
+    ink: [0.2, 0.13, 0.07],
+    pearl: [1, 0.9, 0.68],
+    softness: 0.038,
+    span: 0.092,
+    warm: [1, 0.48, 0.18],
+  },
+  chroma: {
+    bend: 0.9,
+    bloom: 0.78,
+    cool: [0.38, 0.86, 0.84],
+    facet: 13.5,
+    ink: [0.18, 0.16, 0.3],
+    pearl: [0.96, 0.88, 1],
+    softness: 0.082,
+    span: 0.15,
+    warm: [1, 0.34, 0.72],
+  },
+  prism: {
+    bend: 0.76,
+    bloom: 0.58,
+    cool: [0.28, 0.78, 0.86],
+    facet: 12,
+    ink: [0.2, 0.16, 0.26],
+    pearl: [0.94, 0.82, 0.9],
+    softness: 0.07,
+    span: 0.14,
+    warm: [0.98, 0.28, 0.58],
+  },
+} as const satisfies Record<
+  PrismSweepTone,
+  {
+    bend: number;
+    bloom: number;
+    cool: readonly [number, number, number];
+    facet: number;
+    ink: readonly [number, number, number];
+    pearl: readonly [number, number, number];
+    softness: number;
+    span: number;
+    warm: readonly [number, number, number];
+  }
+>;
+
+interface UniformMap {
+  uAxis: WebGLUniformLocation | null;
+  uBend: WebGLUniformLocation | null;
+  uBloom: WebGLUniformLocation | null;
+  uClock: WebGLUniformLocation | null;
+  uCool: WebGLUniformLocation | null;
+  uFacet: WebGLUniformLocation | null;
+  uForward: WebGLUniformLocation | null;
+  uInk: WebGLUniformLocation | null;
+  uOpacity: WebGLUniformLocation | null;
+  uPearl: WebGLUniformLocation | null;
+  uResolution: WebGLUniformLocation | null;
+  uSoftness: WebGLUniformLocation | null;
+  uSpan: WebGLUniformLocation | null;
+  uTravel: WebGLUniformLocation | null;
+  uWarm: WebGLUniformLocation | null;
+}
+
+interface ShaderController {
+  destroy: () => void;
+  getTravel: () => number;
+  setDirection: (direction: PrismSweepDirection) => void;
+  setOpacity: (opacity: number) => void;
+  setTone: (tone: PrismSweepTone) => void;
+  setTravel: (travel: number) => void;
+}
+
+interface ShaderControllerState {
+  animationFrame: number;
+  buffer: WebGLBuffer | null;
+  direction: PrismSweepDirection;
+  gl: WebGLRenderingContext;
+  opacity: number;
+  program: WebGLProgram;
+  startedAt: number;
+  tone: PrismSweepTone;
+  travel: number;
+  uniforms: UniformMap;
+}
+
+interface SweepPlayback {
+  cancel: () => void;
+}
+
+const clamp01 = (value: number) => Math.max(0, Math.min(1, value));
+
+const directionToShader = (direction: PrismSweepDirection) => {
+  switch (direction) {
+    case "right":
+      return { axis: 0, forward: -1 };
+    case "up":
+      return { axis: 1, forward: 1 };
+    case "down":
+      return { axis: 1, forward: -1 };
+    default:
+      return { axis: 0, forward: 1 };
+  }
+};
+
+const easePrismTravel = (progress: number) => {
+  const clamped = clamp01(progress);
+  return 1 - (1 - clamped) ** 3.35;
+};
+
+const easeOpacityOut = (progress: number) => {
+  const clamped = clamp01(progress);
+  return clamped * clamped * (3 - 2 * clamped);
+};
+
+const compileShader = (
+  gl: WebGLRenderingContext,
+  type: number,
+  source: string
+) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    return null;
+  }
+
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+};
+
+const createProgram = (gl: WebGLRenderingContext) => {
+  const vertex = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+  const fragment = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+
+  if (!(vertex && fragment)) {
+    return null;
+  }
+
+  const program = gl.createProgram();
+  if (!program) {
+    return null;
+  }
+
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+
+  return program;
+};
+
+const resizeCanvas = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) => {
+  const rect = canvas.getBoundingClientRect();
+  const dpr = Math.min(window.devicePixelRatio || 1, MAX_DEVICE_PIXEL_RATIO);
+  const width = Math.max(1, Math.round(rect.width * dpr));
+  const height = Math.max(1, Math.round(rect.height * dpr));
+
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+
+  gl.viewport(0, 0, width, height);
+};
+
+const getUniforms = (gl: WebGLRenderingContext, program: WebGLProgram) => ({
+  uAxis: gl.getUniformLocation(program, "uAxis"),
+  uBend: gl.getUniformLocation(program, "uBend"),
+  uBloom: gl.getUniformLocation(program, "uBloom"),
+  uClock: gl.getUniformLocation(program, "uClock"),
+  uCool: gl.getUniformLocation(program, "uCool"),
+  uFacet: gl.getUniformLocation(program, "uFacet"),
+  uForward: gl.getUniformLocation(program, "uForward"),
+  uInk: gl.getUniformLocation(program, "uInk"),
+  uOpacity: gl.getUniformLocation(program, "uOpacity"),
+  uPearl: gl.getUniformLocation(program, "uPearl"),
+  uResolution: gl.getUniformLocation(program, "uResolution"),
+  uSoftness: gl.getUniformLocation(program, "uSoftness"),
+  uSpan: gl.getUniformLocation(program, "uSpan"),
+  uTravel: gl.getUniformLocation(program, "uTravel"),
+  uWarm: gl.getUniformLocation(program, "uWarm"),
+});
+
+const setRgbUniform = (
+  gl: WebGLRenderingContext,
+  location: WebGLUniformLocation | null,
+  value: readonly [number, number, number]
+) => {
+  gl.uniform3f(location, value[0], value[1], value[2]);
+};
+
+const drawShader = (
+  canvas: HTMLCanvasElement,
+  state: ShaderControllerState
+) => {
+  const { gl, uniforms } = state;
+  const directionUniforms = directionToShader(state.direction);
+  const toneConfig = TONE_CONFIGS[state.tone];
+
+  resizeCanvas(canvas, gl);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.uniform2f(uniforms.uResolution, canvas.width, canvas.height);
+  gl.uniform1f(uniforms.uClock, (performance.now() - state.startedAt) / 1000);
+  gl.uniform1f(uniforms.uTravel, state.travel);
+  gl.uniform1f(uniforms.uOpacity, state.opacity);
+  gl.uniform1f(uniforms.uAxis, directionUniforms.axis);
+  gl.uniform1f(uniforms.uForward, directionUniforms.forward);
+  gl.uniform1f(uniforms.uSpan, toneConfig.span);
+  gl.uniform1f(uniforms.uSoftness, toneConfig.softness);
+  gl.uniform1f(uniforms.uBend, toneConfig.bend);
+  gl.uniform1f(uniforms.uFacet, toneConfig.facet);
+  gl.uniform1f(uniforms.uBloom, toneConfig.bloom);
+  setRgbUniform(gl, uniforms.uInk, toneConfig.ink);
+  setRgbUniform(gl, uniforms.uPearl, toneConfig.pearl);
+  setRgbUniform(gl, uniforms.uWarm, toneConfig.warm);
+  setRgbUniform(gl, uniforms.uCool, toneConfig.cool);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+};
+
+const createShaderController = (
+  canvas: HTMLCanvasElement,
+  direction: PrismSweepDirection,
+  tone: PrismSweepTone
+) => {
+  const gl = canvas.getContext("webgl", {
+    alpha: true,
+    antialias: false,
+    depth: false,
+    premultipliedAlpha: true,
+    preserveDrawingBuffer: false,
+    stencil: false,
+  });
+
+  if (!gl) {
+    return null;
+  }
+
+  const program = createProgram(gl);
+  if (!program) {
+    return null;
+  }
+
+  const buffer = gl.createBuffer();
+  const position = gl.getAttribLocation(program, "position");
+
+  // biome-ignore lint/correctness/useHookAtTopLevel: WebGLRenderingContext.useProgram is not a React hook.
+  gl.useProgram(program);
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, FULLSCREEN_TRIANGLES, gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(position);
+  gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+  const state: ShaderControllerState = {
+    animationFrame: 0,
+    buffer,
+    direction,
+    gl,
+    opacity: HIDDEN_OPACITY,
+    program,
+    startedAt: performance.now(),
+    tone,
+    travel: 0,
+    uniforms: getUniforms(gl, program),
+  };
+
+  let destroyed = false;
+  const tick = () => {
+    if (destroyed) {
+      return;
+    }
+
+    drawShader(canvas, state);
+    state.animationFrame = requestAnimationFrame(tick);
+  };
+
+  state.animationFrame = requestAnimationFrame(tick);
+
+  return {
+    destroy: () => {
+      destroyed = true;
+      cancelAnimationFrame(state.animationFrame);
+      state.gl.clear(state.gl.COLOR_BUFFER_BIT);
+      if (state.buffer) {
+        state.gl.deleteBuffer(state.buffer);
+      }
+      state.gl.deleteProgram(state.program);
+    },
+    getTravel: () => state.travel,
+    setDirection: (nextDirection: PrismSweepDirection) => {
+      state.direction = nextDirection;
+    },
+    setOpacity: (opacity: number) => {
+      state.opacity = clamp01(opacity);
+    },
+    setTone: (nextTone: PrismSweepTone) => {
+      state.tone = nextTone;
+    },
+    setTravel: (travel: number) => {
+      state.travel = clamp01(travel);
+    },
+  } satisfies ShaderController;
+};
+
+const useShaderController = ({
+  canvasRef,
+  direction,
+  tone,
+}: {
+  canvasRef: RefObject<HTMLCanvasElement | null>;
+  direction: PrismSweepDirection;
+  tone: PrismSweepTone;
+}) => {
+  const controllerRef = useRef<ShaderController | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+
+    const controller = createShaderController(canvas, direction, tone);
+    controllerRef.current = controller;
+
+    return () => {
+      controller?.destroy();
+      controllerRef.current = null;
+    };
+  }, [canvasRef, direction, tone]);
+
+  useEffect(() => {
+    controllerRef.current?.setDirection(direction);
+    controllerRef.current?.setTone(tone);
+  }, [direction, tone]);
+
+  return controllerRef;
+};
+
+const playFrameSweep = (
+  controller: ShaderController,
+  {
+    direction,
+    duration,
+    midpoint,
+    onComplete,
+    onMidpoint,
+    outroMs,
+  }: {
+    direction: PrismSweepDirection;
+    duration: number;
+    midpoint: number;
+    onComplete: () => void;
+    onMidpoint: () => void;
+    outroMs: number;
+  }
+): SweepPlayback => {
+  let animationFrame = 0;
+  let midpointReached = false;
+  let cancelled = false;
+  const startedAt = performance.now();
+  const startTravel = controller.getTravel();
+  const sweepMs = Math.max(MIN_PHASE_MS, duration * (1 - startTravel));
+
+  controller.setDirection(direction);
+  controller.setOpacity(VISIBLE_OPACITY);
+
+  const finishSweep = () => {
+    const outroStartedAt = performance.now();
+
+    const fadeOut = () => {
+      if (cancelled) {
+        return;
+      }
+
+      const outroRaw = clamp01((performance.now() - outroStartedAt) / outroMs);
+      controller.setOpacity(VISIBLE_OPACITY * (1 - easeOpacityOut(outroRaw)));
+
+      if (outroRaw < 1) {
+        animationFrame = requestAnimationFrame(fadeOut);
+        return;
+      }
+
+      controller.setOpacity(HIDDEN_OPACITY);
+      controller.setTravel(0);
+      onComplete();
+    };
+
+    animationFrame = requestAnimationFrame(fadeOut);
+  };
+
+  const advance = () => {
+    if (cancelled) {
+      return;
+    }
+
+    const raw = clamp01((performance.now() - startedAt) / sweepMs);
+    const nextTravel = startTravel + (1 - startTravel) * easePrismTravel(raw);
+    controller.setTravel(nextTravel);
+
+    if (!(midpointReached || nextTravel < midpoint)) {
+      midpointReached = true;
+      onMidpoint();
+    }
+
+    if (raw < 1) {
+      animationFrame = requestAnimationFrame(advance);
+      return;
+    }
+
+    if (!midpointReached) {
+      onMidpoint();
+    }
+    controller.setTravel(1);
+    finishSweep();
+  };
+
+  animationFrame = requestAnimationFrame(advance);
+
+  return {
+    cancel: () => {
+      cancelled = true;
+      cancelAnimationFrame(animationFrame);
+    },
+  };
+};
+
+/**
+ * PrismSweepTransition — a frame-level route/state transition with a custom
+ * faceted caustic shader tuned for SmoothUI previews.
+ */
+const PrismSweepTransition = ({
+  children,
+  className,
+  direction = "left",
+  duration = DEFAULT_DURATION_MS,
+  onRest,
+  tone = "prism",
+  transitionKey,
+}: PrismSweepTransitionProps) => {
+  const shouldReduceMotion = useReducedMotion();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const playbackRef = useRef<SweepPlayback | null>(null);
+  const [renderedChildren, setRenderedChildren] = useState(children);
+  const [isSweeping, setIsSweeping] = useState(false);
+  const previousKey = useRef(transitionKey);
+  const controllerRef = useShaderController({ canvasRef, direction, tone });
+
+  useEffect(() => {
+    if (previousKey.current === transitionKey) {
+      setRenderedChildren(children);
+      return;
+    }
+
+    previousKey.current = transitionKey;
+    playbackRef.current?.cancel();
+
+    if (shouldReduceMotion) {
+      setRenderedChildren(children);
+      setIsSweeping(false);
+      onRest?.();
+      return;
+    }
+
+    const controller = controllerRef.current;
+    if (!controller) {
+      setRenderedChildren(children);
+      setIsSweeping(false);
+      onRest?.();
+      return;
+    }
+
+    setIsSweeping(true);
+    playbackRef.current = playFrameSweep(controller, {
+      direction,
+      duration: Math.max(MIN_PHASE_MS, duration),
+      midpoint: CONTENT_SWAP_RATIO,
+      onComplete: () => {
+        setIsSweeping(false);
+        playbackRef.current = null;
+        onRest?.();
+      },
+      onMidpoint: () => setRenderedChildren(children),
+      outroMs: OUTRO_MS,
+    });
+
+    return () => {
+      playbackRef.current?.cancel();
+    };
+  }, [
+    children,
+    controllerRef,
+    direction,
+    duration,
+    onRest,
+    shouldReduceMotion,
+    transitionKey,
+  ]);
+
+  return (
+    <div
+      className={cn(
+        "relative isolate overflow-hidden rounded-2xl bg-background text-foreground",
+        className
+      )}
+      data-sweeping={isSweeping ? "true" : "false"}
+    >
+      <div className="relative z-0">{renderedChildren}</div>
+      <canvas
+        className={cn(
+          "pointer-events-none absolute inset-0 z-10 h-full w-full transition-opacity duration-75",
+          isSweeping && !shouldReduceMotion ? "opacity-100" : "opacity-0"
+        )}
+        ref={canvasRef}
+      />
+    </div>
+  );
+};
+
+export default PrismSweepTransition;
diff --git a/packages/smoothui/components/prism-sweep-transition/package.json b/packages/smoothui/components/prism-sweep-transition/package.json
new file mode 100644
index 00000000..a5ce8e0b
--- /dev/null
+++ b/packages/smoothui/components/prism-sweep-transition/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@repo/prism-sweep-transition",
+  "description": "A persistent WebGL prism sweep transition wrapper for route and state changes.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "feedback",
+    "tags": [
+      "transition",
+      "page-transition",
+      "route-transition",
+      "prism",
+      "sweep",
+      "gradient",
+      "motion",
+      "state-change"
+    ],
+    "complexity": "moderate",
+    "animationType": "tween",
+    "useCases": [
+      "Celebrate a successful publish or submit flow",
+      "Punctuate major route changes with a shader-inspired liquid sweep",
+      "Wrap demos, previews, or onboarding steps with a premium liquid state transition"
+    ],
+    "compositionHints": [
+      "Trigger sparingly for meaningful state changes, not every hover or click",
+      "Pair with cards, dashboards, or confirmation screens where the new state appears under the sweep"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/prism-sweep-transition/tsconfig.json b/packages/smoothui/components/prism-sweep-transition/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/prism-sweep-transition/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/product-card/index.tsx b/packages/smoothui/components/product-card/index.tsx
index c3e5608d..4c202c38 100644
--- a/packages/smoothui/components/product-card/index.tsx
+++ b/packages/smoothui/components/product-card/index.tsx
@@ -243,6 +243,7 @@ export default function ProductCard({
               "transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]",
             isHoverDevice && !shouldReduceMotion && "group-hover:scale-105"
           )}
+          draggable={false}
           src={image}
         />
 
diff --git a/packages/smoothui/components/radial-circles-transition/__tests__/radial-circles-transition.test.tsx b/packages/smoothui/components/radial-circles-transition/__tests__/radial-circles-transition.test.tsx
new file mode 100644
index 00000000..367cbd10
--- /dev/null
+++ b/packages/smoothui/components/radial-circles-transition/__tests__/radial-circles-transition.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import RadialCirclesTransition from "../index";
+
+describe("RadialCirclesTransition", () => {
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <RadialCirclesTransition transitionKey="draft">
+        Draft saved
+      </RadialCirclesTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/radial-circles-transition/index.tsx b/packages/smoothui/components/radial-circles-transition/index.tsx
new file mode 100644
index 00000000..f442edc4
--- /dev/null
+++ b/packages/smoothui/components/radial-circles-transition/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import SdfBlobTransition from "../sdf-blob-transition";
+
+export interface RadialCirclesTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const RadialCirclesTransition = ({
+  children,
+  className,
+  duration = 1120,
+  onRest,
+  transitionKey,
+}: RadialCirclesTransitionProps) => (
+  <SdfBlobTransition
+    className={className}
+    duration={duration}
+    onRest={onRest}
+    transitionKey={transitionKey}
+    variant="radial"
+  >
+    {children}
+  </SdfBlobTransition>
+);
+
+export default RadialCirclesTransition;
diff --git a/packages/smoothui/components/radial-circles-transition/package.json b/packages/smoothui/components/radial-circles-transition/package.json
new file mode 100644
index 00000000..cf30be67
--- /dev/null
+++ b/packages/smoothui/components/radial-circles-transition/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@repo/radial-circles-transition",
+  "description": "A radial SDF circle pattern transition inspired by the Codrops radial circles step.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/sdf-blob-transition": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "sdf",
+      "codrops",
+      "state-change"
+    ],
+    "complexity": "moderate",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/radial-circles-transition/tsconfig.json b/packages/smoothui/components/radial-circles-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/radial-circles-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/scale-down-fade/index.tsx b/packages/smoothui/components/scale-down-fade/index.tsx
new file mode 100644
index 00000000..37d79f7c
--- /dev/null
+++ b/packages/smoothui/components/scale-down-fade/index.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface ScaleDownFadeProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.52;
+const MS = 1000;
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+/**
+ * ScaleDownFade — subtle premium settle-in where the text enters slightly
+ * scaled up and drifts down to its natural size. The whole text animates as
+ * a single element. From the animate-text catalog (`scale-down-fade`).
+ * Safe default for product UIs where copy should feel polished but not animated.
+ */
+export default function ScaleDownFade({
+  children,
+  className = "",
+  delay = 0,
+  triggerOnView = false,
+}: ScaleDownFadeProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+
+  return (
+    <motion.span
+      animate={play ? { opacity: 1, y: 0, scale: 1 } : undefined}
+      aria-label={children}
+      className={className}
+      initial={
+        shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 8, scale: 1.04 }
+      }
+      ref={ref}
+      style={{ display: "inline-block" }}
+      transition={
+        shouldReduceMotion
+          ? { duration: 0 }
+          : {
+              duration: DURATION_S,
+              delay: delay / MS,
+              ease: EASE,
+            }
+      }
+    >
+      {children}
+    </motion.span>
+  );
+}
diff --git a/packages/smoothui/components/scale-down-fade/package.json b/packages/smoothui/components/scale-down-fade/package.json
new file mode 100644
index 00000000..7c9b2a79
--- /dev/null
+++ b/packages/smoothui/components/scale-down-fade/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@repo/scale-down-fade",
+  "description": "A ScaleDownFade text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "scale",
+      "fade",
+      "whole",
+      "premium",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Apple product copy transitions",
+      "Polished headline entrance where motion stays quiet",
+      "Default text entrance for product UIs"
+    ],
+    "compositionHints": [
+      "Safe default for product UIs where copy should feel polished but not animated",
+      "Combine with a background reveal for a full section entrance"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/scale-down-fade/tsconfig.json b/packages/smoothui/components/scale-down-fade/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/scale-down-fade/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/scramble-hover/index.tsx b/packages/smoothui/components/scramble-hover/index.tsx
index da7de655..7405745c 100644
--- a/packages/smoothui/components/scramble-hover/index.tsx
+++ b/packages/smoothui/components/scramble-hover/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
 
diff --git a/packages/smoothui/components/scrollable-card-stack/__tests__/scrollable-card-stack.test.tsx b/packages/smoothui/components/scrollable-card-stack/__tests__/scrollable-card-stack.test.tsx
index 3ad26602..2ac19cd4 100644
--- a/packages/smoothui/components/scrollable-card-stack/__tests__/scrollable-card-stack.test.tsx
+++ b/packages/smoothui/components/scrollable-card-stack/__tests__/scrollable-card-stack.test.tsx
@@ -1,23 +1,143 @@
-import { describe, expect, it } from "vitest";
-import { render } from "../../../test-utils/render";
+import { act } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "../../../test-utils/render";
 import ScrollableCardStack from "../index";
 
+const buildItems = (count: number) =>
+  Array.from({ length: count }, (_, i) => ({
+    id: `${i + 1}`,
+    name: `User ${i + 1}`,
+    handle: `@user${i + 1}`,
+    avatar: `/avatar-${i + 1}.jpg`,
+    image: `/image-${i + 1}.jpg`,
+    href: `#user-${i + 1}`,
+  }));
+
+const mockMatchMedia = (matches: boolean) => {
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+};
+
 describe("ScrollableCardStack", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockMatchMedia(false);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it("renders without throwing", () => {
-    const { container } = render(
-      <ScrollableCardStack
-        items={[
-          {
-            id: "1",
-            name: "Test User",
-            handle: "@test",
-            avatar: "/avatar.jpg",
-            image: "/image.jpg",
-            href: "#",
-          },
-        ]}
-      />
-    );
+    const { container } = render(<ScrollableCardStack items={buildItems(1)} />);
     expect(container).toBeInTheDocument();
   });
+
+  it("renders a navigation dot per item and the current position for screen readers", () => {
+    render(<ScrollableCardStack items={buildItems(3)} />);
+
+    expect(screen.getAllByRole("tab")).toHaveLength(3);
+    expect(screen.getByText(/Card 1 of 3 selected/)).toBeInTheDocument();
+  });
+
+  it("jumps to the clicked card and updates the selected tab", () => {
+    render(<ScrollableCardStack items={buildItems(3)} />);
+
+    const tabs = screen.getAllByRole("tab");
+    fireEvent.click(tabs[2]);
+
+    expect(tabs[2]).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText(/Card 3 of 3 selected/)).toBeInTheDocument();
+  });
+
+  it("advances one card at a time with arrow keys", () => {
+    render(<ScrollableCardStack items={buildItems(3)} />);
+
+    const container = screen.getByRole("application");
+    fireEvent.keyDown(container, { key: "ArrowDown" });
+
+    expect(screen.getByText(/Card 2 of 3 selected/)).toBeInTheDocument();
+  });
+
+  it("does not scroll past the last card", () => {
+    render(<ScrollableCardStack items={buildItems(2)} />);
+
+    const container = screen.getByRole("application");
+    fireEvent.keyDown(container, { key: "ArrowDown" });
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    fireEvent.keyDown(container, { key: "ArrowDown" });
+
+    expect(screen.getByText(/Card 2 of 2 selected/)).toBeInTheDocument();
+  });
+
+  it("jumps to the first and last card with Home and End", () => {
+    render(<ScrollableCardStack items={buildItems(4)} />);
+
+    const container = screen.getByRole("application");
+    fireEvent.keyDown(container, { key: "End" });
+    expect(screen.getByText(/Card 4 of 4 selected/)).toBeInTheDocument();
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    fireEvent.keyDown(container, { key: "Home" });
+    expect(screen.getByText(/Card 1 of 4 selected/)).toBeInTheDocument();
+  });
+
+  it("ignores rapid repeated scrolls within the minimum interval", () => {
+    render(<ScrollableCardStack items={buildItems(3)} />);
+
+    const container = screen.getByRole("application");
+    fireEvent.keyDown(container, { key: "ArrowDown" });
+    fireEvent.keyDown(container, { key: "ArrowDown" });
+
+    expect(screen.getByText(/Card 2 of 3 selected/)).toBeInTheDocument();
+  });
+
+  it("advances on a touch swipe past the threshold", () => {
+    render(<ScrollableCardStack items={buildItems(3)} />);
+
+    const container = screen.getByRole("application");
+    fireEvent.touchStart(container, {
+      touches: [{ clientY: 300 }],
+    });
+    fireEvent.touchMove(container, {
+      touches: [{ clientY: 100 }],
+    });
+    fireEvent.touchEnd(container);
+
+    expect(screen.getByText(/Card 2 of 3 selected/)).toBeInTheDocument();
+  });
+
+  it("ignores touch moves under the swipe threshold", () => {
+    render(<ScrollableCardStack items={buildItems(3)} />);
+
+    const container = screen.getByRole("application");
+    fireEvent.touchStart(container, {
+      touches: [{ clientY: 300 }],
+    });
+    fireEvent.touchMove(container, {
+      touches: [{ clientY: 280 }],
+    });
+    fireEvent.touchEnd(container);
+
+    expect(screen.getByText(/Card 1 of 3 selected/)).toBeInTheDocument();
+  });
+
+  it("simplifies transforms when reduced motion is preferred", () => {
+    mockMatchMedia(true);
+    const { container } = render(<ScrollableCardStack items={buildItems(2)} />);
+
+    expect(container.querySelector('[data-active="true"]')).toBeInTheDocument();
+  });
 });
diff --git a/packages/smoothui/components/scrollable-card-stack/index.tsx b/packages/smoothui/components/scrollable-card-stack/index.tsx
index f9ab82f7..73582214 100644
--- a/packages/smoothui/components/scrollable-card-stack/index.tsx
+++ b/packages/smoothui/components/scrollable-card-stack/index.tsx
@@ -398,6 +398,7 @@ const ScrollableCardStack: React.FC<ScrollableCardStackProps> = ({
                     aria-hidden="true"
                     className="absolute inset-0 h-full w-full object-cover text-transparent"
                     decoding="async"
+                    draggable={false}
                     height={10}
                     src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZjNmNGY2Ii8+PC9zdmc+"
                     style={{
@@ -438,6 +439,7 @@ const ScrollableCardStack: React.FC<ScrollableCardStackProps> = ({
                   <img
                     alt={`${item.name}'s avatar`}
                     className="mr-1 h-5 w-5 overflow-hidden rounded-full"
+                    draggable={false}
                     height={20}
                     src={item.avatar}
                     style={{
diff --git a/packages/smoothui/components/scrubber/__tests__/scrubber.test.tsx b/packages/smoothui/components/scrubber/__tests__/scrubber.test.tsx
index 48882aa0..fa37ebf0 100644
--- a/packages/smoothui/components/scrubber/__tests__/scrubber.test.tsx
+++ b/packages/smoothui/components/scrubber/__tests__/scrubber.test.tsx
@@ -1,10 +1,189 @@
-import { describe, expect, it } from "vitest";
-import { render } from "../../../test-utils/render";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "../../../test-utils/render";
 import Scrubber from "../index";
 
+const mockTrackRect = (track: Element) => {
+  vi.spyOn(track, "getBoundingClientRect").mockReturnValue({
+    left: 0,
+    right: 200,
+    top: 0,
+    bottom: 36,
+    width: 200,
+    height: 36,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  });
+};
+
 describe("Scrubber", () => {
+  beforeEach(() => {
+    if (!Element.prototype.setPointerCapture) {
+      Element.prototype.setPointerCapture = vi.fn();
+    }
+    if (!Element.prototype.releasePointerCapture) {
+      Element.prototype.releasePointerCapture = vi.fn();
+    }
+  });
+
   it("renders without throwing", () => {
     const { container } = render(<Scrubber />);
     expect(container).toBeInTheDocument();
   });
+
+  it("renders the label and formatted value", () => {
+    render(<Scrubber decimals={1} defaultValue={0.5} label="Opacity" />);
+
+    expect(screen.getByText("Opacity")).toBeInTheDocument();
+    expect(screen.getByText("0.5")).toBeInTheDocument();
+  });
+
+  it("drives the value via pointer drag and calls onValueChange", () => {
+    const onValueChange = vi.fn();
+    render(
+      <Scrubber
+        decimals={2}
+        max={1}
+        min={0}
+        onValueChange={onValueChange}
+        step={0.01}
+      />
+    );
+
+    const track = screen.getByRole("slider");
+    mockTrackRect(track);
+
+    fireEvent.pointerDown(track, { clientX: 100, pointerId: 1 });
+    expect(onValueChange).toHaveBeenCalledWith(0.5);
+
+    fireEvent.pointerMove(track, { clientX: 200, pointerId: 1 });
+    expect(onValueChange).toHaveBeenLastCalledWith(1);
+
+    fireEvent.pointerUp(track, { pointerId: 1 });
+    expect(track).toHaveAttribute("aria-valuenow", "1");
+  });
+
+  it("clamps the dragged value to min/max", () => {
+    const onValueChange = vi.fn();
+    render(
+      <Scrubber max={1} min={0} onValueChange={onValueChange} step={0.01} />
+    );
+
+    const track = screen.getByRole("slider");
+    mockTrackRect(track);
+
+    fireEvent.pointerDown(track, { clientX: -50, pointerId: 1 });
+    expect(onValueChange).toHaveBeenCalledWith(0);
+
+    fireEvent.pointerMove(track, { clientX: 999, pointerId: 1 });
+    expect(onValueChange).toHaveBeenLastCalledWith(1);
+  });
+
+  it("ignores pointer move while not dragging", () => {
+    const onValueChange = vi.fn();
+    render(<Scrubber onValueChange={onValueChange} />);
+
+    const track = screen.getByRole("slider");
+    mockTrackRect(track);
+
+    fireEvent.pointerMove(track, { clientX: 100, pointerId: 1 });
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it("does not update internal value when controlled", () => {
+    const onValueChange = vi.fn();
+    render(
+      <Scrubber
+        decimals={2}
+        max={1}
+        min={0}
+        onValueChange={onValueChange}
+        value={0.2}
+      />
+    );
+
+    const track = screen.getByRole("slider");
+    mockTrackRect(track);
+
+    fireEvent.pointerDown(track, { clientX: 200, pointerId: 1 });
+    expect(onValueChange).toHaveBeenCalledWith(1);
+    // Controlled: displayed value stays at the prop value.
+    expect(track).toHaveAttribute("aria-valuenow", "0.2");
+  });
+
+  it("adjusts the value with arrow keys", () => {
+    const onValueChange = vi.fn();
+    render(
+      <Scrubber
+        defaultValue={5}
+        max={10}
+        min={0}
+        onValueChange={onValueChange}
+        step={1}
+      />
+    );
+
+    const track = screen.getByRole("slider");
+    fireEvent.keyDown(track, { key: "ArrowRight" });
+    expect(onValueChange).toHaveBeenLastCalledWith(6);
+
+    fireEvent.keyDown(track, { key: "ArrowLeft" });
+    expect(onValueChange).toHaveBeenLastCalledWith(5);
+
+    fireEvent.keyDown(track, { key: "ArrowUp" });
+    expect(onValueChange).toHaveBeenLastCalledWith(6);
+
+    fireEvent.keyDown(track, { key: "ArrowDown" });
+    expect(onValueChange).toHaveBeenLastCalledWith(5);
+  });
+
+  it("jumps to min/max with Home/End keys", () => {
+    const onValueChange = vi.fn();
+    render(
+      <Scrubber
+        defaultValue={0.5}
+        max={1}
+        min={0}
+        onValueChange={onValueChange}
+      />
+    );
+
+    const track = screen.getByRole("slider");
+    fireEvent.keyDown(track, { key: "End" });
+    expect(onValueChange).toHaveBeenLastCalledWith(1);
+
+    fireEvent.keyDown(track, { key: "Home" });
+    expect(onValueChange).toHaveBeenLastCalledWith(0);
+  });
+
+  it("ignores unrelated keys", () => {
+    const onValueChange = vi.fn();
+    render(<Scrubber defaultValue={0.5} onValueChange={onValueChange} />);
+
+    const track = screen.getByRole("slider");
+    fireEvent.keyDown(track, { key: "a" });
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it("toggles hover state on mouse enter/leave", () => {
+    render(<Scrubber />);
+
+    const track = screen.getByRole("slider");
+    fireEvent.mouseEnter(track);
+    fireEvent.mouseLeave(track);
+
+    expect(track).toBeInTheDocument();
+  });
+
+  it("renders tick marks based on the ticks prop", () => {
+    const { container } = render(<Scrubber ticks={4} />);
+
+    expect(container.querySelectorAll(".bg-foreground\\/25").length).toBe(4);
+  });
+
+  it("hides tick marks when ticks is 0", () => {
+    const { container } = render(<Scrubber ticks={0} />);
+
+    expect(container.querySelectorAll(".bg-foreground\\/25").length).toBe(0);
+  });
 });
diff --git a/packages/smoothui/components/scrubber/index.tsx b/packages/smoothui/components/scrubber/index.tsx
index b1a8778e..4e01f786 100644
--- a/packages/smoothui/components/scrubber/index.tsx
+++ b/packages/smoothui/components/scrubber/index.tsx
@@ -162,8 +162,8 @@ const Scrubber = ({
         ref={trackRef}
         role="slider"
         style={{
-          height: 52,
-          borderRadius: 12,
+          height: 36,
+          borderRadius: 8,
           touchAction: "none",
         }}
         tabIndex={0}
@@ -172,7 +172,7 @@ const Scrubber = ({
         <div
           className="pointer-events-none absolute inset-y-0 left-0 bg-foreground/14"
           style={{
-            borderRadius: 12,
+            borderRadius: 8,
             width: `${percentage}%`,
             transition: isDragging
               ? "none"
@@ -192,7 +192,7 @@ const Scrubber = ({
                   style={{
                     left: `${pos}%`,
                     width: 1,
-                    height: 8,
+                    height: 6,
                     borderRadius: 999,
                     transform: "translateX(-50%) translateY(-50%)",
                   }}
@@ -209,7 +209,7 @@ const Scrubber = ({
             top: "50%",
             left: `${percentage}%`,
             transform: "translateX(-50%) translateY(-50%)",
-            marginLeft: -6,
+            marginLeft: -5,
             zIndex: 3,
             transition: isDragging
               ? "none"
@@ -224,8 +224,8 @@ const Scrubber = ({
             }}
             className="bg-foreground/90"
             style={{
-              width: 5,
-              height: 34,
+              width: 4,
+              height: 22,
               borderRadius: 999,
             }}
             transition={springConfig}
@@ -234,9 +234,10 @@ const Scrubber = ({
 
         {/* Label */}
         <div
-          className="pointer-events-none absolute top-1/2 left-[18px] -translate-y-1/2 whitespace-nowrap text-foreground"
+          className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 whitespace-nowrap text-foreground"
           style={{
-            fontSize: 17,
+            fontSize: 13,
+            fontWeight: 500,
             zIndex: 4,
           }}
         >
@@ -245,12 +246,12 @@ const Scrubber = ({
 
         {/* Value display */}
         <div
-          className="pointer-events-none absolute top-1/2 right-[14px] -translate-y-1/2 text-foreground"
+          className="pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 text-foreground"
           style={{
             zIndex: 4,
             fontFamily: "ui-monospace, monospace",
             fontVariantNumeric: "tabular-nums",
-            fontSize: 15,
+            fontSize: 13,
             fontWeight: 500,
           }}
         >
diff --git a/packages/smoothui/components/sdf-blob-transition/__tests__/sdf-blob-transition.test.tsx b/packages/smoothui/components/sdf-blob-transition/__tests__/sdf-blob-transition.test.tsx
new file mode 100644
index 00000000..9c5933eb
--- /dev/null
+++ b/packages/smoothui/components/sdf-blob-transition/__tests__/sdf-blob-transition.test.tsx
@@ -0,0 +1,158 @@
+import { useReducedMotion } from "motion/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "../../../test-utils/render";
+import {
+  flushFrames,
+  installWebglMock,
+  runFramesFor,
+  uninstallWebglMock,
+} from "../../../test-utils/webgl-mock";
+import SdfBlobTransition, { type SdfBlobVariant } from "../index";
+
+vi.mock("motion/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("motion/react")>();
+  return { ...actual, useReducedMotion: vi.fn(() => false) };
+});
+
+const ALL_VARIANTS: SdfBlobVariant[] = [
+  "circle",
+  "warped",
+  "merge",
+  "radial",
+  "final",
+];
+
+describe("SdfBlobTransition", () => {
+  beforeEach(() => {
+    installWebglMock();
+  });
+
+  afterEach(() => {
+    uninstallWebglMock();
+    vi.mocked(useReducedMotion).mockReturnValue(false);
+  });
+
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <SdfBlobTransition transitionKey="draft">Draft saved</SdfBlobTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+
+  it("runs the blob morph, swaps content at the midpoint, and calls onRest", () => {
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <SdfBlobTransition duration={100} onRest={onRest} transitionKey="a">
+        First
+      </SdfBlobTransition>
+    );
+
+    expect(getByText("First")).toBeInTheDocument();
+
+    rerender(
+      <SdfBlobTransition duration={100} onRest={onRest} transitionKey="b">
+        Second
+      </SdfBlobTransition>
+    );
+
+    runFramesFor(400);
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("skips the animation and swaps content immediately when reduced motion is preferred", () => {
+    vi.mocked(useReducedMotion).mockReturnValue(true);
+
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <SdfBlobTransition onRest={onRest} transitionKey="a">
+        First
+      </SdfBlobTransition>
+    );
+
+    rerender(
+      <SdfBlobTransition onRest={onRest} transitionKey="b">
+        Second
+      </SdfBlobTransition>
+    );
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("swaps content immediately when WebGL is unavailable", () => {
+    uninstallWebglMock();
+    installWebglMock({ supported: false });
+
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <SdfBlobTransition onRest={onRest} transitionKey="a">
+        First
+      </SdfBlobTransition>
+    );
+
+    rerender(
+      <SdfBlobTransition onRest={onRest} transitionKey="b">
+        Second
+      </SdfBlobTransition>
+    );
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not throw when unmounted mid-animation", () => {
+    const { rerender, unmount } = render(
+      <SdfBlobTransition duration={200} transitionKey="a">
+        First
+      </SdfBlobTransition>
+    );
+
+    rerender(
+      <SdfBlobTransition duration={200} transitionKey="b">
+        Second
+      </SdfBlobTransition>
+    );
+
+    flushFrames(2);
+
+    expect(() => unmount()).not.toThrow();
+    expect(() => flushFrames(2)).not.toThrow();
+  });
+
+  for (const variant of ALL_VARIANTS) {
+    it(`renders and animates the "${variant}" variant without throwing`, () => {
+      const onRest = vi.fn();
+      const { getByText, rerender } = render(
+        <SdfBlobTransition
+          duration={80}
+          onRest={onRest}
+          transitionKey="a"
+          variant={variant}
+        >
+          First
+        </SdfBlobTransition>
+      );
+
+      rerender(
+        <SdfBlobTransition
+          duration={80}
+          onRest={onRest}
+          transitionKey="b"
+          variant={variant}
+        >
+          Second
+        </SdfBlobTransition>
+      );
+
+      expect(() => runFramesFor(300)).not.toThrow();
+      expect(getByText("Second")).toBeInTheDocument();
+      expect(onRest).toHaveBeenCalledTimes(1);
+    });
+  }
+});
diff --git a/packages/smoothui/components/sdf-blob-transition/index.tsx b/packages/smoothui/components/sdf-blob-transition/index.tsx
new file mode 100644
index 00000000..e88f76cd
--- /dev/null
+++ b/packages/smoothui/components/sdf-blob-transition/index.tsx
@@ -0,0 +1,401 @@
+"use client";
+
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import { useReducedMotion } from "motion/react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+
+export type SdfBlobVariant = "circle" | "warped" | "merge" | "radial" | "final";
+
+export interface SdfBlobTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+  variant?: SdfBlobVariant;
+}
+
+const DEFAULT_DURATION_MS = 1120;
+const MIDPOINT = 0.5;
+const MAX_DPR = 2;
+const VERTEX_SHADER =
+  "attribute vec2 a; void main(){ gl_Position = vec4(a, 0.0, 1.0); }";
+const FRAGMENT_SHADER = `
+precision mediump float;
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uProgress;
+uniform float uAlpha;
+uniform float uVariant;
+#define PI 3.14159265359
+
+float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); }
+float noise(vec2 p){
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  float a = hash(i);
+  float b = hash(i + vec2(1.0, 0.0));
+  float c = hash(i + vec2(0.0, 1.0));
+  float d = hash(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+}
+
+float circleSdf(vec2 p, vec2 c, float r){ return length(p - c) - r; }
+float smin(float a, float b, float k){
+  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
+  return mix(b, a, h) - k * h * (1.0 - h);
+}
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / uRes;
+  vec2 aspect = vec2(uRes.x / uRes.y, 1.0);
+  vec2 p = (uv - 0.5) * aspect;
+  float progress = smoothstep(0.0, 1.0, uProgress);
+  float grow = smoothstep(0.0, 0.86, progress);
+  float exitFade = smoothstep(1.0, 0.72, progress);
+
+  float wobble = noise(uv * 7.0 + uTime * 0.18) * 0.035;
+  float ringNoise = noise(vec2(atan(p.y, p.x) * 2.0, uTime * 0.18)) * 0.075;
+  float dCircle = circleSdf(p, vec2(0.0), 0.04 + grow * 0.64);
+  float dWarped = circleSdf(p, vec2(0.0), 0.04 + grow * 0.62 + ringNoise * smoothstep(0.08, 0.96, progress));
+
+  float m0 = circleSdf(p, vec2(-0.26, -0.08), 0.06 + grow * 0.42 + wobble);
+  float m1 = circleSdf(p, vec2(0.24, 0.12), 0.06 + grow * 0.40 - wobble * 0.5);
+  float dMerge = smin(m0, m1, 0.18);
+
+  float angle = atan(p.y, p.x);
+  float sector3 = 2.0 * PI / 3.0;
+  float sector5 = 2.0 * PI / 5.0;
+  float a3 = floor((angle + PI) / sector3 + 0.5) * sector3 - PI;
+  float a5 = floor((angle + PI) / sector5 + 0.5) * sector5 - PI;
+  float r0 = 0.17 + grow * 0.24;
+  float r1 = 0.30 + grow * 0.18;
+  float dR0 = circleSdf(p, vec2(cos(a3), sin(a3)) * r0, 0.04 + grow * 0.22 + wobble * 0.4);
+  float dR1 = circleSdf(p, vec2(cos(a5), sin(a5)) * r1, 0.035 + grow * 0.18);
+  float dRadial = smin(dR0, dR1, 0.14);
+
+  float f0 = circleSdf(p, vec2(-0.28, -0.10), 0.08 + grow * 0.46 + wobble);
+  float f1 = circleSdf(p, vec2(0.00, 0.16), 0.06 + grow * 0.42 - wobble * 0.5);
+  float f2 = circleSdf(p, vec2(0.30, -0.06), 0.05 + grow * 0.40 + wobble * 0.6);
+  float f3 = circleSdf(p, vec2(-0.02, -0.30), 0.04 + grow * 0.34);
+  float dFinal = smin(smin(f0, f1, 0.18), smin(f2, f3, 0.16), 0.20);
+  dFinal = smin(dFinal, dRadial, 0.16);
+
+  float d = dFinal;
+  if (uVariant < 0.5) {
+    d = dCircle;
+  } else if (uVariant < 1.5) {
+    d = dWarped;
+  } else if (uVariant < 2.5) {
+    d = dMerge;
+  } else if (uVariant < 3.5) {
+    d = dRadial;
+  }
+
+  float edge = exp(-d * d * 160.0) * exitFade;
+  float fill = smoothstep(0.08, -0.10, d) * smoothstep(0.0, 0.18, progress) * exitFade;
+  float cell = hash(floor((uv + noise(uv * 11.0) * 0.01) * uRes / 7.0) + floor(uTime * 10.0));
+  float flecks = step(0.78, cell) * edge * 0.22 * smoothstep(1.5, 4.0, uVariant);
+
+  vec3 rose = vec3(1.0, 0.23, 0.58);
+  vec3 apricot = vec3(1.0, 0.70, 0.38);
+  vec3 mint = vec3(0.42, 0.94, 0.78);
+  vec3 color = mix(rose, apricot, smoothstep(-0.35, 0.35, p.x + noise(uv * 5.0) * 0.18));
+  color = mix(color, mint, smoothstep(0.12, 0.7, p.y + grow * 0.16));
+
+  float alpha = (fill * 0.24 + edge * 0.72 + flecks) * uAlpha;
+  gl_FragColor = vec4(color * alpha + vec3(1.0) * edge * 0.18 * uAlpha, clamp(alpha, 0.0, 0.9));
+}
+`;
+const STRIP = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+
+interface Playback {
+  cancel: () => void;
+}
+interface Controller {
+  destroy: () => void;
+  setAlpha: (alpha: number) => void;
+  setProgress: (progress: number) => void;
+  setVariant: (variant: SdfBlobVariant) => void;
+}
+
+const clamp01 = (value: number) => Math.max(0, Math.min(1, value));
+const easeOutQuart = (value: number) => 1 - (1 - value) ** 4;
+const easeInOutCubic = (value: number) =>
+  value < 0.5 ? 4 * value ** 3 : 1 - (-2 * value + 2) ** 3 / 2;
+
+const compile = (gl: WebGLRenderingContext, type: number, source: string) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    return null;
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+};
+
+const resize = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) => {
+  const rect = canvas.getBoundingClientRect();
+  const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);
+  const width = Math.max(1, Math.round(rect.width * dpr));
+  const height = Math.max(1, Math.round(rect.height * dpr));
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+  gl.viewport(0, 0, width, height);
+};
+
+const variantToUniform = (variant: SdfBlobVariant) => {
+  switch (variant) {
+    case "circle":
+      return 0;
+    case "warped":
+      return 1;
+    case "merge":
+      return 2;
+    case "radial":
+      return 3;
+    default:
+      return 4;
+  }
+};
+
+const createController = (
+  canvas: HTMLCanvasElement,
+  initialVariant: SdfBlobVariant
+): Controller | null => {
+  const gl = canvas.getContext("webgl", {
+    alpha: true,
+    antialias: false,
+    premultipliedAlpha: true,
+  });
+  if (!gl) {
+    return null;
+  }
+  const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+  const program = gl.createProgram();
+  if (!(vertex && fragment && program)) {
+    return null;
+  }
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+
+  // biome-ignore lint/correctness/useHookAtTopLevel: WebGLRenderingContext.useProgram is not a React hook.
+  gl.useProgram(program);
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, STRIP, gl.STATIC_DRAW);
+  const position = gl.getAttribLocation(program, "a");
+  gl.enableVertexAttribArray(position);
+  gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+  const uRes = gl.getUniformLocation(program, "uRes");
+  const uTime = gl.getUniformLocation(program, "uTime");
+  const uProgress = gl.getUniformLocation(program, "uProgress");
+  const uAlpha = gl.getUniformLocation(program, "uAlpha");
+  const uVariant = gl.getUniformLocation(program, "uVariant");
+  const startedAt = performance.now();
+  let progress = 0;
+  let alpha = 0;
+  let variant = initialVariant;
+  let frame = 0;
+  let destroyed = false;
+
+  const tick = () => {
+    if (destroyed) {
+      return;
+    }
+    resize(canvas, gl);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.uniform2f(uRes, canvas.width, canvas.height);
+    gl.uniform1f(uTime, (performance.now() - startedAt) / 1000);
+    gl.uniform1f(uProgress, progress);
+    gl.uniform1f(uAlpha, alpha);
+    gl.uniform1f(uVariant, variantToUniform(variant));
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    frame = requestAnimationFrame(tick);
+  };
+  frame = requestAnimationFrame(tick);
+
+  return {
+    destroy: () => {
+      destroyed = true;
+      cancelAnimationFrame(frame);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      if (buffer) {
+        gl.deleteBuffer(buffer);
+      }
+      gl.deleteProgram(program);
+    },
+    setAlpha: (nextAlpha: number) => {
+      alpha = clamp01(nextAlpha);
+    },
+    setProgress: (nextProgress: number) => {
+      progress = clamp01(nextProgress);
+    },
+    setVariant: (nextVariant: SdfBlobVariant) => {
+      variant = nextVariant;
+    },
+  };
+};
+
+const play = (
+  controller: Controller,
+  duration: number,
+  onMidpoint: () => void,
+  onComplete: () => void
+): Playback => {
+  let frame = 0;
+  let cancelled = false;
+  let didSwap = false;
+  const startedAt = performance.now();
+  controller.setAlpha(1);
+
+  const advance = () => {
+    if (cancelled) {
+      return;
+    }
+    const raw = clamp01((performance.now() - startedAt) / duration);
+    const progress = easeOutQuart(raw);
+    controller.setProgress(progress);
+    if (!(didSwap || progress < MIDPOINT)) {
+      didSwap = true;
+      onMidpoint();
+    }
+    if (raw < 1) {
+      frame = requestAnimationFrame(advance);
+      return;
+    }
+    if (!didSwap) {
+      onMidpoint();
+    }
+    const fadeStartedAt = performance.now();
+    const fade = () => {
+      if (cancelled) {
+        return;
+      }
+      const fadeRaw = clamp01((performance.now() - fadeStartedAt) / 90);
+      controller.setAlpha(1 - easeInOutCubic(fadeRaw));
+      if (fadeRaw < 1) {
+        frame = requestAnimationFrame(fade);
+        return;
+      }
+      controller.setAlpha(0);
+      controller.setProgress(0);
+      onComplete();
+    };
+    frame = requestAnimationFrame(fade);
+  };
+  frame = requestAnimationFrame(advance);
+
+  return {
+    cancel: () => {
+      cancelled = true;
+      cancelAnimationFrame(frame);
+    },
+  };
+};
+
+const SdfBlobTransition = ({
+  children,
+  className,
+  duration = DEFAULT_DURATION_MS,
+  onRest,
+  transitionKey,
+  variant = "final",
+}: SdfBlobTransitionProps) => {
+  const shouldReduceMotion = useReducedMotion();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const controllerRef = useRef<Controller | null>(null);
+  const playbackRef = useRef<Playback | null>(null);
+  const previousKey = useRef(transitionKey);
+  const [renderedChildren, setRenderedChildren] = useState(children);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const controller = createController(canvas, variant);
+    controllerRef.current = controller;
+    return () => {
+      playbackRef.current?.cancel();
+      controller?.destroy();
+      controllerRef.current = null;
+    };
+  }, [variant]);
+
+  useEffect(() => {
+    if (previousKey.current === transitionKey) {
+      setRenderedChildren(children);
+      return;
+    }
+    previousKey.current = transitionKey;
+    playbackRef.current?.cancel();
+
+    if (shouldReduceMotion) {
+      setRenderedChildren(children);
+      setIsActive(false);
+      onRest?.();
+      return;
+    }
+
+    const controller = controllerRef.current;
+    if (!controller) {
+      setRenderedChildren(children);
+      onRest?.();
+      return;
+    }
+    controller.setVariant(variant);
+    setIsActive(true);
+    playbackRef.current = play(
+      controller,
+      duration,
+      () => setRenderedChildren(children),
+      () => {
+        setIsActive(false);
+        playbackRef.current = null;
+        onRest?.();
+      }
+    );
+  }, [children, duration, onRest, shouldReduceMotion, transitionKey, variant]);
+
+  return (
+    <div
+      className={cn(
+        "relative isolate overflow-hidden rounded-2xl bg-background text-foreground",
+        className
+      )}
+      data-transitioning={isActive ? "true" : "false"}
+    >
+      <div className="relative z-0">{renderedChildren}</div>
+      <canvas
+        className={cn(
+          "pointer-events-none absolute inset-0 z-10 h-full w-full transition-opacity duration-75",
+          isActive && !shouldReduceMotion ? "opacity-100" : "opacity-0"
+        )}
+        ref={canvasRef}
+      />
+    </div>
+  );
+};
+
+export default SdfBlobTransition;
diff --git a/packages/smoothui/components/sdf-blob-transition/package.json b/packages/smoothui/components/sdf-blob-transition/package.json
new file mode 100644
index 00000000..6c8e6665
--- /dev/null
+++ b/packages/smoothui/components/sdf-blob-transition/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@repo/sdf-blob-transition",
+  "description": "A persistent WebGL SDF blob transition wrapper for route and state changes.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "sdf",
+      "blob",
+      "state-change"
+    ],
+    "complexity": "moderate",
+    "animationType": "tween",
+    "useCases": [
+      "Reveal major route or state changes",
+      "Wrap onboarding or launch moments",
+      "Create an organic shader handoff"
+    ],
+    "compositionHints": [
+      "Use sparingly for meaningful transitions",
+      "Wrap the whole frame instead of a small card"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/sdf-blob-transition/tsconfig.json b/packages/smoothui/components/sdf-blob-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/sdf-blob-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/sdf-circle-transition/__tests__/sdf-circle-transition.test.tsx b/packages/smoothui/components/sdf-circle-transition/__tests__/sdf-circle-transition.test.tsx
new file mode 100644
index 00000000..ae44e766
--- /dev/null
+++ b/packages/smoothui/components/sdf-circle-transition/__tests__/sdf-circle-transition.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import SdfCircleTransition from "../index";
+
+describe("SdfCircleTransition", () => {
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <SdfCircleTransition transitionKey="draft">
+        Draft saved
+      </SdfCircleTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/sdf-circle-transition/index.tsx b/packages/smoothui/components/sdf-circle-transition/index.tsx
new file mode 100644
index 00000000..99084295
--- /dev/null
+++ b/packages/smoothui/components/sdf-circle-transition/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import SdfBlobTransition from "../sdf-blob-transition";
+
+export interface SdfCircleTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const SdfCircleTransition = ({
+  children,
+  className,
+  duration = 1120,
+  onRest,
+  transitionKey,
+}: SdfCircleTransitionProps) => (
+  <SdfBlobTransition
+    className={className}
+    duration={duration}
+    onRest={onRest}
+    transitionKey={transitionKey}
+    variant="circle"
+  >
+    {children}
+  </SdfBlobTransition>
+);
+
+export default SdfCircleTransition;
diff --git a/packages/smoothui/components/sdf-circle-transition/package.json b/packages/smoothui/components/sdf-circle-transition/package.json
new file mode 100644
index 00000000..0835ca05
--- /dev/null
+++ b/packages/smoothui/components/sdf-circle-transition/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@repo/sdf-circle-transition",
+  "description": "A clean SDF circle reveal based on the first Codrops shader step.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/sdf-blob-transition": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "sdf",
+      "codrops",
+      "state-change"
+    ],
+    "complexity": "moderate",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/sdf-circle-transition/tsconfig.json b/packages/smoothui/components/sdf-circle-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/sdf-circle-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/searchable-dropdown/__tests__/searchable-dropdown.test.tsx b/packages/smoothui/components/searchable-dropdown/__tests__/searchable-dropdown.test.tsx
index b77916b9..d296db71 100644
--- a/packages/smoothui/components/searchable-dropdown/__tests__/searchable-dropdown.test.tsx
+++ b/packages/smoothui/components/searchable-dropdown/__tests__/searchable-dropdown.test.tsx
@@ -1,7 +1,14 @@
-import { describe, expect, it } from "vitest";
-import { render } from "../../../test-utils/render";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "../../../test-utils/render";
 import SearchableDropdown from "../index";
 
+const items = [
+  { id: "1", label: "Apple", description: "A red fruit" },
+  { id: "2", label: "Banana", description: "A yellow fruit" },
+  { id: "3", label: "Cherry", description: "A small fruit" },
+];
+
 describe("SearchableDropdown", () => {
   it("renders without throwing", () => {
     const { container } = render(
@@ -12,4 +19,172 @@ describe("SearchableDropdown", () => {
     );
     expect(container).toBeInTheDocument();
   });
+
+  it("opens the dropdown and shows the search input", async () => {
+    const user = userEvent.setup();
+    render(<SearchableDropdown items={items} label="Pick a fruit" />);
+
+    await user.click(screen.getByRole("button", { name: "Pick a fruit" }));
+
+    expect(
+      screen.getByRole("combobox", { name: "Search dropdown items" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Pick a fruit" })
+    ).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("filters items by typing in the search input", async () => {
+    const user = userEvent.setup();
+    render(<SearchableDropdown items={items} label="Pick a fruit" />);
+
+    await user.click(screen.getByRole("button", { name: "Pick a fruit" }));
+    const input = screen.getByRole("combobox", {
+      name: "Search dropdown items",
+    });
+    await user.type(input, "ban");
+
+    expect(screen.getByRole("button", { name: /Banana/ })).toBeInTheDocument();
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("button", { name: /Apple/ })
+      ).not.toBeInTheDocument()
+    );
+  });
+
+  it("shows the empty message when no items match", async () => {
+    const user = userEvent.setup();
+    render(
+      <SearchableDropdown
+        emptyMessage="Nothing here"
+        items={items}
+        label="Pick a fruit"
+      />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Pick a fruit" }));
+    await user.type(
+      screen.getByRole("combobox", { name: "Search dropdown items" }),
+      "zzz"
+    );
+
+    expect(screen.getByText("Nothing here")).toBeInTheDocument();
+  });
+
+  it("clears the search query when the clear button is clicked", async () => {
+    const user = userEvent.setup();
+    render(<SearchableDropdown items={items} label="Pick a fruit" />);
+
+    await user.click(screen.getByRole("button", { name: "Pick a fruit" }));
+    const input = screen.getByRole("combobox", {
+      name: "Search dropdown items",
+    });
+    await user.type(input, "ban");
+    await user.click(screen.getByRole("button", { name: "Clear search" }));
+
+    expect(input).toHaveValue("");
+    expect(screen.getByRole("button", { name: /Apple/ })).toBeInTheDocument();
+  });
+
+  it("selects an item on click, updates the trigger label, and calls onChange", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <SearchableDropdown
+        items={items}
+        label="Pick a fruit"
+        onChange={onChange}
+      />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Pick a fruit" }));
+    await user.click(screen.getByRole("button", { name: /Banana/ }));
+
+    expect(onChange).toHaveBeenCalledWith(items[1]);
+    expect(
+      screen.getByRole("button", { name: "Pick a fruit: Banana" })
+    ).toBeInTheDocument();
+  });
+
+  it("closes on outside click and resets the search query", async () => {
+    const user = userEvent.setup();
+    render(<SearchableDropdown items={items} label="Pick a fruit" />);
+
+    await user.click(screen.getByRole("button", { name: "Pick a fruit" }));
+    await user.type(
+      screen.getByRole("combobox", { name: "Search dropdown items" }),
+      "ban"
+    );
+
+    await user.click(document.body);
+
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("combobox", { name: "Search dropdown items" })
+      ).not.toBeInTheDocument()
+    );
+  });
+
+  it("navigates with ArrowDown and selects the focused item with Enter", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <SearchableDropdown
+        items={items}
+        label="Pick a fruit"
+        onChange={onChange}
+      />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Pick a fruit" }));
+    fireEvent.keyDown(document, { key: "ArrowDown" });
+    fireEvent.keyDown(document, { key: "ArrowDown" });
+    fireEvent.keyDown(document, { key: "ArrowUp" });
+    fireEvent.keyDown(document, { key: "Enter" });
+
+    expect(onChange).toHaveBeenCalledWith(items[0]);
+  });
+
+  it("moves focus to the last item with End", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <SearchableDropdown
+        items={items}
+        label="Pick a fruit"
+        onChange={onChange}
+      />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Pick a fruit" }));
+    fireEvent.keyDown(document, { key: "End" });
+    fireEvent.keyDown(document, { key: "Enter" });
+
+    expect(onChange).toHaveBeenCalledWith(items[2]);
+  });
+
+  it("closes on Escape and refocuses the trigger", async () => {
+    const user = userEvent.setup();
+    render(<SearchableDropdown items={items} label="Pick a fruit" />);
+
+    const trigger = screen.getByRole("button", { name: "Pick a fruit" });
+    await user.click(trigger);
+
+    // Wait out the dropdown's deferred input-focus timeout so it doesn't
+    // steal focus back from the trigger after Escape closes the dropdown.
+    await waitFor(() =>
+      expect(
+        screen.getByRole("combobox", { name: "Search dropdown items" })
+      ).toHaveFocus()
+    );
+
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("combobox", { name: "Search dropdown items" })
+      ).not.toBeInTheDocument()
+    );
+    expect(trigger).toHaveFocus();
+  });
 });
diff --git a/packages/smoothui/components/select/__tests__/select.interaction.test.tsx b/packages/smoothui/components/select/__tests__/select.interaction.test.tsx
index 33cf898e..10b88142 100644
--- a/packages/smoothui/components/select/__tests__/select.interaction.test.tsx
+++ b/packages/smoothui/components/select/__tests__/select.interaction.test.tsx
@@ -1,5 +1,6 @@
-import { describe, expect, it } from "vitest";
-import { render, screen } from "../../../test-utils/render";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "../../../test-utils/render";
 import Select from "../index";
 
 const options = [
@@ -8,6 +9,20 @@ const options = [
   { value: "cherry", label: "Cherry" },
 ];
 
+const groups = [
+  {
+    label: "Citrus",
+    options: [
+      { value: "lemon", label: "Lemon" },
+      { value: "lime", label: "Lime" },
+    ],
+  },
+  {
+    label: "Berries",
+    options: [{ value: "grape", label: "Grape", disabled: true }],
+  },
+];
+
 describe("Select interactions", () => {
   it("renders with placeholder text", () => {
     render(
@@ -59,7 +74,179 @@ describe("Select interactions", () => {
     );
   });
 
-  // Note: Radix Select dropdown open/select tests are skipped in jsdom
-  // because the content renders in a portal and requires pointer events
-  // that jsdom cannot simulate. These behaviors are better tested in e2e.
+  it("opens the listbox on trigger click", async () => {
+    const user = userEvent.setup();
+    render(<Select aria-label="Fruit select" options={options} />);
+
+    await user.click(screen.getByRole("combobox"));
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    expect(screen.getByRole("combobox")).toHaveAttribute(
+      "aria-expanded",
+      "true"
+    );
+  });
+
+  it("does not open when disabled", async () => {
+    const user = userEvent.setup();
+    render(<Select aria-label="Fruit select" disabled options={options} />);
+
+    await user.click(screen.getByRole("combobox"));
+
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  it("selects an option on click, updates label, and calls onValueChange", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Select
+        aria-label="Fruit select"
+        onValueChange={onValueChange}
+        options={options}
+      />
+    );
+
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("option", { name: "Banana" }));
+
+    expect(onValueChange).toHaveBeenCalledWith("banana");
+    expect(screen.getByRole("combobox")).toHaveTextContent("Banana");
+    await waitFor(() =>
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+    );
+  });
+
+  it("does not select a disabled option", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Select
+        aria-label="Fruit select"
+        groups={groups}
+        onValueChange={onValueChange}
+      />
+    );
+
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("option", { name: "Grape" }));
+
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  it("renders grouped options and selects from a group", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Select
+        aria-label="Fruit select"
+        groups={groups}
+        onValueChange={onValueChange}
+      />
+    );
+
+    await user.click(screen.getByRole("combobox"));
+    expect(screen.getByText("Citrus")).toBeInTheDocument();
+    expect(screen.getByText("Berries")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("option", { name: "Lime" }));
+    expect(onValueChange).toHaveBeenCalledWith("lime");
+  });
+
+  it("does not update displayed label when controlled", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Select
+        aria-label="Fruit select"
+        onValueChange={onValueChange}
+        options={options}
+        value="apple"
+      />
+    );
+
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("option", { name: "Cherry" }));
+
+    expect(onValueChange).toHaveBeenCalledWith("cherry");
+    expect(screen.getByRole("combobox")).toHaveTextContent("Apple");
+  });
+
+  it("closes the listbox on outside click", async () => {
+    const user = userEvent.setup();
+    render(<Select aria-label="Fruit select" options={options} />);
+
+    await user.click(screen.getByRole("combobox"));
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    await user.click(document.body);
+    await waitFor(() =>
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+    );
+  });
+
+  it("opens on Enter when trigger is focused", () => {
+    render(<Select aria-label="Fruit select" options={options} />);
+
+    const trigger = screen.getByRole("combobox");
+    trigger.focus();
+    fireEvent.keyDown(trigger, { key: "Enter" });
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  it("navigates with ArrowDown/ArrowUp and selects the focused option with Enter", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Select
+        aria-label="Fruit select"
+        onValueChange={onValueChange}
+        options={options}
+      />
+    );
+
+    await user.click(screen.getByRole("combobox"));
+    fireEvent.keyDown(document, { key: "ArrowDown" });
+    fireEvent.keyDown(document, { key: "ArrowDown" });
+    fireEvent.keyDown(document, { key: "ArrowUp" });
+    fireEvent.keyDown(document, { key: "Enter" });
+
+    expect(onValueChange).toHaveBeenCalledWith("apple");
+  });
+
+  it("moves focus to first/last option with Home/End", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Select
+        aria-label="Fruit select"
+        onValueChange={onValueChange}
+        options={options}
+      />
+    );
+
+    await user.click(screen.getByRole("combobox"));
+    fireEvent.keyDown(document, { key: "End" });
+    fireEvent.keyDown(document, { key: "Enter" });
+
+    expect(onValueChange).toHaveBeenCalledWith("cherry");
+  });
+
+  it("closes the listbox on Escape and refocuses the trigger", async () => {
+    const user = userEvent.setup();
+    render(<Select aria-label="Fruit select" options={options} />);
+
+    const trigger = screen.getByRole("combobox");
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    await waitFor(() =>
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+    );
+    expect(trigger).toHaveFocus();
+  });
 });
diff --git a/packages/smoothui/components/shader-reveal-circle-transition/__tests__/shader-reveal-circle-transition.test.tsx b/packages/smoothui/components/shader-reveal-circle-transition/__tests__/shader-reveal-circle-transition.test.tsx
new file mode 100644
index 00000000..140a37db
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-circle-transition/__tests__/shader-reveal-circle-transition.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import ShaderRevealCircleTransition from "../index";
+
+describe("ShaderRevealCircleTransition", () => {
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <ShaderRevealCircleTransition transitionKey="draft">
+        Draft saved
+      </ShaderRevealCircleTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/shader-reveal-circle-transition/index.tsx b/packages/smoothui/components/shader-reveal-circle-transition/index.tsx
new file mode 100644
index 00000000..36ec903b
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-circle-transition/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import ShaderRevealTransition from "../shader-reveal-transition";
+
+export interface ShaderRevealCircleTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const ShaderRevealCircleTransition = ({
+  children,
+  className,
+  duration = 1080,
+  onRest,
+  transitionKey,
+}: ShaderRevealCircleTransitionProps) => (
+  <ShaderRevealTransition
+    className={className}
+    duration={duration}
+    onRest={onRest}
+    transitionKey={transitionKey}
+    variant="circle"
+  >
+    {children}
+  </ShaderRevealTransition>
+);
+
+export default ShaderRevealCircleTransition;
diff --git a/packages/smoothui/components/shader-reveal-circle-transition/package.json b/packages/smoothui/components/shader-reveal-circle-transition/package.json
new file mode 100644
index 00000000..43a57582
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-circle-transition/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@repo/shader-reveal-circle-transition",
+  "description": "Demo 3 adaptation: noisy circular reveal with radial interpolation.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shader-reveal-transition": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "shader",
+      "state-change"
+    ],
+    "complexity": "advanced",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shader-reveal-circle-transition/tsconfig.json b/packages/smoothui/components/shader-reveal-circle-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-circle-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/shader-reveal-luma-transition/__tests__/shader-reveal-luma-transition.test.tsx b/packages/smoothui/components/shader-reveal-luma-transition/__tests__/shader-reveal-luma-transition.test.tsx
new file mode 100644
index 00000000..246f81b5
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-luma-transition/__tests__/shader-reveal-luma-transition.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import ShaderRevealLumaTransition from "../index";
+
+describe("ShaderRevealLumaTransition", () => {
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <ShaderRevealLumaTransition transitionKey="draft">
+        Draft saved
+      </ShaderRevealLumaTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/shader-reveal-luma-transition/index.tsx b/packages/smoothui/components/shader-reveal-luma-transition/index.tsx
new file mode 100644
index 00000000..4fc75e46
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-luma-transition/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import ShaderRevealTransition from "../shader-reveal-transition";
+
+export interface ShaderRevealLumaTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const ShaderRevealLumaTransition = ({
+  children,
+  className,
+  duration = 1080,
+  onRest,
+  transitionKey,
+}: ShaderRevealLumaTransitionProps) => (
+  <ShaderRevealTransition
+    className={className}
+    duration={duration}
+    onRest={onRest}
+    transitionKey={transitionKey}
+    variant="luma"
+  >
+    {children}
+  </ShaderRevealTransition>
+);
+
+export default ShaderRevealLumaTransition;
diff --git a/packages/smoothui/components/shader-reveal-luma-transition/package.json b/packages/smoothui/components/shader-reveal-luma-transition/package.json
new file mode 100644
index 00000000..369c8317
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-luma-transition/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@repo/shader-reveal-luma-transition",
+  "description": "Demo 5 adaptation: luminance-style vertical displacement translated into a shader overlay.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shader-reveal-transition": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "shader",
+      "state-change"
+    ],
+    "complexity": "advanced",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shader-reveal-luma-transition/tsconfig.json b/packages/smoothui/components/shader-reveal-luma-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-luma-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/shader-reveal-noise-transition/__tests__/shader-reveal-noise-transition.test.tsx b/packages/smoothui/components/shader-reveal-noise-transition/__tests__/shader-reveal-noise-transition.test.tsx
new file mode 100644
index 00000000..3811a0be
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-noise-transition/__tests__/shader-reveal-noise-transition.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import ShaderRevealNoiseTransition from "../index";
+
+describe("ShaderRevealNoiseTransition", () => {
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <ShaderRevealNoiseTransition transitionKey="draft">
+        Draft saved
+      </ShaderRevealNoiseTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/shader-reveal-noise-transition/index.tsx b/packages/smoothui/components/shader-reveal-noise-transition/index.tsx
new file mode 100644
index 00000000..7aec16ff
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-noise-transition/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import ShaderRevealTransition from "../shader-reveal-transition";
+
+export interface ShaderRevealNoiseTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const ShaderRevealNoiseTransition = ({
+  children,
+  className,
+  duration = 1080,
+  onRest,
+  transitionKey,
+}: ShaderRevealNoiseTransitionProps) => (
+  <ShaderRevealTransition
+    className={className}
+    duration={duration}
+    onRest={onRest}
+    transitionKey={transitionKey}
+    variant="noise"
+  >
+    {children}
+  </ShaderRevealTransition>
+);
+
+export default ShaderRevealNoiseTransition;
diff --git a/packages/smoothui/components/shader-reveal-noise-transition/package.json b/packages/smoothui/components/shader-reveal-noise-transition/package.json
new file mode 100644
index 00000000..5696aa32
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-noise-transition/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@repo/shader-reveal-noise-transition",
+  "description": "Demo 1 adaptation: 4D-noise threshold transition with an organic shader gate.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shader-reveal-transition": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "shader",
+      "state-change"
+    ],
+    "complexity": "advanced",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shader-reveal-noise-transition/tsconfig.json b/packages/smoothui/components/shader-reveal-noise-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-noise-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/shader-reveal-planetary-transition/__tests__/shader-reveal-planetary-transition.test.tsx b/packages/smoothui/components/shader-reveal-planetary-transition/__tests__/shader-reveal-planetary-transition.test.tsx
new file mode 100644
index 00000000..91e89624
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-planetary-transition/__tests__/shader-reveal-planetary-transition.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import ShaderRevealPlanetaryTransition from "../index";
+
+describe("ShaderRevealPlanetaryTransition", () => {
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <ShaderRevealPlanetaryTransition transitionKey="draft">
+        Draft saved
+      </ShaderRevealPlanetaryTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/shader-reveal-planetary-transition/index.tsx b/packages/smoothui/components/shader-reveal-planetary-transition/index.tsx
new file mode 100644
index 00000000..103c8a14
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-planetary-transition/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import ShaderRevealTransition from "../shader-reveal-transition";
+
+export interface ShaderRevealPlanetaryTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const ShaderRevealPlanetaryTransition = ({
+  children,
+  className,
+  duration = 1080,
+  onRest,
+  transitionKey,
+}: ShaderRevealPlanetaryTransitionProps) => (
+  <ShaderRevealTransition
+    className={className}
+    duration={duration}
+    onRest={onRest}
+    transitionKey={transitionKey}
+    variant="planetary"
+  >
+    {children}
+  </ShaderRevealTransition>
+);
+
+export default ShaderRevealPlanetaryTransition;
diff --git a/packages/smoothui/components/shader-reveal-planetary-transition/package.json b/packages/smoothui/components/shader-reveal-planetary-transition/package.json
new file mode 100644
index 00000000..b0952ec0
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-planetary-transition/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@repo/shader-reveal-planetary-transition",
+  "description": "Demo 6 adaptation: rotated displacement vectors with a planetary swirl feel.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shader-reveal-transition": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "shader",
+      "state-change"
+    ],
+    "complexity": "advanced",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shader-reveal-planetary-transition/tsconfig.json b/packages/smoothui/components/shader-reveal-planetary-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-planetary-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/shader-reveal-push-transition/__tests__/shader-reveal-push-transition.test.tsx b/packages/smoothui/components/shader-reveal-push-transition/__tests__/shader-reveal-push-transition.test.tsx
new file mode 100644
index 00000000..a50be2f3
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-push-transition/__tests__/shader-reveal-push-transition.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import ShaderRevealPushTransition from "../index";
+
+describe("ShaderRevealPushTransition", () => {
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <ShaderRevealPushTransition transitionKey="draft">
+        Draft saved
+      </ShaderRevealPushTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/shader-reveal-push-transition/index.tsx b/packages/smoothui/components/shader-reveal-push-transition/index.tsx
new file mode 100644
index 00000000..19b82e62
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-push-transition/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import ShaderRevealTransition from "../shader-reveal-transition";
+
+export interface ShaderRevealPushTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const ShaderRevealPushTransition = ({
+  children,
+  className,
+  duration = 1080,
+  onRest,
+  transitionKey,
+}: ShaderRevealPushTransitionProps) => (
+  <ShaderRevealTransition
+    className={className}
+    duration={duration}
+    onRest={onRest}
+    transitionKey={transitionKey}
+    variant="push"
+  >
+    {children}
+  </ShaderRevealTransition>
+);
+
+export default ShaderRevealPushTransition;
diff --git a/packages/smoothui/components/shader-reveal-push-transition/package.json b/packages/smoothui/components/shader-reveal-push-transition/package.json
new file mode 100644
index 00000000..a7ca7092
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-push-transition/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@repo/shader-reveal-push-transition",
+  "description": "Demo 8 adaptation: procedural noise push/pull displacement.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shader-reveal-transition": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "shader",
+      "state-change"
+    ],
+    "complexity": "advanced",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shader-reveal-push-transition/tsconfig.json b/packages/smoothui/components/shader-reveal-push-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-push-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/shader-reveal-stripes-transition/__tests__/shader-reveal-stripes-transition.test.tsx b/packages/smoothui/components/shader-reveal-stripes-transition/__tests__/shader-reveal-stripes-transition.test.tsx
new file mode 100644
index 00000000..fcd7dcfd
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-stripes-transition/__tests__/shader-reveal-stripes-transition.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import ShaderRevealStripesTransition from "../index";
+
+describe("ShaderRevealStripesTransition", () => {
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <ShaderRevealStripesTransition transitionKey="draft">
+        Draft saved
+      </ShaderRevealStripesTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/shader-reveal-stripes-transition/index.tsx b/packages/smoothui/components/shader-reveal-stripes-transition/index.tsx
new file mode 100644
index 00000000..bcb8aaa3
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-stripes-transition/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import ShaderRevealTransition from "../shader-reveal-transition";
+
+export interface ShaderRevealStripesTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const ShaderRevealStripesTransition = ({
+  children,
+  className,
+  duration = 1080,
+  onRest,
+  transitionKey,
+}: ShaderRevealStripesTransitionProps) => (
+  <ShaderRevealTransition
+    className={className}
+    duration={duration}
+    onRest={onRest}
+    transitionKey={transitionKey}
+    variant="stripes"
+  >
+    {children}
+  </ShaderRevealTransition>
+);
+
+export default ShaderRevealStripesTransition;
diff --git a/packages/smoothui/components/shader-reveal-stripes-transition/package.json b/packages/smoothui/components/shader-reveal-stripes-transition/package.json
new file mode 100644
index 00000000..c3155771
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-stripes-transition/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@repo/shader-reveal-stripes-transition",
+  "description": "Demo 7 adaptation: divided UV stripe displacement with diagonal motion.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shader-reveal-transition": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "shader",
+      "state-change"
+    ],
+    "complexity": "advanced",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shader-reveal-stripes-transition/tsconfig.json b/packages/smoothui/components/shader-reveal-stripes-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-stripes-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/shader-reveal-transition/__tests__/shader-reveal-transition.test.tsx b/packages/smoothui/components/shader-reveal-transition/__tests__/shader-reveal-transition.test.tsx
new file mode 100644
index 00000000..b87e3b01
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-transition/__tests__/shader-reveal-transition.test.tsx
@@ -0,0 +1,163 @@
+import { useReducedMotion } from "motion/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "../../../test-utils/render";
+import {
+  flushFrames,
+  installWebglMock,
+  runFramesFor,
+  uninstallWebglMock,
+} from "../../../test-utils/webgl-mock";
+import ShaderRevealTransition, { type ShaderRevealVariant } from "../index";
+
+vi.mock("motion/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("motion/react")>();
+  return { ...actual, useReducedMotion: vi.fn(() => false) };
+});
+
+const ALL_VARIANTS: ShaderRevealVariant[] = [
+  "noise",
+  "zoom",
+  "circle",
+  "wipe",
+  "luma",
+  "planetary",
+  "stripes",
+  "push",
+];
+
+describe("ShaderRevealTransition", () => {
+  beforeEach(() => {
+    installWebglMock();
+  });
+
+  afterEach(() => {
+    uninstallWebglMock();
+    vi.mocked(useReducedMotion).mockReturnValue(false);
+  });
+
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <ShaderRevealTransition transitionKey="draft">
+        Draft saved
+      </ShaderRevealTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+
+  it("runs the reveal, swaps content at the midpoint, and calls onRest", () => {
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <ShaderRevealTransition duration={100} onRest={onRest} transitionKey="a">
+        First
+      </ShaderRevealTransition>
+    );
+
+    expect(getByText("First")).toBeInTheDocument();
+
+    rerender(
+      <ShaderRevealTransition duration={100} onRest={onRest} transitionKey="b">
+        Second
+      </ShaderRevealTransition>
+    );
+
+    runFramesFor(400);
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("skips the animation and swaps content immediately when reduced motion is preferred", () => {
+    vi.mocked(useReducedMotion).mockReturnValue(true);
+
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <ShaderRevealTransition onRest={onRest} transitionKey="a">
+        First
+      </ShaderRevealTransition>
+    );
+
+    rerender(
+      <ShaderRevealTransition onRest={onRest} transitionKey="b">
+        Second
+      </ShaderRevealTransition>
+    );
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("swaps content immediately when WebGL is unavailable", () => {
+    uninstallWebglMock();
+    installWebglMock({ supported: false });
+
+    const onRest = vi.fn();
+    const { getByText, queryByText, rerender } = render(
+      <ShaderRevealTransition onRest={onRest} transitionKey="a">
+        First
+      </ShaderRevealTransition>
+    );
+
+    rerender(
+      <ShaderRevealTransition onRest={onRest} transitionKey="b">
+        Second
+      </ShaderRevealTransition>
+    );
+
+    expect(queryByText("First")).not.toBeInTheDocument();
+    expect(getByText("Second")).toBeInTheDocument();
+    expect(onRest).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not throw when unmounted mid-animation", () => {
+    const { rerender, unmount } = render(
+      <ShaderRevealTransition duration={200} transitionKey="a">
+        First
+      </ShaderRevealTransition>
+    );
+
+    rerender(
+      <ShaderRevealTransition duration={200} transitionKey="b">
+        Second
+      </ShaderRevealTransition>
+    );
+
+    flushFrames(2);
+
+    expect(() => unmount()).not.toThrow();
+    expect(() => flushFrames(2)).not.toThrow();
+  });
+
+  for (const variant of ALL_VARIANTS) {
+    it(`renders and animates the "${variant}" variant without throwing`, () => {
+      const onRest = vi.fn();
+      const { getByText, rerender } = render(
+        <ShaderRevealTransition
+          duration={80}
+          onRest={onRest}
+          transitionKey="a"
+          variant={variant}
+        >
+          First
+        </ShaderRevealTransition>
+      );
+
+      rerender(
+        <ShaderRevealTransition
+          duration={80}
+          onRest={onRest}
+          transitionKey="b"
+          variant={variant}
+        >
+          Second
+        </ShaderRevealTransition>
+      );
+
+      expect(() => runFramesFor(300)).not.toThrow();
+      expect(getByText("Second")).toBeInTheDocument();
+      expect(onRest).toHaveBeenCalledTimes(1);
+    });
+  }
+});
diff --git a/packages/smoothui/components/shader-reveal-transition/index.tsx b/packages/smoothui/components/shader-reveal-transition/index.tsx
new file mode 100644
index 00000000..e4b3e0d8
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-transition/index.tsx
@@ -0,0 +1,454 @@
+"use client";
+
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import { useReducedMotion } from "motion/react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+
+export type ShaderRevealVariant =
+  | "noise"
+  | "zoom"
+  | "circle"
+  | "wipe"
+  | "luma"
+  | "planetary"
+  | "stripes"
+  | "push";
+
+export interface ShaderRevealTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+  variant?: ShaderRevealVariant;
+}
+
+const DEFAULT_DURATION_MS = 1080;
+const MIDPOINT = 0.5;
+const MAX_DPR = 2;
+const VERTEX_SHADER =
+  "attribute vec2 a; void main(){ gl_Position = vec4(a, 0.0, 1.0); }";
+const FRAGMENT_SHADER = `
+precision mediump float;
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uProgress;
+uniform float uAlpha;
+uniform float uVariant;
+#define PI 3.14159265359
+
+float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); }
+float noise(vec2 p){
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  float a = hash(i);
+  float b = hash(i + vec2(1.0, 0.0));
+  float c = hash(i + vec2(0.0, 1.0));
+  float d = hash(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+}
+float parabola(float x, float k){ return pow(4.0 * x * (1.0 - x), k); }
+mat2 rot(float a){ float s = sin(a); float c = cos(a); return mat2(c, -s, s, c); }
+
+vec4 paint(vec2 uv, float mask, vec3 color, float glow){
+  float exitFade = smoothstep(1.0, 0.76, uProgress);
+  float entryFade = smoothstep(0.0, 0.10, uProgress);
+  float alpha = clamp((mask * 0.76 + glow * 0.24) * entryFade * exitFade * uAlpha, 0.0, 0.92);
+  return vec4(color * alpha + vec3(1.0) * glow * 0.16 * uAlpha, alpha);
+}
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / uRes;
+  vec2 aspect = vec2(uRes.x / uRes.y, 1.0);
+  vec2 p = (uv - 0.5) * aspect;
+  float progress = smoothstep(0.0, 1.0, uProgress);
+  vec3 pink = vec3(1.0, 0.20, 0.58);
+  vec3 cyan = vec3(0.12, 0.86, 1.0);
+  vec3 gold = vec3(1.0, 0.72, 0.28);
+  vec3 mint = vec3(0.45, 1.0, 0.72);
+
+  float mask = 0.0;
+  float glow = 0.0;
+  vec3 color = mix(pink, cyan, uv.x);
+
+  if (uVariant < 0.5) {
+    // Demo 1 — turbulent noise threshold. Chunky, organic gate.
+    float n1 = noise(uv * vec2(18.0, 12.0) + uTime * 0.42);
+    float n2 = noise(uv * vec2(52.0, 44.0) - uTime * 0.18);
+    float threshold = progress * 1.35 - 0.18;
+    float gate = smoothstep(threshold - 0.18, threshold + 0.18, uv.x * 0.62 + uv.y * 0.28 + n1 * 0.34 + n2 * 0.08);
+    mask = pow(gate * (1.0 - gate) * 4.0, 0.74) + step(0.74, n2) * gate * 0.22;
+    glow = exp(-pow(uv.x + n1 * 0.26 - progress, 2.0) * 26.0);
+    color = mix(vec3(1.0, 0.10, 0.55), vec3(0.18, 1.0, 0.78), n1);
+  } else if (uVariant < 1.5) {
+    // Demo 2 — zoom mix. Large central lens, not a sweep.
+    float yGate = smoothstep(0.0, 1.0, progress * 2.15 + uv.y - 1.08);
+    vec2 z = (uv - 0.5) * mix(1.75, 0.35, yGate) + 0.5;
+    float lens = 1.0 - smoothstep(0.12, 0.78, length((z - 0.5) * aspect));
+    float seam = exp(-pow(yGate - 0.5, 2.0) * 20.0);
+    mask = (lens * 0.72 + seam * 0.42) * parabola(progress, 0.42);
+    glow = seam * 0.9 + lens * 0.25;
+    color = mix(vec3(1.0, 0.80, 0.34), vec3(0.70, 0.92, 1.0), yGate);
+  } else if (uVariant < 2.5) {
+    // Demo 3 — noisy circular reveal.
+    float n = noise(uv * 9.0 + uTime * 0.25);
+    float radius = progress * 1.08 + n * 0.045;
+    float d = length(p) - radius * 0.72;
+    mask = exp(-d * d * 42.0) + smoothstep(0.08, -0.12, d) * 0.18;
+    glow = exp(-d * d * 140.0);
+    color = mix(vec3(1.0, 0.22, 0.58), vec3(1.0, 0.75, 0.32), atan(p.y, p.x) / PI * 0.5 + 0.5);
+  } else if (uVariant < 3.5) {
+    // Demo 4 — displacement wipe. Narrow noisy blade.
+    float n = noise(uv * vec2(12.0, 26.0) + vec2(uTime * 0.26, -uTime * 0.12));
+    float blade = progress * 1.32 - 0.16 + n * 0.11;
+    float edge = blade - uv.x;
+    float front = exp(-edge * edge * 120.0);
+    float fillSide = smoothstep(-0.03, 0.16, edge) * 0.18;
+    mask = front * 0.92 + fillSide;
+    glow = front;
+    color = mix(vec3(0.12, 0.92, 1.0), vec3(1.0, 1.0, 1.0), front * 0.38);
+  } else if (uVariant < 4.5) {
+    // Demo 5 — luminance displacement. Horizontal ribbons pulled vertically.
+    float lum = noise(uv * 5.0 + vec2(0.0, uTime * 0.22));
+    float displacedY = uv.y + progress * (lum - 0.5) * 0.55;
+    float ribbons = sin(displacedY * 58.0 + uTime * 1.25) * 0.5 + 0.5;
+    float fine = sin(displacedY * 132.0 - uTime * 1.8) * 0.5 + 0.5;
+    float window = smoothstep(0.03, 0.5, progress) * smoothstep(1.0, 0.72, progress);
+    mask = (smoothstep(0.58, 0.92, ribbons) * 0.74 + smoothstep(0.76, 0.98, fine) * 0.22) * window;
+    glow = smoothstep(0.84, 1.0, ribbons) * window;
+    color = mix(vec3(1.0, 0.68, 0.22), vec3(1.0, 0.20, 0.62), lum);
+  } else if (uVariant < 5.5) {
+    // Demo 6 — planetary rotated displacement. Spiral vortex.
+    vec2 disp = vec2(noise(uv * 5.5 + uTime * 0.12), noise(uv * 5.5 + 4.2 - uTime * 0.10)) - 0.5;
+    vec2 q = rot(PI * 0.25) * (p + disp * 0.44 * parabola(progress, 0.55));
+    float ang = atan(q.y, q.x);
+    float rr = length(q);
+    float arms = sin(ang * 5.0 + rr * 18.0 - uTime * 1.8);
+    float core = 1.0 - smoothstep(0.0, 0.42, rr);
+    mask = (smoothstep(0.08, 0.92, arms) * 0.72 + core * 0.38) * parabola(progress, 0.58);
+    glow = exp(-abs(arms) * 1.5) * parabola(progress, 0.85);
+    color = mix(vec3(0.10, 0.88, 1.0), vec3(1.0, 0.66, 0.18), rr + core * 0.35);
+  } else if (uVariant < 6.5) {
+    // Demo 7 — divided UV stripe displacement. Barcode shutter.
+    vec2 divided = fract(uv * vec2(42.0, 1.0));
+    float stripeCore = step(0.18, divided.x) * step(divided.x, 0.62);
+    float diagonal = uv.x + uv.y * 0.18 + divided.x * 0.06;
+    float sweep = smoothstep(-0.10, 1.12, progress * 1.32 - diagonal + 0.18);
+    float shutter = stripeCore * sweep * smoothstep(0.04, 0.56, progress) * smoothstep(1.0, 0.78, progress);
+    mask = shutter * 0.92;
+    glow = stripeCore * exp(-pow(progress - uv.x, 2.0) * 30.0) * 0.86;
+    color = mix(vec3(1.0, 0.15, 0.55), vec3(0.12, 0.88, 1.0), divided.x);
+  } else {
+    // Demo 8 — noise push/pull. Vertical flow with directional pressure.
+    float hn = noise(uv * uRes / 115.0 + uTime * 0.12);
+    vec2 centerDir = normalize(vec2(0.5) - uv + 0.001);
+    float pull = centerDir.y * (1.0 + hn * 0.7) * parabola(progress, 0.62);
+    float bands = sin((uv.y + pull * 0.52) * 28.0 + hn * 5.0);
+    float pressure = smoothstep(-0.22, 0.96, bands) * parabola(progress, 0.62);
+    float verticalGlow = exp(-pow(uv.y - (0.5 + pull * 0.22), 2.0) * 18.0);
+    mask = pressure * 0.78 + verticalGlow * 0.22;
+    glow = verticalGlow * pressure;
+    color = mix(vec3(0.48, 1.0, 0.74), vec3(1.0, 0.22, 0.58), hn);
+  }
+
+  gl_FragColor = paint(uv, mask, color, glow);
+}
+`;
+const STRIP = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+
+interface Playback {
+  cancel: () => void;
+}
+interface Controller {
+  destroy: () => void;
+  setAlpha: (alpha: number) => void;
+  setProgress: (progress: number) => void;
+  setVariant: (variant: ShaderRevealVariant) => void;
+}
+
+const clamp01 = (value: number) => Math.max(0, Math.min(1, value));
+const easeOutQuart = (value: number) => 1 - (1 - value) ** 4;
+const easeInOutCubic = (value: number) =>
+  value < 0.5 ? 4 * value ** 3 : 1 - (-2 * value + 2) ** 3 / 2;
+
+const variantToUniform = (variant: ShaderRevealVariant) => {
+  switch (variant) {
+    case "noise":
+      return 0;
+    case "zoom":
+      return 1;
+    case "circle":
+      return 2;
+    case "wipe":
+      return 3;
+    case "luma":
+      return 4;
+    case "planetary":
+      return 5;
+    case "stripes":
+      return 6;
+    default:
+      return 7;
+  }
+};
+
+const compile = (gl: WebGLRenderingContext, type: number, source: string) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    return null;
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+};
+
+const resize = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) => {
+  const rect = canvas.getBoundingClientRect();
+  const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);
+  const width = Math.max(1, Math.round(rect.width * dpr));
+  const height = Math.max(1, Math.round(rect.height * dpr));
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+  gl.viewport(0, 0, width, height);
+};
+
+const createController = (
+  canvas: HTMLCanvasElement,
+  initialVariant: ShaderRevealVariant
+): Controller | null => {
+  const gl = canvas.getContext("webgl", {
+    alpha: true,
+    antialias: false,
+    premultipliedAlpha: true,
+  });
+  if (!gl) {
+    return null;
+  }
+  const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+  const program = gl.createProgram();
+  if (!(vertex && fragment && program)) {
+    return null;
+  }
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+
+  // biome-ignore lint/correctness/useHookAtTopLevel: WebGLRenderingContext.useProgram is not a React hook.
+  gl.useProgram(program);
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, STRIP, gl.STATIC_DRAW);
+  const position = gl.getAttribLocation(program, "a");
+  gl.enableVertexAttribArray(position);
+  gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+  const uRes = gl.getUniformLocation(program, "uRes");
+  const uTime = gl.getUniformLocation(program, "uTime");
+  const uProgress = gl.getUniformLocation(program, "uProgress");
+  const uAlpha = gl.getUniformLocation(program, "uAlpha");
+  const uVariant = gl.getUniformLocation(program, "uVariant");
+  const startedAt = performance.now();
+  let progress = 0;
+  let alpha = 0;
+  let variant = initialVariant;
+  let frame = 0;
+  let destroyed = false;
+
+  const tick = () => {
+    if (destroyed) {
+      return;
+    }
+    resize(canvas, gl);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.uniform2f(uRes, canvas.width, canvas.height);
+    gl.uniform1f(uTime, (performance.now() - startedAt) / 1000);
+    gl.uniform1f(uProgress, progress);
+    gl.uniform1f(uAlpha, alpha);
+    gl.uniform1f(uVariant, variantToUniform(variant));
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    frame = requestAnimationFrame(tick);
+  };
+  frame = requestAnimationFrame(tick);
+
+  return {
+    destroy: () => {
+      destroyed = true;
+      cancelAnimationFrame(frame);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      if (buffer) {
+        gl.deleteBuffer(buffer);
+      }
+      gl.deleteProgram(program);
+    },
+    setAlpha: (nextAlpha: number) => {
+      alpha = clamp01(nextAlpha);
+    },
+    setProgress: (nextProgress: number) => {
+      progress = clamp01(nextProgress);
+    },
+    setVariant: (nextVariant: ShaderRevealVariant) => {
+      variant = nextVariant;
+    },
+  };
+};
+
+const play = (
+  controller: Controller,
+  duration: number,
+  onMidpoint: () => void,
+  onComplete: () => void
+): Playback => {
+  let frame = 0;
+  let cancelled = false;
+  let didSwap = false;
+  const startedAt = performance.now();
+  controller.setAlpha(1);
+
+  const advance = () => {
+    if (cancelled) {
+      return;
+    }
+    const raw = clamp01((performance.now() - startedAt) / duration);
+    const progress = easeOutQuart(raw);
+    controller.setProgress(progress);
+    if (!(didSwap || progress < MIDPOINT)) {
+      didSwap = true;
+      onMidpoint();
+    }
+    if (raw < 1) {
+      frame = requestAnimationFrame(advance);
+      return;
+    }
+    if (!didSwap) {
+      onMidpoint();
+    }
+    const fadeStartedAt = performance.now();
+    const fade = () => {
+      if (cancelled) {
+        return;
+      }
+      const fadeRaw = clamp01((performance.now() - fadeStartedAt) / 90);
+      controller.setAlpha(1 - easeInOutCubic(fadeRaw));
+      if (fadeRaw < 1) {
+        frame = requestAnimationFrame(fade);
+        return;
+      }
+      controller.setAlpha(0);
+      controller.setProgress(0);
+      onComplete();
+    };
+    frame = requestAnimationFrame(fade);
+  };
+  frame = requestAnimationFrame(advance);
+
+  return {
+    cancel: () => {
+      cancelled = true;
+      cancelAnimationFrame(frame);
+    },
+  };
+};
+
+const ShaderRevealTransition = ({
+  children,
+  className,
+  duration = DEFAULT_DURATION_MS,
+  onRest,
+  transitionKey,
+  variant = "noise",
+}: ShaderRevealTransitionProps) => {
+  const shouldReduceMotion = useReducedMotion();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const controllerRef = useRef<Controller | null>(null);
+  const playbackRef = useRef<Playback | null>(null);
+  const previousKey = useRef(transitionKey);
+  const [renderedChildren, setRenderedChildren] = useState(children);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const controller = createController(canvas, variant);
+    controllerRef.current = controller;
+    return () => {
+      playbackRef.current?.cancel();
+      controller?.destroy();
+      controllerRef.current = null;
+    };
+  }, [variant]);
+
+  useEffect(() => {
+    if (previousKey.current === transitionKey) {
+      setRenderedChildren(children);
+      return;
+    }
+    previousKey.current = transitionKey;
+    playbackRef.current?.cancel();
+
+    if (shouldReduceMotion) {
+      setRenderedChildren(children);
+      setIsActive(false);
+      onRest?.();
+      return;
+    }
+
+    const controller = controllerRef.current;
+    if (!controller) {
+      setRenderedChildren(children);
+      onRest?.();
+      return;
+    }
+    controller.setVariant(variant);
+    setIsActive(true);
+    playbackRef.current = play(
+      controller,
+      duration,
+      () => setRenderedChildren(children),
+      () => {
+        setIsActive(false);
+        playbackRef.current = null;
+        onRest?.();
+      }
+    );
+  }, [children, duration, onRest, shouldReduceMotion, transitionKey, variant]);
+
+  return (
+    <div
+      className={cn(
+        "relative isolate overflow-hidden rounded-2xl bg-background text-foreground",
+        className
+      )}
+      data-transitioning={isActive ? "true" : "false"}
+    >
+      <div className="relative z-0">{renderedChildren}</div>
+      <canvas
+        className={cn(
+          "pointer-events-none absolute inset-0 z-10 h-full w-full transition-opacity duration-75",
+          isActive && !shouldReduceMotion ? "opacity-100" : "opacity-0"
+        )}
+        ref={canvasRef}
+      />
+    </div>
+  );
+};
+
+export default ShaderRevealTransition;
diff --git a/packages/smoothui/components/shader-reveal-transition/package.json b/packages/smoothui/components/shader-reveal-transition/package.json
new file mode 100644
index 00000000..bf1f8786
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-transition/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@repo/shader-reveal-transition",
+  "description": "A shared WebGL transition engine with eight shader-driven reveal variants.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "shader",
+      "state-change"
+    ],
+    "complexity": "advanced",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shader-reveal-transition/tsconfig.json b/packages/smoothui/components/shader-reveal-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/shader-reveal-wipe-transition/__tests__/shader-reveal-wipe-transition.test.tsx b/packages/smoothui/components/shader-reveal-wipe-transition/__tests__/shader-reveal-wipe-transition.test.tsx
new file mode 100644
index 00000000..f354fc44
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-wipe-transition/__tests__/shader-reveal-wipe-transition.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import ShaderRevealWipeTransition from "../index";
+
+describe("ShaderRevealWipeTransition", () => {
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <ShaderRevealWipeTransition transitionKey="draft">
+        Draft saved
+      </ShaderRevealWipeTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/shader-reveal-wipe-transition/index.tsx b/packages/smoothui/components/shader-reveal-wipe-transition/index.tsx
new file mode 100644
index 00000000..387cad4f
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-wipe-transition/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import ShaderRevealTransition from "../shader-reveal-transition";
+
+export interface ShaderRevealWipeTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const ShaderRevealWipeTransition = ({
+  children,
+  className,
+  duration = 1080,
+  onRest,
+  transitionKey,
+}: ShaderRevealWipeTransitionProps) => (
+  <ShaderRevealTransition
+    className={className}
+    duration={duration}
+    onRest={onRest}
+    transitionKey={transitionKey}
+    variant="wipe"
+  >
+    {children}
+  </ShaderRevealTransition>
+);
+
+export default ShaderRevealWipeTransition;
diff --git a/packages/smoothui/components/shader-reveal-wipe-transition/package.json b/packages/smoothui/components/shader-reveal-wipe-transition/package.json
new file mode 100644
index 00000000..cbc4710d
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-wipe-transition/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@repo/shader-reveal-wipe-transition",
+  "description": "Demo 4 adaptation: displacement-noise horizontal wipe with a sharp eased edge.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shader-reveal-transition": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "shader",
+      "state-change"
+    ],
+    "complexity": "advanced",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shader-reveal-wipe-transition/tsconfig.json b/packages/smoothui/components/shader-reveal-wipe-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-wipe-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/shader-reveal-zoom-transition/__tests__/shader-reveal-zoom-transition.test.tsx b/packages/smoothui/components/shader-reveal-zoom-transition/__tests__/shader-reveal-zoom-transition.test.tsx
new file mode 100644
index 00000000..538205b5
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-zoom-transition/__tests__/shader-reveal-zoom-transition.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import ShaderRevealZoomTransition from "../index";
+
+describe("ShaderRevealZoomTransition", () => {
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <ShaderRevealZoomTransition transitionKey="draft">
+        Draft saved
+      </ShaderRevealZoomTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/shader-reveal-zoom-transition/index.tsx b/packages/smoothui/components/shader-reveal-zoom-transition/index.tsx
new file mode 100644
index 00000000..5c38df91
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-zoom-transition/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import ShaderRevealTransition from "../shader-reveal-transition";
+
+export interface ShaderRevealZoomTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const ShaderRevealZoomTransition = ({
+  children,
+  className,
+  duration = 1080,
+  onRest,
+  transitionKey,
+}: ShaderRevealZoomTransitionProps) => (
+  <ShaderRevealTransition
+    className={className}
+    duration={duration}
+    onRest={onRest}
+    transitionKey={transitionKey}
+    variant="zoom"
+  >
+    {children}
+  </ShaderRevealTransition>
+);
+
+export default ShaderRevealZoomTransition;
diff --git a/packages/smoothui/components/shader-reveal-zoom-transition/package.json b/packages/smoothui/components/shader-reveal-zoom-transition/package.json
new file mode 100644
index 00000000..4e543140
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-zoom-transition/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@repo/shader-reveal-zoom-transition",
+  "description": "Demo 2 adaptation: vertical-progress zoom mix translated into a UI frame transition.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shader-reveal-transition": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "shader",
+      "state-change"
+    ],
+    "complexity": "advanced",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shader-reveal-zoom-transition/tsconfig.json b/packages/smoothui/components/shader-reveal-zoom-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/shader-reveal-zoom-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/components/shared-axis-x/index.tsx b/packages/smoothui/components/shared-axis-x/index.tsx
new file mode 100644
index 00000000..743a070d
--- /dev/null
+++ b/packages/smoothui/components/shared-axis-x/index.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+
+export interface SharedAxisXProps {
+  className?: string;
+  /** Interval between phrase swaps in milliseconds. */
+  interval?: number;
+  phrases: string[];
+}
+
+const ENTER_EASE = [0.2, 0, 0, 1] as const;
+const EXIT_EASE = [0.4, 0, 1, 1] as const;
+
+/**
+ * SharedAxisX — horizontal shared-axis phrase transition inspired by Google Material.
+ * Outgoing phrase slides left as the next slides in from the right.
+ * From the animate-text catalog (`shared-axis-x`).
+ */
+export default function SharedAxisX({
+  phrases,
+  className = "",
+  interval = 2500,
+}: SharedAxisXProps) {
+  const [index, setIndex] = useState(0);
+  const shouldReduceMotion = useReducedMotion();
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setIndex((prev) => (prev + 1) % phrases.length);
+    }, interval);
+    return () => clearInterval(id);
+  }, [interval, phrases.length]);
+
+  return (
+    <span
+      aria-live="polite"
+      className={`relative inline-block overflow-hidden ${className}`}
+    >
+      <AnimatePresence mode="wait">
+        <motion.span
+          animate={
+            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, x: 0, scale: 1 }
+          }
+          exit={
+            shouldReduceMotion
+              ? { opacity: 0, transition: { duration: 0 } }
+              : {
+                  opacity: 0,
+                  x: -20,
+                  scale: 0.98,
+                  transition: { duration: 0.36, ease: EXIT_EASE },
+                }
+          }
+          initial={
+            shouldReduceMotion
+              ? { opacity: 1 }
+              : { opacity: 0, x: 24, scale: 0.98 }
+          }
+          key={index}
+          style={{ display: "inline-block" }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : { duration: 0.5, ease: ENTER_EASE }
+          }
+        >
+          {phrases[index]}
+        </motion.span>
+      </AnimatePresence>
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/shared-axis-x/package.json b/packages/smoothui/components/shared-axis-x/package.json
new file mode 100644
index 00000000..01a79aa8
--- /dev/null
+++ b/packages/smoothui/components/shared-axis-x/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@repo/shared-axis-x",
+  "description": "A SharedAxisX text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "swap",
+      "horizontal",
+      "material",
+      "transition",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "shared-axis",
+    "useCases": [
+      "Rotating hero taglines with horizontal flow",
+      "Feature carousel text with directional continuity",
+      "Sibling page headings with Material-style transitions"
+    ],
+    "compositionHints": [
+      "Pair with horizontal layout shifts for maximum directional coherence",
+      "Use on short phrases under 6 words for cleanest motion"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shared-axis-x/tsconfig.json b/packages/smoothui/components/shared-axis-x/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/shared-axis-x/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/shared-axis-y/index.tsx b/packages/smoothui/components/shared-axis-y/index.tsx
new file mode 100644
index 00000000..0e5a77fb
--- /dev/null
+++ b/packages/smoothui/components/shared-axis-y/index.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+
+export interface SharedAxisYProps {
+  className?: string;
+  /** Interval between phrase swaps in milliseconds. */
+  interval?: number;
+  phrases: string[];
+}
+
+const STAGGER_S = 0.078;
+
+/**
+ * SharedAxisY — per-word hard-cut staircase transition.
+ * Each word flips in/out with stepped timing, creating a sharp editorial cascade.
+ * From the animate-text catalog (`shared-axis-y`, display: "Word Cut Staircase").
+ */
+export default function SharedAxisY({
+  phrases,
+  className = "",
+  interval = 2500,
+}: SharedAxisYProps) {
+  const [index, setIndex] = useState(0);
+  const shouldReduceMotion = useReducedMotion();
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setIndex((prev) => (prev + 1) % phrases.length);
+    }, interval);
+    return () => clearInterval(id);
+  }, [interval, phrases.length]);
+
+  const words = (phrases[index] ?? "").split(" ");
+
+  return (
+    <span
+      aria-live="polite"
+      className={`inline-flex flex-wrap gap-x-[0.25em] ${className}`}
+    >
+      <AnimatePresence mode="wait">
+        <motion.span
+          className="inline-flex flex-wrap gap-x-[0.25em]"
+          key={index}
+        >
+          {words.map((word, i) => (
+            <motion.span
+              animate={{ opacity: 1 }}
+              exit={
+                shouldReduceMotion
+                  ? { opacity: 0, transition: { duration: 0 } }
+                  : {
+                      opacity: 0,
+                      transition: { duration: 0, delay: i * STAGGER_S },
+                    }
+              }
+              initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0 }}
+              // biome-ignore lint/suspicious/noArrayIndexKey: words have no stable id
+              key={i}
+              style={{ display: "inline-block" }}
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : { duration: 0, delay: i * STAGGER_S }
+              }
+            >
+              {word}
+            </motion.span>
+          ))}
+        </motion.span>
+      </AnimatePresence>
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/shared-axis-y/package.json b/packages/smoothui/components/shared-axis-y/package.json
new file mode 100644
index 00000000..21500d9c
--- /dev/null
+++ b/packages/smoothui/components/shared-axis-y/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/shared-axis-y",
+  "description": "A SharedAxisY text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "swap",
+      "staircase",
+      "hard-cut",
+      "per-word",
+      "editorial",
+      "animated"
+    ],
+    "complexity": "moderate",
+    "animationType": "staircase",
+    "useCases": [
+      "Bold editorial headings with staggered word reveals",
+      "Dashboard metric label cycling",
+      "News ticker-style phrase swaps"
+    ],
+    "compositionHints": [
+      "Best on 2-4 word phrases for the staircase timing to read clearly",
+      "Pair with high-contrast typography for maximum impact"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shared-axis-y/tsconfig.json b/packages/smoothui/components/shared-axis-y/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/shared-axis-y/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/shared-axis-z/index.tsx b/packages/smoothui/components/shared-axis-z/index.tsx
new file mode 100644
index 00000000..5a05df08
--- /dev/null
+++ b/packages/smoothui/components/shared-axis-z/index.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+
+export interface SharedAxisZProps {
+  className?: string;
+  /** Interval between phrase swaps in milliseconds. */
+  interval?: number;
+  phrases: string[];
+}
+
+const ENTER_EASE = [0.2, 0, 0, 1] as const;
+const EXIT_EASE = [0.4, 0, 1, 1] as const;
+
+/**
+ * SharedAxisZ — scale/depth phrase transition inspired by Google Material shared axis (Z).
+ * Incoming phrase scales up from 0.9 with a soft blur; outgoing scales to 1.06 and fades.
+ * From the animate-text catalog (`shared-axis-z`).
+ */
+export default function SharedAxisZ({
+  phrases,
+  className = "",
+  interval = 2500,
+}: SharedAxisZProps) {
+  const [index, setIndex] = useState(0);
+  const shouldReduceMotion = useReducedMotion();
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setIndex((prev) => (prev + 1) % phrases.length);
+    }, interval);
+    return () => clearInterval(id);
+  }, [interval, phrases.length]);
+
+  return (
+    <span
+      aria-live="polite"
+      className={`relative inline-block overflow-hidden ${className}`}
+    >
+      <AnimatePresence mode="wait">
+        <motion.span
+          animate={
+            shouldReduceMotion
+              ? { opacity: 1 }
+              : { opacity: 1, scale: 1, filter: "blur(0px)" }
+          }
+          exit={
+            shouldReduceMotion
+              ? { opacity: 0, transition: { duration: 0 } }
+              : {
+                  opacity: 0,
+                  scale: 1.06,
+                  filter: "blur(1px)",
+                  transition: { duration: 0.36, ease: EXIT_EASE },
+                }
+          }
+          initial={
+            shouldReduceMotion
+              ? { opacity: 1 }
+              : { opacity: 0, scale: 0.9, filter: "blur(2px)" }
+          }
+          key={index}
+          style={{ display: "inline-block" }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : { duration: 0.52, ease: ENTER_EASE }
+          }
+        >
+          {phrases[index]}
+        </motion.span>
+      </AnimatePresence>
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/shared-axis-z/package.json b/packages/smoothui/components/shared-axis-z/package.json
new file mode 100644
index 00000000..d9d291a6
--- /dev/null
+++ b/packages/smoothui/components/shared-axis-z/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/shared-axis-z",
+  "description": "A SharedAxisZ text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "swap",
+      "scale",
+      "depth",
+      "blur",
+      "material",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "shared-axis",
+    "useCases": [
+      "Focus-shift transitions between phrases",
+      "Context depth changes in hero typography",
+      "Zoom-style narrative builds"
+    ],
+    "compositionHints": [
+      "Effective on large hero text where scale delta is perceptible",
+      "Pair with depth-layered layouts for maximum effect"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shared-axis-z/tsconfig.json b/packages/smoothui/components/shared-axis-z/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/shared-axis-z/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/shimmer-sweep/index.tsx b/packages/smoothui/components/shimmer-sweep/index.tsx
new file mode 100644
index 00000000..e0e7135a
--- /dev/null
+++ b/packages/smoothui/components/shimmer-sweep/index.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface ShimmerSweepProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.85;
+const MS = 1000;
+// Apple's signature ease-out.
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+/**
+ * ShimmerSweep — whole-text fade-in with a left-to-center slide and blur
+ * dissolve. A subtle sweep across a clean headline, blending in while gliding
+ * from left to center. From the animate-text catalog (`shimmer-sweep`).
+ * Best on hero titles and section headings.
+ */
+const ShimmerSweep = ({
+  children,
+  className = "",
+  delay = 0,
+  triggerOnView = false,
+}: ShimmerSweepProps) => {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+
+  return (
+    <span aria-label={children} className={className} ref={ref}>
+      <motion.span
+        animate={play ? { opacity: 1, x: 0, filter: "blur(0px)" } : undefined}
+        aria-hidden="true"
+        initial={
+          shouldReduceMotion
+            ? { opacity: 1, x: 0, filter: "blur(0px)" }
+            : { opacity: 0, x: -22, filter: "blur(8px)" }
+        }
+        style={{ display: "inline-block" }}
+        transition={
+          shouldReduceMotion
+            ? { duration: 0 }
+            : {
+                duration: DURATION_S,
+                delay: delay / MS,
+                ease: EASE,
+              }
+        }
+      >
+        {children}
+      </motion.span>
+    </span>
+  );
+};
+
+export default ShimmerSweep;
diff --git a/packages/smoothui/components/shimmer-sweep/package.json b/packages/smoothui/components/shimmer-sweep/package.json
new file mode 100644
index 00000000..53ce35b2
--- /dev/null
+++ b/packages/smoothui/components/shimmer-sweep/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@repo/shimmer-sweep",
+  "description": "A ShimmerSweep text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "shimmer",
+      "sweep",
+      "slide",
+      "blur",
+      "whole-text",
+      "entrance",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Hero headline with subtle sweep entrance",
+      "Section heading animated on scroll",
+      "Clean title reveal with left-to-center motion"
+    ],
+    "compositionHints": [
+      "Best on hero titles and section headings",
+      "Pair with triggerOnView for scroll-driven reveals"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shimmer-sweep/tsconfig.json b/packages/smoothui/components/shimmer-sweep/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/shimmer-sweep/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/shine-text/index.tsx b/packages/smoothui/components/shine-text/index.tsx
new file mode 100644
index 00000000..c0654c25
--- /dev/null
+++ b/packages/smoothui/components/shine-text/index.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { motion, useReducedMotion } from "motion/react";
+
+export interface ShineTextProps {
+  /** Base text color (any CSS color). */
+  baseColor?: string;
+  children: string;
+  className?: string;
+  /** Duration of one sweep, in seconds. */
+  duration?: number;
+  /** Pause between sweeps, in seconds. */
+  repeatDelay?: number;
+  /** Color of the sweeping highlight band. */
+  shineColor?: string;
+}
+
+/**
+ * ShineText — a literal light sweep that glides across the text on a loop,
+ * using a clipped moving gradient (metallic "shine" / shimmer). For the
+ * catalog's fade+slide reveal see `shimmer-sweep`.
+ */
+export default function ShineText({
+  children,
+  className = "",
+  duration = 2.5,
+  repeatDelay = 0.6,
+  baseColor = "var(--color-muted-foreground)",
+  shineColor = "var(--color-foreground)",
+}: ShineTextProps) {
+  const shouldReduceMotion = useReducedMotion();
+
+  if (shouldReduceMotion) {
+    return (
+      <span className={className} style={{ color: baseColor }}>
+        {children}
+      </span>
+    );
+  }
+
+  return (
+    <motion.span
+      animate={{ backgroundPositionX: ["150%", "-150%"] }}
+      className={className}
+      style={{
+        backgroundImage: `linear-gradient(110deg, ${baseColor} 40%, ${shineColor} 50%, ${baseColor} 60%)`,
+        backgroundSize: "250% 100%",
+        WebkitBackgroundClip: "text",
+        backgroundClip: "text",
+        color: "transparent",
+        WebkitTextFillColor: "transparent",
+      }}
+      transition={{
+        duration,
+        repeat: Number.POSITIVE_INFINITY,
+        repeatDelay,
+        ease: "linear",
+      }}
+    >
+      {children}
+    </motion.span>
+  );
+}
diff --git a/packages/smoothui/components/shine-text/package.json b/packages/smoothui/components/shine-text/package.json
new file mode 100644
index 00000000..ab0a655a
--- /dev/null
+++ b/packages/smoothui/components/shine-text/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@repo/shine-text",
+  "description": "A ShineText light-sweep text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "shine",
+      "shimmer",
+      "gradient",
+      "loop",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Metallic shine sweep across a headline",
+      "Subtle attention loop on a label or badge",
+      "Premium gradient highlight on hero copy"
+    ],
+    "compositionHints": [
+      "Use on short headings or labels",
+      "Pair muted base with foreground shine for contrast"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/shine-text/tsconfig.json b/packages/smoothui/components/shine-text/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/shine-text/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/short-slide-down/__tests__/short-slide-down.test.tsx b/packages/smoothui/components/short-slide-down/__tests__/short-slide-down.test.tsx
new file mode 100644
index 00000000..aeb1386d
--- /dev/null
+++ b/packages/smoothui/components/short-slide-down/__tests__/short-slide-down.test.tsx
@@ -0,0 +1,113 @@
+import { act, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "../../../test-utils/render";
+import ShortSlideDown from "../index";
+
+describe("ShortSlideDown", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders only the first word of the first phrase initially", () => {
+    render(<ShortSlideDown phrases={["Hello World", "Second Phrase"]} />);
+
+    expect(screen.getByText("Hello")).toBeInTheDocument();
+    expect(screen.queryByText("World")).not.toBeInTheDocument();
+  });
+
+  it("reveals subsequent words as the build schedule advances", () => {
+    render(<ShortSlideDown phrases={["Hello World"]} />);
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    expect(screen.getByText("World")).toBeInTheDocument();
+  });
+
+  it("cycles to the next phrase after the build completes and interval elapses", () => {
+    const { container } = render(
+      <ShortSlideDown interval={100} phrases={["Hi", "Bye"]} />
+    );
+
+    expect(container.textContent).toContain("Hi");
+
+    act(() => {
+      vi.advanceTimersByTime(360 + 100 + 320 + 180);
+    });
+
+    expect(container.textContent).toContain("Bye");
+  });
+
+  it("wraps back to the first phrase after the last one", () => {
+    const { container } = render(
+      <ShortSlideDown interval={100} phrases={["Hi", "Bye"]} />
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(360 + 100 + 320 + 180);
+    });
+    act(() => {
+      vi.advanceTimersByTime(360 + 100 + 320 + 180);
+    });
+
+    expect(container.textContent).toContain("Hi");
+  });
+
+  it("applies a custom className to the wrapper", () => {
+    const { container } = render(
+      <ShortSlideDown className="custom-class" phrases={["Hi"]} />
+    );
+
+    expect(container.querySelector("span.custom-class")).toBeInTheDocument();
+  });
+
+  it("marks the wrapper as an aria-live region", () => {
+    const { container } = render(<ShortSlideDown phrases={["Hi"]} />);
+
+    expect(
+      container.querySelector("span[aria-live='polite']")
+    ).toBeInTheDocument();
+  });
+});
+
+describe("ShortSlideDown with reduced motion", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.resetModules();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.doUnmock("motion/react");
+  });
+
+  it("shows the full phrase immediately and advances only via the interval", async () => {
+    vi.doMock("motion/react", async (importOriginal) => {
+      const actual = await importOriginal<typeof import("motion/react")>();
+      return { ...actual, useReducedMotion: () => true };
+    });
+    const { default: ShortSlideDownReduced } = await import("../index");
+
+    render(
+      <ShortSlideDownReduced
+        interval={200}
+        phrases={["Hello there", "Goodbye now"]}
+      />
+    );
+
+    expect(screen.getByText("Hello")).toBeInTheDocument();
+    expect(screen.getByText("there")).toBeInTheDocument();
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(screen.getByText("Goodbye")).toBeInTheDocument();
+    expect(screen.getByText("now")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/short-slide-down/index.tsx b/packages/smoothui/components/short-slide-down/index.tsx
new file mode 100644
index 00000000..a307cf5c
--- /dev/null
+++ b/packages/smoothui/components/short-slide-down/index.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+
+export interface ShortSlideDownProps {
+  className?: string;
+  /** Interval between phrase completions in milliseconds. */
+  interval?: number;
+  phrases: string[];
+}
+
+const BUILD_EASE = [0.2, 0.8, 0.2, 1] as const;
+const EXIT_EASE = [0.4, 0, 0.2, 1] as const;
+
+/**
+ * ShortSlideDown — each new word drops in from above into its own centered line,
+ * pushing the stack downward until a centered multi-line composition locks in place.
+ * From the animate-text catalog (`short-slide-down`).
+ */
+export default function ShortSlideDown({
+  phrases,
+  className = "",
+  interval = 2500,
+}: ShortSlideDownProps) {
+  const [phraseIndex, setPhraseIndex] = useState(0);
+  const [wordCount, setWordCount] = useState(1);
+  const [exiting, setExiting] = useState(false);
+  const shouldReduceMotion = useReducedMotion();
+
+  const currentPhrase = phrases[phraseIndex] ?? "";
+  const words = currentPhrase.split(" ");
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: words.length drives the build schedule
+  useEffect(() => {
+    if (shouldReduceMotion) {
+      const holdId = setTimeout(() => {
+        setPhraseIndex((prev) => (prev + 1) % phrases.length);
+      }, interval);
+      return () => clearTimeout(holdId);
+    }
+
+    setWordCount(1);
+    setExiting(false);
+
+    const buildTimers: ReturnType<typeof setTimeout>[] = [];
+
+    for (let i = 1; i < words.length; i++) {
+      buildTimers.push(
+        setTimeout(() => {
+          setWordCount(i + 1);
+        }, i * 500)
+      );
+    }
+
+    const totalBuild = (words.length - 1) * 500 + 360;
+    const holdId = setTimeout(() => {
+      setExiting(true);
+      setTimeout(() => {
+        setPhraseIndex((prev) => (prev + 1) % phrases.length);
+        setWordCount(1);
+        setExiting(false);
+      }, 320 + 180);
+    }, totalBuild + interval);
+
+    buildTimers.push(holdId);
+    return () => {
+      for (const t of buildTimers) {
+        clearTimeout(t);
+      }
+    };
+  }, [phraseIndex, phrases.length, interval, shouldReduceMotion, words.length]);
+
+  const visibleWords = shouldReduceMotion ? words : words.slice(0, wordCount);
+  const restingAnimate = shouldReduceMotion
+    ? { opacity: 1 }
+    : { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" };
+  const exitAnimate = {
+    opacity: 0,
+    y: 10,
+    filter: "blur(1.2px)",
+    transition: { duration: 0.32, ease: EXIT_EASE },
+  };
+
+  return (
+    <span
+      aria-live="polite"
+      className={`flex flex-col items-center ${className}`}
+      style={{ gap: 12 }}
+    >
+      <AnimatePresence mode="popLayout">
+        {visibleWords.map((word, i) => (
+          <motion.span
+            animate={exiting ? exitAnimate : restingAnimate}
+            initial={
+              shouldReduceMotion
+                ? { opacity: 1 }
+                : { opacity: 0, y: -28, scale: 0.992, filter: "blur(2.4px)" }
+            }
+            // biome-ignore lint/suspicious/noArrayIndexKey: word position is the stable identity within a phrase
+            key={`${phraseIndex}-${i}`}
+            layout
+            style={{ display: "block" }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : {
+                    duration: i === 0 ? 0.36 : 0.5,
+                    ease: BUILD_EASE,
+                    layout: { duration: 0.5, ease: BUILD_EASE },
+                  }
+            }
+          >
+            {word}
+          </motion.span>
+        ))}
+      </AnimatePresence>
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/short-slide-down/package.json b/packages/smoothui/components/short-slide-down/package.json
new file mode 100644
index 00000000..41a6e8e2
--- /dev/null
+++ b/packages/smoothui/components/short-slide-down/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/short-slide-down",
+  "description": "A ShortSlideDown text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "build",
+      "vertical",
+      "per-word",
+      "stacked",
+      "keynote",
+      "animated"
+    ],
+    "complexity": "moderate",
+    "animationType": "kinetic-build",
+    "useCases": [
+      "Stacked word-by-word reveal for centered multi-line headings",
+      "Keynote-style editorial builds with vertical push",
+      "Short three-word phrases built into a centered column"
+    ],
+    "compositionHints": [
+      "Best on 2-4 word phrases; each word occupies its own line",
+      "Use large font sizes (48px+) for the vertical displacement to read clearly"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/short-slide-down/tsconfig.json b/packages/smoothui/components/short-slide-down/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/short-slide-down/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/short-slide-right/index.tsx b/packages/smoothui/components/short-slide-right/index.tsx
new file mode 100644
index 00000000..932fad9d
--- /dev/null
+++ b/packages/smoothui/components/short-slide-right/index.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+
+export interface ShortSlideRightProps {
+  className?: string;
+  /** Interval between phrase swaps in milliseconds. */
+  interval?: number;
+  phrases: string[];
+}
+
+const ENTER_EASE = [0.2, 0.8, 0.2, 1] as const;
+const EXIT_EASE = [0.4, 0, 0.2, 1] as const;
+
+/**
+ * ShortSlideRight — the whole phrase glides in from the left as one compact unit
+ * while words reveal in sequence through opacity stagger.
+ * Keynote-style editorial restraint. From the animate-text catalog (`short-slide-right`).
+ */
+export default function ShortSlideRight({
+  phrases,
+  className = "",
+  interval = 2500,
+}: ShortSlideRightProps) {
+  const [index, setIndex] = useState(0);
+  const shouldReduceMotion = useReducedMotion();
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setIndex((prev) => (prev + 1) % phrases.length);
+    }, interval);
+    return () => clearInterval(id);
+  }, [interval, phrases.length]);
+
+  const words = phrases[index]?.split(" ") ?? [];
+
+  return (
+    <span
+      aria-live="polite"
+      className={`relative inline-block overflow-hidden ${className}`}
+    >
+      <AnimatePresence mode="wait">
+        <motion.span
+          animate={
+            shouldReduceMotion ? { opacity: 1 } : { x: 0, filter: "blur(0px)" }
+          }
+          exit={
+            shouldReduceMotion
+              ? { opacity: 0, transition: { duration: 0 } }
+              : {
+                  opacity: 0,
+                  x: 12,
+                  filter: "blur(1px)",
+                  transition: { duration: 0.32, ease: EXIT_EASE },
+                }
+          }
+          initial={
+            shouldReduceMotion
+              ? { opacity: 1 }
+              : { x: -24, filter: "blur(1.2px)" }
+          }
+          key={index}
+          style={{ display: "inline-flex", gap: "0.25em", flexWrap: "nowrap" }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : { duration: 0.52, ease: ENTER_EASE }
+          }
+        >
+          {words.map((word, i) => (
+            <motion.span
+              animate={{ opacity: 1 }}
+              initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0 }}
+              // biome-ignore lint/suspicious/noArrayIndexKey: words have no stable id
+              key={i}
+              style={{ display: "inline-block" }}
+              transition={
+                shouldReduceMotion
+                  ? { duration: 0 }
+                  : { duration: 0.21, delay: i * 0.092, ease: ENTER_EASE }
+              }
+            >
+              {word}
+            </motion.span>
+          ))}
+        </motion.span>
+      </AnimatePresence>
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/short-slide-right/package.json b/packages/smoothui/components/short-slide-right/package.json
new file mode 100644
index 00000000..8a547bc6
--- /dev/null
+++ b/packages/smoothui/components/short-slide-right/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/short-slide-right",
+  "description": "A ShortSlideRight text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "swap",
+      "slide",
+      "per-word",
+      "opacity",
+      "keynote",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "slide",
+    "useCases": [
+      "Keynote-style editorial headings with restrained motion",
+      "Feature benefit cycling with word-order emphasis",
+      "Hero taglines with directional reveal"
+    ],
+    "compositionHints": [
+      "Best on 3-5 word phrases where word order matters",
+      "Keep font weight bold for the opacity stagger to read clearly"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/short-slide-right/tsconfig.json b/packages/smoothui/components/short-slide-right/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/short-slide-right/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/smooth-button/__tests__/smooth-button.test.tsx b/packages/smoothui/components/smooth-button/__tests__/smooth-button.test.tsx
index 146f4a29..9a8020fc 100644
--- a/packages/smoothui/components/smooth-button/__tests__/smooth-button.test.tsx
+++ b/packages/smoothui/components/smooth-button/__tests__/smooth-button.test.tsx
@@ -4,7 +4,67 @@ import SmoothButton from "../index";
 
 describe("SmoothButton", () => {
   it("renders without throwing", () => {
-    const { container } = render(<SmoothButton>Click me</SmoothButton>);
-    expect(container).toBeInTheDocument();
+    const { getByRole } = render(<SmoothButton>Click me</SmoothButton>);
+    expect(getByRole("button")).toBeInTheDocument();
+  });
+
+  it("renders every variant × color combination", () => {
+    const variants = [
+      "solid",
+      "soft",
+      "outline",
+      "ghost",
+      "link",
+      "candy",
+    ] as const;
+    const colors = [
+      "accent",
+      "neutral",
+      "destructive",
+      "blue",
+      "amber",
+      "green",
+    ] as const;
+    for (const variant of variants) {
+      for (const color of colors) {
+        const { getByRole, unmount } = render(
+          <SmoothButton color={color} variant={variant}>
+            {variant}-{color}
+          </SmoothButton>
+        );
+        expect(getByRole("button")).toBeInTheDocument();
+        unmount();
+      }
+    }
+  });
+
+  it("preserves legacy variants for back-compat", () => {
+    for (const variant of ["default", "secondary", "destructive"] as const) {
+      const { getByRole, unmount } = render(
+        <SmoothButton variant={variant}>{variant}</SmoothButton>
+      );
+      expect(getByRole("button")).toBeInTheDocument();
+      unmount();
+    }
+  });
+
+  it("sets aria-busy and disables interaction while loading", () => {
+    const { getByRole } = render(<SmoothButton loading>Save</SmoothButton>);
+    const button = getByRole("button");
+    expect(button).toHaveAttribute("aria-busy", "true");
+    expect(button).toBeDisabled();
+  });
+
+  it("renders prefix and suffix slots", () => {
+    const { getByTestId } = render(
+      <SmoothButton
+        prefix={<span data-testid="prefix" />}
+        suffix={<span data-testid="suffix" />}
+      >
+        Label
+      </SmoothButton>
+    );
+    expect(getByTestId("prefix")).toBeInTheDocument();
+    expect(getByTestId("suffix")).toBeInTheDocument();
   });
 });
diff --git a/packages/smoothui/components/smooth-button/index.tsx b/packages/smoothui/components/smooth-button/index.tsx
index 0e8e2bbd..99dfd09d 100644
--- a/packages/smoothui/components/smooth-button/index.tsx
+++ b/packages/smoothui/components/smooth-button/index.tsx
@@ -3,62 +3,229 @@
 import { Slot } from "@radix-ui/react-slot";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
-import type React from "react";
-import type { ButtonHTMLAttributes } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import type { ButtonHTMLAttributes, ReactNode, Ref } from "react";
+import { useEffect, useRef } from "react";
 
+/**
+ * SmoothButton — the first primitive of the SmoothUI Design System.
+ *
+ * Three orthogonal axes (see design-system/components/button.md):
+ *   variant → appearance only (solid | soft | outline | ghost | link | candy)
+ *   color   → hue (accent | neutral | destructive | blue | amber | green)
+ *   size    → xs | sm | default | lg + icon-*
+ *
+ * The `color` axis only sets CSS custom props (--btn, --btn-hover, --btn-fg);
+ * each `variant` consumes them generically, so 6 variants × 6 colors stay 12
+ * class strings, not 36. When no `color` is given, CSS var fallbacks apply
+ * (candy → brand, everything else → neutral/foreground).
+ *
+ * Legacy variants `default` / `secondary` / `destructive` are preserved verbatim
+ * for back-compat with existing call sites and ignore the `color` axis.
+ */
 const smoothButtonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm ring-offset-background transition-transform duration-150 ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50",
+  "relative inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap font-medium outline-none ring-offset-background transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
+        // --- new decoupled system (consume --btn / --btn-hover / --btn-fg) ---
+        solid:
+          "bg-[var(--btn,var(--color-foreground))] text-[var(--btn-fg,var(--color-background))] shadow-xs hover:bg-[var(--btn-hover,var(--color-smooth-900))]",
+        soft: "bg-[color-mix(in_oklab,var(--btn,var(--color-foreground))_12%,transparent)] text-[var(--btn,var(--color-foreground))] hover:bg-[color-mix(in_oklab,var(--btn,var(--color-foreground))_18%,transparent)]",
+        outline:
+          "border border-transparent bg-background text-[var(--btn,var(--color-foreground))] shadow-black/15 shadow-sm ring-1 ring-foreground/10 hover:bg-primary dark:ring-foreground/15",
+        ghost:
+          "text-[var(--btn,var(--color-foreground))] hover:bg-[color-mix(in_oklab,var(--btn,var(--color-foreground))_10%,transparent)]",
+        link: "text-[var(--btn,var(--color-foreground))] underline-offset-4 hover:underline",
+        candy:
+          "border-[0.5px] border-white/25 bg-gradient-to-b from-[var(--btn,var(--color-brand))] to-[var(--btn-hover,var(--color-brand-secondary))] text-[var(--btn-fg,#fff)] text-shadow-sm shadow-black/20 shadow-md ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--btn,var(--color-brand)))] hover:from-[var(--btn-hover,var(--color-brand-secondary))] hover:to-[var(--btn-hover,var(--color-brand-secondary))] [&_svg]:drop-shadow-sm",
+        // --- legacy (preserved verbatim, ignore `color`) ---
         default:
           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-gradient-to-b from-[#FD4B4E] to-destructive text-shadow-sm text-white shadow-[0px_1px_2px_rgba(0,0,0,0.4),0px_0px_0px_1px_#F61418,inset_0px_0.75px_0px_rgba(255,255,255,0.2)] hover:from-destructive hover:to-destructive",
-        outline:
-          "border border-input bg-background shadow-xs hover:bg-accent hover:text-white dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost: "hover:bg-background hover:text-foreground hover:shadow-custom",
-        link: "text-primary underline-offset-4 hover:underline",
-        candy:
-          "border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-shadow-sm text-white shadow-black/20 shadow-md ring-(--ring-color) ring-1 [--ring-color:color-mix(in_oklab,var(--color-foreground)15%,var(--color-brand))] hover:from-brand-secondary hover:to-brand-secondary [&_svg]:drop-shadow-sm",
+        destructive:
+          "bg-gradient-to-b from-[#FD4B4E] to-destructive text-shadow-sm text-white shadow-[0px_1px_2px_rgba(0,0,0,0.4),0px_0px_0px_1px_#F61418,inset_0px_0.75px_0px_rgba(255,255,255,0.2)] hover:from-destructive hover:to-destructive",
+      },
+      color: {
+        accent:
+          "[--btn-fg:#fff] [--btn-hover:var(--color-brand-secondary)] [--btn:var(--color-brand)]",
+        neutral:
+          "[--btn-fg:var(--color-background)] [--btn-hover:var(--color-smooth-900)] [--btn:var(--color-foreground)]",
+        destructive:
+          "[--btn-fg:#fff] [--btn-hover:color-mix(in_oklab,var(--color-destructive)_85%,black)] [--btn:var(--color-destructive)]",
+        blue: "[--btn-fg:var(--color-blue-fg)] [--btn-hover:var(--color-blue-hover)] [--btn:var(--color-blue)]",
+        amber:
+          "[--btn-fg:var(--color-amber-fg)] [--btn-hover:var(--color-amber-hover)] [--btn:var(--color-amber)]",
+        green:
+          "[--btn-fg:var(--color-green-fg)] [--btn-hover:var(--color-green-hover)] [--btn:var(--color-green)]",
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-4 py-2",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        xs: "h-7 gap-1.5 rounded-sm px-2.5 text-xs [&_svg]:size-3.5",
+        sm: "h-9 gap-1.5 rounded-md px-3 text-sm [&_svg]:size-4",
+        default: "h-10 gap-2 rounded-md px-4 py-2 text-sm [&_svg]:size-4",
+        lg: "h-11 gap-2 rounded-lg px-8 text-base [&_svg]:size-5",
+        icon: "size-10 rounded-md [&_svg]:size-4",
+        "icon-sm": "size-9 rounded-md [&_svg]:size-4",
+        "icon-lg": "size-11 rounded-lg [&_svg]:size-5",
+      },
+      shape: {
+        default: "",
+        square: "rounded-none!",
+        pill: "rounded-full!",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
+      shape: "default",
     },
   }
 );
 
-export type SmoothButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+export type SmoothButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "prefix" | "color"
+> &
   VariantProps<typeof smoothButtonVariants> & {
     asChild?: boolean;
-    ref?: React.Ref<HTMLButtonElement>;
+    /** Show a spinner that morphs the button width without layout jump. */
+    loading?: boolean;
+    /** Content before the label (icon, Kbd…). */
+    prefix?: ReactNode;
+    /** Content after the label. */
+    suffix?: ReactNode;
+    /** Opt-in Safari force-press depth (scales to 0.94 under pressure). */
+    forcePress?: boolean;
+    ref?: Ref<HTMLButtonElement>;
   };
 
+const Spinner = () => (
+  <svg
+    aria-hidden="true"
+    className="size-[1em] animate-spin"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="3"
+    />
+    <path
+      className="opacity-90"
+      d="M12 2a10 10 0 0 1 10 10"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth="3"
+    />
+  </svg>
+);
+
 function SmoothButton({
   className,
   variant,
+  color,
   size,
+  shape,
   asChild = false,
+  loading = false,
+  forcePress = false,
+  prefix,
+  suffix,
+  disabled,
+  children,
   ref,
   ...props
 }: SmoothButtonProps) {
-  const Comp = asChild ? Slot : "button";
+  const shouldReduceMotion = useReducedMotion();
+  const localRef = useRef<HTMLButtonElement>(null);
+
+  // Safari-only force-press: deepen the press past the normal active scale.
+  useEffect(() => {
+    const node = localRef.current;
+    if (!(forcePress && node) || shouldReduceMotion) {
+      return;
+    }
+    const FORCE_THRESHOLD = 2; // Safari's "force click" boundary
+    const onForce = (e: Event) => {
+      const force = (e as Event & { webkitForce?: number }).webkitForce ?? 0;
+      node.style.transform = force >= FORCE_THRESHOLD ? "scale(0.94)" : "";
+    };
+    const reset = () => {
+      node.style.transform = "";
+    };
+    node.addEventListener("webkitmouseforcechanged", onForce);
+    node.addEventListener("mouseup", reset);
+    node.addEventListener("mouseleave", reset);
+    return () => {
+      node.removeEventListener("webkitmouseforcechanged", onForce);
+      node.removeEventListener("mouseup", reset);
+      node.removeEventListener("mouseleave", reset);
+    };
+  }, [forcePress, shouldReduceMotion]);
+
+  const classes = cn(
+    smoothButtonVariants({ variant, color, size, shape, className })
+  );
+
+  // asChild defers all rendering to the consumer's element — slots/loading
+  // are not injected (single-child contract of Radix Slot).
+  if (asChild) {
+    return (
+      <Slot className={classes} ref={ref} {...props}>
+        {children}
+      </Slot>
+    );
+  }
+
+  const setRefs = (node: HTMLButtonElement | null) => {
+    localRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      (ref as { current: HTMLButtonElement | null }).current = node;
+    }
+  };
+
   return (
-    <Comp
-      className={cn(smoothButtonVariants({ variant, size, className }))}
-      ref={ref}
+    <button
+      aria-busy={loading || undefined}
+      className={classes}
+      disabled={disabled || loading}
+      ref={setRefs}
+      type={props.type ?? "button"}
       {...props}
-    />
+    >
+      <AnimatePresence initial={false}>
+        {loading && (
+          <motion.span
+            animate={{ width: "1em", opacity: 1, marginRight: "0.5rem" }}
+            className="inline-flex shrink-0 items-center justify-center overflow-hidden"
+            exit={{ width: 0, opacity: 0, marginRight: 0 }}
+            initial={
+              shouldReduceMotion
+                ? { width: "1em", opacity: 1, marginRight: "0.5rem" }
+                : { width: 0, opacity: 0, marginRight: 0 }
+            }
+            key="spinner"
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : { type: "spring", duration: 0.25, bounce: 0.1 }
+            }
+          >
+            <Spinner />
+          </motion.span>
+        )}
+      </AnimatePresence>
+      {prefix}
+      {children}
+      {suffix}
+    </button>
   );
 }
 
diff --git a/packages/smoothui/components/smooth-button/package.json b/packages/smoothui/components/smooth-button/package.json
index 2f0f6746..5f72f344 100644
--- a/packages/smoothui/components/smooth-button/package.json
+++ b/packages/smoothui/components/smooth-button/package.json
@@ -7,6 +7,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@repo/shadcn-ui": "workspace:*",
     "class-variance-authority": "^0.7.1",
+    "motion": "^12.23.25",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -26,7 +27,7 @@
       "interactive"
     ],
     "complexity": "simple",
-    "animationType": "css",
+    "animationType": "motion",
     "useCases": [
       "Call-to-action buttons",
       "Primary action buttons with gradient styling",
@@ -37,6 +38,6 @@
       "Use outline variant for secondary actions",
       "Combine with asChild for link buttons"
     ],
-    "hasReducedMotion": false
+    "hasReducedMotion": true
   }
 }
diff --git a/packages/smoothui/components/soft-blur-in/index.tsx b/packages/smoothui/components/soft-blur-in/index.tsx
new file mode 100644
index 00000000..886a7d55
--- /dev/null
+++ b/packages/smoothui/components/soft-blur-in/index.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface SoftBlurInProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Per-character stagger, in milliseconds. */
+  stagger?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.9;
+const MS = 1000;
+// Apple's signature ease-out.
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+/**
+ * SoftBlurIn — per-character fade-in with a gentle blur and upward motion,
+ * Apple's signature hero-title reveal. From the animate-text catalog
+ * (`soft-blur-in`). Best on hero titles 48px+ over solid backgrounds.
+ */
+export default function SoftBlurIn({
+  children,
+  className = "",
+  delay = 0,
+  stagger = 25,
+  triggerOnView = false,
+}: SoftBlurInProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+  const characters = Array.from(children);
+
+  return (
+    <span aria-label={children} className={className} ref={ref}>
+      {characters.map((char, index) => (
+        <motion.span
+          animate={play ? { opacity: 1, y: 0, filter: "blur(0px)" } : undefined}
+          aria-hidden="true"
+          initial={
+            shouldReduceMotion
+              ? { opacity: 1 }
+              : { opacity: 0, y: 16, filter: "blur(12px)" }
+          }
+          // biome-ignore lint/suspicious/noArrayIndexKey: characters have no stable id
+          key={index}
+          style={{ display: "inline-block", whiteSpace: "pre" }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : {
+                  duration: DURATION_S,
+                  delay: delay / MS + (index * stagger) / MS,
+                  ease: EASE,
+                }
+          }
+        >
+          {char === " " ? " " : char}
+        </motion.span>
+      ))}
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/soft-blur-in/package.json b/packages/smoothui/components/soft-blur-in/package.json
new file mode 100644
index 00000000..7617246e
--- /dev/null
+++ b/packages/smoothui/components/soft-blur-in/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@repo/soft-blur-in",
+  "description": "A SoftBlurIn text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "blur",
+      "per-character",
+      "entrance",
+      "apple",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Apple-style hero title reveal",
+      "Premium headline entrance with soft blur",
+      "Section heading animated on scroll"
+    ],
+    "compositionHints": [
+      "Use on hero titles 48px+ over solid backgrounds",
+      "Pair with per-word effects for long copy"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/soft-blur-in/tsconfig.json b/packages/smoothui/components/soft-blur-in/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/soft-blur-in/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/spring-scale-in/index.tsx b/packages/smoothui/components/spring-scale-in/index.tsx
new file mode 100644
index 00000000..270a1816
--- /dev/null
+++ b/packages/smoothui/components/spring-scale-in/index.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+/**
+ * SpringScaleIn — per-word scale-in with a soft overshoot, iOS app icon-style pop.
+ * From the animate-text catalog (`spring-scale-in`).
+ */
+export interface SpringScaleInProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Per-word stagger, in milliseconds. */
+  stagger?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.36;
+const MS = 1000;
+const EASE = [0.34, 1.56, 0.64, 1] as const;
+
+export default function SpringScaleIn({
+  children,
+  className = "",
+  delay = 0,
+  stagger = 95,
+  triggerOnView = false,
+}: SpringScaleInProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+  const words = children.split(" ");
+
+  return (
+    <span aria-label={children} className={className} ref={ref}>
+      {words.map((word, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: words have no stable id
+        <span key={index}>
+          <motion.span
+            animate={play ? { opacity: 1, scale: 1 } : undefined}
+            aria-hidden="true"
+            initial={
+              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, scale: 0.7 }
+            }
+            style={{ display: "inline-block", whiteSpace: "pre" }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : {
+                    duration: DURATION_S,
+                    delay: delay / MS + (index * stagger) / MS,
+                    ease: EASE,
+                  }
+            }
+          >
+            {word}
+          </motion.span>
+          {index < words.length - 1 && (
+            <span
+              aria-hidden="true"
+              style={{ display: "inline-block", whiteSpace: "pre" }}
+            >
+              {" "}
+            </span>
+          )}
+        </span>
+      ))}
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/spring-scale-in/package.json b/packages/smoothui/components/spring-scale-in/package.json
new file mode 100644
index 00000000..db1a7c01
--- /dev/null
+++ b/packages/smoothui/components/spring-scale-in/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/spring-scale-in",
+  "description": "A SpringScaleIn text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "scale",
+      "spring",
+      "per-word",
+      "entrance",
+      "bounce",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "spring",
+    "useCases": [
+      "iOS-style word pop-in",
+      "Playful heading entrance",
+      "Widget or card title reveal"
+    ],
+    "compositionHints": [
+      "Best for short to medium phrases",
+      "High stagger creates a visible staircase effect"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/spring-scale-in/tsconfig.json b/packages/smoothui/components/spring-scale-in/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/spring-scale-in/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/stagger-from-center/index.tsx b/packages/smoothui/components/stagger-from-center/index.tsx
new file mode 100644
index 00000000..0edc08b3
--- /dev/null
+++ b/packages/smoothui/components/stagger-from-center/index.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface StaggerFromCenterProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Per-step stagger between characters, in milliseconds. */
+  stagger?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.62;
+const MS = 1000;
+// Apple-ish ease-out for center-out reveal.
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+/**
+ * StaggerFromCenter — characters reveal from the center outward to
+ * emphasize the keyword core. Delay is computed by distance from center,
+ * not linear index. From the animate-text catalog (`stagger-from-center`).
+ */
+export default function StaggerFromCenter({
+  children,
+  className = "",
+  delay = 0,
+  stagger = 22,
+  triggerOnView = false,
+}: StaggerFromCenterProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+  const characters = Array.from(children);
+  const center = (characters.length - 1) / 2;
+
+  return (
+    <span aria-label={children} className={className} ref={ref}>
+      {characters.map((char, index) => {
+        const distance = Math.abs(index - center);
+        return (
+          <motion.span
+            animate={
+              play ? { opacity: 1, y: 0, filter: "blur(0px)" } : undefined
+            }
+            aria-hidden="true"
+            initial={
+              shouldReduceMotion
+                ? { opacity: 1 }
+                : { opacity: 0, y: 12, filter: "blur(3px)" }
+            }
+            // biome-ignore lint/suspicious/noArrayIndexKey: characters have no stable id
+            key={index}
+            style={{ display: "inline-block", whiteSpace: "pre" }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : {
+                    duration: DURATION_S,
+                    delay: delay / MS + (distance * stagger) / MS,
+                    ease: EASE,
+                  }
+            }
+          >
+            {char === " " ? " " : char}
+          </motion.span>
+        );
+      })}
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/stagger-from-center/package.json b/packages/smoothui/components/stagger-from-center/package.json
new file mode 100644
index 00000000..864b2c8f
--- /dev/null
+++ b/packages/smoothui/components/stagger-from-center/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/stagger-from-center",
+  "description": "A StaggerFromCenter text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "per-character",
+      "center-out",
+      "stagger",
+      "blur",
+      "entrance",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Product hero typography with center-weighted emphasis",
+      "Short keyword reveal that emphasizes the core",
+      "Section heading with outward reveal on scroll"
+    ],
+    "compositionHints": [
+      "Use on short words or compact titles for best effect",
+      "Pair with stagger-from-edges for alternating reveal patterns"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/stagger-from-center/tsconfig.json b/packages/smoothui/components/stagger-from-center/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/stagger-from-center/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/stagger-from-edges/index.tsx b/packages/smoothui/components/stagger-from-edges/index.tsx
new file mode 100644
index 00000000..40337fc8
--- /dev/null
+++ b/packages/smoothui/components/stagger-from-edges/index.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface StaggerFromEdgesProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Per-step stagger between characters, in milliseconds. */
+  stagger?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.62;
+const MS = 1000;
+// Apple-ish ease-out for edges-in reveal.
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+/**
+ * StaggerFromEdges — characters start from both edges and converge toward
+ * the center. Delay is computed by distance from the nearest edge, not
+ * linear index. From the animate-text catalog (`stagger-from-edges`).
+ */
+export default function StaggerFromEdges({
+  children,
+  className = "",
+  delay = 0,
+  stagger = 22,
+  triggerOnView = false,
+}: StaggerFromEdgesProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+  const characters = Array.from(children);
+  const lastIndex = characters.length - 1;
+
+  return (
+    <span aria-label={children} className={className} ref={ref}>
+      {characters.map((char, index) => {
+        // Distance from the nearest edge (0 = edge character, increases toward center)
+        const distanceFromEdge = Math.min(index, lastIndex - index);
+        return (
+          <motion.span
+            animate={
+              play ? { opacity: 1, y: 0, filter: "blur(0px)" } : undefined
+            }
+            aria-hidden="true"
+            initial={
+              shouldReduceMotion
+                ? { opacity: 1 }
+                : { opacity: 0, y: 12, filter: "blur(3px)" }
+            }
+            // biome-ignore lint/suspicious/noArrayIndexKey: characters have no stable id
+            key={index}
+            style={{ display: "inline-block", whiteSpace: "pre" }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : {
+                    duration: DURATION_S,
+                    delay: delay / MS + (distanceFromEdge * stagger) / MS,
+                    ease: EASE,
+                  }
+            }
+          >
+            {char === " " ? " " : char}
+          </motion.span>
+        );
+      })}
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/stagger-from-edges/package.json b/packages/smoothui/components/stagger-from-edges/package.json
new file mode 100644
index 00000000..4311169c
--- /dev/null
+++ b/packages/smoothui/components/stagger-from-edges/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/stagger-from-edges",
+  "description": "A StaggerFromEdges text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "per-character",
+      "edges-in",
+      "stagger",
+      "blur",
+      "entrance",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Modern product hero typography with edge-to-center convergence",
+      "Medium-length word reveal with directional emphasis",
+      "Section heading with converging reveal on scroll"
+    ],
+    "compositionHints": [
+      "Effective for medium word lengths where edge-to-center motion remains readable",
+      "Pair with stagger-from-center for alternating reveal patterns"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/stagger-from-edges/tsconfig.json b/packages/smoothui/components/stagger-from-edges/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/stagger-from-edges/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/switchboard-card/__tests__/switchboard-card.test.tsx b/packages/smoothui/components/switchboard-card/__tests__/switchboard-card.test.tsx
index 22752bbc..23b1dd8a 100644
--- a/packages/smoothui/components/switchboard-card/__tests__/switchboard-card.test.tsx
+++ b/packages/smoothui/components/switchboard-card/__tests__/switchboard-card.test.tsx
@@ -1,4 +1,5 @@
-import { describe, expect, it } from "vitest";
+import { act, fireEvent } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { render } from "../../../test-utils/render";
 import SwitchboardCard from "../index";
 
@@ -9,4 +10,107 @@ describe("SwitchboardCard", () => {
     );
     expect(container).toBeInTheDocument();
   });
+
+  it("renders title and subtitle text", () => {
+    const { getByText } = render(
+      <SwitchboardCard subtitle="My subtitle" title="My title" />
+    );
+    expect(getByText("My title")).toBeInTheDocument();
+    expect(getByText("My subtitle")).toBeInTheDocument();
+  });
+
+  it("lights up cells from a flat grid pattern", () => {
+    const { container } = render(
+      <SwitchboardCard
+        columns={3}
+        gridPattern={[1, 0, 0, 0, 1, 0]}
+        rows={2}
+        subtitle="Subtitle"
+        title="Test"
+      />
+    );
+    const highLights = container.querySelectorAll('[data-state="high"]');
+    expect(highLights).toHaveLength(2);
+  });
+
+  it("lights up cells from a 2D grid pattern", () => {
+    const { container } = render(
+      <SwitchboardCard
+        columns={2}
+        gridPattern={[
+          [1, 0],
+          [0, 1],
+        ]}
+        rows={2}
+        subtitle="Subtitle"
+        title="Test"
+      />
+    );
+    const highLights = container.querySelectorAll('[data-state="high"]');
+    expect(highLights).toHaveLength(2);
+  });
+
+  it("renders as a link when href is provided", () => {
+    const { getByRole } = render(
+      <SwitchboardCard href="/next" subtitle="Subtitle" title="Test" />
+    );
+    const link = getByRole("link", { name: "Test" });
+    expect(link).toHaveAttribute("href", "/next");
+  });
+
+  it("renders as a button and calls onButtonClick when clicked", () => {
+    const onButtonClick = vi.fn();
+    const { getByRole } = render(
+      <SwitchboardCard
+        onButtonClick={onButtonClick}
+        subtitle="Subtitle"
+        title="Test"
+      />
+    );
+    const button = getByRole("button", { name: "Test" });
+    fireEvent.click(button);
+    expect(onButtonClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies the next variant styling", () => {
+    const { container } = render(
+      <SwitchboardCard subtitle="Subtitle" title="Test" variant="next" />
+    );
+    expect(container.querySelector('[data-variant="next"]')).not.toBeNull();
+  });
+
+  describe("randomLights animation", () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+      vi.spyOn(Math, "random").mockReturnValue(0);
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+      vi.restoreAllMocks();
+    });
+
+    it("animates lights over time when randomLights is enabled", () => {
+      const { container } = render(
+        <SwitchboardCard
+          columns={4}
+          randomLights
+          rows={2}
+          subtitle="Subtitle"
+          title="Test"
+        />
+      );
+
+      const offLights = container.querySelectorAll('[data-state="off"]');
+      expect(offLights.length).toBe(8);
+
+      fireEvent.click(container); // no-op interaction, ensures no crash before timers
+      act(() => {
+        vi.advanceTimersByTime(200);
+      });
+
+      const mediumLights = container.querySelectorAll('[data-state="medium"]');
+      expect(mediumLights.length).toBeGreaterThan(0);
+    });
+  });
 });
diff --git a/packages/smoothui/components/top-down-letters/index.tsx b/packages/smoothui/components/top-down-letters/index.tsx
new file mode 100644
index 00000000..1f7a0341
--- /dev/null
+++ b/packages/smoothui/components/top-down-letters/index.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { useRef } from "react";
+
+export interface TopDownLettersProps {
+  children: string;
+  className?: string;
+  /** Delay before the animation starts, in milliseconds. */
+  delay?: number;
+  /** Per-character stagger, in milliseconds. */
+  stagger?: number;
+  /** Animate only once the text scrolls into view. */
+  triggerOnView?: boolean;
+}
+
+const DURATION_S = 0.4;
+const MS = 1000;
+// Pronounced ease-out for a tall, staged drop from above.
+const EASE = [0.18, 1, 0.32, 1] as const;
+
+/**
+ * TopDownLetters — letters descend from above in a pronounced staircase,
+ * one symbol at a time, with zero blur. The top-down counterpart to
+ * bottom-up-letters. From the animate-text catalog (`top-down-letters`).
+ */
+export default function TopDownLetters({
+  children,
+  className = "",
+  delay = 0,
+  stagger = 88,
+  triggerOnView = false,
+}: TopDownLettersProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+  const shouldReduceMotion = useReducedMotion();
+  const play = (!triggerOnView || inView) && !shouldReduceMotion;
+  const characters = Array.from(children);
+
+  return (
+    <span aria-label={children} className={className} ref={ref}>
+      {characters.map((char, index) => (
+        <motion.span
+          animate={play ? { opacity: 1, y: 0 } : undefined}
+          aria-hidden="true"
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: -46 }}
+          // biome-ignore lint/suspicious/noArrayIndexKey: characters have no stable id
+          key={index}
+          style={{ display: "inline-block", whiteSpace: "pre" }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : {
+                  duration: DURATION_S,
+                  delay: delay / MS + (index * stagger) / MS,
+                  ease: EASE,
+                }
+          }
+        >
+          {char === " " ? " " : char}
+        </motion.span>
+      ))}
+    </span>
+  );
+}
diff --git a/packages/smoothui/components/top-down-letters/package.json b/packages/smoothui/components/top-down-letters/package.json
new file mode 100644
index 00000000..15ece813
--- /dev/null
+++ b/packages/smoothui/components/top-down-letters/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@repo/top-down-letters",
+  "description": "A TopDownLetters text animation component for SmoothUI.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^12.23.25"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "text",
+    "tags": [
+      "text",
+      "per-character",
+      "top-down",
+      "staircase",
+      "entrance",
+      "apple",
+      "animated"
+    ],
+    "complexity": "simple",
+    "animationType": "ease",
+    "useCases": [
+      "Short word or label reveal with pronounced top-down staircase",
+      "Compact headline entrance descending from above",
+      "Editorial headers and controlled top-down word reveals"
+    ],
+    "compositionHints": [
+      "Best for single words or short phrases at 40px+",
+      "Top-down counterpart to bottom-up-letters"
+    ],
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/top-down-letters/tsconfig.json b/packages/smoothui/components/top-down-letters/tsconfig.json
new file mode 100644
index 00000000..7365a484
--- /dev/null
+++ b/packages/smoothui/components/top-down-letters/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    },
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/smoothui/components/tweet-card/__tests__/tweet-card.test.tsx b/packages/smoothui/components/tweet-card/__tests__/tweet-card.test.tsx
new file mode 100644
index 00000000..3c0dbe26
--- /dev/null
+++ b/packages/smoothui/components/tweet-card/__tests__/tweet-card.test.tsx
@@ -0,0 +1,122 @@
+import { fireEvent } from "@testing-library/react";
+import type { Tweet } from "react-tweet/api";
+import { describe, expect, it, vi } from "vitest";
+import { render } from "../../../test-utils/render";
+import {
+  SmoothTweet,
+  TweetCard,
+  TweetNotFound,
+  TweetSkeleton,
+  truncate,
+} from "../index";
+
+const baseTweet: Tweet = {
+  __typename: "Tweet",
+  lang: "en",
+  created_at: "Mon Jan 01 00:00:00 +0000 2024",
+  display_text_range: [0, 12],
+  id_str: "1234567890",
+  text: "Hello world!",
+  favorite_count: 10,
+  conversation_count: 2,
+  news_action_type: "conversation",
+  isEdited: false,
+  isStaleEdit: false,
+  edit_control: {
+    edit_tweet_ids: ["1234567890"],
+    editable_until_msecs: "0",
+    is_edit_eligible: false,
+    edits_remaining: "0",
+  },
+  entities: {
+    hashtags: [],
+    urls: [],
+    user_mentions: [],
+    symbols: [],
+  },
+  user: {
+    id_str: "1",
+    name: "Ada Lovelace",
+    profile_image_url_https: "https://example.com/avatar.jpg",
+    profile_image_shape: "Circle",
+    screen_name: "adalovelace",
+    verified: false,
+    is_blue_verified: false,
+  },
+};
+
+describe("truncate", () => {
+  it("returns the original string when shorter than the limit", () => {
+    expect(truncate("short", 10)).toBe("short");
+  });
+
+  it("truncates and appends an ellipsis when longer than the limit", () => {
+    expect(truncate("a very long screen name", 10)).toBe("a very ...");
+  });
+
+  it("returns null as-is", () => {
+    expect(truncate(null, 10)).toBeNull();
+  });
+});
+
+describe("TweetSkeleton", () => {
+  it("renders the skeleton placeholders", () => {
+    const { container } = render(<TweetSkeleton />);
+    expect(container.querySelectorAll(".bg-primary\\/10").length).toBe(3);
+  });
+});
+
+describe("TweetNotFound", () => {
+  it("renders a not found message", () => {
+    const { getByText } = render(<TweetNotFound />);
+    expect(getByText("Tweet not found")).toBeInTheDocument();
+  });
+});
+
+describe("SmoothTweet", () => {
+  it("renders the tweet author and text", () => {
+    const { getByText } = render(<SmoothTweet tweet={baseTweet} />);
+    expect(getByText("Ada Lovelace")).toBeInTheDocument();
+    expect(getByText("@adalovelace")).toBeInTheDocument();
+    expect(getByText("Hello world!")).toBeInTheDocument();
+  });
+
+  it("positions the user info at the top when requested", () => {
+    const { container } = render(
+      <SmoothTweet tweet={baseTweet} userInfoPosition="top" />
+    );
+    const article = container.querySelector("article");
+    expect(article?.firstElementChild).toHaveTextContent("Ada Lovelace");
+  });
+
+  it("normalizes missing entities instead of crashing", () => {
+    const tweetWithoutEntities = {
+      ...baseTweet,
+      entities: undefined,
+    } as unknown as Tweet;
+    const { getByText } = render(<SmoothTweet tweet={tweetWithoutEntities} />);
+    expect(getByText("Hello world!")).toBeInTheDocument();
+  });
+
+  it("opens the tweet URL when the external link button is clicked", () => {
+    const openSpy = vi.spyOn(window, "open").mockImplementation(() => null);
+    const { getByLabelText } = render(<SmoothTweet tweet={baseTweet} />);
+
+    fireEvent.click(getByLabelText("Open tweet in new tab"));
+
+    expect(openSpy).toHaveBeenCalledWith(
+      "https://x.com/adalovelace/status/1234567890",
+      "_blank",
+      "noopener,noreferrer"
+    );
+    openSpy.mockRestore();
+  });
+});
+
+// TweetCard is an async React Server Component (react-tweet); it cannot be
+// rendered in jsdom, so this is an import-level smoke test.
+describe("TweetCard", () => {
+  it("exports a component function", () => {
+    expect(typeof TweetCard).toBe("function");
+  });
+});
diff --git a/packages/smoothui/components/tweet-card/index.tsx b/packages/smoothui/components/tweet-card/index.tsx
index 45815c13..1c2e5f52 100644
--- a/packages/smoothui/components/tweet-card/index.tsx
+++ b/packages/smoothui/components/tweet-card/index.tsx
@@ -97,6 +97,7 @@ export const TweetHeader = ({
       <img
         alt={tweet.user.screen_name}
         className={cn("size-10 object-cover object-center", avatarRounded)}
+        draggable={false}
         height={40}
         loading="eager"
         src={tweet.user.profile_image_url_https}
@@ -192,6 +193,7 @@ export const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => {
                 <img
                   alt={tweet.text}
                   className="w-full rounded-xl border object-cover shadow-sm"
+                  draggable={false}
                   height={photos[0].height}
                   key={photos[0].url}
                   src={photos[0].url}
@@ -205,6 +207,7 @@ export const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => {
                     <img
                       alt={tweet.text}
                       className="w-full rounded-xl border object-cover shadow-sm"
+                      draggable={false}
                       height={photo.height}
                       key={photo.url}
                       src={photo.url}
@@ -223,6 +226,7 @@ export const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => {
                         "w-full rounded-xl border object-cover shadow-sm",
                         index === 0 && photos.length > 3 && "row-span-2"
                       )}
+                      draggable={false}
                       height={photo.height}
                       key={photo.url}
                       src={photo.url}
@@ -239,6 +243,7 @@ export const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => {
         <img
           alt={tweet.text}
           className="w-full rounded-xl border object-cover shadow-sm"
+          draggable={false}
           src={
             // @ts-expect-error package doesn't have type definitions
             tweet.card.binding_values.thumbnail_image_large.image_value.url
diff --git a/packages/smoothui/components/user-account-avatar/index.tsx b/packages/smoothui/components/user-account-avatar/index.tsx
index 676b69f1..44441397 100644
--- a/packages/smoothui/components/user-account-avatar/index.tsx
+++ b/packages/smoothui/components/user-account-avatar/index.tsx
@@ -185,6 +185,7 @@ export default function UserAccountAvatar({
           <img
             alt="User Avatar"
             className="rounded-full"
+            draggable={false}
             height={48}
             src={userData.avatar}
             width={48}
diff --git a/packages/smoothui/components/warped-circle-transition/__tests__/warped-circle-transition.test.tsx b/packages/smoothui/components/warped-circle-transition/__tests__/warped-circle-transition.test.tsx
new file mode 100644
index 00000000..88160514
--- /dev/null
+++ b/packages/smoothui/components/warped-circle-transition/__tests__/warped-circle-transition.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../test-utils/render";
+import WarpedCircleTransition from "../index";
+
+describe("WarpedCircleTransition", () => {
+  it("renders the active content", () => {
+    const { getByText } = render(
+      <WarpedCircleTransition transitionKey="draft">
+        Draft saved
+      </WarpedCircleTransition>
+    );
+
+    expect(getByText("Draft saved")).toBeInTheDocument();
+  });
+});
diff --git a/packages/smoothui/components/warped-circle-transition/index.tsx b/packages/smoothui/components/warped-circle-transition/index.tsx
new file mode 100644
index 00000000..d632645d
--- /dev/null
+++ b/packages/smoothui/components/warped-circle-transition/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import SdfBlobTransition from "../sdf-blob-transition";
+
+export interface WarpedCircleTransitionProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  onRest?: () => void;
+  transitionKey: string | number;
+}
+
+const WarpedCircleTransition = ({
+  children,
+  className,
+  duration = 1120,
+  onRest,
+  transitionKey,
+}: WarpedCircleTransitionProps) => (
+  <SdfBlobTransition
+    className={className}
+    duration={duration}
+    onRest={onRest}
+    transitionKey={transitionKey}
+    variant="warped"
+  >
+    {children}
+  </SdfBlobTransition>
+);
+
+export default WarpedCircleTransition;
diff --git a/packages/smoothui/components/warped-circle-transition/package.json b/packages/smoothui/components/warped-circle-transition/package.json
new file mode 100644
index 00000000..be428728
--- /dev/null
+++ b/packages/smoothui/components/warped-circle-transition/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@repo/warped-circle-transition",
+  "description": "A wavy perimeter circle reveal inspired by the Codrops circle warping step.",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/sdf-blob-transition": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "smoothui": {
+    "category": "transitions",
+    "tags": [
+      "transition",
+      "webgl",
+      "sdf",
+      "codrops",
+      "state-change"
+    ],
+    "complexity": "moderate",
+    "animationType": "tween",
+    "hasReducedMotion": true
+  }
+}
diff --git a/packages/smoothui/components/warped-circle-transition/tsconfig.json b/packages/smoothui/components/warped-circle-transition/tsconfig.json
new file mode 100644
index 00000000..1acbf9fb
--- /dev/null
+++ b/packages/smoothui/components/warped-circle-transition/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/smoothui/lib/package.json b/packages/smoothui/lib/package.json
new file mode 100644
index 00000000..941269bd
--- /dev/null
+++ b/packages/smoothui/lib/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@repo/smoothui-lib",
+  "description": "Shared animation constants (springs, easing curves, durations) for SmoothUI components",
+  "version": "0.0.0",
+  "private": true,
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "typescript": "^5.9.3"
+  }
+}
diff --git a/packages/smoothui/package.json b/packages/smoothui/package.json
index 5fb12ea9..7cf7a6fe 100644
--- a/packages/smoothui/package.json
+++ b/packages/smoothui/package.json
@@ -4,17 +4,22 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "test": "vitest run"
+    "test": "vitest run --coverage",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.1",
+    "@vitest/coverage-v8": "^4.1.8",
+    "clsx": "^2.1.1",
     "jsdom": "^29.0.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.3.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.0",
     "vitest-axe": "^1.0.0-pre.3"
diff --git a/packages/smoothui/test-utils/render.tsx b/packages/smoothui/test-utils/render.tsx
index 28f98ce7..33574770 100644
--- a/packages/smoothui/test-utils/render.tsx
+++ b/packages/smoothui/test-utils/render.tsx
@@ -1,10 +1,14 @@
-import { type RenderOptions, render } from "@testing-library/react";
+import {
+  type RenderOptions,
+  type RenderResult,
+  render,
+} from "@testing-library/react";
 import type { ReactElement } from "react";
 
 const customRender = (
   ui: ReactElement,
   options?: Omit<RenderOptions, "wrapper">
-) => render(ui, { ...options });
+): RenderResult => render(ui, { ...options });
 
 export * from "@testing-library/react";
 export { customRender as render };
diff --git a/packages/smoothui/test-utils/webgl-mock.ts b/packages/smoothui/test-utils/webgl-mock.ts
new file mode 100644
index 00000000..804141ba
--- /dev/null
+++ b/packages/smoothui/test-utils/webgl-mock.ts
@@ -0,0 +1,197 @@
+import { act } from "@testing-library/react";
+import { vi } from "vitest";
+
+/**
+ * Shared jsdom stubs for the WebGL shader-transition components.
+ *
+ * jsdom has no WebGL implementation, so `canvas.getContext("webgl")` always
+ * returns `null` there. These helpers patch `HTMLCanvasElement.prototype.getContext`
+ * to return a fully-stubbed `WebGLRenderingContext` (every method is a `vi.fn`),
+ * and replace `requestAnimationFrame` / `cancelAnimationFrame` / `performance.now`
+ * with a manually-steppable clock so render loops can be driven deterministically
+ * in tests via `flushFrame` / `flushFrames` / `runFramesFor`.
+ */
+
+const GL_CONSTANTS = {
+  ARRAY_BUFFER: 34_962,
+  BLEND: 3042,
+  COLOR_BUFFER_BIT: 16_384,
+  COMPILE_STATUS: 35_713,
+  FLOAT: 5126,
+  FRAGMENT_SHADER: 35_632,
+  LINK_STATUS: 35_714,
+  ONE: 1,
+  ONE_MINUS_SRC_ALPHA: 771,
+  STATIC_DRAW: 35_044,
+  TRIANGLES: 4,
+  TRIANGLE_STRIP: 5,
+  VERTEX_SHADER: 35_633,
+} as const;
+
+const createStubGl = () =>
+  ({
+    ...GL_CONSTANTS,
+    attachShader: vi.fn(),
+    bindBuffer: vi.fn(),
+    blendFunc: vi.fn(),
+    bufferData: vi.fn(),
+    clear: vi.fn(),
+    clearColor: vi.fn(),
+    compileShader: vi.fn(),
+    createBuffer: vi.fn(() => ({})),
+    createProgram: vi.fn(() => ({})),
+    createShader: vi.fn(() => ({})),
+    deleteBuffer: vi.fn(),
+    deleteProgram: vi.fn(),
+    deleteShader: vi.fn(),
+    drawArrays: vi.fn(),
+    enable: vi.fn(),
+    enableVertexAttribArray: vi.fn(),
+    getAttribLocation: vi.fn(() => 0),
+    getProgramParameter: vi.fn(() => true),
+    getShaderParameter: vi.fn(() => true),
+    getUniformLocation: vi.fn(() => ({})),
+    linkProgram: vi.fn(),
+    shaderSource: vi.fn(),
+    uniform1f: vi.fn(),
+    uniform2f: vi.fn(),
+    uniform3f: vi.fn(),
+    useProgram: vi.fn(),
+    vertexAttribPointer: vi.fn(),
+    viewport: vi.fn(),
+  }) satisfies Record<string, unknown>;
+
+export type WebglStub = ReturnType<typeof createStubGl>;
+
+export interface InstallWebglMockOptions {
+  /** When false, `getContext("webgl")` resolves to null, simulating no WebGL support. */
+  supported?: boolean;
+}
+
+let originalGetContext: typeof HTMLCanvasElement.prototype.getContext | null =
+  null;
+let originalRaf: typeof requestAnimationFrame | null = null;
+let originalCaf: typeof cancelAnimationFrame | null = null;
+let nowSpy: ReturnType<typeof vi.spyOn> | null = null;
+
+let rafQueue = new Map<number, FrameRequestCallback>();
+let nextRafId = 0;
+let currentTime = 0;
+
+const defaultMatchMedia = (query: string) => ({
+  addEventListener: vi.fn(),
+  addListener: vi.fn(),
+  dispatchEvent: vi.fn(() => false),
+  matches: false,
+  media: query,
+  onchange: null,
+  removeEventListener: vi.fn(),
+  removeListener: vi.fn(),
+});
+
+/** Installs the WebGL + rAF + matchMedia stubs. Call from `beforeEach`. */
+export const installWebglMock = (options: InstallWebglMockOptions = {}) => {
+  const supported = options.supported ?? true;
+
+  originalGetContext = HTMLCanvasElement.prototype.getContext;
+  HTMLCanvasElement.prototype.getContext = vi.fn((contextId: string) => {
+    if (!supported) {
+      return null;
+    }
+    if (contextId === "webgl" || contextId === "experimental-webgl") {
+      return createStubGl();
+    }
+    return null;
+  }) as unknown as typeof HTMLCanvasElement.prototype.getContext;
+
+  rafQueue = new Map();
+  nextRafId = 0;
+  currentTime = 0;
+
+  originalRaf = globalThis.requestAnimationFrame;
+  originalCaf = globalThis.cancelAnimationFrame;
+
+  globalThis.requestAnimationFrame = ((callback: FrameRequestCallback) => {
+    nextRafId += 1;
+    rafQueue.set(nextRafId, callback);
+    return nextRafId;
+  }) as typeof requestAnimationFrame;
+
+  globalThis.cancelAnimationFrame = ((id: number) => {
+    rafQueue.delete(id);
+  }) as typeof cancelAnimationFrame;
+
+  nowSpy = vi.spyOn(performance, "now").mockImplementation(() => currentTime);
+
+  window.matchMedia = vi.fn(
+    defaultMatchMedia
+  ) as unknown as typeof window.matchMedia;
+};
+
+/** Restores everything patched by `installWebglMock`. Call from `afterEach`. */
+export const uninstallWebglMock = () => {
+  if (originalGetContext) {
+    HTMLCanvasElement.prototype.getContext = originalGetContext;
+    originalGetContext = null;
+  }
+  if (originalRaf) {
+    globalThis.requestAnimationFrame = originalRaf;
+    originalRaf = null;
+  }
+  if (originalCaf) {
+    globalThis.cancelAnimationFrame = originalCaf;
+    originalCaf = null;
+  }
+  nowSpy?.mockRestore();
+  nowSpy = null;
+  rafQueue = new Map();
+};
+
+const runFrame = (stepMs: number) => {
+  currentTime += stepMs;
+  const callbacks = Array.from(rafQueue.values());
+  rafQueue.clear();
+  for (const callback of callbacks) {
+    callback(currentTime);
+  }
+};
+
+/**
+ * Advances the mocked clock by `stepMs` and synchronously runs pending rAF
+ * callbacks, wrapped in `act()` so any React state updates they trigger are
+ * flushed to the DOM before this call returns.
+ */
+export const flushFrame = (stepMs = 16) => {
+  act(() => {
+    runFrame(stepMs);
+  });
+};
+
+/** Flushes `count` animation frames, each advancing the clock by `stepMs`. */
+export const flushFrames = (count: number, stepMs = 16) => {
+  act(() => {
+    for (let index = 0; index < count; index += 1) {
+      runFrame(stepMs);
+    }
+  });
+};
+
+/**
+ * Flushes frames until the mocked clock has advanced at least `durationMs`,
+ * bounded by `maxFrames` as a safety valve against runaway rAF loops.
+ */
+export const runFramesFor = (
+  durationMs: number,
+  {
+    stepMs = 16,
+    maxFrames = 2000,
+  }: { stepMs?: number; maxFrames?: number } = {}
+) => {
+  act(() => {
+    let framesRun = 0;
+    while (currentTime < durationMs && framesRun < maxFrames) {
+      runFrame(stepMs);
+      framesRun += 1;
+    }
+  });
+};
diff --git a/packages/smoothui/tsconfig.json b/packages/smoothui/tsconfig.json
index 32917148..e47e23d8 100644
--- a/packages/smoothui/tsconfig.json
+++ b/packages/smoothui/tsconfig.json
@@ -15,7 +15,9 @@
     "hooks/**/*.ts",
     "hooks/**/*.tsx",
     "utils/**/*.ts",
-    "lib/**/*.ts"
+    "lib/**/*.ts",
+    "test-utils/**/*.ts",
+    "test-utils/**/*.tsx"
   ],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/packages/smoothui/vitest.config.ts b/packages/smoothui/vitest.config.ts
index 860a1358..1442736b 100644
--- a/packages/smoothui/vitest.config.ts
+++ b/packages/smoothui/vitest.config.ts
@@ -16,11 +16,32 @@ export default defineConfig({
   test: {
     environment: "jsdom",
     setupFiles: ["./test-utils/setup.ts"],
-    include: ["components/**/__tests__/**/*.test.{ts,tsx}"],
+    include: [
+      "components/**/__tests__/**/*.test.{ts,tsx}",
+      "blocks/**/__tests__/**/*.test.{ts,tsx}",
+    ],
     globals: true,
-    // input-otp and motion access window after jsdom teardown — suppress
-    // the unhandled ReferenceError so the test run exits cleanly.
-    dangerouslyIgnoreUnhandledErrors: true,
+    server: {
+      deps: {
+        // react-tweet ships ESM importing CSS modules; inline it so Vite
+        // transforms the .css imports instead of node's ESM loader choking.
+        inline: ["react-tweet"],
+      },
+    },
+    coverage: {
+      provider: "v8",
+      include: ["components/**", "blocks/**", "hooks/**", "utils/**", "lib/**"],
+      exclude: ["**/__tests__/**", "**/*.d.ts"],
+      reporter: ["json-summary", "lcov"],
+      // Regression gate just below the current baseline (2026-07):
+      // lines 75.9, statements 75.5, functions 67.0, branches 53.3.
+      thresholds: {
+        lines: 70,
+        statements: 70,
+        functions: 62,
+        branches: 48,
+      },
+    },
   },
   resolve: {
     dedupe: ["react", "react-dom"],
@@ -30,6 +51,7 @@ export default defineConfig({
       "@repo/shadcn-ui": shadcnPath,
       "@repo/smoothui/components": path.join(smoothuiPath, "components"),
       "@repo/smoothui": smoothuiPath,
+      "@smoothui/data": path.resolve(import.meta.dirname, "../data"),
       react: reactPath,
       "react/jsx-runtime": path.join(reactPath, "jsx-runtime"),
       "react/jsx-dev-runtime": path.join(reactPath, "jsx-dev-runtime"),
diff --git a/packages/typescript-config/package.json b/packages/typescript-config/package.json
index 106dfcc7..3a2ddd1b 100644
--- a/packages/typescript-config/package.json
+++ b/packages/typescript-config/package.json
@@ -3,7 +3,6 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "clean": "git clean -xdf .cache .turbo dist node_modules",
-    "typecheck": "tsc --noEmit --emitDeclarationOnly false"
+    "clean": "git clean -xdf .cache .turbo dist node_modules"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 323005c0..a884d551 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,7 @@ settings:
 overrides:
   react: ^19.2.1
   react-dom: ^19.2.1
+  radix-ui: 1.4.3
   shiki: ^4.0.2
   '@shikijs/types': ^4.0.2
   glob: '>=10.5.0'
@@ -164,6 +165,12 @@ importers:
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      nucleo-core-fill-24:
+        specifier: ^1.1.3
+        version: 1.1.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      nucleo-social-media:
+        specifier: ^1.0.2
+        version: 1.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       oxc-transform:
         specifier: ^0.126.0
         version: 0.126.0
@@ -204,8 +211,8 @@ importers:
         specifier: ^11.1.2
         version: 11.1.2
       shadcn:
-        specifier: ^4.3.0
-        version: 4.7.0(@types/node@25.8.0)(typescript@5.9.3)
+        specifier: ^4.11.0
+        version: 4.11.0(typescript@5.9.3)
       shiki:
         specifier: ^4.0.2
         version: 4.0.2
@@ -218,6 +225,9 @@ importers:
       twoslash:
         specifier: ^0.3.4
         version: 0.3.8(typescript@5.9.3)
+      use-sound:
+        specifier: ^5.0.0
+        version: 5.0.0(react@19.2.6)
     devDependencies:
       '@repo/typescript-config':
         specifier: workspace:*
@@ -295,7 +305,7 @@ importers:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       radix-ui:
-        specifier: latest
+        specifier: 1.4.3
         version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.1
@@ -340,6 +350,9 @@ importers:
 
   packages/smoothui:
     devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -355,6 +368,12 @@ importers:
       '@types/react-dom':
         specifier: ^19.2.3
         version: 19.2.3(@types/react@19.2.14)
+      '@vitest/coverage-v8':
+        specifier: ^4.1.8
+        version: 4.1.8(vitest@4.1.7)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       jsdom:
         specifier: ^29.0.2
         version: 29.1.1(@noble/hashes@1.8.0)
@@ -364,15 +383,18 @@ importers:
       react-dom:
         specifier: ^19.2.1
         version: 19.2.6(react@19.2.6)
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.6.0
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
       vitest:
         specifier: ^4.1.0
-        version: 4.1.7(@types/node@25.8.0)(jsdom@29.1.1(@noble/hashes@1.8.0))(msw@2.14.6(@types/node@25.8.0)(typescript@5.9.3))(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0))
+        version: 4.1.7(@types/node@25.8.0)(@vitest/coverage-v8@4.1.8)(jsdom@29.1.1(@noble/hashes@1.8.0))(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0))
       vitest-axe:
         specifier: ^1.0.0-pre.3
-        version: 1.0.0-pre.5(vitest@4.1.7(@types/node@25.8.0)(jsdom@29.1.1(@noble/hashes@1.8.0))(msw@2.14.6(@types/node@25.8.0)(typescript@5.9.3))(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0)))
+        version: 1.0.0-pre.5(vitest@4.1.7)
 
   packages/smoothui/blocks/ctas/cta-1:
     dependencies:
@@ -1823,6 +1845,34 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
+  packages/smoothui/components/aperture-blur-transition:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
   packages/smoothui/components/app-download-stack:
     dependencies:
       '@repo/shadcn-ui':
@@ -2018,7 +2068,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/book:
+  packages/smoothui/components/blur-out-up:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -2046,14 +2096,11 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/breadcrumb:
+  packages/smoothui/components/book:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      lucide-react:
-        specifier: ^0.474.0
-        version: 0.474.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2077,14 +2124,11 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/button-copy:
+  packages/smoothui/components/bottom-up-letters:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      lucide-react:
-        specifier: ^0.545.0
-        version: 0.545.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2108,17 +2152,17 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/checkbox:
+  packages/smoothui/components/breadcrumb:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
+      lucide-react:
+        specifier: ^0.474.0
+        version: 0.474.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      radix-ui:
-        specifier: ^1.4.2
-        version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.1
         version: 19.2.6
@@ -2139,14 +2183,14 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/clip-corners-button:
+  packages/smoothui/components/button-copy:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      '@repo/smooth-button':
-        specifier: workspace:*
-        version: link:../smooth-button
+      lucide-react:
+        specifier: ^0.545.0
+        version: 0.545.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2170,20 +2214,17 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/combobox:
+  packages/smoothui/components/checkbox:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      '@repo/smooth-button':
-        specifier: workspace:*
-        version: link:../smooth-button
-      lucide-react:
-        specifier: ^0.469.0
-        version: 0.469.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      radix-ui:
+        specifier: 1.4.3
+        version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.1
         version: 19.2.6
@@ -2204,7 +2245,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/context-menu:
+  packages/smoothui/components/chroma-blur-transition:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -2232,11 +2273,14 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/contribution-graph:
+  packages/smoothui/components/clip-corners-button:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
+      '@repo/smooth-button':
+        specifier: workspace:*
+        version: link:../smooth-button
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2260,11 +2304,17 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/cursor-follow:
+  packages/smoothui/components/combobox:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
+      '@repo/smooth-button':
+        specifier: workspace:*
+        version: link:../smooth-button
+      lucide-react:
+        specifier: ^0.469.0
+        version: 0.469.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2288,20 +2338,14 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/dialog:
+  packages/smoothui/components/context-menu:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      lucide-react:
-        specifier: ^0.468.0
-        version: 0.468.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      radix-ui:
-        specifier: latest
-        version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.1
         version: 19.2.6
@@ -2322,14 +2366,11 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/dot-morph-button:
+  packages/smoothui/components/contribution-graph:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      '@repo/smooth-button':
-        specifier: workspace:*
-        version: link:../smooth-button
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2353,7 +2394,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/drawer:
+  packages/smoothui/components/cursor-follow:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -2381,7 +2422,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/dropdown-menu:
+  packages/smoothui/components/depth-parallax-words:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -2409,17 +2450,20 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/dynamic-island:
+  packages/smoothui/components/dialog:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
       lucide-react:
-        specifier: ^0.545.0
-        version: 0.545.0(react@19.2.6)
+        specifier: ^0.468.0
+        version: 0.468.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      radix-ui:
+        specifier: 1.4.3
+        version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.1
         version: 19.2.6
@@ -2440,14 +2484,14 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/expandable-cards:
+  packages/smoothui/components/dot-morph-button:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      lucide-react:
-        specifier: ^0.545.0
-        version: 0.545.0(react@19.2.6)
+      '@repo/smooth-button':
+        specifier: workspace:*
+        version: link:../smooth-button
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2471,7 +2515,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/exposure-slider:
+  packages/smoothui/components/drawer:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -2499,7 +2543,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/figma-comment:
+  packages/smoothui/components/dropdown-menu:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -2527,7 +2571,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/form:
+  packages/smoothui/components/dynamic-island:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -2558,14 +2602,14 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/github-stars-animation:
+  packages/smoothui/components/expandable-cards:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
       lucide-react:
-        specifier: ^0.555.0
-        version: 0.555.0(react@19.2.6)
+        specifier: ^0.545.0
+        version: 0.545.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2589,7 +2633,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/glow-hover-card:
+  packages/smoothui/components/exposure-slider:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -2617,14 +2661,14 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/gooey-popover:
+  packages/smoothui/components/fade-through:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      gsap:
-        specifier: ^3.12.0
-        version: 3.15.0
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.1
         version: 19.2.6
@@ -2645,7 +2689,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/grid-loader:
+  packages/smoothui/components/figma-comment:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -2673,14 +2717,11 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/image-metadata-preview:
+  packages/smoothui/components/focus-blur-resolve:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      lucide-react:
-        specifier: ^0.545.0
-        version: 0.545.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2690,9 +2731,6 @@ importers:
       react-dom:
         specifier: ^19.2.1
         version: 19.2.6(react@19.2.6)
-      react-use-measure:
-        specifier: ^2.1.0
-        version: 2.1.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
     devDependencies:
       '@repo/typescript-config':
         specifier: workspace:*
@@ -2707,11 +2745,14 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/infinite-slider:
+  packages/smoothui/components/form:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
+      lucide-react:
+        specifier: ^0.545.0
+        version: 0.545.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2721,9 +2762,6 @@ importers:
       react-dom:
         specifier: ^19.2.1
         version: 19.2.6(react@19.2.6)
-      react-use-measure:
-        specifier: ^2.1.0
-        version: 2.1.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
     devDependencies:
       '@repo/typescript-config':
         specifier: workspace:*
@@ -2738,14 +2776,14 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/interactive-image-selector:
+  packages/smoothui/components/github-stars-animation:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
       lucide-react:
-        specifier: ^0.545.0
-        version: 0.545.0(react@19.2.6)
+        specifier: ^0.555.0
+        version: 0.555.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2769,7 +2807,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/job-listing-component:
+  packages/smoothui/components/glow-hover-card:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -2783,9 +2821,6 @@ importers:
       react-dom:
         specifier: ^19.2.1
         version: 19.2.6(react@19.2.6)
-      usehooks-ts:
-        specifier: ^3.1.1
-        version: 3.1.1(react@19.2.6)
     devDependencies:
       '@repo/typescript-config':
         specifier: workspace:*
@@ -2800,20 +2835,14 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/magnetic-button:
+  packages/smoothui/components/gooey-popover:
     dependencies:
-      '@radix-ui/react-slot':
-        specifier: ^1.1.2
-        version: 1.2.4(@types/react@19.2.14)(react@19.2.6)
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      class-variance-authority:
-        specifier: ^0.7.1
-        version: 0.7.1
-      motion:
-        specifier: ^12.23.25
-        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      gsap:
+        specifier: ^3.12.0
+        version: 3.15.0
       react:
         specifier: ^19.2.1
         version: 19.2.6
@@ -2834,7 +2863,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/notification-badge:
+  packages/smoothui/components/grid-loader:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -2862,7 +2891,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/number-flow:
+  packages/smoothui/components/image-metadata-preview:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -2870,12 +2899,18 @@ importers:
       lucide-react:
         specifier: ^0.545.0
         version: 0.545.0(react@19.2.6)
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.1
         version: 19.2.6
       react-dom:
         specifier: ^19.2.1
         version: 19.2.6(react@19.2.6)
+      react-use-measure:
+        specifier: ^2.1.0
+        version: 2.1.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
     devDependencies:
       '@repo/typescript-config':
         specifier: workspace:*
@@ -2890,17 +2925,11 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/pagination:
+  packages/smoothui/components/infinite-slider:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      '@repo/smooth-button':
-        specifier: workspace:*
-        version: link:../smooth-button
-      lucide-react:
-        specifier: ^0.474.0
-        version: 0.474.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2910,6 +2939,9 @@ importers:
       react-dom:
         specifier: ^19.2.1
         version: 19.2.6(react@19.2.6)
+      react-use-measure:
+        specifier: ^2.1.0
+        version: 2.1.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
     devDependencies:
       '@repo/typescript-config':
         specifier: workspace:*
@@ -2924,14 +2956,14 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/phototab:
+  packages/smoothui/components/interactive-image-selector:
     dependencies:
-      '@radix-ui/react-tabs':
-        specifier: ^1.1.2
-        version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
+      lucide-react:
+        specifier: ^0.545.0
+        version: 0.545.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2955,14 +2987,11 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/power-off-slide:
+  packages/smoothui/components/job-listing-component:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      lucide-react:
-        specifier: ^0.545.0
-        version: 0.545.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2972,6 +3001,9 @@ importers:
       react-dom:
         specifier: ^19.2.1
         version: 19.2.6(react@19.2.6)
+      usehooks-ts:
+        specifier: ^3.1.1
+        version: 3.1.1(react@19.2.6)
     devDependencies:
       '@repo/typescript-config':
         specifier: workspace:*
@@ -2986,11 +3018,14 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/price-flow:
+  packages/smoothui/components/kinetic-center-build:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.1
         version: 19.2.6
@@ -3011,14 +3046,11 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/product-card:
+  packages/smoothui/components/line-by-line-slide:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      '@repo/smooth-button':
-        specifier: workspace:*
-        version: link:../smooth-button
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -3042,17 +3074,20 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/radio-group:
+  packages/smoothui/components/magnetic-button:
     dependencies:
+      '@radix-ui/react-slot':
+        specifier: ^1.1.2
+        version: 1.2.4(@types/react@19.2.14)(react@19.2.6)
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      radix-ui:
-        specifier: ^1.4.2
-        version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.1
         version: 19.2.6
@@ -3073,7 +3108,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/reveal-text:
+  packages/smoothui/components/mask-reveal-up:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -3101,14 +3136,11 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/reviews-carousel:
+  packages/smoothui/components/micro-scale-fade:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      lucide-react:
-        specifier: ^0.555.0
-        version: 0.555.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -3132,17 +3164,11 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/rich-popover:
+  packages/smoothui/components/notification-badge:
     dependencies:
-      '@radix-ui/react-popover':
-        specifier: 1.1.15
-        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      lucide-react:
-        specifier: ^0.545.0
-        version: 0.545.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -3166,7 +3192,501 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/scramble-hover:
+  packages/smoothui/components/number-flow:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      lucide-react:
+        specifier: ^0.545.0
+        version: 0.545.0(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/organic-merge-transition:
+    dependencies:
+      '@repo/sdf-blob-transition':
+        specifier: workspace:*
+        version: link:../sdf-blob-transition
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/pagination:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      '@repo/smooth-button':
+        specifier: workspace:*
+        version: link:../smooth-button
+      lucide-react:
+        specifier: ^0.474.0
+        version: 0.474.0(react@19.2.6)
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/per-character-rise:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/per-word-crossfade:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/photo-stack:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/phototab:
+    dependencies:
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.2
+        version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/power-off-slide:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      lucide-react:
+        specifier: ^0.545.0
+        version: 0.545.0(react@19.2.6)
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/price-flow:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/prism-sweep-transition:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/product-card:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      '@repo/smooth-button':
+        specifier: workspace:*
+        version: link:../smooth-button
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/radial-circles-transition:
+    dependencies:
+      '@repo/sdf-blob-transition':
+        specifier: workspace:*
+        version: link:../sdf-blob-transition
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/radio-group:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      radix-ui:
+        specifier: 1.4.3
+        version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/reveal-text:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/reviews-carousel:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      lucide-react:
+        specifier: ^0.555.0
+        version: 0.555.0(react@19.2.6)
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/rich-popover:
+    dependencies:
+      '@radix-ui/react-popover':
+        specifier: 1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      lucide-react:
+        specifier: ^0.545.0
+        version: 0.545.0(react@19.2.6)
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/scale-down-fade:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/scramble-hover:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -3219,7 +3739,434 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/scrollable-card-stack:
+  packages/smoothui/components/scrollable-card-stack:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/scrubber:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/sdf-blob-transition:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/sdf-circle-transition:
+    dependencies:
+      '@repo/sdf-blob-transition':
+        specifier: workspace:*
+        version: link:../sdf-blob-transition
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/searchable-dropdown:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      lucide-react:
+        specifier: ^0.545.0
+        version: 0.545.0(react@19.2.6)
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/select:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      lucide-react:
+        specifier: ^0.545.0
+        version: 0.545.0(react@19.2.6)
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/shader-reveal-circle-transition:
+    dependencies:
+      '@repo/shader-reveal-transition':
+        specifier: workspace:*
+        version: link:../shader-reveal-transition
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/shader-reveal-luma-transition:
+    dependencies:
+      '@repo/shader-reveal-transition':
+        specifier: workspace:*
+        version: link:../shader-reveal-transition
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/shader-reveal-noise-transition:
+    dependencies:
+      '@repo/shader-reveal-transition':
+        specifier: workspace:*
+        version: link:../shader-reveal-transition
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/shader-reveal-planetary-transition:
+    dependencies:
+      '@repo/shader-reveal-transition':
+        specifier: workspace:*
+        version: link:../shader-reveal-transition
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/shader-reveal-push-transition:
+    dependencies:
+      '@repo/shader-reveal-transition':
+        specifier: workspace:*
+        version: link:../shader-reveal-transition
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/shader-reveal-stripes-transition:
+    dependencies:
+      '@repo/shader-reveal-transition':
+        specifier: workspace:*
+        version: link:../shader-reveal-transition
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/shader-reveal-transition:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/shader-reveal-wipe-transition:
+    dependencies:
+      '@repo/shader-reveal-transition':
+        specifier: workspace:*
+        version: link:../shader-reveal-transition
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/shader-reveal-zoom-transition:
+    dependencies:
+      '@repo/shader-reveal-transition':
+        specifier: workspace:*
+        version: link:../shader-reveal-transition
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/shared-axis-x:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/shared-axis-y:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -3247,7 +4194,7 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/scrubber:
+  packages/smoothui/components/shared-axis-z:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
@@ -3275,14 +4222,11 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/searchable-dropdown:
+  packages/smoothui/components/shimmer-sweep:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      lucide-react:
-        specifier: ^0.545.0
-        version: 0.545.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -3306,14 +4250,67 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/select:
+  packages/smoothui/components/shine-text:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/short-slide-down:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/short-slide-right:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      lucide-react:
-        specifier: ^0.545.0
-        version: 0.545.0(react@19.2.6)
       motion:
         specifier: ^12.23.25
         version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -3395,9 +4392,152 @@ importers:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      class-variance-authority:
-        specifier: ^0.7.1
-        version: 0.7.1
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/social-selector:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/soft-blur-in:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/spring-scale-in:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/stagger-from-center:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+  packages/smoothui/components/stagger-from-edges:
+    dependencies:
+      '@repo/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.1
         version: 19.2.6
@@ -3418,14 +4558,11 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/social-selector:
+  packages/smoothui/components/switchboard-card:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
-      motion:
-        specifier: ^12.23.25
-        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.1
         version: 19.2.6
@@ -3446,11 +4583,14 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/smoothui/components/switchboard-card:
+  packages/smoothui/components/top-down-letters:
     dependencies:
       '@repo/shadcn-ui':
         specifier: workspace:*
         version: link:../../../shadcn-ui
+      motion:
+        specifier: ^12.23.25
+        version: 12.38.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.1
         version: 19.2.6
@@ -3558,6 +4698,31 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
+  packages/smoothui/components/warped-circle-transition:
+    dependencies:
+      '@repo/sdf-blob-transition':
+        specifier: workspace:*
+        version: link:../sdf-blob-transition
+      react:
+        specifier: ^19.2.1
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.1
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../../../typescript-config
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
   packages/smoothui/components/wave-text:
     dependencies:
       '@repo/shadcn-ui':
@@ -3761,6 +4926,10 @@ packages:
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
+  '@bcoe/v8-coverage@1.0.2':
+    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
+    engines: {node: '>=18'}
+
   '@biomejs/biome@2.4.13':
     resolution: {integrity: sha512-gLXOwkOBBg0tr7bDsqlkIh4uFeKuMjxvqsrb1Tukww1iDmHcfr4Uu8MoQxp0Rcte+69+osRNWXwHsu/zxT6XqA==}
     engines: {node: '>=14.21.3'}
@@ -4422,41 +5591,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@inquirer/ansi@2.0.5':
-    resolution: {integrity: sha512-doc2sWgJpbFQ64UflSVd17ibMGDuxO1yKgOgLMwavzESnXjFWJqUeG8saYosqKpHp4kWiM5x1nXvEjbpx90gzw==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
-
-  '@inquirer/confirm@6.0.13':
-    resolution: {integrity: sha512-wkGPC7yJ5WJk1DJ5SX7fzk+gfj4BM8cf5dDDi71B/551xHrdsZVRJOC0WyikXd0pEsb/9cLniuE4atbsMqmFkw==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-
-  '@inquirer/core@11.1.10':
-    resolution: {integrity: sha512-a4Q5BXHQAHa9eO202sTaFCHFYVB3x5fauDuThEAdZ9gfn76pSxiKU7wWcEH0N1O0XmQvNfQNU6QXpiRxmYQx+A==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-
-  '@inquirer/figures@2.0.5':
-    resolution: {integrity: sha512-NsSs4kzfm12lNetHwAn3GEuH317IzpwrMCbOuMIVytpjnJ90YYHNwdRgYGuKmVxwuIqSgqk3M5qqQt1cDk0tGQ==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
-
-  '@inquirer/type@4.0.5':
-    resolution: {integrity: sha512-aetVUNeKNc/VriqXlw1NRSW0zhMBB0W4bNbWRJgzRl/3d0QNDQFfk0GO5SDdtjMZVg6o8ZKEiadd7SCCzoOn5Q==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -4489,10 +5623,6 @@ packages:
       '@cfworker/json-schema':
         optional: true
 
-  '@mswjs/interceptors@0.41.9':
-    resolution: {integrity: sha512-VVPPgHyQ6ShqnrmDWuxjmUIsO9gWyOZFmuOfLd9LfBGQJwZfy0gvv9pbHSJuoFNIYC7ZDX9aoFwowjcdSC4E8w==}
-    engines: {node: '>=18'}
-
   '@napi-rs/wasm-runtime@1.1.4':
     resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
     peerDependencies:
@@ -4644,18 +5774,6 @@ packages:
   '@octokit/types@6.41.0':
     resolution: {integrity: sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==}
 
-  '@open-draft/deferred-promise@2.2.0':
-    resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
-
-  '@open-draft/deferred-promise@3.0.0':
-    resolution: {integrity: sha512-XW375UK8/9SqUVNVa6M0yEy8+iTi4QN5VZ7aZuRFQmy76LRwI9wy5F4YIBU6T+eTe2/DNDo8tqu8RHlwLHM6RA==}
-
-  '@open-draft/logger@0.3.0':
-    resolution: {integrity: sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==}
-
-  '@open-draft/until@2.1.0':
-    resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
-
   '@orama/core@1.2.19':
     resolution: {integrity: sha512-AVEI0eG/a1RUQK+tBloRMppQf46Ky4kIYKEVjo0V0VfIGZHdLOE2PJR4v949kFwiTnfSJCUaxgwM74FCA1uHUA==}
 
@@ -6090,12 +7208,6 @@ packages:
   '@types/react@19.2.14':
     resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
 
-  '@types/set-cookie-parser@2.4.10':
-    resolution: {integrity: sha512-GGmQVGpQWUe5qglJozEjZV/5dyxbOOZ0LHe/lqyWssB88Y4svNfst0uqBVscdDeIKl5Jy5+aPSvy7mI9tYRguw==}
-
-  '@types/statuses@2.0.6':
-    resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
-
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -6165,6 +7277,15 @@ packages:
       vue-router:
         optional: true
 
+  '@vitest/coverage-v8@4.1.8':
+    resolution: {integrity: sha512-lt3kovsyHwYe00wq4D1ti0Z974fWj4NLp6siqiyEufUpyFwK9Yhi7rBhac9JL5aA0zoMrJqc4vYPZRUnI7l7nw==}
+    peerDependencies:
+      '@vitest/browser': 4.1.8
+      vitest: 4.1.8
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+
   '@vitest/expect@4.1.7':
     resolution: {integrity: sha512-1R+tw0ortHEbZDGMymm+pN7/AFQ/RkFFdtd7EN+VBpynKmLbP8A3rpEXdshBJ7+8hQ9zBJh/i1s0yKNtxAnU7w==}
 
@@ -6185,6 +7306,9 @@ packages:
   '@vitest/pretty-format@4.1.7':
     resolution: {integrity: sha512-umgCarTOYQWIaDMvGDRZij+6b9oVeLIyJzfN+AS88e0ZOU3QTgNNSTtjQOpcvWr3np1N0j4WgZj+sb3oYBDscw==}
 
+  '@vitest/pretty-format@4.1.8':
+    resolution: {integrity: sha512-9GasEBxpZ1VYIpqHf/0+YGg121uSNwCKOJqIrTwWP/TB7DmFCiaBpNl3aPZzoLWfWkuqhbH8vJIVobZkvdo2cA==}
+
   '@vitest/runner@4.1.7':
     resolution: {integrity: sha512-BapjmAQ2aI78WdMEfeUWivnfVzB+VPGwWRQcJE0OUq7qEeEcBsCSf+0T5iREBNE5nBb4wA5Ya0W6IA+sghdEFw==}
 
@@ -6197,6 +7321,9 @@ packages:
   '@vitest/utils@4.1.7':
     resolution: {integrity: sha512-T532WBu791cBxJlCl6SO+J14l81DQx6uQHm1bQbmCDY7nqlEIgkza/UFnSBNaUtSf41unldDFjdOBYEQC4b5Hw==}
 
+  '@vitest/utils@4.1.8':
+    resolution: {integrity: sha512-uOJamYALNhfJ6iolExyQM40yIQwDqYnkKtQ5VCiSe17E33H0aQ/u+1GlRuz4LZBk6Mm3sg90G9hEbmEt37C1Zg==}
+
   '@wandry/analytics-sdk@1.16.0':
     resolution: {integrity: sha512-YtXDA2SdG+kHfyvAuRr4UFoTOu2mZTuc1JMhGjJK2p7p3LZgvYIp8ySiSMX0ENnIs3C04K7Jg7N+C75gbmIB5Q==}
 
@@ -6313,6 +7440,9 @@ packages:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
 
+  ast-v8-to-istanbul@1.0.3:
+    resolution: {integrity: sha512-jCMQ6ZylLPudp0CDfBmQBZUsrh1/8psbmu9ibeVWKuHWD0YrH9YABwlKu5kVEFoT0GCQQW9Z/SxfuEbbkGQCRg==}
+
   astring@1.9.0:
     resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
     hasBin: true
@@ -6472,17 +7602,9 @@ packages:
     resolution: {integrity: sha512-xRwvIOMGrfOAnM1JYtqQImuaNtDEv9v6oIYAs4LIHwTiKee8uwvIi363igssOC0O5U04i4AlENs79LQLu9tEMw==}
     engines: {node: '>=20'}
 
-  cli-width@4.1.0:
-    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
-    engines: {node: '>= 12'}
-
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
-  cliui@8.0.1:
-    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
-    engines: {node: '>=12'}
-
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -6571,10 +7693,6 @@ packages:
     resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
-  cookie@1.1.1:
-    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
-    engines: {node: '>=18'}
-
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -6836,9 +7954,6 @@ packages:
   emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
-  emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-
   encodeurl@2.0.0:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
@@ -7327,10 +8442,6 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
-  get-caller-file@2.0.5:
-    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
-    engines: {node: 6.* || 8.* || >= 10.*}
-
   get-east-asian-width@1.6.0:
     resolution: {integrity: sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==}
     engines: {node: '>=18'}
@@ -7389,10 +8500,6 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  graphql@16.14.0:
-    resolution: {integrity: sha512-BBvQ/406p+4CZbTpCbVPSxfzrZrbnuWSP1ELYgyS6B+hNeKzgrdB4JczCa5VZUBQrDa9hUngm0KnexY6pJRN5Q==}
-    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
-
   gsap@3.15.0:
     resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
 
@@ -7473,9 +8580,6 @@ packages:
   hastscript@9.0.1:
     resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
 
-  headers-polyfill@5.0.1:
-    resolution: {integrity: sha512-1TJ6Fih/b8h5TIcv+1+Hw0PDQWJTKDKzFZzcKOiW1wJza3XoAQlkCuXLbymPYB8+ZQyw8mHvdw560e8zVFIWyA==}
-
   hey-listen@1.0.8:
     resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
 
@@ -7483,6 +8587,9 @@ packages:
     resolution: {integrity: sha512-xa3eYXYXx68XTT4hZ7dRzsXBhaq85ToSrlUJNoR0gwz/1Ap/CNwX47wfvV7pc/xWhjKVVkLT7zBJy8chhNguqQ==}
     engines: {node: '>=16.9.0'}
 
+  howler@2.2.4:
+    resolution: {integrity: sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==}
+
   html-encoding-sniffer@6.0.0:
     resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -7634,10 +8741,6 @@ packages:
     resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
     engines: {node: '>= 0.4'}
 
-  is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
-
   is-fullwidth-code-point@5.1.0:
     resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
     engines: {node: '>=18'}
@@ -7674,9 +8777,6 @@ packages:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
 
-  is-node-process@1.2.0:
-    resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
-
   is-number-object@1.1.1:
     resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
     engines: {node: '>= 0.4'}
@@ -7780,6 +8880,18 @@ packages:
     resolution: {integrity: sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==}
     engines: {node: '>=18'}
 
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.2.0:
+    resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
+    engines: {node: '>=8'}
+
   java-properties@1.0.2:
     resolution: {integrity: sha512-qjdpeo2yKlYTH7nFdK0vbZWuTCesk4o63v5iVOlhMQPfuIZQfW/HI35SjfhA+4qpg36rnFSvUK5b1m+ckIblQQ==}
     engines: {node: '>= 0.6.0'}
@@ -7795,6 +8907,9 @@ packages:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
 
+  js-tokens@10.0.0:
+    resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -8046,6 +9161,13 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  magicast@0.5.3:
+    resolution: {integrity: sha512-pVKE4UdSQ7DvHzivsCIFx2BJn1mHG6KsyrFcaxFx6tONdneEuThrDx0Cj3AMg58KyN4pzYT+LHOotxDQDjNvkw==}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
   make-error@1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
 
@@ -8322,20 +9444,6 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  msw@2.14.6:
-    resolution: {integrity: sha512-ALe+N10S72cyx94cMcy3Zs4HhXCj35sgeAL4c+WTvKi0zWnbd8/h0lcFqv0mb2P+aSgAdD7p9HzvA0DiUPxsyg==}
-    engines: {node: '>=18'}
-    hasBin: true
-    peerDependencies:
-      typescript: '>= 4.8.x'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  mute-stream@3.0.0:
-    resolution: {integrity: sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==}
-    engines: {node: ^20.17.0 || >=22.9.0}
-
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
@@ -8411,6 +9519,18 @@ packages:
     resolution: {integrity: sha512-tt6PvKu4WyzPwWUzy/hvPFqn+uwXO0K1ZHka8az3NnrhWJDmSqI8ncWq0fkL0k/lmmi5tAC11FXwXuh0rFbt1A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  nucleo-core-fill-24@1.1.3:
+    resolution: {integrity: sha512-06Y3AGaO8dzkgSc/39sSm1TShhVDhnXiRwE/mqZcqwtEAF4N/Sk3hWP45Wcat1PGtagtPVYhD1ZktC7aOQla/g==}
+    peerDependencies:
+      react: ^19.2.1
+      react-dom: ^19.2.1
+
+  nucleo-social-media@1.0.2:
+    resolution: {integrity: sha512-lKke7vUABXW65pJWBwhZ/wzcLVqPDbjh37KfxjWDhfvtEJLOcCTLl/N1C2K8D6B6m+G33mRmcN8jTxJqPJXEtw==}
+    peerDependencies:
+      react: ^19.2.1
+      react-dom: ^19.2.1
+
   nypm@0.6.6:
     resolution: {integrity: sha512-vRyr0r4cbBapw07Xw8xrj9Teq3o7MUD35rSaTcanDbW+aK2XHDgJFiU6ZTj2GBw7Q12ysdsyFss+Vdz4hQ0Y6Q==}
     engines: {node: '>=18'}
@@ -8475,9 +9595,6 @@ packages:
     resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
     engines: {node: '>=18'}
 
-  outvariant@1.4.3:
-    resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
-
   own-keys@1.0.1:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
@@ -8897,10 +10014,6 @@ packages:
   remark@15.0.1:
     resolution: {integrity: sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==}
 
-  require-directory@2.1.1:
-    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
-    engines: {node: '>=0.10.0'}
-
   require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
@@ -8924,9 +10037,6 @@ packages:
     resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
     engines: {node: '>=18'}
 
-  rettime@0.11.11:
-    resolution: {integrity: sha512-ILJRqVWBCTlg9r42fFgwVZx1gnFAcQF8mRoMkbgQfIrjEDf9nbBFDFx00oloOa+Q869FUtaYDXZvEfnecQSCoQ==}
-
   reusify@1.1.0:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -8995,9 +10105,6 @@ packages:
     resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
     engines: {node: '>= 18'}
 
-  set-cookie-parser@3.1.0:
-    resolution: {integrity: sha512-kjnC1DXBHcxaOaOXBHBeRtltsDG2nUiUni+jP92M9gYdW12rsmx92UsfpH7o5tDRs7I1ZZPSQJQGv3UaRfCiuw==}
-
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -9016,8 +10123,8 @@ packages:
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
-  shadcn@4.7.0:
-    resolution: {integrity: sha512-70fwnesNrY1GgeD7Kdzn+3SsYeyfibm8immsA5L68+OusoPTvYF01oWExl8/latKpMpvVXcbgdbbE6VFBJQ38w==}
+  shadcn@4.11.0:
+    resolution: {integrity: sha512-UV0cchFea9hO7poV1CuEP0wvmYjpAqcxCKdy23bndl2Du2ARtDs8A4xdzfhUjDBeOW1nNpJ6lXmsEpsply2SfQ==}
     hasBin: true
 
   sharp@0.34.5:
@@ -9123,17 +10230,10 @@ packages:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
 
-  strict-event-emitter@0.5.1:
-    resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
-
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
 
-  string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
-
   string-width@7.2.0:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
@@ -9239,10 +10339,6 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
-  tagged-tag@1.0.0:
-    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
-    engines: {node: '>=20'}
-
   tailwind-merge@3.6.0:
     resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
 
@@ -9410,10 +10506,6 @@ packages:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
     engines: {node: '>=10'}
 
-  type-fest@5.6.0:
-    resolution: {integrity: sha512-8ZiHFm91orbSAe2PSAiSVBVko18pbhbiB3U9GglSzF/zCGkR+rxpHx6sEMCUm4kxY4LjDIUGgCfUMtwfZfjfUA==}
-    engines: {node: '>=20'}
-
   type-is@2.1.0:
     resolution: {integrity: sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==}
     engines: {node: '>= 18'}
@@ -9513,9 +10605,6 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
-  until-async@3.0.2:
-    resolution: {integrity: sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==}
-
   update-browserslist-db@1.2.3:
     resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
     hasBin: true
@@ -9545,6 +10634,11 @@ packages:
       '@types/react':
         optional: true
 
+  use-sound@5.0.0:
+    resolution: {integrity: sha512-MNHT3FFC5HxNCrgZtrnpIMJI2cw/0D2xismcrtyht8BTuF5FhFhb57xO/jlQr2xJaFrc/0btzRQvGyHQwB7PVA==}
+    peerDependencies:
+      react: ^19.2.1
+
   use-sync-external-store@1.6.0:
     resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
     peerDependencies:
@@ -9739,10 +10833,6 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
-
   wrap-ansi@9.0.2:
     resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
     engines: {node: '>=18'}
@@ -9773,10 +10863,6 @@ packages:
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
-  y18n@5.0.8:
-    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
-    engines: {node: '>=10'}
-
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
@@ -9785,14 +10871,6 @@ packages:
     engines: {node: '>= 14.6'}
     hasBin: true
 
-  yargs-parser@21.1.1:
-    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
-    engines: {node: '>=12'}
-
-  yargs@17.7.2:
-    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
-    engines: {node: '>=12'}
-
   yn@3.1.1:
     resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
     engines: {node: '>=6'}
@@ -10102,6 +11180,8 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@bcoe/v8-coverage@1.0.2': {}
+
   '@biomejs/biome@2.4.13':
     optionalDependencies:
       '@biomejs/cli-darwin-arm64': 2.4.13
@@ -10240,7 +11320,7 @@ snapshots:
       lodash.get: 4.4.2
       make-error: 1.3.6
       ts-node: 9.1.1(typescript@5.9.3)
-      tslib: 2.1.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - typescript
 
@@ -10532,33 +11612,6 @@ snapshots:
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
-  '@inquirer/ansi@2.0.5': {}
-
-  '@inquirer/confirm@6.0.13(@types/node@25.8.0)':
-    dependencies:
-      '@inquirer/core': 11.1.10(@types/node@25.8.0)
-      '@inquirer/type': 4.0.5(@types/node@25.8.0)
-    optionalDependencies:
-      '@types/node': 25.8.0
-
-  '@inquirer/core@11.1.10(@types/node@25.8.0)':
-    dependencies:
-      '@inquirer/ansi': 2.0.5
-      '@inquirer/figures': 2.0.5
-      '@inquirer/type': 4.0.5(@types/node@25.8.0)
-      cli-width: 4.1.0
-      fast-wrap-ansi: 0.2.0
-      mute-stream: 3.0.0
-      signal-exit: 4.1.0
-    optionalDependencies:
-      '@types/node': 25.8.0
-
-  '@inquirer/figures@2.0.5': {}
-
-  '@inquirer/type@4.0.5(@types/node@25.8.0)':
-    optionalDependencies:
-      '@types/node': 25.8.0
-
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -10635,15 +11688,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mswjs/interceptors@0.41.9':
-    dependencies:
-      '@open-draft/deferred-promise': 2.2.0
-      '@open-draft/logger': 0.3.0
-      '@open-draft/until': 2.1.0
-      is-node-process: 1.2.0
-      outvariant: 1.4.3
-      strict-event-emitter: 0.5.1
-
   '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.10.0)':
     dependencies:
       '@emnapi/core': 1.9.2
@@ -10800,17 +11844,6 @@ snapshots:
     dependencies:
       '@octokit/openapi-types': 12.11.0
 
-  '@open-draft/deferred-promise@2.2.0': {}
-
-  '@open-draft/deferred-promise@3.0.0': {}
-
-  '@open-draft/logger@0.3.0':
-    dependencies:
-      is-node-process: 1.2.0
-      outvariant: 1.4.3
-
-  '@open-draft/until@2.1.0': {}
-
   '@orama/core@1.2.19':
     dependencies:
       '@orama/cuid2': 2.2.3
@@ -12083,12 +13116,6 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
-  '@types/set-cookie-parser@2.4.10':
-    dependencies:
-      '@types/node': 25.8.0
-
-  '@types/statuses@2.0.6': {}
-
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
@@ -12114,6 +13141,20 @@ snapshots:
       next: 16.2.6(@babel/core@7.29.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react: 19.2.6
 
+  '@vitest/coverage-v8@4.1.8(vitest@4.1.7)':
+    dependencies:
+      '@bcoe/v8-coverage': 1.0.2
+      '@vitest/utils': 4.1.8
+      ast-v8-to-istanbul: 1.0.3
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-reports: 3.2.0
+      magicast: 0.5.3
+      obug: 2.1.1
+      std-env: 4.1.0
+      tinyrainbow: 3.1.0
+      vitest: 4.1.7(@types/node@25.8.0)(@vitest/coverage-v8@4.1.8)(jsdom@29.1.1(@noble/hashes@1.8.0))(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0))
+
   '@vitest/expect@4.1.7':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -12123,13 +13164,12 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.7(msw@2.14.6(@types/node@25.8.0)(typescript@5.9.3))(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0))':
+  '@vitest/mocker@4.1.7(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0))':
     dependencies:
       '@vitest/spy': 4.1.7
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      msw: 2.14.6(@types/node@25.8.0)(typescript@5.9.3)
       vite: 7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0)
 
   '@vitest/pretty-format@3.2.4':
@@ -12140,6 +13180,10 @@ snapshots:
     dependencies:
       tinyrainbow: 3.1.0
 
+  '@vitest/pretty-format@4.1.8':
+    dependencies:
+      tinyrainbow: 3.1.0
+
   '@vitest/runner@4.1.7':
     dependencies:
       '@vitest/utils': 4.1.7
@@ -12160,6 +13204,12 @@ snapshots:
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
+  '@vitest/utils@4.1.8':
+    dependencies:
+      '@vitest/pretty-format': 4.1.8
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.0
+
   '@wandry/analytics-sdk@1.16.0': {}
 
   accepts@2.0.0:
@@ -12266,6 +13316,12 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  ast-v8-to-istanbul@1.0.3:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      estree-walker: 3.0.3
+      js-tokens: 10.0.0
+
   astring@1.9.0: {}
 
   async-function@1.0.0: {}
@@ -12410,16 +13466,8 @@ snapshots:
       slice-ansi: 8.0.0
       string-width: 8.2.1
 
-  cli-width@4.1.0: {}
-
   client-only@0.0.1: {}
 
-  cliui@8.0.1:
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 7.0.0
-
   clsx@2.1.1: {}
 
   cmdk@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
@@ -12482,8 +13530,6 @@ snapshots:
 
   cookie@0.7.2: {}
 
-  cookie@1.1.1: {}
-
   core-util-is@1.0.3: {}
 
   cors@2.8.6:
@@ -12714,8 +13760,6 @@ snapshots:
 
   emoji-regex@10.6.0: {}
 
-  emoji-regex@8.0.0: {}
-
   encodeurl@2.0.0: {}
 
   endent@2.1.0:
@@ -13342,8 +14386,6 @@ snapshots:
 
   gensync@1.0.0-beta.2: {}
 
-  get-caller-file@2.0.5: {}
-
   get-east-asian-width@1.6.0: {}
 
   get-intrinsic@1.3.0:
@@ -13409,8 +14451,6 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
-  graphql@16.14.0: {}
-
   gsap@3.15.0: {}
 
   gzip-size@6.0.0:
@@ -13582,15 +14622,12 @@ snapshots:
       property-information: 7.1.0
       space-separated-tokens: 2.0.2
 
-  headers-polyfill@5.0.1:
-    dependencies:
-      '@types/set-cookie-parser': 2.4.10
-      set-cookie-parser: 3.1.0
-
   hey-listen@1.0.8: {}
 
   hono@4.12.19: {}
 
+  howler@2.2.4: {}
+
   html-encoding-sniffer@6.0.0(@noble/hashes@1.8.0):
     dependencies:
       '@exodus/bytes': 1.15.0(@noble/hashes@1.8.0)
@@ -13734,8 +14771,6 @@ snapshots:
     dependencies:
       call-bound: 1.0.4
 
-  is-fullwidth-code-point@3.0.0: {}
-
   is-fullwidth-code-point@5.1.0:
     dependencies:
       get-east-asian-width: 1.6.0
@@ -13766,8 +14801,6 @@ snapshots:
 
   is-negative-zero@2.0.3: {}
 
-  is-node-process@1.2.0: {}
-
   is-number-object@1.1.1:
     dependencies:
       call-bound: 1.0.4
@@ -13848,6 +14881,19 @@ snapshots:
 
   isexe@3.1.5: {}
 
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-reports@3.2.0:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
   java-properties@1.0.2: {}
 
   jiti@2.7.0: {}
@@ -13856,6 +14902,8 @@ snapshots:
 
   joycon@3.1.1: {}
 
+  js-tokens@10.0.0: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@4.1.1:
@@ -14088,6 +15136,16 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  magicast@0.5.3:
+    dependencies:
+      '@babel/parser': 7.29.3
+      '@babel/types': 7.29.0
+      source-map-js: 1.2.1
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.8.0
+
   make-error@1.3.6: {}
 
   markdown-extensions@2.0.0: {}
@@ -14619,33 +15677,6 @@ snapshots:
 
   ms@2.1.3: {}
 
-  msw@2.14.6(@types/node@25.8.0)(typescript@5.9.3):
-    dependencies:
-      '@inquirer/confirm': 6.0.13(@types/node@25.8.0)
-      '@mswjs/interceptors': 0.41.9
-      '@open-draft/deferred-promise': 3.0.0
-      '@types/statuses': 2.0.6
-      cookie: 1.1.1
-      graphql: 16.14.0
-      headers-polyfill: 5.0.1
-      is-node-process: 1.2.0
-      outvariant: 1.4.3
-      path-to-regexp: 8.4.2
-      picocolors: 1.1.1
-      rettime: 0.11.11
-      statuses: 2.0.2
-      strict-event-emitter: 0.5.1
-      tough-cookie: 6.0.1
-      type-fest: 5.6.0
-      until-async: 3.0.2
-      yargs: 17.7.2
-    optionalDependencies:
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - '@types/node'
-
-  mute-stream@3.0.0: {}
-
   mz@2.7.0:
     dependencies:
       any-promise: 1.3.0
@@ -14712,6 +15743,18 @@ snapshots:
 
   npm-to-yarn@3.0.1: {}
 
+  nucleo-core-fill-24@1.1.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      tslib: 2.8.1
+
+  nucleo-social-media@1.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      tslib: 2.8.1
+
   nypm@0.6.6:
     dependencies:
       citty: 0.2.2
@@ -14786,8 +15829,6 @@ snapshots:
       string-width: 7.2.0
       strip-ansi: 7.2.0
 
-  outvariant@1.4.3: {}
-
   own-keys@1.0.1:
     dependencies:
       get-intrinsic: 1.3.0
@@ -15373,8 +16414,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  require-directory@2.1.1: {}
-
   require-from-string@2.0.2: {}
 
   requireg@0.2.2:
@@ -15396,8 +16435,6 @@ snapshots:
       onetime: 7.0.0
       signal-exit: 4.1.0
 
-  rettime@0.11.11: {}
-
   reusify@1.1.0: {}
 
   rfdc@1.4.1: {}
@@ -15511,8 +16548,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  set-cookie-parser@3.1.0: {}
-
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -15539,7 +16574,7 @@ snapshots:
 
   setprototypeof@1.2.0: {}
 
-  shadcn@4.7.0(@types/node@25.8.0)(typescript@5.9.3):
+  shadcn@4.11.0(typescript@5.9.3):
     dependencies:
       '@babel/core': 7.29.0
       '@babel/parser': 7.29.3
@@ -15560,7 +16595,6 @@ snapshots:
       fuzzysort: 3.1.0
       https-proxy-agent: 7.0.6
       kleur: 4.1.5
-      msw: 2.14.6(@types/node@25.8.0)(typescript@5.9.3)
       node-fetch: 3.3.2
       open: 11.0.0
       ora: 8.2.0
@@ -15577,7 +16611,6 @@ snapshots:
       zod-to-json-schema: 3.25.2(zod@3.25.76)
     transitivePeerDependencies:
       - '@cfworker/json-schema'
-      - '@types/node'
       - babel-plugin-macros
       - supports-color
       - typescript
@@ -15720,16 +16753,8 @@ snapshots:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
-  strict-event-emitter@0.5.1: {}
-
   string-argv@0.3.2: {}
 
-  string-width@4.2.3:
-    dependencies:
-      emoji-regex: 8.0.0
-      is-fullwidth-code-point: 3.0.0
-      strip-ansi: 6.0.1
-
   string-width@7.2.0:
     dependencies:
       emoji-regex: 10.6.0
@@ -15850,8 +16875,6 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
-  tagged-tag@1.0.0: {}
-
   tailwind-merge@3.6.0: {}
 
   tailwindcss@4.3.0: {}
@@ -16021,10 +17044,6 @@ snapshots:
 
   type-fest@0.21.3: {}
 
-  type-fest@5.6.0:
-    dependencies:
-      tagged-tag: 1.0.0
-
   type-is@2.1.0:
     dependencies:
       content-type: 2.0.0
@@ -16150,8 +17169,6 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  until-async@3.0.2: {}
-
   update-browserslist-db@1.2.3(browserslist@4.28.2):
     dependencies:
       browserslist: 4.28.2
@@ -16175,6 +17192,11 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
+  use-sound@5.0.0(react@19.2.6):
+    dependencies:
+      howler: 2.2.4
+      react: 19.2.6
+
   use-sync-external-store@1.6.0(react@19.2.6):
     dependencies:
       react: 19.2.6
@@ -16248,18 +17270,18 @@ snapshots:
       lightningcss: 1.32.0
       yaml: 2.9.0
 
-  vitest-axe@1.0.0-pre.5(vitest@4.1.7(@types/node@25.8.0)(jsdom@29.1.1(@noble/hashes@1.8.0))(msw@2.14.6(@types/node@25.8.0)(typescript@5.9.3))(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0))):
+  vitest-axe@1.0.0-pre.5(vitest@4.1.7):
     dependencies:
       '@vitest/pretty-format': 3.2.4
       axe-core: 4.11.4
       chalk: 5.6.2
       lodash-es: 4.18.1
-      vitest: 4.1.7(@types/node@25.8.0)(jsdom@29.1.1(@noble/hashes@1.8.0))(msw@2.14.6(@types/node@25.8.0)(typescript@5.9.3))(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0))
+      vitest: 4.1.7(@types/node@25.8.0)(@vitest/coverage-v8@4.1.8)(jsdom@29.1.1(@noble/hashes@1.8.0))(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0))
 
-  vitest@4.1.7(@types/node@25.8.0)(jsdom@29.1.1(@noble/hashes@1.8.0))(msw@2.14.6(@types/node@25.8.0)(typescript@5.9.3))(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0)):
+  vitest@4.1.7(@types/node@25.8.0)(@vitest/coverage-v8@4.1.8)(jsdom@29.1.1(@noble/hashes@1.8.0))(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.7
-      '@vitest/mocker': 4.1.7(msw@2.14.6(@types/node@25.8.0)(typescript@5.9.3))(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0))
+      '@vitest/mocker': 4.1.7(vite@7.3.3(@types/node@25.8.0)(jiti@2.7.0)(lightningcss@1.32.0)(yaml@2.9.0))
       '@vitest/pretty-format': 4.1.7
       '@vitest/runner': 4.1.7
       '@vitest/snapshot': 4.1.7
@@ -16280,6 +17302,7 @@ snapshots:
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 25.8.0
+      '@vitest/coverage-v8': 4.1.8(vitest@4.1.7)
       jsdom: 29.1.1(@noble/hashes@1.8.0)
     transitivePeerDependencies:
       - msw
@@ -16384,12 +17407,6 @@ snapshots:
       siginfo: 2.0.0
       stackback: 0.0.2
 
-  wrap-ansi@7.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
   wrap-ansi@9.0.2:
     dependencies:
       ansi-styles: 6.2.3
@@ -16409,24 +17426,10 @@ snapshots:
 
   xmlchars@2.2.0: {}
 
-  y18n@5.0.8: {}
-
   yallist@3.1.1: {}
 
   yaml@2.9.0: {}
 
-  yargs-parser@21.1.1: {}
-
-  yargs@17.7.2:
-    dependencies:
-      cliui: 8.0.1
-      escalade: 3.2.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      string-width: 4.2.3
-      y18n: 5.0.8
-      yargs-parser: 21.1.1
-
   yn@3.1.1: {}
 
   yocto-spinner@1.2.0:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index ef91ec34..5d735aa3 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -8,11 +8,16 @@ packages:
 allowBuilds:
   esbuild: true
   msw: true
+  nucleo-core-fill-24: true
   sharp: true
 
 overrides:
   react: "^19.2.1"
   react-dom: "^19.2.1"
+  # Pin radix-ui to one exact version tree-wide: packages/shadcn-ui declares
+  # "latest" (regenerated by bump-ui), and mixed resolutions create duplicate
+  # Radix context providers that break components at runtime. Bump manually.
+  radix-ui: "1.4.3"
   shiki: "^4.0.2"
   "@shikijs/types": "^4.0.2"
   glob: ">=10.5.0"
diff --git a/turbo.json b/turbo.json
index 34d0d5ff..78bca2be 100644
--- a/turbo.json
+++ b/turbo.json
@@ -11,6 +11,9 @@
     "test": {
       "dependsOn": ["^test"]
     },
+    "typecheck": {
+      "dependsOn": ["^typecheck"]
+    },
     "analyze": {
       "dependsOn": ["^analyze"]
     },
@@ -24,7 +27,9 @@
     "//#clean": {
       "cache": false
     },
-    "//#check": {},
+    "//#check": {
+      "cache": false
+    },
     "//#fix": {
       "cache": false
     }