From edba87cb2d22fe0ca451171f9d39bee0c9f14a4c Mon Sep 17 00:00:00 2001
From: Shaik Sameer <109991523+vij-sameerb5@users.noreply.github.com>
Date: Sun, 24 May 2026 23:59:21 +0530
Subject: [PATCH] feat: add clipped video tab component

---
 .../docs/components/clipped-video-tab.mdx     |  15 +
 apps/www/public/llms-full.txt                 | 445 +++++++++++++++++-
 apps/www/public/llms.txt                      |   2 +
 apps/www/public/r/clipped-video-tab-demo.json |  17 +
 apps/www/public/r/clipped-video-tab.json      |  17 +
 apps/www/public/r/registry.json               |  30 ++
 apps/www/public/r/tweet-card.json             |   2 +-
 apps/www/public/registry.json                 |  30 ++
 apps/www/registry.json                        |  30 ++
 apps/www/registry/__index__.tsx               |  34 ++
 .../example/clipped-video-tab-demo.tsx        |   5 +
 .../registry/magicui/clipped-video-tab.tsx    | 380 +++++++++++++++
 apps/www/registry/magicui/tweet-card.tsx      |  46 +-
 apps/www/registry/registry-examples.ts        |  13 +
 apps/www/registry/registry-ui.ts              |  14 +
 package.json                                  |   3 +
 pnpm-lock.yaml                                |  41 ++
 17 files changed, 1119 insertions(+), 5 deletions(-)
 create mode 100644 apps/www/content/docs/components/clipped-video-tab.mdx
 create mode 100644 apps/www/public/r/clipped-video-tab-demo.json
 create mode 100644 apps/www/public/r/clipped-video-tab.json
 create mode 100644 apps/www/registry/example/clipped-video-tab-demo.tsx
 create mode 100644 apps/www/registry/magicui/clipped-video-tab.tsx

diff --git a/apps/www/content/docs/components/clipped-video-tab.mdx b/apps/www/content/docs/components/clipped-video-tab.mdx
new file mode 100644
index 000000000..d77936eb7
--- /dev/null
+++ b/apps/www/content/docs/components/clipped-video-tab.mdx
@@ -0,0 +1,15 @@
+---
+title: Clipped Video Tab
+date: 2026-05-24
+description: Cinematic clipped video section
+author: sameer
+published: true
+---
+
+<ComponentPreview name="clipped-video-tab-demo" />
+
+## Installation
+
+```bash
+npx shadcn@latest add @magicui/clipped-video-tab
+```
diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt
index 6625eeef5..577ca6a7f 100644
--- a/apps/www/public/llms-full.txt
+++ b/apps/www/public/llms-full.txt
@@ -4740,6 +4740,405 @@ export default function TweetMetaPreview() {
 
 
 
+===== COMPONENT: clipped-video-tab =====
+Title: Clipped Video Tab
+Description: A full-width tabbed section with clipped video backgrounds and animated content cards.
+
+--- file: magicui/clipped-video-tab.tsx ---
+"use client"
+
+import { useState } from "react"
+import { AnimatePresence, motion } from "framer-motion"
+import {
+  Bot,
+  Brain,
+  BrainCircuit,
+  CheckCircle2,
+  Circle,
+  Cpu,
+  Database,
+  Globe,
+  LoaderCircle,
+  Lock,
+  Mic,
+  Zap,
+} from "lucide-react"
+
+const items = [
+  {
+    icon: Zap,
+    label: "2D/3D Annotation",
+    title: "Data Annotation",
+    description:
+      "Multimodal workflows for image, video, and 3D annotation with high-accuracy quality control.",
+
+    video:
+      "https://res.cloudinary.com/dy4bqxt8p/video/upload/v1779622196/new107_qhrklf.mp4",
+
+    card: {
+      heading: "Data Annotation",
+      badge: "Live",
+      goal: "Deploy multimodal AI data pipelines across multiple international regions.",
+
+      tasks: [
+        {
+          title: "Regional onboarding",
+          meta: "Completed in 4.2s",
+          status: "completed",
+        },
+        {
+          title: "Deploy collection teams",
+          meta: "Completed in 8.1s",
+          status: "completed",
+        },
+        {
+          title: "Scale infrastructure",
+          meta: "In progress... 18s",
+          status: "progress",
+        },
+        {
+          title: "Validate datasets",
+          meta: "Pending",
+          status: "pending",
+        },
+      ],
+    },
+  },
+
+  {
+    icon: Lock,
+    label: "Data Collection",
+    title: "Data Collection",
+    description:
+      "High-speed multimodal data collection pipelines to capture and structure real-world datasets.",
+
+    video:
+      "https://res.cloudinary.com/dy4bqxt8p/video/upload/v1779621768/new105_meaomd.mp4",
+
+    card: {
+      heading: "Data Collection",
+      badge: "Data-Ready",
+      goal: "Prepare large-scale datasets for training multimodal reasoning systems.",
+
+      tasks: [
+        {
+          title: "Process raw data",
+          meta: "Completed in 3.1s",
+          status: "completed",
+        },
+        {
+          title: "Generate annotations",
+          meta: "Completed in 5.4s",
+          status: "completed",
+        },
+        {
+          title: "Train reasoning model",
+          meta: "In progress... 24s",
+          status: "progress",
+        },
+        {
+          title: "Run evaluation tests",
+          meta: "Pending",
+          status: "pending",
+        },
+      ],
+    },
+  },
+
+  {
+    icon: Mic,
+    label: "Audio and Speech",
+    title: "Audio and Speech",
+    description:
+      "Automation-first AI systems with human validation and scalable workflows.",
+
+    video:
+      "https://res.cloudinary.com/dy4bqxt8p/video/upload/v1779622220/new108_k1a47m.mp4",
+
+    card: {
+      heading: "Audio Transcription",
+      badge: "Auto-generated",
+      goal: "Build a REST API endpoint for user authentication with JWT tokens.",
+
+      tasks: [
+        {
+          title: "Gather requirements",
+          meta: "Completed in 2.3s",
+          status: "completed",
+        },
+        {
+          title: "Research solutions",
+          meta: "Completed in 5.1s",
+          status: "completed",
+        },
+        {
+          title: "Implement solution",
+          meta: "In progress... 12s",
+          status: "progress",
+        },
+        {
+          title: "Test and validate",
+          meta: "Pending",
+          status: "pending",
+        },
+      ],
+    },
+  },
+
+  {
+    icon: Database,
+    label: "Explainable AI",
+    title: "Data Engine",
+    description:
+      "Transparent AI models with interpretable predictions and decision-making insights.",
+
+    video:
+      "https://res.cloudinary.com/dy4bqxt8p/video/upload/v1779622271/02_u2efg7.mp4",
+
+    card: {
+      heading: "Pipeline Engine",
+      badge: "Optimized",
+      goal: "Process and validate multimodal datasets for enterprise deployment.",
+
+      tasks: [
+        {
+          title: "Upload raw datasets",
+          meta: "Completed in 1.9s",
+          status: "completed",
+        },
+        {
+          title: "Run QA workflows",
+          meta: "Completed in 6.7s",
+          status: "completed",
+        },
+        {
+          title: "Generate metadata",
+          meta: "In progress... 16s",
+          status: "progress",
+        },
+        {
+          title: "Export training package",
+          meta: "Pending",
+          status: "pending",
+        },
+      ],
+    },
+  },
+]
+
+function TabMenu({
+  activeTab,
+  onSelect,
+  className,
+}: {
+  activeTab: number
+  onSelect: (index: number) => void
+  className?: string
+}) {
+  return (
+    <div
+      className={`w-full max-w-[280px] rounded-[28px] border border-[#e8e8e8] bg-white p-3 shadow-xl sm:max-w-[240px] ${className ?? ""}`}
+    >
+      <div className="flex flex-col gap-2">
+        {items.map((tab, index) => {
+          const Icon = tab.icon
+
+          return (
+            <button
+              key={tab.label}
+              type="button"
+              onClick={() => onSelect(index)}
+              className={`group flex items-center gap-3 rounded-xl border px-4 py-3 text-left transition-all duration-300 ${
+                activeTab === index
+                  ? "border-[#266347] bg-[#f4fbf7]"
+                  : "border-transparent hover:border-[#266347] hover:bg-[#f8fffb]"
+              }`}
+            >
+              <Icon
+                className={`h-5 w-5 shrink-0 transition-colors duration-300 ${
+                  activeTab === index
+                    ? "text-[#266347]"
+                    : "text-[#131313] group-hover:text-[#266347]"
+                }`}
+              />
+
+              <span
+                className={`text-sm font-medium transition-colors duration-300 ${
+                  activeTab === index
+                    ? "text-[#266347]"
+                    : "text-[#131313] group-hover:text-[#266347]"
+                }`}
+              >
+                {tab.label}
+              </span>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default function ClippedImageSection() {
+  const [activeTab, setActiveTab] = useState(0)
+
+  const activeItem = items[activeTab]
+
+  return (
+    <section className="relative min-h-screen w-full overflow-hidden bg-white">
+      <div className="mx-auto w-full max-w-[1600px] px-4 md:px-6">
+        {/* TOP */}
+        <div className="pt-12 pb-8 md:pt-20 md:pb-10">
+          <div className="grid items-start gap-8 md:grid-cols-2 md:gap-14">
+            {/* LEFT */}
+            <div>
+              <h2 className="max-w-[500px] text-4xl font-bold tracking-tight text-[#131313] md:text-6xl md:leading-[1.1]">
+                Our Platforms
+              </h2>
+            </div>
+
+            {/* RIGHT */}
+            <div>
+              <p className="max-w-lg text-base leading-relaxed text-[#666] md:text-lg md:leading-8">
+                Crafted for magicUI. A cinematic interface for modern digital
+                products — designed and developed by Sameer.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* TABS — in flow on mobile */}
+        <div className="relative z-20 mb-4 md:hidden">
+          <TabMenu activeTab={activeTab} onSelect={setActiveTab} />
+        </div>
+
+        {/* MEDIA AREA */}
+        <div className="relative w-full pb-8 md:pb-12">
+          {/* TABS — overlay on desktop */}
+          <div className="absolute bottom-4 left-4 z-20 hidden md:bottom-10 md:left-10 md:block">
+            <TabMenu activeTab={activeTab} onSelect={setActiveTab} />
+          </div>
+
+          {/* VIDEO CONTAINER */}
+          <div className="relative aspect-[16/9] min-h-[500px] w-full overflow-hidden md:[clip-path:polygon(0_0,92%_0,100%_12%,100%_100%,30%_100%,22%_88%,0_88%)]">
+            {/* VIDEO */}
+            <AnimatePresence mode="wait">
+              <motion.video
+                key={activeItem.video}
+                src={activeItem.video}
+                autoPlay
+                muted
+                loop
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.45 }}
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+            </AnimatePresence>
+
+            {/* OVERLAY */}
+            <div className="absolute inset-0 bg-black/10" />
+
+            {/* CENTER CARD */}
+            <div className="absolute inset-0 flex items-center justify-center px-4">
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={activeItem.card.heading}
+                  initial={{ opacity: 0, y: 14 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: 14 }}
+                  transition={{ duration: 0.35 }}
+                  className="w-full max-w-[320px] rounded-[26px] border border-white/30 bg-white/80 p-5 shadow-2xl backdrop-blur-xl"
+                >
+                  {/* HEADER */}
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-[18px] font-semibold text-[#131313]">
+                      {activeItem.card.heading}
+                    </h3>
+
+                    <span className="rounded-md bg-[#eef8f2] px-2 py-1 text-[11px] text-[#266347]">
+                      {activeItem.card.badge}
+                    </span>
+                  </div>
+
+                  {/* GOAL */}
+                  <div className="mt-4 rounded-xl border border-[#e7e7e7] p-3">
+                    <p className="text-[11px] text-[#777]">Goal</p>
+
+                    <p className="mt-1 text-[13px] leading-[20px] text-[#131313]">
+                      {activeItem.card.goal}
+                    </p>
+                  </div>
+
+                  {/* TASKS */}
+                  <div className="mt-4 flex flex-col gap-3">
+                    {activeItem.card.tasks.map((task, index) => (
+                      <div key={index} className="flex items-start gap-2">
+                        {/* ICON */}
+                        <div className="mt-[2px]">
+                          {task.status === "completed" && (
+                            <CheckCircle2 className="h-4 w-4 text-[#266347]" />
+                          )}
+
+                          {task.status === "progress" && (
+                            <LoaderCircle className="h-4 w-4 text-[#266347]" />
+                          )}
+
+                          {task.status === "pending" && (
+                            <Circle className="h-4 w-4 text-[#bdbdbd]" />
+                          )}
+                        </div>
+
+                        {/* CONTENT */}
+                        <div>
+                          <p
+                            className={`text-[13px] ${
+                              task.status === "completed"
+                                ? "text-[#666] line-through"
+                                : task.status === "progress"
+                                  ? "font-medium text-[#266347]"
+                                  : "text-[#999]"
+                            } `}
+                          >
+                            {task.title}
+                          </p>
+
+                          <p className="text-[11px] text-[#999]">{task.meta}</p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* FOOTER */}
+                  <div className="mt-5 flex items-center justify-between text-[11px] text-[#888]">
+                    <span>2/5 tasks complete</span>
+
+                    <span>Est. 45s remaining</span>
+                  </div>
+                </motion.div>
+              </AnimatePresence>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+
+===== EXAMPLE: clipped-video-tab-demo =====
+Title: Clipped Video Tab Demo
+
+--- file: example/clipped-video-tab-demo.tsx ---
+import Component from "@/registry/magicui/clipped-video-tab"
+
+export default function ClippedVideoTabDemo() {
+  return <Component />
+}
+
+
+
 ===== COMPONENT: code-comparison =====
 Title: Code Comparison
 Description: A component which compares two code snippets.
@@ -19088,7 +19487,12 @@ Description: A card that displays a tweet with the author's name, handle, and pr
 --- file: magicui/tweet-card.tsx ---
 import { Suspense } from "react"
 import { enrichTweet, type EnrichedTweet, type TweetProps } from "react-tweet"
-import { getTweet, type Tweet } from "react-tweet/api"
+import {
+  getTweet,
+  type QuotedTweet,
+  type Tweet,
+  type TweetEntities,
+} from "react-tweet/api"
 
 import { cn } from "@/lib/utils"
 
@@ -19317,6 +19721,43 @@ export const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => {
   )
 }
 
+const EMPTY_TWEET_ENTITIES: TweetEntities = {
+  hashtags: [],
+  urls: [],
+  user_mentions: [],
+  symbols: [],
+}
+
+/** Syndication API responses sometimes omit entity arrays; react-tweet expects iterables. */
+function normalizeTweetEntities<T extends Tweet | QuotedTweet>(tweet: T): T {
+  const entities: TweetEntities = {
+    ...EMPTY_TWEET_ENTITIES,
+    ...tweet.entities,
+    hashtags: tweet.entities?.hashtags ?? [],
+    urls: tweet.entities?.urls ?? [],
+    user_mentions: tweet.entities?.user_mentions ?? [],
+    symbols: tweet.entities?.symbols ?? [],
+    ...(tweet.entities?.media ? { media: tweet.entities.media } : {}),
+  }
+
+  const textLength = tweet.text?.length ?? 0
+
+  const normalized = {
+    ...tweet,
+    entities,
+    display_text_range: tweet.display_text_range ?? [0, textLength],
+  }
+
+  if ("quoted_tweet" in tweet && tweet.quoted_tweet) {
+    return {
+      ...normalized,
+      quoted_tweet: normalizeTweetEntities(tweet.quoted_tweet),
+    }
+  }
+
+  return normalized
+}
+
 export const MagicTweet = ({
   tweet,
   className,
@@ -19325,7 +19766,7 @@ export const MagicTweet = ({
   tweet: Tweet
   className?: string
 }) => {
-  const enrichedTweet = enrichTweet(tweet)
+  const enrichedTweet = enrichTweet(normalizeTweetEntities(tweet))
   return (
     <div
       className={cn(
diff --git a/apps/www/public/llms.txt b/apps/www/public/llms.txt
index 034ca66e5..11831a3cb 100644
--- a/apps/www/public/llms.txt
+++ b/apps/www/public/llms.txt
@@ -21,6 +21,7 @@ This file provides LLM-friendly entry points to documentation and examples.
 - [Blur Fade](https://magicui.design/docs/components/blur-fade): Blur fade in and out animation. Used to smoothly fade in and out content.
 - [Border Beam](https://magicui.design/docs/components/border-beam): An animated beam of light which travels along the border of its container.
 - [Client Tweet Card](https://magicui.design/docs/components/client-tweet-card): A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.
+- [Clipped Video Tab](https://magicui.design/docs/components/clipped-video-tab): A full-width tabbed section with clipped video backgrounds and animated content cards.
 - [Code Comparison](https://magicui.design/docs/components/code-comparison): A component which compares two code snippets.
 - [Comic Text](https://magicui.design/docs/components/comic-text): Comic text animation
 - [Confetti](https://magicui.design/docs/components/confetti): Confetti animations are best used to delight your users when something special happens
@@ -85,6 +86,7 @@ This file provides LLM-friendly entry points to documentation and examples.
 
 ## Examples
 
+- [Clipped Video Tab Demo](https://github.com/magicuidesign/magicui/blob/main/example/clipped-video-tab-demo.tsx): Example usage
 - [Magic Card Demo](https://github.com/magicuidesign/magicui/blob/main/example/magic-card-demo.tsx): Example usage
 - [Magic Card Demo 2](https://github.com/magicuidesign/magicui/blob/main/example/magic-card-demo2.tsx): Example usage
 - [Android Demo](https://github.com/magicuidesign/magicui/blob/main/example/android-demo.tsx): Example usage
diff --git a/apps/www/public/r/clipped-video-tab-demo.json b/apps/www/public/r/clipped-video-tab-demo.json
new file mode 100644
index 000000000..07e0625b2
--- /dev/null
+++ b/apps/www/public/r/clipped-video-tab-demo.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "clipped-video-tab-demo",
+  "type": "registry:example",
+  "title": "Clipped Video Tab Demo",
+  "description": "Clipped video tab demo",
+  "registryDependencies": [
+    "@magicui/clipped-video-tab"
+  ],
+  "files": [
+    {
+      "path": "registry/example/clipped-video-tab-demo.tsx",
+      "content": "import Component from \"@/registry/magicui/clipped-video-tab\"\n\nexport default function ClippedVideoTabDemo() {\n  return <Component />\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/clipped-video-tab.json b/apps/www/public/r/clipped-video-tab.json
new file mode 100644
index 000000000..09fd3b928
--- /dev/null
+++ b/apps/www/public/r/clipped-video-tab.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "clipped-video-tab",
+  "type": "registry:ui",
+  "title": "Clipped Video Tab",
+  "description": "A full-width tabbed section with clipped video backgrounds and animated content cards.",
+  "dependencies": [
+    "framer-motion"
+  ],
+  "files": [
+    {
+      "path": "registry/magicui/clipped-video-tab.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport {\n  Bot,\n  Brain,\n  BrainCircuit,\n  CheckCircle2,\n  Circle,\n  Cpu,\n  Database,\n  Globe,\n  LoaderCircle,\n  Lock,\n  Mic,\n  Zap,\n} from \"lucide-react\"\n\nconst items = [\n  {\n    icon: Zap,\n    label: \"2D/3D Annotation\",\n    title: \"Data Annotation\",\n    description:\n      \"Multimodal workflows for image, video, and 3D annotation with high-accuracy quality control.\",\n\n    video:\n      \"https://res.cloudinary.com/dy4bqxt8p/video/upload/v1779622196/new107_qhrklf.mp4\",\n\n    card: {\n      heading: \"Data Annotation\",\n      badge: \"Live\",\n      goal: \"Deploy multimodal AI data pipelines across multiple international regions.\",\n\n      tasks: [\n        {\n          title: \"Regional onboarding\",\n          meta: \"Completed in 4.2s\",\n          status: \"completed\",\n        },\n        {\n          title: \"Deploy collection teams\",\n          meta: \"Completed in 8.1s\",\n          status: \"completed\",\n        },\n        {\n          title: \"Scale infrastructure\",\n          meta: \"In progress... 18s\",\n          status: \"progress\",\n        },\n        {\n          title: \"Validate datasets\",\n          meta: \"Pending\",\n          status: \"pending\",\n        },\n      ],\n    },\n  },\n\n  {\n    icon: Lock,\n    label: \"Data Collection\",\n    title: \"Data Collection\",\n    description:\n      \"High-speed multimodal data collection pipelines to capture and structure real-world datasets.\",\n\n    video:\n      \"https://res.cloudinary.com/dy4bqxt8p/video/upload/v1779621768/new105_meaomd.mp4\",\n\n    card: {\n      heading: \"Data Collection\",\n      badge: \"Data-Ready\",\n      goal: \"Prepare large-scale datasets for training multimodal reasoning systems.\",\n\n      tasks: [\n        {\n          title: \"Process raw data\",\n          meta: \"Completed in 3.1s\",\n          status: \"completed\",\n        },\n        {\n          title: \"Generate annotations\",\n          meta: \"Completed in 5.4s\",\n          status: \"completed\",\n        },\n        {\n          title: \"Train reasoning model\",\n          meta: \"In progress... 24s\",\n          status: \"progress\",\n        },\n        {\n          title: \"Run evaluation tests\",\n          meta: \"Pending\",\n          status: \"pending\",\n        },\n      ],\n    },\n  },\n\n  {\n    icon: Mic,\n    label: \"Audio and Speech\",\n    title: \"Audio and Speech\",\n    description:\n      \"Automation-first AI systems with human validation and scalable workflows.\",\n\n    video:\n      \"https://res.cloudinary.com/dy4bqxt8p/video/upload/v1779622220/new108_k1a47m.mp4\",\n\n    card: {\n      heading: \"Audio Transcription\",\n      badge: \"Auto-generated\",\n      goal: \"Build a REST API endpoint for user authentication with JWT tokens.\",\n\n      tasks: [\n        {\n          title: \"Gather requirements\",\n          meta: \"Completed in 2.3s\",\n          status: \"completed\",\n        },\n        {\n          title: \"Research solutions\",\n          meta: \"Completed in 5.1s\",\n          status: \"completed\",\n        },\n        {\n          title: \"Implement solution\",\n          meta: \"In progress... 12s\",\n          status: \"progress\",\n        },\n        {\n          title: \"Test and validate\",\n          meta: \"Pending\",\n          status: \"pending\",\n        },\n      ],\n    },\n  },\n\n  {\n    icon: Database,\n    label: \"Explainable AI\",\n    title: \"Data Engine\",\n    description:\n      \"Transparent AI models with interpretable predictions and decision-making insights.\",\n\n    video:\n      \"https://res.cloudinary.com/dy4bqxt8p/video/upload/v1779622271/02_u2efg7.mp4\",\n\n    card: {\n      heading: \"Pipeline Engine\",\n      badge: \"Optimized\",\n      goal: \"Process and validate multimodal datasets for enterprise deployment.\",\n\n      tasks: [\n        {\n          title: \"Upload raw datasets\",\n          meta: \"Completed in 1.9s\",\n          status: \"completed\",\n        },\n        {\n          title: \"Run QA workflows\",\n          meta: \"Completed in 6.7s\",\n          status: \"completed\",\n        },\n        {\n          title: \"Generate metadata\",\n          meta: \"In progress... 16s\",\n          status: \"progress\",\n        },\n        {\n          title: \"Export training package\",\n          meta: \"Pending\",\n          status: \"pending\",\n        },\n      ],\n    },\n  },\n]\n\nfunction TabMenu({\n  activeTab,\n  onSelect,\n  className,\n}: {\n  activeTab: number\n  onSelect: (index: number) => void\n  className?: string\n}) {\n  return (\n    <div\n      className={`w-full max-w-[280px] rounded-[28px] border border-[#e8e8e8] bg-white p-3 shadow-xl sm:max-w-[240px] ${className ?? \"\"}`}\n    >\n      <div className=\"flex flex-col gap-2\">\n        {items.map((tab, index) => {\n          const Icon = tab.icon\n\n          return (\n            <button\n              key={tab.label}\n              type=\"button\"\n              onClick={() => onSelect(index)}\n              className={`group flex items-center gap-3 rounded-xl border px-4 py-3 text-left transition-all duration-300 ${\n                activeTab === index\n                  ? \"border-[#266347] bg-[#f4fbf7]\"\n                  : \"border-transparent hover:border-[#266347] hover:bg-[#f8fffb]\"\n              }`}\n            >\n              <Icon\n                className={`h-5 w-5 shrink-0 transition-colors duration-300 ${\n                  activeTab === index\n                    ? \"text-[#266347]\"\n                    : \"text-[#131313] group-hover:text-[#266347]\"\n                }`}\n              />\n\n              <span\n                className={`text-sm font-medium transition-colors duration-300 ${\n                  activeTab === index\n                    ? \"text-[#266347]\"\n                    : \"text-[#131313] group-hover:text-[#266347]\"\n                }`}\n              >\n                {tab.label}\n              </span>\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default function ClippedImageSection() {\n  const [activeTab, setActiveTab] = useState(0)\n\n  const activeItem = items[activeTab]\n\n  return (\n    <section className=\"relative min-h-screen w-full overflow-hidden bg-white\">\n      <div className=\"mx-auto w-full max-w-[1600px] px-4 md:px-6\">\n        {/* TOP */}\n        <div className=\"pt-12 pb-8 md:pt-20 md:pb-10\">\n          <div className=\"grid items-start gap-8 md:grid-cols-2 md:gap-14\">\n            {/* LEFT */}\n            <div>\n              <h2 className=\"max-w-[500px] text-4xl font-bold tracking-tight text-[#131313] md:text-6xl md:leading-[1.1]\">\n                Our Platforms\n              </h2>\n            </div>\n\n            {/* RIGHT */}\n            <div>\n              <p className=\"max-w-lg text-base leading-relaxed text-[#666] md:text-lg md:leading-8\">\n                Crafted for magicUI. A cinematic interface for modern digital\n                products — designed and developed by Sameer.\n              </p>\n            </div>\n          </div>\n        </div>\n\n        {/* TABS — in flow on mobile */}\n        <div className=\"relative z-20 mb-4 md:hidden\">\n          <TabMenu activeTab={activeTab} onSelect={setActiveTab} />\n        </div>\n\n        {/* MEDIA AREA */}\n        <div className=\"relative w-full pb-8 md:pb-12\">\n          {/* TABS — overlay on desktop */}\n          <div className=\"absolute bottom-4 left-4 z-20 hidden md:bottom-10 md:left-10 md:block\">\n            <TabMenu activeTab={activeTab} onSelect={setActiveTab} />\n          </div>\n\n          {/* VIDEO CONTAINER */}\n          <div className=\"relative aspect-[16/9] min-h-[500px] w-full overflow-hidden md:[clip-path:polygon(0_0,92%_0,100%_12%,100%_100%,30%_100%,22%_88%,0_88%)]\">\n            {/* VIDEO */}\n            <AnimatePresence mode=\"wait\">\n              <motion.video\n                key={activeItem.video}\n                src={activeItem.video}\n                autoPlay\n                muted\n                loop\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.45 }}\n                className=\"absolute inset-0 h-full w-full object-cover\"\n              />\n            </AnimatePresence>\n\n            {/* OVERLAY */}\n            <div className=\"absolute inset-0 bg-black/10\" />\n\n            {/* CENTER CARD */}\n            <div className=\"absolute inset-0 flex items-center justify-center px-4\">\n              <AnimatePresence mode=\"wait\">\n                <motion.div\n                  key={activeItem.card.heading}\n                  initial={{ opacity: 0, y: 14 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  exit={{ opacity: 0, y: 14 }}\n                  transition={{ duration: 0.35 }}\n                  className=\"w-full max-w-[320px] rounded-[26px] border border-white/30 bg-white/80 p-5 shadow-2xl backdrop-blur-xl\"\n                >\n                  {/* HEADER */}\n                  <div className=\"flex items-center justify-between\">\n                    <h3 className=\"text-[18px] font-semibold text-[#131313]\">\n                      {activeItem.card.heading}\n                    </h3>\n\n                    <span className=\"rounded-md bg-[#eef8f2] px-2 py-1 text-[11px] text-[#266347]\">\n                      {activeItem.card.badge}\n                    </span>\n                  </div>\n\n                  {/* GOAL */}\n                  <div className=\"mt-4 rounded-xl border border-[#e7e7e7] p-3\">\n                    <p className=\"text-[11px] text-[#777]\">Goal</p>\n\n                    <p className=\"mt-1 text-[13px] leading-[20px] text-[#131313]\">\n                      {activeItem.card.goal}\n                    </p>\n                  </div>\n\n                  {/* TASKS */}\n                  <div className=\"mt-4 flex flex-col gap-3\">\n                    {activeItem.card.tasks.map((task, index) => (\n                      <div key={index} className=\"flex items-start gap-2\">\n                        {/* ICON */}\n                        <div className=\"mt-[2px]\">\n                          {task.status === \"completed\" && (\n                            <CheckCircle2 className=\"h-4 w-4 text-[#266347]\" />\n                          )}\n\n                          {task.status === \"progress\" && (\n                            <LoaderCircle className=\"h-4 w-4 text-[#266347]\" />\n                          )}\n\n                          {task.status === \"pending\" && (\n                            <Circle className=\"h-4 w-4 text-[#bdbdbd]\" />\n                          )}\n                        </div>\n\n                        {/* CONTENT */}\n                        <div>\n                          <p\n                            className={`text-[13px] ${\n                              task.status === \"completed\"\n                                ? \"text-[#666] line-through\"\n                                : task.status === \"progress\"\n                                  ? \"font-medium text-[#266347]\"\n                                  : \"text-[#999]\"\n                            } `}\n                          >\n                            {task.title}\n                          </p>\n\n                          <p className=\"text-[11px] text-[#999]\">{task.meta}</p>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n\n                  {/* FOOTER */}\n                  <div className=\"mt-5 flex items-center justify-between text-[11px] text-[#888]\">\n                    <span>2/5 tasks complete</span>\n\n                    <span>Est. 45s remaining</span>\n                  </div>\n                </motion.div>\n              </AnimatePresence>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/registry.json b/apps/www/public/r/registry.json
index ce7754ff6..54c1bd03c 100644
--- a/apps/www/public/r/registry.json
+++ b/apps/www/public/r/registry.json
@@ -523,6 +523,21 @@
         }
       ]
     },
+    {
+      "name": "clipped-video-tab",
+      "type": "registry:ui",
+      "title": "Clipped Video Tab",
+      "description": "A full-width tabbed section with clipped video backgrounds and animated content cards.",
+      "dependencies": [
+        "framer-motion"
+      ],
+      "files": [
+        {
+          "path": "registry/magicui/clipped-video-tab.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "bento-grid",
       "type": "registry:ui",
@@ -1348,6 +1363,21 @@
         }
       ]
     },
+    {
+      "name": "clipped-video-tab-demo",
+      "type": "registry:example",
+      "title": "Clipped Video Tab Demo",
+      "description": "Clipped video tab demo",
+      "registryDependencies": [
+        "@magicui/clipped-video-tab"
+      ],
+      "files": [
+        {
+          "path": "registry/example/clipped-video-tab-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "magic-card-demo",
       "type": "registry:example",
diff --git a/apps/www/public/r/tweet-card.json b/apps/www/public/r/tweet-card.json
index d59c5c933..a3b1f98c2 100644
--- a/apps/www/public/r/tweet-card.json
+++ b/apps/www/public/r/tweet-card.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/magicui/tweet-card.tsx",
-      "content": "import { Suspense } from \"react\"\nimport { enrichTweet, type EnrichedTweet, type TweetProps } from \"react-tweet\"\nimport { getTweet, type Tweet } from \"react-tweet/api\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface TwitterIconProps {\n  className?: string\n  [key: string]: unknown\n}\nconst Twitter = ({ className, ...props }: TwitterIconProps) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n    {...props}\n  >\n    <g>\n      <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n      <path d=\"M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z\"></path>\n    </g>\n  </svg>\n)\n\nconst Verified = ({ className, ...props }: TwitterIconProps) => (\n  <svg\n    aria-label=\"Verified Account\"\n    viewBox=\"0 0 24 24\"\n    className={className}\n    {...props}\n  >\n    <g fill=\"currentColor\">\n      <path d=\"M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z\" />\n    </g>\n  </svg>\n)\n\nexport const truncate = (str: string | null, length: number) => {\n  if (!str || str.length <= length) return str\n  return `${str.slice(0, length - 3)}...`\n}\n\nconst Skeleton = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div className={cn(\"bg-primary/10 rounded-md\", className)} {...props} />\n  )\n}\n\nexport const TweetSkeleton = ({\n  className,\n  ...props\n}: {\n  className?: string\n  [key: string]: unknown\n}) => (\n  <div\n    className={cn(\n      \"flex size-full max-h-max min-w-72 flex-col gap-2 rounded-xl border p-4\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"flex flex-row gap-2\">\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <Skeleton className=\"h-10 w-full\" />\n    </div>\n    <Skeleton className=\"h-20 w-full\" />\n  </div>\n)\n\nexport const TweetNotFound = ({\n  className,\n  ...props\n}: {\n  className?: string\n  [key: string]: unknown\n}) => (\n  <div\n    className={cn(\n      \"flex size-full flex-col items-center justify-center gap-2 rounded-lg border p-4\",\n      className\n    )}\n    {...props}\n  >\n    <h3>Tweet not found</h3>\n  </div>\n)\n\nexport const TweetHeader = ({ tweet }: { tweet: EnrichedTweet }) => (\n  <div className=\"flex flex-row items-start justify-between tracking-normal\">\n    <div className=\"flex items-center space-x-3\">\n      <a\n        href={tweet.user.url}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        className=\"shrink-0\"\n      >\n        <img\n          title={`Profile picture of ${tweet.user.name}`}\n          alt={tweet.user.screen_name}\n          height={48}\n          width={48}\n          src={tweet.user.profile_image_url_https}\n          className=\"border-border/50 overflow-hidden rounded-full border\"\n        />\n      </a>\n      <div className=\"flex flex-col gap-0.5\">\n        <a\n          href={tweet.user.url}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          className=\"text-foreground flex items-center font-medium whitespace-nowrap transition-opacity hover:opacity-80\"\n        >\n          {truncate(tweet.user.name, 20)}\n          {tweet.user.verified ||\n            (tweet.user.is_blue_verified && (\n              <Verified className=\"ml-1 inline size-4 text-blue-500\" />\n            ))}\n        </a>\n        <div className=\"flex items-center space-x-1\">\n          <a\n            href={tweet.user.url}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            @{truncate(tweet.user.screen_name, 16)}\n          </a>\n        </div>\n      </div>\n    </div>\n    <a href={tweet.url} target=\"_blank\" rel=\"noreferrer\">\n      <span className=\"sr-only\">Link to tweet</span>\n      <Twitter className=\"text-muted-foreground hover:text-foreground size-5 items-start transition-all ease-in-out hover:scale-105\" />\n    </a>\n  </div>\n)\n\nexport const TweetBody = ({ tweet }: { tweet: EnrichedTweet }) => (\n  <div className=\"text-[15px] leading-relaxed tracking-normal wrap-break-word\">\n    {tweet.entities.map((entity, idx) => {\n      switch (entity.type) {\n        case \"url\":\n        case \"symbol\":\n        case \"hashtag\":\n        case \"mention\":\n          return (\n            <a\n              key={idx}\n              href={entity.href}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"text-muted-foreground hover:text-foreground text-[15px] font-normal transition-colors\"\n            >\n              <span>{entity.text}</span>\n            </a>\n          )\n        case \"text\":\n          return (\n            <span\n              key={idx}\n              className=\"text-foreground text-[15px] font-normal\"\n              dangerouslySetInnerHTML={{ __html: entity.text }}\n            />\n          )\n        default:\n          return null\n      }\n    })}\n  </div>\n)\n\nexport const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => {\n  if (!tweet.video && !tweet.photos) return null\n  return (\n    <div className=\"flex flex-1 items-center justify-center\">\n      {tweet.video && (\n        <video\n          poster={tweet.video.poster}\n          autoPlay\n          loop\n          muted\n          playsInline\n          className=\"rounded-xl border shadow-sm\"\n        >\n          <source src={tweet.video.variants[0].src} type=\"video/mp4\" />\n          Your browser does not support the video tag.\n        </video>\n      )}\n      {tweet.photos && (\n        <div className=\"relative flex transform-gpu snap-x snap-mandatory gap-4 overflow-x-auto\">\n          <div className=\"shrink-0 snap-center sm:w-2\" />\n          {tweet.photos.map((photo) => (\n            <img\n              key={photo.url}\n              src={photo.url}\n              width={photo.width}\n              height={photo.height}\n              title={\"Photo by \" + tweet.user.name}\n              alt={tweet.text}\n              className=\"h-64 w-5/6 shrink-0 snap-center snap-always rounded-xl border object-cover shadow-sm\"\n            />\n          ))}\n          <div className=\"shrink-0 snap-center sm:w-2\" />\n        </div>\n      )}\n      {!tweet.video &&\n        !tweet.photos &&\n        // @ts-expect-error package doesn't have type definitions\n        tweet?.card?.binding_values?.thumbnail_image_large?.image_value.url && (\n          <img\n            src={\n              // @ts-expect-error package doesn't have type definitions\n              tweet.card.binding_values.thumbnail_image_large.image_value.url\n            }\n            className=\"h-64 rounded-xl border object-cover shadow-sm\"\n            alt={tweet.text}\n          />\n        )}\n    </div>\n  )\n}\n\nexport const MagicTweet = ({\n  tweet,\n  className,\n  ...props\n}: {\n  tweet: Tweet\n  className?: string\n}) => {\n  const enrichedTweet = enrichTweet(tweet)\n  return (\n    <div\n      className={cn(\n        \"relative flex h-fit w-full max-w-lg flex-col gap-4 overflow-hidden rounded-xl border p-5\",\n        className\n      )}\n      {...props}\n    >\n      <TweetHeader tweet={enrichedTweet} />\n      <TweetBody tweet={enrichedTweet} />\n      <TweetMedia tweet={enrichedTweet} />\n    </div>\n  )\n}\n\n/**\n * TweetCard (Server Side Only)\n */\nexport const TweetCard = async ({\n  id,\n  components,\n  fallback = <TweetSkeleton />,\n  onError,\n  ...props\n}: TweetProps & {\n  className?: string\n}) => {\n  const tweet = id\n    ? await getTweet(id).catch((err) => {\n        if (onError) {\n          onError(err)\n        } else {\n          console.error(err)\n        }\n      })\n    : undefined\n\n  if (!tweet) {\n    const NotFound = components?.TweetNotFound ?? TweetNotFound\n    return <NotFound {...props} />\n  }\n\n  return (\n    <Suspense fallback={fallback}>\n      <MagicTweet tweet={tweet} {...props} />\n    </Suspense>\n  )\n}\n",
+      "content": "import { Suspense } from \"react\"\nimport { enrichTweet, type EnrichedTweet, type TweetProps } from \"react-tweet\"\nimport {\n  getTweet,\n  type QuotedTweet,\n  type Tweet,\n  type TweetEntities,\n} from \"react-tweet/api\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface TwitterIconProps {\n  className?: string\n  [key: string]: unknown\n}\nconst Twitter = ({ className, ...props }: TwitterIconProps) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n    {...props}\n  >\n    <g>\n      <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n      <path d=\"M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z\"></path>\n    </g>\n  </svg>\n)\n\nconst Verified = ({ className, ...props }: TwitterIconProps) => (\n  <svg\n    aria-label=\"Verified Account\"\n    viewBox=\"0 0 24 24\"\n    className={className}\n    {...props}\n  >\n    <g fill=\"currentColor\">\n      <path d=\"M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z\" />\n    </g>\n  </svg>\n)\n\nexport const truncate = (str: string | null, length: number) => {\n  if (!str || str.length <= length) return str\n  return `${str.slice(0, length - 3)}...`\n}\n\nconst Skeleton = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div className={cn(\"bg-primary/10 rounded-md\", className)} {...props} />\n  )\n}\n\nexport const TweetSkeleton = ({\n  className,\n  ...props\n}: {\n  className?: string\n  [key: string]: unknown\n}) => (\n  <div\n    className={cn(\n      \"flex size-full max-h-max min-w-72 flex-col gap-2 rounded-xl border p-4\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"flex flex-row gap-2\">\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <Skeleton className=\"h-10 w-full\" />\n    </div>\n    <Skeleton className=\"h-20 w-full\" />\n  </div>\n)\n\nexport const TweetNotFound = ({\n  className,\n  ...props\n}: {\n  className?: string\n  [key: string]: unknown\n}) => (\n  <div\n    className={cn(\n      \"flex size-full flex-col items-center justify-center gap-2 rounded-lg border p-4\",\n      className\n    )}\n    {...props}\n  >\n    <h3>Tweet not found</h3>\n  </div>\n)\n\nexport const TweetHeader = ({ tweet }: { tweet: EnrichedTweet }) => (\n  <div className=\"flex flex-row items-start justify-between tracking-normal\">\n    <div className=\"flex items-center space-x-3\">\n      <a\n        href={tweet.user.url}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        className=\"shrink-0\"\n      >\n        <img\n          title={`Profile picture of ${tweet.user.name}`}\n          alt={tweet.user.screen_name}\n          height={48}\n          width={48}\n          src={tweet.user.profile_image_url_https}\n          className=\"border-border/50 overflow-hidden rounded-full border\"\n        />\n      </a>\n      <div className=\"flex flex-col gap-0.5\">\n        <a\n          href={tweet.user.url}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          className=\"text-foreground flex items-center font-medium whitespace-nowrap transition-opacity hover:opacity-80\"\n        >\n          {truncate(tweet.user.name, 20)}\n          {tweet.user.verified ||\n            (tweet.user.is_blue_verified && (\n              <Verified className=\"ml-1 inline size-4 text-blue-500\" />\n            ))}\n        </a>\n        <div className=\"flex items-center space-x-1\">\n          <a\n            href={tweet.user.url}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            @{truncate(tweet.user.screen_name, 16)}\n          </a>\n        </div>\n      </div>\n    </div>\n    <a href={tweet.url} target=\"_blank\" rel=\"noreferrer\">\n      <span className=\"sr-only\">Link to tweet</span>\n      <Twitter className=\"text-muted-foreground hover:text-foreground size-5 items-start transition-all ease-in-out hover:scale-105\" />\n    </a>\n  </div>\n)\n\nexport const TweetBody = ({ tweet }: { tweet: EnrichedTweet }) => (\n  <div className=\"text-[15px] leading-relaxed tracking-normal wrap-break-word\">\n    {tweet.entities.map((entity, idx) => {\n      switch (entity.type) {\n        case \"url\":\n        case \"symbol\":\n        case \"hashtag\":\n        case \"mention\":\n          return (\n            <a\n              key={idx}\n              href={entity.href}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"text-muted-foreground hover:text-foreground text-[15px] font-normal transition-colors\"\n            >\n              <span>{entity.text}</span>\n            </a>\n          )\n        case \"text\":\n          return (\n            <span\n              key={idx}\n              className=\"text-foreground text-[15px] font-normal\"\n              dangerouslySetInnerHTML={{ __html: entity.text }}\n            />\n          )\n        default:\n          return null\n      }\n    })}\n  </div>\n)\n\nexport const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => {\n  if (!tweet.video && !tweet.photos) return null\n  return (\n    <div className=\"flex flex-1 items-center justify-center\">\n      {tweet.video && (\n        <video\n          poster={tweet.video.poster}\n          autoPlay\n          loop\n          muted\n          playsInline\n          className=\"rounded-xl border shadow-sm\"\n        >\n          <source src={tweet.video.variants[0].src} type=\"video/mp4\" />\n          Your browser does not support the video tag.\n        </video>\n      )}\n      {tweet.photos && (\n        <div className=\"relative flex transform-gpu snap-x snap-mandatory gap-4 overflow-x-auto\">\n          <div className=\"shrink-0 snap-center sm:w-2\" />\n          {tweet.photos.map((photo) => (\n            <img\n              key={photo.url}\n              src={photo.url}\n              width={photo.width}\n              height={photo.height}\n              title={\"Photo by \" + tweet.user.name}\n              alt={tweet.text}\n              className=\"h-64 w-5/6 shrink-0 snap-center snap-always rounded-xl border object-cover shadow-sm\"\n            />\n          ))}\n          <div className=\"shrink-0 snap-center sm:w-2\" />\n        </div>\n      )}\n      {!tweet.video &&\n        !tweet.photos &&\n        // @ts-expect-error package doesn't have type definitions\n        tweet?.card?.binding_values?.thumbnail_image_large?.image_value.url && (\n          <img\n            src={\n              // @ts-expect-error package doesn't have type definitions\n              tweet.card.binding_values.thumbnail_image_large.image_value.url\n            }\n            className=\"h-64 rounded-xl border object-cover shadow-sm\"\n            alt={tweet.text}\n          />\n        )}\n    </div>\n  )\n}\n\nconst EMPTY_TWEET_ENTITIES: TweetEntities = {\n  hashtags: [],\n  urls: [],\n  user_mentions: [],\n  symbols: [],\n}\n\n/** Syndication API responses sometimes omit entity arrays; react-tweet expects iterables. */\nfunction normalizeTweetEntities<T extends Tweet | QuotedTweet>(tweet: T): T {\n  const entities: TweetEntities = {\n    ...EMPTY_TWEET_ENTITIES,\n    ...tweet.entities,\n    hashtags: tweet.entities?.hashtags ?? [],\n    urls: tweet.entities?.urls ?? [],\n    user_mentions: tweet.entities?.user_mentions ?? [],\n    symbols: tweet.entities?.symbols ?? [],\n    ...(tweet.entities?.media ? { media: tweet.entities.media } : {}),\n  }\n\n  const textLength = tweet.text?.length ?? 0\n\n  const normalized = {\n    ...tweet,\n    entities,\n    display_text_range: tweet.display_text_range ?? [0, textLength],\n  }\n\n  if (\"quoted_tweet\" in tweet && tweet.quoted_tweet) {\n    return {\n      ...normalized,\n      quoted_tweet: normalizeTweetEntities(tweet.quoted_tweet),\n    }\n  }\n\n  return normalized\n}\n\nexport const MagicTweet = ({\n  tweet,\n  className,\n  ...props\n}: {\n  tweet: Tweet\n  className?: string\n}) => {\n  const enrichedTweet = enrichTweet(normalizeTweetEntities(tweet))\n  return (\n    <div\n      className={cn(\n        \"relative flex h-fit w-full max-w-lg flex-col gap-4 overflow-hidden rounded-xl border p-5\",\n        className\n      )}\n      {...props}\n    >\n      <TweetHeader tweet={enrichedTweet} />\n      <TweetBody tweet={enrichedTweet} />\n      <TweetMedia tweet={enrichedTweet} />\n    </div>\n  )\n}\n\n/**\n * TweetCard (Server Side Only)\n */\nexport const TweetCard = async ({\n  id,\n  components,\n  fallback = <TweetSkeleton />,\n  onError,\n  ...props\n}: TweetProps & {\n  className?: string\n}) => {\n  const tweet = id\n    ? await getTweet(id).catch((err) => {\n        if (onError) {\n          onError(err)\n        } else {\n          console.error(err)\n        }\n      })\n    : undefined\n\n  if (!tweet) {\n    const NotFound = components?.TweetNotFound ?? TweetNotFound\n    return <NotFound {...props} />\n  }\n\n  return (\n    <Suspense fallback={fallback}>\n      <MagicTweet tweet={tweet} {...props} />\n    </Suspense>\n  )\n}\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/registry.json b/apps/www/public/registry.json
index ce7754ff6..54c1bd03c 100644
--- a/apps/www/public/registry.json
+++ b/apps/www/public/registry.json
@@ -523,6 +523,21 @@
         }
       ]
     },
+    {
+      "name": "clipped-video-tab",
+      "type": "registry:ui",
+      "title": "Clipped Video Tab",
+      "description": "A full-width tabbed section with clipped video backgrounds and animated content cards.",
+      "dependencies": [
+        "framer-motion"
+      ],
+      "files": [
+        {
+          "path": "registry/magicui/clipped-video-tab.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "bento-grid",
       "type": "registry:ui",
@@ -1348,6 +1363,21 @@
         }
       ]
     },
+    {
+      "name": "clipped-video-tab-demo",
+      "type": "registry:example",
+      "title": "Clipped Video Tab Demo",
+      "description": "Clipped video tab demo",
+      "registryDependencies": [
+        "@magicui/clipped-video-tab"
+      ],
+      "files": [
+        {
+          "path": "registry/example/clipped-video-tab-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "magic-card-demo",
       "type": "registry:example",
diff --git a/apps/www/registry.json b/apps/www/registry.json
index ce7754ff6..54c1bd03c 100644
--- a/apps/www/registry.json
+++ b/apps/www/registry.json
@@ -523,6 +523,21 @@
         }
       ]
     },
+    {
+      "name": "clipped-video-tab",
+      "type": "registry:ui",
+      "title": "Clipped Video Tab",
+      "description": "A full-width tabbed section with clipped video backgrounds and animated content cards.",
+      "dependencies": [
+        "framer-motion"
+      ],
+      "files": [
+        {
+          "path": "registry/magicui/clipped-video-tab.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "bento-grid",
       "type": "registry:ui",
@@ -1348,6 +1363,21 @@
         }
       ]
     },
+    {
+      "name": "clipped-video-tab-demo",
+      "type": "registry:example",
+      "title": "Clipped Video Tab Demo",
+      "description": "Clipped video tab demo",
+      "registryDependencies": [
+        "@magicui/clipped-video-tab"
+      ],
+      "files": [
+        {
+          "path": "registry/example/clipped-video-tab-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "magic-card-demo",
       "type": "registry:example",
diff --git a/apps/www/registry/__index__.tsx b/apps/www/registry/__index__.tsx
index c660e626b..9d9e8ad73 100644
--- a/apps/www/registry/__index__.tsx
+++ b/apps/www/registry/__index__.tsx
@@ -491,6 +491,23 @@ export const Index: Record<string, any> = {
     }),
     meta: undefined,
   },
+  "clipped-video-tab": {
+    name: "clipped-video-tab",
+    description: "A full-width tabbed section with clipped video backgrounds and animated content cards.",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/magicui/clipped-video-tab.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/magicui/clipped-video-tab.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') ?? item.name
+      return { default: mod.default ?? mod[exportName] }
+    }),
+    meta: undefined,
+  },
   "bento-grid": {
     name: "bento-grid",
     description: "Bento grid is a layout used to showcase the features of a product in a simple and elegant way.",
@@ -1307,6 +1324,23 @@ export const Index: Record<string, any> = {
     }),
     meta: undefined,
   },
+  "clipped-video-tab-demo": {
+    name: "clipped-video-tab-demo",
+    description: "Clipped video tab demo",
+    type: "registry:example",
+    registryDependencies: ["@magicui/clipped-video-tab"],
+    files: [{
+      path: "registry/example/clipped-video-tab-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/example/clipped-video-tab-demo.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') ?? item.name
+      return { default: mod.default ?? mod[exportName] }
+    }),
+    meta: undefined,
+  },
   "magic-card-demo": {
     name: "magic-card-demo",
     description: "Example showing a spotlight effect that follows your mouse cursor and highlights borders on hover.",
diff --git a/apps/www/registry/example/clipped-video-tab-demo.tsx b/apps/www/registry/example/clipped-video-tab-demo.tsx
new file mode 100644
index 000000000..32364deeb
--- /dev/null
+++ b/apps/www/registry/example/clipped-video-tab-demo.tsx
@@ -0,0 +1,5 @@
+import Component from "@/registry/magicui/clipped-video-tab"
+
+export default function ClippedVideoTabDemo() {
+  return <Component />
+}
diff --git a/apps/www/registry/magicui/clipped-video-tab.tsx b/apps/www/registry/magicui/clipped-video-tab.tsx
new file mode 100644
index 000000000..47f0d5c2e
--- /dev/null
+++ b/apps/www/registry/magicui/clipped-video-tab.tsx
@@ -0,0 +1,380 @@
+"use client"
+
+import { useState } from "react"
+import { AnimatePresence, motion } from "framer-motion"
+import {
+  Bot,
+  Brain,
+  BrainCircuit,
+  CheckCircle2,
+  Circle,
+  Cpu,
+  Database,
+  Globe,
+  LoaderCircle,
+  Lock,
+  Mic,
+  Zap,
+} from "lucide-react"
+
+const items = [
+  {
+    icon: Zap,
+    label: "2D/3D Annotation",
+    title: "Data Annotation",
+    description:
+      "Multimodal workflows for image, video, and 3D annotation with high-accuracy quality control.",
+
+    video:
+      "https://res.cloudinary.com/dy4bqxt8p/video/upload/v1779622196/new107_qhrklf.mp4",
+
+    card: {
+      heading: "Data Annotation",
+      badge: "Live",
+      goal: "Deploy multimodal AI data pipelines across multiple international regions.",
+
+      tasks: [
+        {
+          title: "Regional onboarding",
+          meta: "Completed in 4.2s",
+          status: "completed",
+        },
+        {
+          title: "Deploy collection teams",
+          meta: "Completed in 8.1s",
+          status: "completed",
+        },
+        {
+          title: "Scale infrastructure",
+          meta: "In progress... 18s",
+          status: "progress",
+        },
+        {
+          title: "Validate datasets",
+          meta: "Pending",
+          status: "pending",
+        },
+      ],
+    },
+  },
+
+  {
+    icon: Lock,
+    label: "Data Collection",
+    title: "Data Collection",
+    description:
+      "High-speed multimodal data collection pipelines to capture and structure real-world datasets.",
+
+    video:
+      "https://res.cloudinary.com/dy4bqxt8p/video/upload/v1779621768/new105_meaomd.mp4",
+
+    card: {
+      heading: "Data Collection",
+      badge: "Data-Ready",
+      goal: "Prepare large-scale datasets for training multimodal reasoning systems.",
+
+      tasks: [
+        {
+          title: "Process raw data",
+          meta: "Completed in 3.1s",
+          status: "completed",
+        },
+        {
+          title: "Generate annotations",
+          meta: "Completed in 5.4s",
+          status: "completed",
+        },
+        {
+          title: "Train reasoning model",
+          meta: "In progress... 24s",
+          status: "progress",
+        },
+        {
+          title: "Run evaluation tests",
+          meta: "Pending",
+          status: "pending",
+        },
+      ],
+    },
+  },
+
+  {
+    icon: Mic,
+    label: "Audio and Speech",
+    title: "Audio and Speech",
+    description:
+      "Automation-first AI systems with human validation and scalable workflows.",
+
+    video:
+      "https://res.cloudinary.com/dy4bqxt8p/video/upload/v1779622220/new108_k1a47m.mp4",
+
+    card: {
+      heading: "Audio Transcription",
+      badge: "Auto-generated",
+      goal: "Build a REST API endpoint for user authentication with JWT tokens.",
+
+      tasks: [
+        {
+          title: "Gather requirements",
+          meta: "Completed in 2.3s",
+          status: "completed",
+        },
+        {
+          title: "Research solutions",
+          meta: "Completed in 5.1s",
+          status: "completed",
+        },
+        {
+          title: "Implement solution",
+          meta: "In progress... 12s",
+          status: "progress",
+        },
+        {
+          title: "Test and validate",
+          meta: "Pending",
+          status: "pending",
+        },
+      ],
+    },
+  },
+
+  {
+    icon: Database,
+    label: "Explainable AI",
+    title: "Data Engine",
+    description:
+      "Transparent AI models with interpretable predictions and decision-making insights.",
+
+    video:
+      "https://res.cloudinary.com/dy4bqxt8p/video/upload/v1779622271/02_u2efg7.mp4",
+
+    card: {
+      heading: "Pipeline Engine",
+      badge: "Optimized",
+      goal: "Process and validate multimodal datasets for enterprise deployment.",
+
+      tasks: [
+        {
+          title: "Upload raw datasets",
+          meta: "Completed in 1.9s",
+          status: "completed",
+        },
+        {
+          title: "Run QA workflows",
+          meta: "Completed in 6.7s",
+          status: "completed",
+        },
+        {
+          title: "Generate metadata",
+          meta: "In progress... 16s",
+          status: "progress",
+        },
+        {
+          title: "Export training package",
+          meta: "Pending",
+          status: "pending",
+        },
+      ],
+    },
+  },
+]
+
+function TabMenu({
+  activeTab,
+  onSelect,
+  className,
+}: {
+  activeTab: number
+  onSelect: (index: number) => void
+  className?: string
+}) {
+  return (
+    <div
+      className={`w-full max-w-[280px] rounded-[28px] border border-[#e8e8e8] bg-white p-3 shadow-xl sm:max-w-[240px] ${className ?? ""}`}
+    >
+      <div className="flex flex-col gap-2">
+        {items.map((tab, index) => {
+          const Icon = tab.icon
+
+          return (
+            <button
+              key={tab.label}
+              type="button"
+              onClick={() => onSelect(index)}
+              className={`group flex items-center gap-3 rounded-xl border px-4 py-3 text-left transition-all duration-300 ${
+                activeTab === index
+                  ? "border-[#266347] bg-[#f4fbf7]"
+                  : "border-transparent hover:border-[#266347] hover:bg-[#f8fffb]"
+              }`}
+            >
+              <Icon
+                className={`h-5 w-5 shrink-0 transition-colors duration-300 ${
+                  activeTab === index
+                    ? "text-[#266347]"
+                    : "text-[#131313] group-hover:text-[#266347]"
+                }`}
+              />
+
+              <span
+                className={`text-sm font-medium transition-colors duration-300 ${
+                  activeTab === index
+                    ? "text-[#266347]"
+                    : "text-[#131313] group-hover:text-[#266347]"
+                }`}
+              >
+                {tab.label}
+              </span>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default function ClippedImageSection() {
+  const [activeTab, setActiveTab] = useState(0)
+
+  const activeItem = items[activeTab]
+
+  return (
+    <section className="relative min-h-screen w-full overflow-hidden bg-white">
+      <div className="mx-auto w-full max-w-[1600px] px-4 md:px-6">
+        {/* TOP */}
+        <div className="pt-12 pb-8 md:pt-20 md:pb-10">
+          <div className="grid items-start gap-8 md:grid-cols-2 md:gap-14">
+            {/* LEFT */}
+            <div>
+              <h2 className="max-w-[500px] text-4xl font-bold tracking-tight text-[#131313] md:text-6xl md:leading-[1.1]">
+                Our Platforms
+              </h2>
+            </div>
+
+            {/* RIGHT */}
+            <div>
+              <p className="max-w-lg text-base leading-relaxed text-[#666] md:text-lg md:leading-8">
+                Crafted for magicUI. A cinematic interface for modern digital
+                products — designed and developed by Sameer.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* TABS — in flow on mobile */}
+        <div className="relative z-20 mb-4 md:hidden">
+          <TabMenu activeTab={activeTab} onSelect={setActiveTab} />
+        </div>
+
+        {/* MEDIA AREA */}
+        <div className="relative w-full pb-8 md:pb-12">
+          {/* TABS — overlay on desktop */}
+          <div className="absolute bottom-4 left-4 z-20 hidden md:bottom-10 md:left-10 md:block">
+            <TabMenu activeTab={activeTab} onSelect={setActiveTab} />
+          </div>
+
+          {/* VIDEO CONTAINER */}
+          <div className="relative aspect-[16/9] min-h-[500px] w-full overflow-hidden md:[clip-path:polygon(0_0,92%_0,100%_12%,100%_100%,30%_100%,22%_88%,0_88%)]">
+            {/* VIDEO */}
+            <AnimatePresence mode="wait">
+              <motion.video
+                key={activeItem.video}
+                src={activeItem.video}
+                autoPlay
+                muted
+                loop
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.45 }}
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+            </AnimatePresence>
+
+            {/* OVERLAY */}
+            <div className="absolute inset-0 bg-black/10" />
+
+            {/* CENTER CARD */}
+            <div className="absolute inset-0 flex items-center justify-center px-4">
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={activeItem.card.heading}
+                  initial={{ opacity: 0, y: 14 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: 14 }}
+                  transition={{ duration: 0.35 }}
+                  className="w-full max-w-[320px] rounded-[26px] border border-white/30 bg-white/80 p-5 shadow-2xl backdrop-blur-xl"
+                >
+                  {/* HEADER */}
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-[18px] font-semibold text-[#131313]">
+                      {activeItem.card.heading}
+                    </h3>
+
+                    <span className="rounded-md bg-[#eef8f2] px-2 py-1 text-[11px] text-[#266347]">
+                      {activeItem.card.badge}
+                    </span>
+                  </div>
+
+                  {/* GOAL */}
+                  <div className="mt-4 rounded-xl border border-[#e7e7e7] p-3">
+                    <p className="text-[11px] text-[#777]">Goal</p>
+
+                    <p className="mt-1 text-[13px] leading-[20px] text-[#131313]">
+                      {activeItem.card.goal}
+                    </p>
+                  </div>
+
+                  {/* TASKS */}
+                  <div className="mt-4 flex flex-col gap-3">
+                    {activeItem.card.tasks.map((task, index) => (
+                      <div key={index} className="flex items-start gap-2">
+                        {/* ICON */}
+                        <div className="mt-[2px]">
+                          {task.status === "completed" && (
+                            <CheckCircle2 className="h-4 w-4 text-[#266347]" />
+                          )}
+
+                          {task.status === "progress" && (
+                            <LoaderCircle className="h-4 w-4 text-[#266347]" />
+                          )}
+
+                          {task.status === "pending" && (
+                            <Circle className="h-4 w-4 text-[#bdbdbd]" />
+                          )}
+                        </div>
+
+                        {/* CONTENT */}
+                        <div>
+                          <p
+                            className={`text-[13px] ${
+                              task.status === "completed"
+                                ? "text-[#666] line-through"
+                                : task.status === "progress"
+                                  ? "font-medium text-[#266347]"
+                                  : "text-[#999]"
+                            } `}
+                          >
+                            {task.title}
+                          </p>
+
+                          <p className="text-[11px] text-[#999]">{task.meta}</p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* FOOTER */}
+                  <div className="mt-5 flex items-center justify-between text-[11px] text-[#888]">
+                    <span>2/5 tasks complete</span>
+
+                    <span>Est. 45s remaining</span>
+                  </div>
+                </motion.div>
+              </AnimatePresence>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/www/registry/magicui/tweet-card.tsx b/apps/www/registry/magicui/tweet-card.tsx
index 899c5855a..c4c40cd51 100644
--- a/apps/www/registry/magicui/tweet-card.tsx
+++ b/apps/www/registry/magicui/tweet-card.tsx
@@ -1,6 +1,11 @@
 import { Suspense } from "react"
 import { enrichTweet, type EnrichedTweet, type TweetProps } from "react-tweet"
-import { getTweet, type Tweet } from "react-tweet/api"
+import {
+  getTweet,
+  type QuotedTweet,
+  type Tweet,
+  type TweetEntities,
+} from "react-tweet/api"
 
 import { cn } from "@/lib/utils"
 
@@ -229,6 +234,43 @@ export const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => {
   )
 }
 
+const EMPTY_TWEET_ENTITIES: TweetEntities = {
+  hashtags: [],
+  urls: [],
+  user_mentions: [],
+  symbols: [],
+}
+
+/** Syndication API responses sometimes omit entity arrays; react-tweet expects iterables. */
+function normalizeTweetEntities<T extends Tweet | QuotedTweet>(tweet: T): T {
+  const entities: TweetEntities = {
+    ...EMPTY_TWEET_ENTITIES,
+    ...tweet.entities,
+    hashtags: tweet.entities?.hashtags ?? [],
+    urls: tweet.entities?.urls ?? [],
+    user_mentions: tweet.entities?.user_mentions ?? [],
+    symbols: tweet.entities?.symbols ?? [],
+    ...(tweet.entities?.media ? { media: tweet.entities.media } : {}),
+  }
+
+  const textLength = tweet.text?.length ?? 0
+
+  const normalized = {
+    ...tweet,
+    entities,
+    display_text_range: tweet.display_text_range ?? [0, textLength],
+  }
+
+  if ("quoted_tweet" in tweet && tweet.quoted_tweet) {
+    return {
+      ...normalized,
+      quoted_tweet: normalizeTweetEntities(tweet.quoted_tweet),
+    }
+  }
+
+  return normalized
+}
+
 export const MagicTweet = ({
   tweet,
   className,
@@ -237,7 +279,7 @@ export const MagicTweet = ({
   tweet: Tweet
   className?: string
 }) => {
-  const enrichedTweet = enrichTweet(tweet)
+  const enrichedTweet = enrichTweet(normalizeTweetEntities(tweet))
   return (
     <div
       className={cn(
diff --git a/apps/www/registry/registry-examples.ts b/apps/www/registry/registry-examples.ts
index 9b88a2740..f3e7c01e4 100644
--- a/apps/www/registry/registry-examples.ts
+++ b/apps/www/registry/registry-examples.ts
@@ -1,6 +1,19 @@
 import { type Registry } from "shadcn/schema"
 
 export const examples: Registry["items"] = [
+  {
+    name: "clipped-video-tab-demo",
+    type: "registry:example",
+    title: "Clipped Video Tab Demo",
+    description: "Clipped video tab demo",
+    registryDependencies: ["@magicui/clipped-video-tab"],
+    files: [
+      {
+        path: "example/clipped-video-tab-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
   {
     name: "magic-card-demo",
     type: "registry:example",
diff --git a/apps/www/registry/registry-ui.ts b/apps/www/registry/registry-ui.ts
index 0969e85f4..5d2e27656 100644
--- a/apps/www/registry/registry-ui.ts
+++ b/apps/www/registry/registry-ui.ts
@@ -495,6 +495,20 @@ export const ui: Registry["items"] = [
       },
     ],
   },
+  {
+    name: "clipped-video-tab",
+    type: "registry:ui",
+    title: "Clipped Video Tab",
+    description:
+      "A full-width tabbed section with clipped video backgrounds and animated content cards.",
+    dependencies: ["framer-motion"],
+    files: [
+      {
+        path: "magicui/clipped-video-tab.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
   {
     name: "bento-grid",
     type: "registry:ui",
diff --git a/package.json b/package.json
index 1d9a9b170..e532a4f24 100644
--- a/package.json
+++ b/package.json
@@ -35,5 +35,8 @@
     "extends": [
       "@commitlint/config-conventional"
     ]
+  },
+  "dependencies": {
+    "framer-motion": "^12.40.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a9137fea..9faacd502 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      framer-motion:
+        specifier: ^12.40.0
+        version: 12.40.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
     devDependencies:
       '@commitlint/cli':
         specifier: ^19.8.1
@@ -2390,6 +2394,7 @@ packages:
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
 
   '@unrs/resolver-binding-android-arm-eabi@1.11.1':
     resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
@@ -3454,6 +3459,20 @@ packages:
       react-dom:
         optional: true
 
+  framer-motion@12.40.0:
+    resolution: {integrity: sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fresh@2.0.0:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
@@ -3611,6 +3630,7 @@ packages:
   git-raw-commits@4.0.0:
     resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
     engines: {node: '>=16'}
+    deprecated: This package is no longer maintained. For the JavaScript API, please use @conventional-changelog/git-client instead.
     hasBin: true
 
   github-slugger@2.0.0:
@@ -4537,9 +4557,15 @@ packages:
   motion-dom@12.23.23:
     resolution: {integrity: sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==}
 
+  motion-dom@12.40.0:
+    resolution: {integrity: sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==}
+
   motion-utils@12.23.6:
     resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
 
+  motion-utils@12.39.0:
+    resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==}
+
   motion@12.23.26:
     resolution: {integrity: sha512-Ll8XhVxY8LXMVYTCfme27WH2GjBrCIzY4+ndr5QKxsK+YwCtOi2B/oBi5jcIbik5doXuWT/4KKDOVAZJkeY5VQ==}
     peerDependencies:
@@ -9354,6 +9380,15 @@ snapshots:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
 
+  framer-motion@12.40.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      motion-dom: 12.40.0
+      motion-utils: 12.39.0
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
   fresh@2.0.0: {}
 
   fs-extra@11.3.3:
@@ -10694,8 +10729,14 @@ snapshots:
     dependencies:
       motion-utils: 12.23.6
 
+  motion-dom@12.40.0:
+    dependencies:
+      motion-utils: 12.39.0
+
   motion-utils@12.23.6: {}
 
+  motion-utils@12.39.0: {}
+
   motion@12.23.26(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
       framer-motion: 12.23.26(react-dom@19.1.1(react@19.1.1))(react@19.1.1)