diff --git a/.gitignore b/.gitignore
index b31bf87..a89f002 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,4 +41,7 @@ next-env.d.ts
 
 # ai-docs
 /planning
-/docs/m2-plan
\ No newline at end of file
+/docs/m2-plan
+
+# claude code
+.claude/
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 9f276c8..0470235 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -9,6 +9,7 @@ import { RootProvider } from "fumadocs-ui/provider/next";
 import { cn, constructMetadata } from "@/lib/utils";
 import { Toaster } from "@/components/ui/sonner";
 import { WalletProvider } from "@/components/wallet/wallet-provider";
+import { DevTools } from "@/components/dev-tools";
 
 interface RootLayoutProps {
   children: React.ReactNode;
@@ -45,6 +46,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
             {children}
           </WalletProvider>
           <Toaster richColors closeButton />
+          <DevTools />
         </RootProvider>
       </body>
     </html>
diff --git a/components.json b/components.json
index 3040da4..9898772 100644
--- a/components.json
+++ b/components.json
@@ -10,8 +10,12 @@
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "radix",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils"
+  },
+  "registries": {
+    "@lucide-animated": "https://lucide-animated.com/r/{name}.json"
   }
-}
\ No newline at end of file
+}
diff --git a/components/dev-tools.tsx b/components/dev-tools.tsx
new file mode 100644
index 0000000..e252243
--- /dev/null
+++ b/components/dev-tools.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Agentation =
+  process.env.NODE_ENV === "development"
+    ? dynamic(() => import("agentation").then((mod) => mod.Agentation), {
+        ssr: false,
+      })
+    : () => null;
+
+export function DevTools() {
+  return <Agentation endpoint="http://localhost:4747" />;
+}
diff --git a/components/sections/connected-steps.tsx b/components/sections/connected-steps.tsx
index 3f2378f..e0e4097 100644
--- a/components/sections/connected-steps.tsx
+++ b/components/sections/connected-steps.tsx
@@ -2,6 +2,7 @@
 
 import * as React from "react";
 import { motion } from "framer-motion";
+import Balancer from "react-wrap-balancer";
 
 interface StepProps {
   number: number;
@@ -24,9 +25,9 @@ const Step = ({ number, title, description }: StepProps) => (
         {number}
         <div className="absolute -inset-1 animate-pulse rounded-full bg-primary/5" />
       </motion.div>
-      <h3 className="mt-4 text-lg font-semibold text-center">{title}</h3>
+      <h3 className="mt-4 text-lg font-semibold text-center"><Balancer>{title}</Balancer></h3>
       <p className="mt-2 text-center text-sm text-muted-foreground">
-        {description}
+        <Balancer>{description}</Balancer>
       </p>
     </div>
   </motion.div>
diff --git a/components/sections/dapp-builders.tsx b/components/sections/dapp-builders.tsx
index 2347ec1..ada92c2 100644
--- a/components/sections/dapp-builders.tsx
+++ b/components/sections/dapp-builders.tsx
@@ -1,65 +1,107 @@
 "use client";
 
 import * as React from "react";
-import {
-  motion,
-  AnimatePresence,
-  useScroll,
-  useTransform,
-  useSpring,
-} from "framer-motion";
+import { motion, AnimatePresence, useScroll, useTransform } from "framer-motion";
+import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { ArrowRight, Copy } from "lucide-react";
+import { ArrowRight, Copy, Check } from "lucide-react";
+import Link from "next/link";
 import Balancer from "react-wrap-balancer";
-import { AuroraBackground } from "@/components/layout/aurora-background";
 import { cn } from "@/lib/utils";
 import { StatusBadge } from "@/components/shared/status-badge";
 
-interface ComponentCard {
+interface ComponentShowcase {
   id: string;
   title: string;
+  subtitle: string;
   code: string;
-  description: string;
   visual: React.ReactNode;
 }
 
-const components: ComponentCard[] = [
+const components: ComponentShowcase[] = [
   {
-    id: "chain-aware",
-    title: "Chain-Aware Forms",
-    code: '<AddressInput chain="polkadot" />',
-    description: "Full validation + DID resolution support",
+    id: "account",
+    title: "Account Input",
+    subtitle: "SS58 validation, wallet connect, recent addresses",
+    code: '<Account client={client} onChange={setAddress} />',
     visual: (
-      <div className="w-full rounded-lg border bg-card/50 p-6">
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <div className="h-5 w-1/3 rounded-md bg-primary/10" />
-            <div className="h-12 rounded-md border bg-background shadow-sm" />
+      <div className="space-y-4 p-1">
+        <div className="space-y-2">
+          <div className="text-[11px] font-medium tracking-wide uppercase text-muted-foreground/70">Destination</div>
+          <div className="flex items-center gap-3 rounded-lg border bg-background/80 px-4 py-3">
+            <div className="h-8 w-8 shrink-0 rounded-full bg-gradient-to-br from-[#FF2670]/60 to-[#7916F3]/60" />
+            <div className="min-w-0 flex-1">
+              <div className="font-mono text-sm truncate">15oF4uVnB...R7xkwQ1</div>
+            </div>
+            <div className="flex items-center gap-1.5 rounded-full bg-green-500/10 px-2 py-0.5">
+              <div className="h-1.5 w-1.5 rounded-full bg-green-500" />
+              <span className="text-[10px] font-medium text-green-600">Valid</span>
+            </div>
           </div>
+        </div>
+        <div className="flex gap-2">
+          <div className="rounded-lg border border-dashed bg-muted/30 px-3 py-2 text-xs text-muted-foreground hover:border-primary/30 transition-colors cursor-pointer">Connected wallet</div>
+          <div className="rounded-lg border border-dashed bg-muted/30 px-3 py-2 text-xs text-muted-foreground hover:border-primary/30 transition-colors cursor-pointer">Address book</div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "balance",
+    title: "Balance Input",
+    subtitle: "Denomination switching, ED warnings, quick-fill",
+    code: '<Balance client={client} onChange={setAmount} />',
+    visual: (
+      <div className="space-y-4 p-1">
+        <div className="space-y-2">
+          <div className="text-[11px] font-medium tracking-wide uppercase text-muted-foreground/70">Amount</div>
           <div className="flex items-center gap-2">
-            <div className="h-5 w-5 rounded-full bg-green-500/20" />
-            <div className="h-4 w-2/5 rounded-md bg-green-500/20" />
+            <div className="flex-1 rounded-lg border bg-background/80 px-4 py-3">
+              <span className="font-mono text-lg font-medium">15.500</span>
+            </div>
+            <div className="flex items-center gap-2 rounded-lg border bg-background/80 px-4 py-3">
+              <div className="h-5 w-5 rounded-full bg-[#E6007A]" />
+              <span className="text-sm font-semibold">DOT</span>
+            </div>
           </div>
         </div>
+        <div className="grid grid-cols-4 gap-2">
+          {["25%", "50%", "75%", "Max"].map((pct) => (
+            <div key={pct} className="rounded-lg border bg-muted/30 py-1.5 text-center text-xs font-medium text-muted-foreground hover:bg-primary/5 hover:text-primary hover:border-primary/20 transition-all cursor-pointer">{pct}</div>
+          ))}
+        </div>
+        <div className="flex items-center gap-2 rounded-lg border border-amber-500/20 bg-amber-500/5 px-3 py-2">
+          <div className="h-1.5 w-1.5 rounded-full bg-amber-500" />
+          <span className="text-[11px] text-amber-600">Below existential deposit (1 DOT)</span>
+        </div>
       </div>
     ),
   },
   {
-    id: "smart-inputs",
-    title: "Smart Inputs",
-    code: '<BalanceInput type="DOT" />',
-    description: "Auto-formatting + unit conversion",
+    id: "vote",
+    title: "Governance Vote",
+    subtitle: "Standard, Split, SplitAbstain with conviction",
+    code: '<Vote client={client} onChange={setVote} />',
     visual: (
-      <div className="w-full rounded-lg border bg-card/50 p-6">
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <div className="h-5 w-1/4 rounded-md bg-primary/10" />
-            <div className="flex gap-2">
-              <div className="h-12 flex-1 rounded-md border bg-background shadow-sm" />
-              <div className="flex h-12 w-24 items-center justify-center rounded-md border bg-background shadow-sm">
-                <div className="h-5 w-12 rounded-md bg-primary/10" />
-              </div>
+      <div className="space-y-4 p-1">
+        <div className="flex gap-1 rounded-lg border bg-muted/30 p-1">
+          {["Standard", "Split", "SplitAbstain"].map((mode, i) => (
+            <div key={mode} className={cn("flex-1 rounded-md py-2 text-center text-xs font-medium transition-all cursor-pointer", i === 0 ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground")}>{mode}</div>
+          ))}
+        </div>
+        <div className="grid grid-cols-2 gap-3">
+          <div className="rounded-lg border-2 border-green-500/30 bg-green-500/5 py-3 text-center text-sm font-semibold text-green-600 cursor-pointer">Aye</div>
+          <div className="rounded-lg border bg-muted/20 py-3 text-center text-sm text-muted-foreground cursor-pointer hover:border-red-500/30 transition-colors">Nay</div>
+        </div>
+        <div className="rounded-lg border bg-background/80 p-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-[11px] text-muted-foreground mb-0.5">Conviction</div>
+              <div className="text-sm font-semibold">2x voting power</div>
+            </div>
+            <div className="text-right">
+              <div className="text-xs text-muted-foreground">Lock period</div>
+              <div className="text-sm font-mono text-primary">~56 days</div>
             </div>
           </div>
         </div>
@@ -67,54 +109,84 @@ const components: ComponentCard[] = [
     ),
   },
   {
-    id: "decoding",
-    title: "Decoding Utilities",
-    code: "<EncodedCallData txHash={hash} />",
-    description: "Extrinsic tree analysis",
+    id: "call",
+    title: "Nested Call Builder",
+    subtitle: "Pallet/method cascade from on-chain metadata",
+    code: '<Call client={client} onChange={setBatchCall} />',
     visual: (
-      <div className="w-full rounded-lg border bg-card/50 p-6">
-        <div className="space-y-4">
+      <div className="space-y-3 p-1">
+        <div className="space-y-2">
+          <div className="text-[11px] font-medium tracking-wide uppercase text-muted-foreground/70">Pallet</div>
+          <div className="flex items-center rounded-lg border bg-background/80 px-4 py-2.5">
+            <span className="text-sm font-medium">Balances</span>
+            <svg className="ml-auto h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+          </div>
+        </div>
+        <div className="space-y-2">
+          <div className="text-[11px] font-medium tracking-wide uppercase text-muted-foreground/70">Method</div>
+          <div className="flex items-center rounded-lg border bg-background/80 px-4 py-2.5">
+            <span className="text-sm font-medium font-mono">transferKeepAlive</span>
+            <svg className="ml-auto h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+          </div>
+        </div>
+        <div className="rounded-lg border border-dashed bg-muted/20 p-3 space-y-2">
+          <div className="text-[10px] font-medium tracking-wider uppercase text-muted-foreground/60">Auto-populated params</div>
           <div className="flex items-center gap-2">
-            <div className="h-5 w-5 rounded-md bg-primary/10" />
-            <div className="h-5 flex-1 rounded-md bg-primary/10" />
+            <span className="rounded bg-[#FF2670]/10 px-1.5 py-0.5 text-[10px] font-mono font-medium text-[#FF2670]">AccountId</span>
+            <span className="text-xs text-muted-foreground">dest</span>
           </div>
-          <div className="space-y-3">
-            <div className="flex items-center gap-2">
-              <div className="h-5 w-12 rounded-md bg-primary/10" />
-              <div className="h-5 flex-1 rounded-md bg-primary/10" />
-            </div>
-            <div className="ml-6 flex items-center gap-2">
-              <div className="h-5 w-20 rounded-md bg-primary/10" />
-              <div className="h-5 flex-1 rounded-md bg-primary/10" />
-            </div>
+          <div className="flex items-center gap-2">
+            <span className="rounded bg-[#7916F3]/10 px-1.5 py-0.5 text-[10px] font-mono font-medium text-[#7916F3]">Balance</span>
+            <span className="text-xs text-muted-foreground">value</span>
           </div>
         </div>
       </div>
     ),
   },
   {
-    id: "dedot",
-    title: "Dedot Type Integration",
-    code: "Input = findInputComponent(dedotTypeId)",
-    description: "Seamless integration with Dedot",
+    id: "bytes",
+    title: "Bytes Encoder",
+    subtitle: "Hex, Text, JSON, Base64, and File upload modes",
+    code: '<Bytes client={client} onChange={setCallData} />',
     visual: (
-      <div className="w-full rounded-lg border bg-card/50 p-6">
-        <div className="space-y-4">
-          <div className="grid grid-cols-2 gap-3">
-            <div className="space-y-2">
-              <div className="h-4 w-full rounded-md bg-primary/10" />
-              <div className="h-12 rounded-md border bg-background shadow-sm" />
-            </div>
-            <div className="space-y-2">
-              <div className="h-4 w-full rounded-md bg-primary/10" />
-              <div className="h-12 rounded-md border bg-background shadow-sm" />
-            </div>
+      <div className="space-y-4 p-1">
+        <div className="flex gap-1 rounded-lg border bg-muted/30 p-1">
+          {["Hex", "Text", "JSON", "Base64", "File"].map((mode, i) => (
+            <div key={mode} className={cn("flex-1 rounded-md py-1.5 text-center text-[11px] font-medium transition-all cursor-pointer", i === 0 ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground")}>{mode}</div>
+          ))}
+        </div>
+        <div className="rounded-lg border bg-background/80 p-4 font-mono text-xs leading-relaxed text-muted-foreground break-all">
+          0x68656c6c6f20776f726c64
+        </div>
+        <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+          <span>11 bytes encoded</span>
+          <span className="font-mono">Text: &quot;hello world&quot;</span>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "enum",
+    title: "Enum Selector",
+    subtitle: "Metadata-driven variants with dynamic sub-fields",
+    code: '<Enum client={client} typeId={id} onChange={set} />',
+    visual: (
+      <div className="space-y-3 p-1">
+        <div className="space-y-2">
+          <div className="text-[11px] font-medium tracking-wide uppercase text-muted-foreground/70">MultiAddress</div>
+          <div className="flex items-center rounded-lg border bg-background/80 px-4 py-2.5">
+            <span className="text-sm font-medium">Id</span>
+            <span className="ml-2 text-xs text-muted-foreground/50">AccountId32</span>
+            <svg className="ml-auto h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
           </div>
-          <div className="h-24 rounded-md border bg-background p-3 shadow-sm">
-            <div className="space-y-2">
-              <div className="h-4 w-2/3 rounded-md bg-primary/10" />
-              <div className="h-4 w-full rounded-md bg-primary/10" />
-            </div>
+        </div>
+        <div className="rounded-lg border border-primary/20 bg-gradient-to-br from-[#FF2670]/[0.03] to-[#7916F3]/[0.03] p-3 space-y-2">
+          <div className="flex items-center gap-2">
+            <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-mono font-medium text-primary">AccountId32</span>
+          </div>
+          <div className="flex items-center gap-3 rounded-md border bg-background/80 px-3 py-2">
+            <div className="h-6 w-6 shrink-0 rounded-full bg-gradient-to-br from-[#FF2670]/60 to-[#7916F3]/60" />
+            <span className="font-mono text-xs text-muted-foreground truncate">15oF4uVnB...R7xkwQ1</span>
           </div>
         </div>
       </div>
@@ -122,174 +194,246 @@ const components: ComponentCard[] = [
   },
 ];
 
-const benefits = [
-  "Built-in error prevention",
-  "Real-time type checking",
-  "Auto-generated examples",
-];
+const containerVariants = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: { staggerChildren: 0.08 },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 12 },
+  show: { opacity: 1, y: 0 },
+};
 
 export function DappBuildersSection() {
-  const containerRef = React.useRef<HTMLDivElement>(null);
   const sectionRef = React.useRef<HTMLDivElement>(null);
   const [activeIndex, setActiveIndex] = React.useState(0);
   const [copied, setCopied] = React.useState(false);
 
-  // Scroll configuration for the entire section
-  const { scrollYProgress: sectionProgress } = useScroll({
+  const { scrollYProgress } = useScroll({
     target: sectionRef,
-    offset: ["start start", "end start"],
-  });
-
-  // Scroll configuration for the card content
-  const { scrollYProgress: contentProgress } = useScroll({
-    target: containerRef,
-    offset: ["start end", "end start"],
+    offset: ["start start", "end end"],
   });
 
-  const springConfig = { stiffness: 300, damping: 30 };
-  const smoothProgress = useSpring(contentProgress, springConfig);
   const progress = useTransform(
-    smoothProgress,
-    [0, 0.5],
+    scrollYProgress,
+    [0.08, 0.92],
     [0, components.length - 1]
   );
 
-  // Handle scroll snapping
   React.useEffect(() => {
     const unsubscribe = progress.on("change", (latest) => {
-      setActiveIndex(Math.round(latest));
+      const clamped = Math.max(0, Math.min(components.length - 1, Math.round(latest)));
+      setActiveIndex(clamped);
     });
     return () => unsubscribe();
   }, [progress]);
 
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(components[activeIndex].code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
   return (
     <section
       ref={sectionRef}
       className="relative bg-muted/50"
-      style={{
-        height: "160vh",
-      }}
+      style={{ height: `${100 + components.length * 45}vh` }}
     >
-      <div
-        className="sticky top-16 h-screen flex items-center justify-center overflow-hidden"
-        style={{
-          scrollSnapAlign: "start",
-          scrollSnapStop: "always",
-        }}
-      >
-        <div className="w-full h-full">
-          {" "}
-          {/* Update 1 */}
-          <div className="mx-auto max-w-7xl px-6 lg:px-8">
-            <div className="grid gap-16 lg:grid-cols-2 py-24 sm:py-32">
-              {" "}
-              {/* Update 2 */}
-              {/* Left Column - Scrolling Card */}
-              <div ref={containerRef} className="relative lg:h-[160vh]">
-                <div className="sticky top-24 h-[30rem] overflow-hidden">
-                  {/* Main Card */}
-                  <Card className="group relative h-full overflow-hidden border bg-background/80 backdrop-blur-sm">
-                    <div className="absolute inset-0 bg-gradient-to-br from-background via-background to-muted opacity-90" />
-                    <div className="absolute inset-0 transition-opacity group-hover:opacity-100 opacity-0">
-                      <AuroraBackground
-                        containerClassName="absolute inset-0"
-                        className="h-full"
-                      />
+      <div className="sticky top-0 h-screen overflow-hidden">
+        {/* Ambient gradient */}
+        <div className="pointer-events-none absolute inset-0 opacity-[0.04]">
+          <div
+            className="absolute inset-0 transition-all duration-1000"
+            style={{
+              background: `radial-gradient(ellipse 80% 60% at ${activeIndex % 2 === 0 ? '30%' : '70%'} 50%, #FF2670, transparent), radial-gradient(ellipse 60% 80% at ${activeIndex % 2 === 0 ? '70%' : '30%'} 60%, #7916F3, transparent)`,
+            }}
+          />
+        </div>
+
+        <div className="relative mx-auto flex h-full max-w-7xl items-center px-6 lg:px-8">
+          <div className="grid w-full gap-12 lg:grid-cols-[1fr_1.1fr] lg:gap-20 items-center">
+
+            {/* Left Column — Header + Component Nav */}
+            <div className="flex flex-col">
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6 }}
+              >
+                <div className="mb-6">
+                  <StatusBadge status="live" />
+                </div>
+                <h2 className="text-3xl font-bold font-heading tracking-tight sm:text-4xl">
+                  <Balancer>
+                    Components that speak{" "}
+                    <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#FF2670] to-[#7916F3]">
+                      Substrate
+                    </span>
+                  </Balancer>
+                </h2>
+                <p className="mt-4 text-lg leading-relaxed text-muted-foreground">
+                  <Balancer>
+                    Every input understands Polkadot&apos;s type system out of the box.
+                    Validation, encoding, and edge cases handled -- so you ship
+                    dApps, not workarounds.
+                  </Balancer>
+                </p>
+              </motion.div>
+
+              {/* Component list */}
+              <motion.div
+                variants={containerVariants}
+                initial="hidden"
+                whileInView="show"
+                viewport={{ once: true }}
+                className="mt-10 space-y-1.5"
+              >
+                {components.map((component, index) => (
+                  <motion.button
+                    key={component.id}
+                    variants={itemVariants}
+                    onClick={() => setActiveIndex(index)}
+                    className={cn(
+                      "group flex w-full items-center gap-4 rounded-xl px-4 py-3 text-left transition-all duration-300",
+                      activeIndex === index
+                        ? "bg-gradient-to-r from-[#FF2670]/[0.06] to-[#7916F3]/[0.06] shadow-sm"
+                        : "hover:bg-muted/60"
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg font-mono text-sm font-bold transition-all duration-300",
+                        activeIndex === index
+                          ? "bg-primary text-primary-foreground"
+                          : "bg-muted text-muted-foreground group-hover:bg-muted/80"
+                      )}
+                    >
+                      {String(index + 1).padStart(2, "0")}
                     </div>
-                    <div className="relative h-full p-6 sm:p-8">
-                      <AnimatePresence mode="wait">
-                        <motion.div
-                          key={activeIndex}
-                          initial={{ opacity: 0, y: 20 }}
-                          animate={{ opacity: 1, y: 0 }}
-                          exit={{ opacity: 0, y: -20 }}
-                          transition={{ duration: 0.4 }}
-                          className="flex h-full flex-col"
-                        >
-                          <h3 className="pt-4 text-3xl font-semibold tracking-normal bg-clip-text text-transparent bg-gradient-to-r from-[#FF2670] to-[#7916F3]">
+                    <div className="min-w-0 flex-1">
+                      <div className={cn(
+                        "font-heading font-semibold text-sm transition-colors",
+                        activeIndex === index ? "text-foreground" : "text-muted-foreground group-hover:text-foreground"
+                      )}>
+                        {component.title}
+                      </div>
+                      <div className="text-xs text-muted-foreground/70 truncate">
+                        {component.subtitle}
+                      </div>
+                    </div>
+                    <div className={cn(
+                      "h-1.5 w-1.5 rounded-full transition-all duration-300",
+                      activeIndex === index ? "bg-green-500/60" : "bg-transparent"
+                    )} />
+                  </motion.button>
+                ))}
+              </motion.div>
+
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+                className="mt-10"
+              >
+                <Link href="/docs/components">
+                  <Button size="lg" className="rounded-full group">
+                    Explore All Components
+                    <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
+                  </Button>
+                </Link>
+              </motion.div>
+            </div>
+
+            {/* Right Column — Live Preview Card */}
+            <div className="relative">
+              {/* Glow behind card */}
+              <div
+                className="pointer-events-none absolute -inset-8 rounded-3xl opacity-20 blur-3xl transition-all duration-700"
+                style={{
+                  background: `radial-gradient(circle at center, ${activeIndex % 2 === 0 ? '#FF2670' : '#7916F3'} 0%, transparent 70%)`,
+                }}
+              />
+
+              <Card className="relative overflow-hidden border-0 bg-background/60 backdrop-blur-xl shadow-2xl shadow-black/5">
+                {/* Card header gradient line */}
+                <div className="h-px bg-gradient-to-r from-transparent via-[#FF2670]/40 to-transparent" />
+
+                <div className="p-8">
+                  <AnimatePresence mode="wait">
+                    <motion.div
+                      key={activeIndex}
+                      initial={{ opacity: 0, y: 16, filter: "blur(4px)" }}
+                      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+                      exit={{ opacity: 0, y: -16, filter: "blur(4px)" }}
+                      transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }}
+                    >
+                      {/* Component title */}
+                      <div className="flex items-center justify-between mb-6">
+                        <div>
+                          <h3 className="text-xl font-heading font-bold">
                             {components[activeIndex].title}
                           </h3>
-                          <div className="relative mt-8 mb-6 rounded-lg bg-muted/80 p-4 font-mono text-sm shadow-sm">
-                            <pre>{components[activeIndex].code}</pre>
-                            <button
-                              onClick={async () => {
-                                await navigator.clipboard.writeText(
-                                  components[activeIndex].code
-                                );
-                                setCopied(true);
-                                setTimeout(() => setCopied(false), 2000);
-                              }}
-                              className={cn(
-                                "absolute right-3 top-3 rounded-md border p-2 hover:bg-background transition-colors",
-                                copied && "text-green-500 border-green-500/20"
-                              )}
-                            >
-                              <Copy className="h-4 w-4" />
-                            </button>
-                          </div>
-                          <p className="mb-2 text-lg text-muted-foreground">
-                            {components[activeIndex].description}
+                          <p className="text-sm text-muted-foreground mt-0.5">
+                            {components[activeIndex].subtitle}
                           </p>
-                          <div className="flex-1 flex items-center justify-center">
-                            <div className="w-full max-w-2xl">
-                              {components[activeIndex].visual}
-                            </div>
-                          </div>
-                        </motion.div>
-                      </AnimatePresence>
-                    </div>
-                  </Card>
-                </div>
-              </div>
-              {/* Right Column - Content */}
-              <div className="relative lg:sticky lg:top-24 lg:h-fit">
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
-                >
-                  <div className="mb-8">
-                    <div className="mb-4">
-                      <StatusBadge status="soon" />
-                    </div>
-                    <h2 className="mb-4 text-3xl font-bold font-heading tracking-tight sm:text-4xl">
-                      <Balancer>For dApp Builders</Balancer>
-                    </h2>
-                    <p className="text-lg text-muted-foreground">
-                      <Balancer>
-                        Tired of context-switching between docs and code? Our
-                        components come with everything you need to build fast.
-                      </Balancer>
-                    </p>
-                  </div>
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <div className="h-2 w-2 rounded-full bg-[#FF2670]/40" />
+                          <div className="h-2 w-2 rounded-full bg-[#7916F3]/40" />
+                          <div className="h-2 w-2 rounded-full bg-muted" />
+                        </div>
+                      </div>
 
-                  <div className="mb-12 space-y-4">
-                    {benefits.map((benefit, index) => (
-                      <motion.div
-                        key={benefit}
-                        initial={{ opacity: 0, x: 20 }}
-                        whileInView={{ opacity: 1, x: 0 }}
-                        viewport={{ once: true }}
-                        transition={{ delay: index * 0.1 }}
-                        className="flex items-center gap-2"
-                      >
-                        <div className="flex h-6 w-6 items-center justify-center rounded-full bg-muted">
-                          <ArrowRight className="h-4 w-4" />
+                      {/* Code snippet */}
+                      <div className="relative mb-6 overflow-hidden rounded-xl bg-muted/60 border">
+                        <div className="flex items-center justify-between border-b px-4 py-2">
+                          <div className="flex items-center gap-2">
+                            <div className="h-2.5 w-2.5 rounded-full bg-red-400/60" />
+                            <div className="h-2.5 w-2.5 rounded-full bg-yellow-400/60" />
+                            <div className="h-2.5 w-2.5 rounded-full bg-green-400/60" />
+                          </div>
+                          <button
+                            onClick={handleCopy}
+                            className="rounded-md p-1 text-muted-foreground/50 hover:text-foreground transition-colors"
+                          >
+                            {copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
+                          </button>
                         </div>
-                        <span>{benefit}</span>
-                      </motion.div>
-                    ))}
-                  </div>
+                        <pre className="px-4 py-3 font-mono text-xs leading-relaxed overflow-x-auto">
+                          {components[activeIndex].code}
+                        </pre>
+                      </div>
 
-                  <p className="mb-8 text-lg font-medium">
-                    Stop fighting the chain – start using it.
-                  </p>
+                      {/* Visual preview */}
+                      <div className="rounded-xl border bg-gradient-to-br from-background to-muted/30 p-5">
+                        <div className="text-[10px] font-medium tracking-widest uppercase text-muted-foreground/50 mb-4">Preview</div>
+                        {components[activeIndex].visual}
+                      </div>
+                    </motion.div>
+                  </AnimatePresence>
+                </div>
+              </Card>
 
-                  <Button size="lg" className="rounded-full" variant="outline">
-                    Join Waitlist
-                    <ArrowRight className="ml-2 h-4 w-4" />
-                  </Button>
-                </motion.div>
+              {/* Progress indicator */}
+              <div className="mt-6 flex justify-center gap-1.5">
+                {components.map((_, index) => (
+                  <button
+                    key={index}
+                    onClick={() => setActiveIndex(index)}
+                    className={cn(
+                      "h-1 rounded-full transition-all duration-500",
+                      activeIndex === index
+                        ? "w-8 bg-gradient-to-r from-[#FF2670] to-[#7916F3]"
+                        : "w-1.5 bg-primary/15 hover:bg-primary/25"
+                    )}
+                  />
+                ))}
               </div>
             </div>
           </div>
diff --git a/components/sections/extrinsic-builder.tsx b/components/sections/extrinsic-builder.tsx
index 28e4ea4..9ee1e79 100644
--- a/components/sections/extrinsic-builder.tsx
+++ b/components/sections/extrinsic-builder.tsx
@@ -4,56 +4,53 @@ import { motion, useScroll, useTransform } from "framer-motion";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { ArrowRight } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
 import { PolkadotIcon } from "@/components/icons/polkadot-icon";
 import { TalismanIcon } from "@/components/icons/talisman-icon";
 import { NovaWalletIcon } from "@/components/icons/nova-wallet-icon";
 import { SubWalletIcon } from "@/components/icons/subwallet-icon";
 import { RelaycodeIcon } from "@/components/icons/relaycode-logo";
-import { LoadingSkeleton } from "./loading-skeleton";
 import { ConnectedSteps } from "./connected-steps";
 import type React from "react";
-import { BlockIcon } from "../icons/block-icon";
+import { HandCoinsIcon } from "@/components/ui/hand-coins";
+import { LayersIcon } from "@/components/ui/layers";
+import { WorkflowIcon } from "@/components/ui/workflow";
+import { BoxIcon } from "@/components/ui/box";
+import { UsersIcon } from "@/components/ui/users";
+import { ZapIcon } from "@/components/ui/zap";
 
-const steps = [
-  {
-    title: "Pick what you want to do",
-    description: "Choose from staking, NFTs, and more",
-  },
-  {
-    title: "Fill human-friendly forms",
-    description: "No more cryptic parameters",
-  },
-  {
-    title: "We handle the encoding",
-    description: "All the Polkadot magic, automated",
-  },
-];
+type IconHandle = { startAnimation: () => void; stopAnimation: () => void };
 
-const WalletIcon = ({
-  children,
-  className,
-  angle,
+function AutoAnimateIcon({
+  Icon,
+  delay,
+  interval = 3000,
+  ...props
 }: {
-  children: React.ReactNode;
+  Icon: React.ForwardRefExoticComponent<React.RefAttributes<IconHandle> & Record<string, unknown>>;
+  delay: number;
+  interval?: number;
+  size?: number;
   className?: string;
-  angle?: number;
-}) => (
-  <motion.div
-    className={cn(
-      "absolute flex h-12 w-12 items-center justify-center rounded-xl bg-card shadow-md",
-      className
-    )}
-    style={{
-      transform: `rotate(${angle}deg) translateY(-60px) rotate(-${angle}deg)`,
-    }}
-    whileHover={{ scale: 1.05 }}
-    transition={{ type: "spring", stiffness: 400, damping: 10 }}
-  >
-    {children}
-  </motion.div>
-);
+}) {
+  const iconRef = useRef<IconHandle>(null);
+
+  useEffect(() => {
+    let intervalId: ReturnType<typeof setInterval>;
+    const timeout = setTimeout(() => {
+      iconRef.current?.startAnimation();
+      intervalId = setInterval(() => {
+        iconRef.current?.startAnimation();
+      }, interval);
+    }, delay);
+    return () => {
+      clearTimeout(timeout);
+      clearInterval(intervalId);
+    };
+  }, [delay, interval]);
+
+  return <Icon ref={iconRef} {...props} />;
+}
 
 const features = [
   {
@@ -62,9 +59,16 @@ const features = [
     illustration: (
       <div className="relative h-[200px] overflow-hidden rounded-lg bg-gradient-to-br from-background to-muted/50 p-6">
         <div className="grid grid-cols-3 gap-3">
-          {Array.from({ length: 6 }).map((_, i) => (
+          {[
+            { Icon: HandCoinsIcon, label: "Staking" },
+            { Icon: LayersIcon, label: "Governance" },
+            { Icon: WorkflowIcon, label: "XCM" },
+            { Icon: BoxIcon, label: "Assets" },
+            { Icon: UsersIcon, label: "Crowdloans" },
+            { Icon: ZapIcon, label: "Utility" },
+          ].map(({ Icon, label }, i) => (
             <motion.div
-              key={i}
+              key={label}
               className="aspect-square rounded-lg bg-[#FF2670]/5 p-2"
               initial={{ opacity: 0, scale: 0.8 }}
               animate={{
@@ -73,8 +77,9 @@ const features = [
                 transition: { delay: i * 0.1 },
               }}
             >
-              <motion.div className="flex h-full items-center justify-center rounded-md bg-card">
-                <BlockIcon className="opacity-80" />
+              <motion.div className="relative flex h-full flex-col items-center justify-center gap-1 rounded-md bg-card">
+                <AutoAnimateIcon Icon={Icon} size={20} className="text-primary/70" delay={i * 500} interval={3000} />
+                <span className="text-[9px] font-medium text-muted-foreground/70">{label}</span>
                 <motion.div
                   className="absolute inset-0 rounded-md"
                   animate={{
@@ -405,7 +410,7 @@ const features = [
 
 const DemoPreview = () => {
   return (
-    <div className="rounded-xl border bg-gradient-to-br from-background to-muted shadow-2xl">
+    <div className="rounded-xl border bg-gradient-to-br from-background to-muted shadow-2xl overflow-hidden">
       <div className="flex items-center gap-2 border-b px-4 py-3">
         <div className="flex gap-1.5">
           <div className="h-3 w-3 rounded-full bg-red-500" />
@@ -418,7 +423,11 @@ const DemoPreview = () => {
           </div>
         </div>
       </div>
-      <LoadingSkeleton />
+      <img
+        src="/relaycode-demo-poster.png"
+        alt="Relaycode Extrinsic Builder"
+        className="w-full h-auto"
+      />
     </div>
   );
 };
@@ -474,7 +483,7 @@ export function ExtrinsicBuilderSection() {
           </motion.div>
         </div>
 
-        <div className="mx-auto mt-40 max-w-2xl text-center">
+        <div className="mx-auto mt-52 max-w-5xl text-center">
           <motion.h2
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
diff --git a/components/sections/hero-section.tsx b/components/sections/hero-section.tsx
index c473f26..eca33fe 100644
--- a/components/sections/hero-section.tsx
+++ b/components/sections/hero-section.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { motion } from "framer-motion";
 import Balancer from "react-wrap-balancer";
 
@@ -10,6 +11,8 @@ import { ArrowRight, PlayCircle } from "lucide-react";
 import { PolkadotIcon } from "@/components/icons/polkadot-icon";
 
 export function HeroSection() {
+  const [isPlaying, setIsPlaying] = useState(false);
+
   return (
     <div className="relative min-h-screen flex flex-col items-center justify-start">
       <AuroraBackground className="w-full flex-1">
@@ -52,13 +55,13 @@ export function HeroSection() {
             {/* Demo Section */}
             <div className="mt-20 w-full">
               {/* Ecosystem logos */}
-              <div className="grid grid-cols-2 sm:grid-cols-4 place-items-center gap-6 sm:gap-x-12 opacity-60 mb-12 px-4">
+              <div className="mx-auto max-w-2xl grid grid-cols-2 sm:grid-cols-4 place-items-center gap-6 sm:gap-x-12 opacity-60 mb-12 px-4">
                 <div className="flex items-center gap-2">
                   <img className="h-7" src="/logos/w3f.svg" alt="Web3 Foundation" />
-                  <span className="text-sm font-medium text-muted-foreground">Web3 Foundation</span>
+                  <span className="text-sm font-medium text-muted-foreground whitespace-nowrap">Web3 Foundation</span>
                 </div>
                 <div className="flex items-center gap-2">
-                  <img className="h-7" src="/logos/polkadot-circle.svg" alt="Polkadot" />
+                  <img className="h-7" src="/logos/polkadot.svg" alt="Polkadot" />
                   <span className="text-sm font-medium text-muted-foreground">Polkadot</span>
                 </div>
                 <div className="flex items-center gap-2">
@@ -71,14 +74,17 @@ export function HeroSection() {
                 </div>
               </div>
 
-              <div className="relative mx-auto max-w-5xl rounded-xl overflow-hidden shadow-xl">
-                <div className="relative pb-[56.25%]">
-                  <img
-                    src="/placeholder.svg?height=720&width=1280"
-                    alt="Relaycode Demo"
-                    className="absolute inset-0 w-full h-full object-cover"
-                  />
-                  <div className="absolute inset-0 flex items-center justify-center">
+              <div
+                className="relative mx-auto max-w-5xl rounded-xl overflow-hidden shadow-xl border border-border/50 cursor-pointer"
+                onClick={() => setIsPlaying(true)}
+              >
+                <img
+                  src={isPlaying ? "/relaycode-demo.gif" : "/relaycode-demo-poster.png"}
+                  alt="Relaycode Demo — bi-directional extrinsic builder"
+                  className="w-full h-auto"
+                />
+                {!isPlaying && (
+                  <div className="absolute inset-0 flex items-center justify-center bg-black/20 transition-opacity hover:bg-black/30">
                     <Button
                       size="lg"
                       variant="outline"
@@ -88,7 +94,7 @@ export function HeroSection() {
                       Watch Demo
                     </Button>
                   </div>
-                </div>
+                )}
               </div>
             </div>
           </motion.div>
diff --git a/components/sections/substrate-utilities.tsx b/components/sections/substrate-utilities.tsx
index 4c84209..6a143fd 100644
--- a/components/sections/substrate-utilities.tsx
+++ b/components/sections/substrate-utilities.tsx
@@ -242,7 +242,8 @@ export function SubstrateUtilitiesSection() {
               <ArrowRight className="ml-2 h-4 w-4" />
             </Button>
             <Link
-              href="https://github.com/itsyogesh/relaycode/issues"
+              href="https://github.com/itsyogesh/relaycode/issues/new?title=Tool+Suggestion:+&labels=enhancement"
+              target="_blank"
               className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors border-b border-dotted border-muted-foreground/50 hover:border-foreground pb-0.5"
             >
               <Plus className="h-4 w-4" />
diff --git a/components/sections/testimonials.tsx b/components/sections/testimonials.tsx
index d4b21a6..829794e 100644
--- a/components/sections/testimonials.tsx
+++ b/components/sections/testimonials.tsx
@@ -22,26 +22,10 @@ const testimonials = [
 ];
 
 const logos = [
-  {
-    src: "https://cdn.brandfetch.io/id6O2oGzv-/theme/dark/logo.svg?c=1dxbfHSJFAPEGdCLU4o5B",
-    alt: "Google",
-    className: "h-8",
-  },
-  {
-    src: "https://cdn.brandfetch.io/idwDWo4ONQ/theme/dark/logo.svg?c=1dxbfHSJFAPEGdCLU4o5B",
-    alt: "Coinbase",
-    className: "h-6",
-  },
-  {
-    src: "https://cdn.brandfetch.io/id-pjrLx_q/theme/dark/idKzmFfrAl.svg?c=1dxbfHSJFAPEGdCLU4o5B",
-    alt: "Binance",
-    className: "h-6",
-  },
-  {
-    src: "https://cdn.brandfetch.io/idchmboHEZ/theme/dark/logo.svg?c=1dxbfHSJFAPEGdCLU4o5B",
-    alt: "Microsoft",
-    className: "h-6",
-  },
+  { src: "/logos/w3f.svg", alt: "Web3 Foundation", label: "Web3 Foundation" },
+  { src: "/logos/polkadot.svg", alt: "Polkadot", label: "Polkadot" },
+  { src: "/logos/substrate.svg", alt: "Substrate", label: "Substrate" },
+  { src: "/logos/dedot.png", alt: "Dedot", label: "Dedot", rounded: true },
 ];
 
 export function TestimonialsSection() {
@@ -140,16 +124,14 @@ export function TestimonialsSection() {
             className="mt-24"
           >
             <p className="text-sm text-muted-foreground mb-6">
-              Used by teams at
+              Built for the Polkadot ecosystem
             </p>
-            <div className="flex justify-center gap-x-12 grayscale opacity-50">
+            <div className="mx-auto max-w-2xl grid grid-cols-2 sm:grid-cols-4 place-items-center gap-6 sm:gap-x-12 opacity-60 px-4">
               {logos.map((logo) => (
-                <img
-                  key={logo.alt}
-                  src={logo.src || "/placeholder.svg"}
-                  alt={logo.alt}
-                  className={logo.className}
-                />
+                <div key={logo.alt} className="flex items-center gap-2">
+                  <img className={cn("h-7", logo.rounded && "rounded")} src={logo.src} alt={logo.alt} />
+                  <span className="text-sm font-medium text-muted-foreground whitespace-nowrap">{logo.label}</span>
+                </div>
               ))}
             </div>
           </motion.div>
diff --git a/components/sections/why-developers.tsx b/components/sections/why-developers.tsx
index 5f5727d..7632a51 100644
--- a/components/sections/why-developers.tsx
+++ b/components/sections/why-developers.tsx
@@ -245,30 +245,26 @@ export function WhyDevelopers() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.8, delay: 0.6 }}
-          className="mt-16 text-center"
+          className="mt-24 text-center"
         >
-          <p className="text-sm text-muted-foreground mb-6">Used by teams at</p>
-          <div className="flex justify-center gap-x-12 grayscale opacity-50">
-            <img
-              className="h-8"
-              src="https://cdn.brandfetch.io/id6O2oGzv-/theme/dark/logo.svg?c=1dxbfHSJFAPEGdCLU4o5B"
-              alt="Google"
-            />
-            <img
-              className="h-6"
-              src="https://cdn.brandfetch.io/idwDWo4ONQ/theme/dark/logo.svg?c=1dxbfHSJFAPEGdCLU4o5B"
-              alt="Coinbase"
-            />
-            <img
-              className="h-6"
-              src="https://cdn.brandfetch.io/id-pjrLx_q/theme/dark/idKzmFfrAl.svg?c=1dxbfHSJFAPEGdCLU4o5B"
-              alt="Binance"
-            />
-            <img
-              className="h-6"
-              src="https://cdn.brandfetch.io/idchmboHEZ/theme/dark/logo.svg?c=1dxbfHSJFAPEGdCLU4o5B"
-              alt="Microsoft"
-            />
+          <p className="text-sm text-muted-foreground mb-6">Built for the Polkadot ecosystem</p>
+          <div className="mx-auto max-w-2xl grid grid-cols-2 sm:grid-cols-4 place-items-center gap-6 sm:gap-x-12 opacity-60 px-4">
+            <div className="flex items-center gap-2">
+              <img className="h-7" src="/logos/w3f.svg" alt="Web3 Foundation" />
+              <span className="text-sm font-medium text-muted-foreground whitespace-nowrap">Web3 Foundation</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <img className="h-7" src="/logos/polkadot.svg" alt="Polkadot" />
+              <span className="text-sm font-medium text-muted-foreground">Polkadot</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <img className="h-7" src="/logos/substrate.svg" alt="Substrate" />
+              <span className="text-sm font-medium text-muted-foreground">Substrate</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <img className="h-7 rounded" src="/logos/dedot.png" alt="Dedot" />
+              <span className="text-sm font-medium text-muted-foreground">Dedot</span>
+            </div>
           </div>
         </motion.div>
       </div>
diff --git a/components/ui/box.tsx b/components/ui/box.tsx
new file mode 100644
index 0000000..879d050
--- /dev/null
+++ b/components/ui/box.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface BoxIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BoxIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      duration: 0.3,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const BoxIcon = forwardRef<BoxIconHandle, BoxIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.path
+            animate={controls}
+            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"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="m3.3 7 8.7 5 8.7-5"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M12 22V12"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+BoxIcon.displayName = "BoxIcon";
+
+export { BoxIcon };
diff --git a/components/ui/hand-coins.tsx b/components/ui/hand-coins.tsx
new file mode 100644
index 0000000..88a82ff
--- /dev/null
+++ b/components/ui/hand-coins.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface HandCoinsIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HandCoinsIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CIRCLE_VARIANTS: Variants = {
+  normal: {
+    translateY: 0,
+    opacity: 1,
+    transition: {
+      opacity: { duration: 0.2 },
+      type: "spring",
+      stiffness: 150,
+      damping: 15,
+      bounce: 0.8,
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    translateY: [-20, 0],
+    transition: {
+      opacity: { duration: 0.2 },
+      type: "spring",
+      stiffness: 150,
+      damping: 15,
+      bounce: 0.8,
+    },
+  },
+};
+
+const SECOND_CIRCLE_VARIANTS: Variants = {
+  normal: {
+    translateY: 0,
+    opacity: 1,
+    transition: {
+      opacity: { duration: 0.2 },
+      delay: 0.15,
+      type: "spring",
+      stiffness: 150,
+      damping: 15,
+      bounce: 0.8,
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    translateY: [-20, 0],
+    transition: {
+      opacity: { duration: 0.2 },
+      delay: 0.15,
+      type: "spring",
+      stiffness: 150,
+      damping: 15,
+      bounce: 0.8,
+    },
+  },
+};
+
+const HandCoinsIcon = forwardRef<HandCoinsIconHandle, HandCoinsIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17" />
+          <path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9" />
+          <path d="m2 16 6 6" />
+          <motion.circle
+            animate={controls}
+            cx="16"
+            cy="9"
+            r="2.9"
+            variants={CIRCLE_VARIANTS}
+          />
+          <motion.circle
+            animate={controls}
+            cx="6"
+            cy="5"
+            r="3"
+            variants={SECOND_CIRCLE_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+HandCoinsIcon.displayName = "HandCoinsIcon";
+
+export { HandCoinsIcon };
diff --git a/components/ui/layers.tsx b/components/ui/layers.tsx
new file mode 100644
index 0000000..56ad1e1
--- /dev/null
+++ b/components/ui/layers.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import type { Transition } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface LayersIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface LayersIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 100,
+  damping: 14,
+  mass: 1,
+};
+
+const LayersIcon = forwardRef<LayersIconHandle, LayersIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: async () => {
+          await controls.start("firstState");
+          await controls.start("secondState");
+        },
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      async (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          await controls.start("firstState");
+          await controls.start("secondState");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" />
+          <motion.path
+            animate={controls}
+            d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { y: 0 },
+              firstState: { y: -9 },
+              secondState: { y: 0 },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { y: 0 },
+              firstState: { y: -5 },
+              secondState: { y: 0 },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+LayersIcon.displayName = "LayersIcon";
+
+export { LayersIcon };
diff --git a/components/ui/users.tsx b/components/ui/users.tsx
new file mode 100644
index 0000000..d194a6e
--- /dev/null
+++ b/components/ui/users.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface UsersIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface UsersIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    translateX: 0,
+    transition: {
+      type: "spring",
+      stiffness: 200,
+      damping: 13,
+    },
+  },
+  animate: {
+    translateX: [-6, 0],
+    transition: {
+      delay: 0.1,
+      type: "spring",
+      stiffness: 200,
+      damping: 13,
+    },
+  },
+};
+
+const UsersIcon = forwardRef<UsersIconHandle, UsersIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <motion.path
+            animate={controls}
+            d="M22 21v-2a4 4 0 0 0-3-3.87"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M16 3.13a4 4 0 0 1 0 7.75"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+UsersIcon.displayName = "UsersIcon";
+
+export { UsersIcon };
diff --git a/components/ui/workflow.tsx b/components/ui/workflow.tsx
new file mode 100644
index 0000000..0df18d7
--- /dev/null
+++ b/components/ui/workflow.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import type { Transition, Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface WorkflowIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface WorkflowIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const TRANSITION: Transition = {
+  duration: 0.3,
+  opacity: { delay: 0.15 },
+};
+
+const VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: (custom: number) => ({
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      ...TRANSITION,
+      delay: 0.1 * custom,
+    },
+  }),
+};
+
+const WorkflowIcon = forwardRef<WorkflowIconHandle, WorkflowIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.rect
+            animate={controls}
+            custom={0}
+            height="8"
+            rx="2"
+            variants={VARIANTS}
+            width="8"
+            x="3"
+            y="3"
+          />
+          <motion.path
+            animate={controls}
+            custom={3}
+            d="M7 11v4a2 2 0 0 0 2 2h4"
+            variants={VARIANTS}
+          />
+          <motion.rect
+            animate={controls}
+            custom={0}
+            height="8"
+            rx="2"
+            variants={VARIANTS}
+            width="8"
+            x="13"
+            y="13"
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+WorkflowIcon.displayName = "WorkflowIcon";
+
+export { WorkflowIcon };
diff --git a/components/ui/zap.tsx b/components/ui/zap.tsx
new file mode 100644
index 0000000..76c6b25
--- /dev/null
+++ b/components/ui/zap.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface ZapHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ZapProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      duration: 0.6,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      duration: 0.6,
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const ZapIcon = forwardRef<ZapHandle, ZapProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.path
+            animate={controls}
+            d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ZapIcon.displayName = "ZapIcon";
+
+export { ZapIcon };
diff --git a/package.json b/package.json
index ac22b80..a8561ae 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "geist": "^1.3.1",
     "input-otp": "1.4.1",
     "lucide-react": "^0.454.0",
+    "motion": "^12.34.3",
     "ms": "^2.1.3",
     "next": "15.5.11",
     "next-themes": "^0.4.4",
@@ -89,6 +90,7 @@
     "@types/node": "^22",
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
+    "agentation": "^2.2.1",
     "eslint": "^8",
     "eslint-config-next": "15.5.11",
     "jest": "^29.7.0",
diff --git a/public/logos/polkadot.svg b/public/logos/polkadot.svg
new file mode 100644
index 0000000..4f378f0
--- /dev/null
+++ b/public/logos/polkadot.svg
@@ -0,0 +1,8 @@
+<svg width="254" height="246" viewBox="0 0 254 246" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M127.287 52.152c24.104 0 43.643-11.509 43.643-25.706S151.391.74 127.287.74c-24.103 0-43.643 11.51-43.643 25.706 0 14.197 19.54 25.706 43.643 25.706Z" fill="currentColor"/>
+  <path d="M127.287 245.74c24.104 0 43.643-11.509 43.643-25.706s-19.539-25.706-43.643-25.706c-24.103 0-43.643 11.509-43.643 25.706s19.54 25.706 43.643 25.706Z" fill="currentColor"/>
+  <path d="M66.458 87.693c12.052-21.128 11.977-44.008-.167-51.105-12.144-7.097-31.76 4.278-43.81 25.406-12.053 21.128-11.978 44.009.167 51.105 12.144 7.097 31.759-4.278 43.81-25.406Z" fill="currentColor"/>
+  <path d="M232.112 184.487c12.052-21.128 11.974-44.01-.173-51.108-12.147-7.099-31.764 4.274-43.816 25.402-12.052 21.128-11.974 44.01.173 51.109 12.147 7.098 31.764-4.275 43.816-25.403Z" fill="currentColor"/>
+  <path d="M66.291 209.897c12.148-7.099 12.225-29.981.174-51.109-12.052-21.128-31.67-32.501-43.817-25.402-12.147 7.098-12.224 29.98-.173 51.108 12.052 21.128 31.67 32.501 43.816 25.403Z" fill="currentColor"/>
+  <path d="M231.935 113.094c12.147-7.098 12.225-29.98.173-51.108-12.052-21.128-31.669-32.501-43.816-25.403-12.147 7.099-12.225 29.98-.173 51.109 12.052 21.128 31.669 32.501 43.816 25.402Z" fill="currentColor"/>
+</svg>
diff --git a/public/relaycode-demo-poster.png b/public/relaycode-demo-poster.png
new file mode 100644
index 0000000..3b5b0e6
Binary files /dev/null and b/public/relaycode-demo-poster.png differ
diff --git a/public/relaycode-demo.gif b/public/relaycode-demo.gif
new file mode 100644
index 0000000..a3cfcf1
Binary files /dev/null and b/public/relaycode-demo.gif differ
diff --git a/yarn.lock b/yarn.lock
index 94b63c9..011eced 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3457,6 +3457,11 @@ agent-base@6:
   dependencies:
     debug "4"
 
+agentation@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/agentation/-/agentation-2.2.1.tgz#8a6f4bdb4dcae46cbbef49f563893f17446c9e57"
+  integrity sha512-yV9P1DggI7M3SRaRwLwt+xqE5lXqg5l8xtqCr8KzEkbnH8Wa6eRATU97uKnD7cC8FrsJP62Mmw0Xf5Xi5KV50Q==
+
 ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
@@ -5213,6 +5218,15 @@ framer-motion@^11.3.31:
     motion-utils "^11.18.1"
     tslib "^2.4.0"
 
+framer-motion@^12.34.3:
+  version "12.34.3"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-12.34.3.tgz#946f716bfef710d564bf721f4f364274f6278fd4"
+  integrity sha512-v81ecyZKYO/DfpTwHivqkxSUBzvceOpoI+wLfgCgoUIKxlFKEXdg0oR9imxwXumT4SFy8vRk9xzJ5l3/Du/55Q==
+  dependencies:
+    motion-dom "^12.34.3"
+    motion-utils "^12.29.2"
+    tslib "^2.4.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
@@ -7421,11 +7435,31 @@ motion-dom@^11.18.1:
   dependencies:
     motion-utils "^11.18.1"
 
+motion-dom@^12.34.3:
+  version "12.34.3"
+  resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-12.34.3.tgz#56224109a20bf2cb38277bfaedeeda5151ce369d"
+  integrity sha512-sYgFe+pR9aIM7o4fhs2aXtOI+oqlUd33N9Yoxcgo1Fv7M20sRkHtCmzE/VRNIcq7uNJ+qio+Xubt1FXH3pQ+eQ==
+  dependencies:
+    motion-utils "^12.29.2"
+
 motion-utils@^11.18.1:
   version "11.18.1"
   resolved "https://registry.npmjs.org/motion-utils/-/motion-utils-11.18.1.tgz"
   integrity sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==
 
+motion-utils@^12.29.2:
+  version "12.29.2"
+  resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-12.29.2.tgz#8fdd28babe042c2456b078ab33b32daa3bf5938b"
+  integrity sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==
+
+motion@^12.34.3:
+  version "12.34.3"
+  resolved "https://registry.yarnpkg.com/motion/-/motion-12.34.3.tgz#365a8ca9c0748e00ff3917b0f6b08a8aac90676c"
+  integrity sha512-xZIkBGO7v/Uvm+EyaqYd+9IpXu0sZqLywVlGdCFrrMiaO9JI4Kx51mO9KlHSWwll+gZUVY5OJsWgYI5FywJ/tw==
+  dependencies:
+    framer-motion "^12.34.3"
+    tslib "^2.4.0"
+
 ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"