diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
index 92df27973..f32ffe878 100644
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -182,6 +182,12 @@ export const docsConfig: DocsConfig = {
     {
       title: "Components",
       items: [
+        {
+          title: "Time Scale Filter",
+          href: "/docs/components/time-scale-filter",
+          items: [],
+          label: "New",
+        },
         {
           title: "Marquee",
           href: `/docs/components/marquee`,
diff --git a/apps/www/content/docs/components/time-scale-filter.mdx b/apps/www/content/docs/components/time-scale-filter.mdx
new file mode 100644
index 000000000..9aeeabb6a
--- /dev/null
+++ b/apps/www/content/docs/components/time-scale-filter.mdx
@@ -0,0 +1,58 @@
+---
+title: Time Scale Filter
+date: 2026-06-07
+description: Analog timeline date filtering component
+author: magicui
+published: true
+---
+
+<ComponentPreview name="time-scale-filter-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add @magicui/time-scale-filter
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<ComponentSource name="time-scale-filter" />
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+<TimeScaleFilter
+  data={orders}
+  dateField="createdAt"
+  renderItem={(order) => <OrderCard key={order.id} order={order} />}
+  initialDate={new Date()}
+/>
+```
+
+## Props
+
+| Prop             | Type                   | Description                                          |
+| ---------------- | ---------------------- | ---------------------------------------------------- |
+| data             | T[]                    | Array of items to filter                             |
+| dateField        | keyof T                | Date field used for filtering                        |
+| renderItem       | (item: T) => ReactNode | Render function for each filtered item               |
+| timelineDays     | number                 | Number of days shown in the timeline                 |
+| emptyMessage     | string                 | Message shown when no items match                    |
+| className        | string                 | Optional wrapper class name                          |
+| contentClassName | string                 | Optional class name for the rendered content section |
+| initialDate      | Date                   | Optional timeline start date                         |
diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt
index ec3bbf83f..69d299d0d 100644
--- a/apps/www/public/llms-full.txt
+++ b/apps/www/public/llms-full.txt
@@ -19124,6 +19124,586 @@ export default function TextRevealDemo() {
 
 
 
+===== COMPONENT: time-scale-filter =====
+Title: Time Scale Filter
+Description: An analog timeline-based date filter for browsing and filtering data by date.
+
+--- file: magicui/time-scale-filter.tsx ---
+"use client"
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TimeScaleFilterProps {
+  value?: string
+  onValueChange?: (value: string) => void
+  className?: string
+  timelineDays?: number
+  initialDate?: Date
+}
+
+const BOX_WIDTH = 52
+
+export function TimeScaleFilter({
+  value,
+  onValueChange,
+  className,
+  timelineDays = 90,
+  initialDate,
+}: TimeScaleFilterProps) {
+  const today = useMemo(() => {
+    const d = new Date()
+    d.setHours(0, 0, 0, 0)
+    return d
+  }, [])
+
+  const todayId = today.toLocaleDateString("en-CA")
+
+  const timeline = useMemo(() => {
+    return Array.from({ length: timelineDays }, (_, i) => {
+      const d = new Date(today)
+      d.setDate(d.getDate() - Math.floor(timelineDays / 2) + i)
+      const id = d.toLocaleDateString("en-CA")
+      return {
+        id,
+        dayNum: d.getDate(),
+        dayName: d.toLocaleDateString("en-US", { weekday: "short" }),
+        monthName: d.toLocaleDateString("en-US", { month: "short" }),
+        full: d.toLocaleDateString("en-US", {
+          weekday: "long",
+          month: "long",
+          day: "numeric",
+          year: "numeric",
+        }),
+        isFirst: d.getDate() === 1,
+        isToday: id === todayId,
+      }
+    })
+  }, [timelineDays, today, todayId])
+
+  const defaultId = (initialDate ?? today).toLocaleDateString("en-CA")
+  const [internalValue, setInternalValue] = useState(defaultId)
+  const selectedId = value ?? internalValue
+
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const pinShaftRef = useRef<HTMLDivElement>(null)
+  const isDragging = useRef(false)
+  const startX = useRef(0)
+  const scrollLeft = useRef(0)
+  const rafId = useRef<number | null>(null)
+
+  const getIndex = useCallback(
+    (id: string) => timeline.findIndex((t) => t.id === id),
+    [timeline]
+  )
+
+  const scrollToIndex = useCallback((index: number, smooth = true) => {
+    const scrollEl = scrollRef.current
+    if (!scrollEl) return
+    const targetLeft = index * BOX_WIDTH
+    scrollEl.scrollTo({
+      left: targetLeft,
+      behavior: smooth ? "smooth" : "instant",
+    })
+  }, [])
+
+  const punchPin = useCallback(() => {
+    const el = pinShaftRef.current
+    if (!el) return
+    el.style.transition = "none"
+    el.style.transform = "scaleY(0.65)"
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        el.style.transition = "transform 0.4s cubic-bezier(.34,1.56,.64,1)"
+        el.style.transform = "scaleY(1)"
+      })
+    })
+  }, [])
+
+  const commitIndex = useCallback(
+    (index: number, smooth = true) => {
+      const clamped = Math.max(0, Math.min(index, timeline.length - 1))
+      const item = timeline[clamped]
+      if (!item) return
+
+      setInternalValue(item.id)
+      onValueChange?.(item.id)
+      scrollToIndex(clamped, smooth)
+      punchPin()
+    },
+    [timeline, onValueChange, scrollToIndex, punchPin]
+  )
+
+  // Initial mount
+  useEffect(() => {
+    const idx = getIndex(selectedId)
+    if (idx !== -1) scrollToIndex(idx, false)
+    const item = timeline.find((t) => t.id === selectedId)
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // External value change
+  useEffect(() => {
+    if (value === undefined) return
+    const idx = getIndex(value)
+    if (idx !== -1) {
+      scrollToIndex(idx, true)
+      const item = timeline.find((t) => t.id === value)
+    }
+  }, [value, getIndex, scrollToIndex, timeline])
+
+  const handleScroll = useCallback(() => {
+    if (isDragging.current) return
+    if (rafId.current) cancelAnimationFrame(rafId.current)
+
+    rafId.current = requestAnimationFrame(() => {
+      const scrollEl = scrollRef.current
+      if (!scrollEl) return
+
+      const idx = Math.round(scrollEl.scrollLeft / BOX_WIDTH)
+      const item = timeline[Math.max(0, Math.min(idx, timeline.length - 1))]
+
+      if (item && item.id !== selectedId) {
+        setInternalValue(item.id)
+        onValueChange?.(item.id)
+        punchPin()
+      }
+    })
+  }, [timeline, selectedId, onValueChange, punchPin])
+
+  // Mouse drag
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    isDragging.current = true
+    startX.current = e.pageX
+    scrollLeft.current = scrollRef.current?.scrollLeft ?? 0
+    if (scrollRef.current) scrollRef.current.style.scrollBehavior = "auto"
+  }, [])
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!isDragging.current || !scrollRef.current) return
+    e.preventDefault()
+    const walk = (e.pageX - startX.current) * 1.6 // tuned for better wheel feel
+    scrollRef.current.scrollLeft = scrollLeft.current - walk
+  }, [])
+
+  const stopDragging = useCallback(() => {
+    if (!isDragging.current) return
+    isDragging.current = false
+
+    const scrollEl = scrollRef.current
+    if (scrollEl) scrollEl.style.scrollBehavior = "smooth"
+
+    const idx = Math.round((scrollEl?.scrollLeft ?? 0) / BOX_WIDTH)
+    commitIndex(idx, true)
+  }, [commitIndex])
+
+  // Touch support (for better mobile wheel feel)
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    isDragging.current = true
+    startX.current = e.touches[0].pageX
+    scrollLeft.current = scrollRef.current?.scrollLeft ?? 0
+    if (scrollRef.current) scrollRef.current.style.scrollBehavior = "auto"
+  }, [])
+
+  const handleTouchMove = useCallback((e: React.TouchEvent) => {
+    if (!isDragging.current || !scrollRef.current) return
+    const walk = (e.touches[0].pageX - startX.current) * 1.6
+    scrollRef.current.scrollLeft = scrollLeft.current - walk
+  }, [])
+
+  const handleTouchEnd = stopDragging
+
+  const selectedIdx = getIndex(selectedId)
+
+  const neighborClass = (i: number) => {
+    const d = Math.abs(i - selectedIdx)
+    if (d === 0)
+      return "scale-[1.13] !bg-foreground !text-background !border-transparent shadow-xl"
+    if (d === 1) return "scale-[1.04] text-foreground/80 border-border/70"
+    if (d === 2) return "scale-[1.02]"
+    return ""
+  }
+
+  const tickNeighborClass = (i: number) => {
+    const d = Math.abs(i - selectedIdx)
+    if (d === 0) return "!h-7 !bg-red-500 shadow-[0_0_8px_rgba(226,75,74,.4)]"
+    if (d === 1) return "!h-[22px] !bg-foreground/70"
+    if (d === 2) return "!h-[19px] !bg-border"
+    return ""
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative flex w-full flex-col items-center overflow-x-hidden",
+        className
+      )}
+    >
+      <style>{`
+        .tsc-scroll::-webkit-scrollbar{display:none}
+        .tsc-scroll{-ms-overflow-style:none;scrollbar-width:none}
+        .tsc-scroll * { user-select: none; -webkit-user-select: none; }
+      `}</style>
+
+      <div className="relative w-full max-w-2xl">
+        {/* Pin */}
+        <div className="pointer-events-none absolute top-0 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center">
+          <div
+            ref={pinShaftRef}
+            className="h-5 w-[2px] rounded-full bg-red-500"
+            style={{ transformOrigin: "top center" }}
+          />
+          <div className="h-0 w-0 border-t-[9px] border-r-[5px] border-l-[5px] border-t-red-500 border-r-transparent border-l-transparent" />
+        </div>
+
+        {/* Fades */}
+        <div className="from-background pointer-events-none absolute inset-y-0 left-0 z-30 w-20 bg-gradient-to-r to-transparent" />
+        <div className="from-background pointer-events-none absolute inset-y-0 right-0 z-30 w-20 bg-gradient-to-l to-transparent" />
+
+        <div
+          ref={scrollRef}
+          onScroll={handleScroll}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={stopDragging}
+          onMouseLeave={stopDragging}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+          className="tsc-scroll flex cursor-grab flex-col overflow-x-auto select-none active:cursor-grabbing"
+          style={{
+            scrollSnapType: "x mandatory",
+            scrollBehavior: "smooth",
+            paddingLeft: `calc(50% - ${BOX_WIDTH / 2}px)`,
+            paddingRight: `calc(50% - ${BOX_WIDTH / 2}px)`,
+          }}
+        >
+          {/* Date cards */}
+          <div className="flex h-24 items-end">
+            {timeline.map((item, i) => (
+              <div
+                key={item.id}
+                style={{ width: `${BOX_WIDTH}px`, scrollSnapAlign: "center" }}
+                className="relative flex shrink-0 justify-center pb-2.5"
+              >
+                {item.isFirst && (
+                  <span className="absolute top-0 left-1/2 -translate-x-1/2 text-[8px] font-black tracking-[.22em] whitespace-nowrap text-blue-500 uppercase">
+                    {item.monthName}
+                  </span>
+                )}
+                <div
+                  className={cn(
+                    "flex h-[62px] w-[42px] flex-col items-center justify-center rounded-2xl",
+                    "border-border/40 bg-background text-muted-foreground border",
+                    "transition-all duration-300 ease-out",
+                    item.isToday &&
+                      selectedId !== item.id &&
+                      "border-red-400 text-red-500",
+                    selectedId === item.id &&
+                      item.isToday &&
+                      "!border-transparent !bg-red-500 !text-white",
+                    neighborClass(i)
+                  )}
+                >
+                  <span className="mb-1 text-[7px] font-black tracking-[.13em] uppercase opacity-50">
+                    {item.dayName}
+                  </span>
+                  <span className="text-[19px] leading-none font-black">
+                    {item.dayNum}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Ticks */}
+          <div className="border-border/40 flex h-11 border-t">
+            {timeline.map((item, i) => (
+              <div
+                key={item.id}
+                className="relative flex shrink-0 justify-center"
+                style={{ width: `${BOX_WIDTH}px` }}
+              >
+                <div className="relative flex w-full flex-col items-center">
+                  <div
+                    className={cn(
+                      "bg-border/60 h-4 w-[2px] rounded-full transition-all duration-200 ease-out",
+                      item.isToday &&
+                        selectedId !== item.id &&
+                        "!h-5 !bg-red-400/50",
+                      tickNeighborClass(i)
+                    )}
+                  />
+                  <div className="pointer-events-none absolute top-0 left-1/2 flex w-full justify-evenly px-[2px]">
+                    {[0, 1, 2, 3].map((s) => (
+                      <div
+                        key={s}
+                        className="bg-border/50 mt-[3px] h-2 w-[1px] rounded-full"
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TimeScaleFilter
+
+
+===== EXAMPLE: time-scale-filter-demo =====
+Title: time-scale-filter-demo
+
+--- file: example/time-scale-filter-demo.tsx ---
+"use client"
+
+import { useMemo, useState } from "react"
+import { Calendar, CheckSquare, CloudMoon, TrendingUp } from "lucide-react"
+
+import TimeScaleFilter from "@/registry/magicui/time-scale-filter"
+
+const today = new Date()
+
+const getDate = (offset: number) => {
+  const d = new Date(today)
+  d.setDate(d.getDate() + offset)
+  return d.toLocaleDateString("en-CA")
+}
+
+const data = [
+  {
+    id: 1,
+    type: "weather",
+    createdAt: getDate(0),
+  },
+  {
+    id: 2,
+    type: "tasks",
+    createdAt: getDate(0),
+  },
+  {
+    id: 3,
+    type: "events",
+    createdAt: getDate(0),
+  },
+  {
+    id: 4,
+    type: "analytics",
+    createdAt: getDate(-1),
+  },
+  {
+    id: 5,
+    type: "tasks",
+    createdAt: getDate(1),
+  },
+  {
+    id: 6,
+    type: "weather",
+    createdAt: getDate(2),
+  },
+]
+
+function WidgetCard({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="rounded-[32px] border border-zinc-200/70 bg-white p-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_20px_60px_rgb(0,0,0,0.08)] dark:border-zinc-800 dark:bg-zinc-900">
+      {children}
+    </div>
+  )
+}
+
+export default function TimeScaleFilterDemo() {
+  const [selectedDate, setSelectedDate] = useState(
+    new Date().toLocaleDateString("en-CA")
+  )
+
+  const filteredData = useMemo(() => {
+    return data.filter(
+      (item) =>
+        new Date(item.createdAt).toLocaleDateString("en-CA") === selectedDate
+    )
+  }, [selectedDate])
+
+  return (
+    <div className="mx-auto flex w-full max-w-6xl flex-col gap-8">
+      <TimeScaleFilter value={selectedDate} onValueChange={setSelectedDate} />
+
+      {/* Summary */}
+      <div className="flex items-center justify-between rounded-3xl border border-zinc-200/70 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
+        <div>
+          <p className="text-xs font-medium tracking-[0.25em] text-zinc-500 uppercase">
+            Selected Date
+          </p>
+
+          <h3 className="mt-2 text-xl font-bold text-zinc-900 dark:text-white">
+            {new Date(selectedDate).toLocaleDateString("en-US", {
+              weekday: "long",
+              month: "long",
+              day: "numeric",
+            })}
+          </h3>
+        </div>
+
+        <div className="text-right">
+          <p className="text-3xl font-bold text-zinc-900 dark:text-white">
+            {filteredData.length}
+          </p>
+
+          <p className="text-sm text-zinc-500">Filtered Items</p>
+        </div>
+      </div>
+
+      {/* Widgets */}
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {filteredData.map((item) => {
+          switch (item.type) {
+            case "weather":
+              return (
+                <WidgetCard key={item.id}>
+                  <div className="flex flex-col items-center justify-center py-4">
+                    <div className="mb-6 rounded-3xl bg-violet-100 p-6 dark:bg-violet-950">
+                      <CloudMoon className="h-14 w-14 text-violet-600" />
+                    </div>
+
+                    <h3 className="text-3xl font-bold text-zinc-900 dark:text-white">
+                      Cloudy 25°
+                    </h3>
+
+                    <p className="mt-2 text-sm text-zinc-500">
+                      Perfect weather for productivity
+                    </p>
+                  </div>
+                </WidgetCard>
+              )
+
+            case "tasks":
+              return (
+                <WidgetCard key={item.id}>
+                  <div className="mb-6 flex items-center gap-4">
+                    <div className="rounded-2xl bg-orange-100 p-3 dark:bg-orange-950">
+                      <CheckSquare className="h-6 w-6 text-orange-600" />
+                    </div>
+
+                    <div>
+                      <h3 className="text-3xl font-bold text-zinc-900 dark:text-white">
+                        9
+                      </h3>
+
+                      <p className="text-sm text-zinc-500">
+                        Today&apos;s Tasks
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-4">
+                    {[
+                      "Clean Workspace",
+                      "Financial Report",
+                      "Launch Campaign",
+                    ].map((task) => (
+                      <div
+                        key={task}
+                        className="flex items-center gap-3 border-b border-zinc-100 pb-3 dark:border-zinc-800"
+                      >
+                        <div className="h-2.5 w-2.5 rounded-full bg-orange-400" />
+
+                        <span className="text-zinc-700 dark:text-zinc-300">
+                          {task}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </WidgetCard>
+              )
+
+            case "events":
+              return (
+                <WidgetCard key={item.id}>
+                  <div className="mb-6 flex items-center gap-4">
+                    <div className="rounded-2xl bg-red-100 p-3 dark:bg-red-950">
+                      <Calendar className="h-6 w-6 text-red-600" />
+                    </div>
+
+                    <div>
+                      <h3 className="text-3xl font-bold text-zinc-900 dark:text-white">
+                        3
+                      </h3>
+
+                      <p className="text-sm text-zinc-500">
+                        Today&apos;s Events
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-5">
+                    <div className="flex gap-3">
+                      <div className="w-1 rounded-full bg-red-500" />
+
+                      <div>
+                        <p className="font-medium text-zinc-900 dark:text-white">
+                          Morning Sync
+                        </p>
+
+                        <p className="text-sm text-zinc-500">07:00 – 08:00</p>
+                      </div>
+                    </div>
+
+                    <div className="flex gap-3">
+                      <div className="w-1 rounded-full bg-emerald-500" />
+
+                      <div>
+                        <p className="font-medium text-zinc-900 dark:text-white">
+                          Focus Session
+                        </p>
+
+                        <p className="text-sm text-zinc-500">09:00 – 10:00</p>
+                      </div>
+                    </div>
+                  </div>
+                </WidgetCard>
+              )
+
+            case "analytics":
+              return (
+                <WidgetCard key={item.id}>
+                  <div className="mb-5 flex items-center gap-4">
+                    <div className="rounded-2xl bg-blue-100 p-3 dark:bg-blue-950">
+                      <TrendingUp className="h-6 w-6 text-blue-600" />
+                    </div>
+
+                    <div>
+                      <h3 className="text-3xl font-bold text-zinc-900 dark:text-white">
+                        +28%
+                      </h3>
+
+                      <p className="text-sm text-zinc-500">Weekly Growth</p>
+                    </div>
+                  </div>
+
+                  <div className="h-24 rounded-2xl bg-gradient-to-r from-blue-500/10 via-indigo-500/10 to-violet-500/10" />
+                </WidgetCard>
+              )
+
+            default:
+              return null
+          }
+        })}
+      </div>
+
+      {filteredData.length === 0 && (
+        <div className="rounded-[32px] border border-dashed border-zinc-200 py-20 text-center dark:border-zinc-800">
+          <p className="text-zinc-500">No records available for this date.</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+
+
 ===== COMPONENT: tweet-card =====
 Title: Tweet Card
 Description: A card that displays a tweet with the author's name, handle, and profile picture.
diff --git a/apps/www/public/llms.txt b/apps/www/public/llms.txt
index dd7e1290c..30fe9ffc3 100644
--- a/apps/www/public/llms.txt
+++ b/apps/www/public/llms.txt
@@ -77,6 +77,7 @@ This file provides LLM-friendly entry points to documentation and examples.
 - [Text 3D Flip](https://magicui.design/docs/components/text-3d-flip): A text effect that flips each letter in 3D with a staggered animation on hover.
 - [Text Animate](https://magicui.design/docs/components/text-animate): A text animation component that animates text using a variety of different animations.
 - [Text Reveal](https://magicui.design/docs/components/text-reveal): Fade in text as you scroll down the page.
+- [Time Scale Filter](https://magicui.design/docs/components/time-scale-filter): An analog timeline-based date filter for browsing and filtering data by date.
 - [Tweet Card](https://magicui.design/docs/components/tweet-card): A card that displays a tweet with the author's name, handle, and profile picture.
 - [Typing Animation](https://magicui.design/docs/components/typing-animation): Characters appearing in typed animation
 - [Video Text](https://magicui.design/docs/components/video-text): A component that displays text with a video playing in the background.
@@ -125,6 +126,7 @@ This file provides LLM-friendly entry points to documentation and examples.
 - [Hero Video Dialog Demo](https://github.com/magicuidesign/magicui/blob/main/example/hero-video-dialog-demo.tsx): Example usage
 - [Hero Video Dialog Top In Bottom Out Demo](https://github.com/magicuidesign/magicui/blob/main/example/hero-video-dialog-demo-top-in-bottom-out.tsx): Example usage
 - [Code Comparison Demo](https://github.com/magicuidesign/magicui/blob/main/example/code-comparison-demo.tsx): Example usage
+- [time-scale-filter-demo](https://github.com/magicuidesign/magicui/blob/main/example/time-scale-filter-demo.tsx): Example usage
 - [Marquee Demo](https://github.com/magicuidesign/magicui/blob/main/example/marquee-demo.tsx): Example usage
 - [Marquee Vertical Demo](https://github.com/magicuidesign/magicui/blob/main/example/marquee-demo-vertical.tsx): Example usage
 - [Marquee Logos](https://github.com/magicuidesign/magicui/blob/main/example/marquee-logos.tsx): Example usage
diff --git a/apps/www/public/r/registry.json b/apps/www/public/r/registry.json
index 499944e16..ebade3dd2 100644
--- a/apps/www/public/r/registry.json
+++ b/apps/www/public/r/registry.json
@@ -18,6 +18,19 @@
       "files": [],
       "cssVars": {}
     },
+    {
+      "name": "time-scale-filter",
+      "type": "registry:ui",
+      "title": "Time Scale Filter",
+      "description": "An analog timeline-based date filter for browsing and filtering data by date.",
+      "dependencies": [],
+      "files": [
+        {
+          "path": "registry/magicui/time-scale-filter.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "magic-card",
       "type": "registry:ui",
@@ -1964,6 +1977,20 @@
         }
       ]
     },
+    {
+      "name": "time-scale-filter-demo",
+      "type": "registry:example",
+      "description": "Time Scale Filter demo",
+      "registryDependencies": [
+        "@magicui/time-scale-filter"
+      ],
+      "files": [
+        {
+          "path": "registry/example/time-scale-filter-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "marquee-demo",
       "type": "registry:example",
diff --git a/apps/www/public/r/time-scale-filter-demo.json b/apps/www/public/r/time-scale-filter-demo.json
new file mode 100644
index 000000000..22eff5328
--- /dev/null
+++ b/apps/www/public/r/time-scale-filter-demo.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "time-scale-filter-demo",
+  "type": "registry:example",
+  "description": "Time Scale Filter demo",
+  "registryDependencies": [
+    "@magicui/time-scale-filter"
+  ],
+  "files": [
+    {
+      "path": "registry/example/time-scale-filter-demo.tsx",
+      "content": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport { Calendar, CheckSquare, CloudMoon, TrendingUp } from \"lucide-react\"\n\nimport TimeScaleFilter from \"@/registry/magicui/time-scale-filter\"\n\nconst today = new Date()\n\nconst getDate = (offset: number) => {\n  const d = new Date(today)\n  d.setDate(d.getDate() + offset)\n  return d.toLocaleDateString(\"en-CA\")\n}\n\nconst data = [\n  {\n    id: 1,\n    type: \"weather\",\n    createdAt: getDate(0),\n  },\n  {\n    id: 2,\n    type: \"tasks\",\n    createdAt: getDate(0),\n  },\n  {\n    id: 3,\n    type: \"events\",\n    createdAt: getDate(0),\n  },\n  {\n    id: 4,\n    type: \"analytics\",\n    createdAt: getDate(-1),\n  },\n  {\n    id: 5,\n    type: \"tasks\",\n    createdAt: getDate(1),\n  },\n  {\n    id: 6,\n    type: \"weather\",\n    createdAt: getDate(2),\n  },\n]\n\nfunction WidgetCard({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"rounded-[32px] border border-zinc-200/70 bg-white p-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_20px_60px_rgb(0,0,0,0.08)] dark:border-zinc-800 dark:bg-zinc-900\">\n      {children}\n    </div>\n  )\n}\n\nexport default function TimeScaleFilterDemo() {\n  const [selectedDate, setSelectedDate] = useState(\n    new Date().toLocaleDateString(\"en-CA\")\n  )\n\n  const filteredData = useMemo(() => {\n    return data.filter(\n      (item) =>\n        new Date(item.createdAt).toLocaleDateString(\"en-CA\") === selectedDate\n    )\n  }, [selectedDate])\n\n  return (\n    <div className=\"mx-auto flex w-full max-w-6xl flex-col gap-8\">\n      <TimeScaleFilter value={selectedDate} onValueChange={setSelectedDate} />\n\n      {/* Summary */}\n      <div className=\"flex items-center justify-between rounded-3xl border border-zinc-200/70 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900\">\n        <div>\n          <p className=\"text-xs font-medium tracking-[0.25em] text-zinc-500 uppercase\">\n            Selected Date\n          </p>\n\n          <h3 className=\"mt-2 text-xl font-bold text-zinc-900 dark:text-white\">\n            {new Date(selectedDate).toLocaleDateString(\"en-US\", {\n              weekday: \"long\",\n              month: \"long\",\n              day: \"numeric\",\n            })}\n          </h3>\n        </div>\n\n        <div className=\"text-right\">\n          <p className=\"text-3xl font-bold text-zinc-900 dark:text-white\">\n            {filteredData.length}\n          </p>\n\n          <p className=\"text-sm text-zinc-500\">Filtered Items</p>\n        </div>\n      </div>\n\n      {/* Widgets */}\n      <div className=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n        {filteredData.map((item) => {\n          switch (item.type) {\n            case \"weather\":\n              return (\n                <WidgetCard key={item.id}>\n                  <div className=\"flex flex-col items-center justify-center py-4\">\n                    <div className=\"mb-6 rounded-3xl bg-violet-100 p-6 dark:bg-violet-950\">\n                      <CloudMoon className=\"h-14 w-14 text-violet-600\" />\n                    </div>\n\n                    <h3 className=\"text-3xl font-bold text-zinc-900 dark:text-white\">\n                      Cloudy 25°\n                    </h3>\n\n                    <p className=\"mt-2 text-sm text-zinc-500\">\n                      Perfect weather for productivity\n                    </p>\n                  </div>\n                </WidgetCard>\n              )\n\n            case \"tasks\":\n              return (\n                <WidgetCard key={item.id}>\n                  <div className=\"mb-6 flex items-center gap-4\">\n                    <div className=\"rounded-2xl bg-orange-100 p-3 dark:bg-orange-950\">\n                      <CheckSquare className=\"h-6 w-6 text-orange-600\" />\n                    </div>\n\n                    <div>\n                      <h3 className=\"text-3xl font-bold text-zinc-900 dark:text-white\">\n                        9\n                      </h3>\n\n                      <p className=\"text-sm text-zinc-500\">\n                        Today&apos;s Tasks\n                      </p>\n                    </div>\n                  </div>\n\n                  <div className=\"space-y-4\">\n                    {[\n                      \"Clean Workspace\",\n                      \"Financial Report\",\n                      \"Launch Campaign\",\n                    ].map((task) => (\n                      <div\n                        key={task}\n                        className=\"flex items-center gap-3 border-b border-zinc-100 pb-3 dark:border-zinc-800\"\n                      >\n                        <div className=\"h-2.5 w-2.5 rounded-full bg-orange-400\" />\n\n                        <span className=\"text-zinc-700 dark:text-zinc-300\">\n                          {task}\n                        </span>\n                      </div>\n                    ))}\n                  </div>\n                </WidgetCard>\n              )\n\n            case \"events\":\n              return (\n                <WidgetCard key={item.id}>\n                  <div className=\"mb-6 flex items-center gap-4\">\n                    <div className=\"rounded-2xl bg-red-100 p-3 dark:bg-red-950\">\n                      <Calendar className=\"h-6 w-6 text-red-600\" />\n                    </div>\n\n                    <div>\n                      <h3 className=\"text-3xl font-bold text-zinc-900 dark:text-white\">\n                        3\n                      </h3>\n\n                      <p className=\"text-sm text-zinc-500\">\n                        Today&apos;s Events\n                      </p>\n                    </div>\n                  </div>\n\n                  <div className=\"space-y-5\">\n                    <div className=\"flex gap-3\">\n                      <div className=\"w-1 rounded-full bg-red-500\" />\n\n                      <div>\n                        <p className=\"font-medium text-zinc-900 dark:text-white\">\n                          Morning Sync\n                        </p>\n\n                        <p className=\"text-sm text-zinc-500\">07:00 – 08:00</p>\n                      </div>\n                    </div>\n\n                    <div className=\"flex gap-3\">\n                      <div className=\"w-1 rounded-full bg-emerald-500\" />\n\n                      <div>\n                        <p className=\"font-medium text-zinc-900 dark:text-white\">\n                          Focus Session\n                        </p>\n\n                        <p className=\"text-sm text-zinc-500\">09:00 – 10:00</p>\n                      </div>\n                    </div>\n                  </div>\n                </WidgetCard>\n              )\n\n            case \"analytics\":\n              return (\n                <WidgetCard key={item.id}>\n                  <div className=\"mb-5 flex items-center gap-4\">\n                    <div className=\"rounded-2xl bg-blue-100 p-3 dark:bg-blue-950\">\n                      <TrendingUp className=\"h-6 w-6 text-blue-600\" />\n                    </div>\n\n                    <div>\n                      <h3 className=\"text-3xl font-bold text-zinc-900 dark:text-white\">\n                        +28%\n                      </h3>\n\n                      <p className=\"text-sm text-zinc-500\">Weekly Growth</p>\n                    </div>\n                  </div>\n\n                  <div className=\"h-24 rounded-2xl bg-gradient-to-r from-blue-500/10 via-indigo-500/10 to-violet-500/10\" />\n                </WidgetCard>\n              )\n\n            default:\n              return null\n          }\n        })}\n      </div>\n\n      {filteredData.length === 0 && (\n        <div className=\"rounded-[32px] border border-dashed border-zinc-200 py-20 text-center dark:border-zinc-800\">\n          <p className=\"text-zinc-500\">No records available for this date.</p>\n        </div>\n      )}\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/time-scale-filter.json b/apps/www/public/r/time-scale-filter.json
new file mode 100644
index 000000000..d3dc26842
--- /dev/null
+++ b/apps/www/public/r/time-scale-filter.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "time-scale-filter",
+  "type": "registry:ui",
+  "title": "Time Scale Filter",
+  "description": "An analog timeline-based date filter for browsing and filtering data by date.",
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/magicui/time-scale-filter.tsx",
+      "content": "\"use client\"\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TimeScaleFilterProps {\n  value?: string\n  onValueChange?: (value: string) => void\n  className?: string\n  timelineDays?: number\n  initialDate?: Date\n}\n\nconst BOX_WIDTH = 52\n\nexport function TimeScaleFilter({\n  value,\n  onValueChange,\n  className,\n  timelineDays = 90,\n  initialDate,\n}: TimeScaleFilterProps) {\n  const today = useMemo(() => {\n    const d = new Date()\n    d.setHours(0, 0, 0, 0)\n    return d\n  }, [])\n\n  const todayId = today.toLocaleDateString(\"en-CA\")\n\n  const timeline = useMemo(() => {\n    return Array.from({ length: timelineDays }, (_, i) => {\n      const d = new Date(today)\n      d.setDate(d.getDate() - Math.floor(timelineDays / 2) + i)\n      const id = d.toLocaleDateString(\"en-CA\")\n      return {\n        id,\n        dayNum: d.getDate(),\n        dayName: d.toLocaleDateString(\"en-US\", { weekday: \"short\" }),\n        monthName: d.toLocaleDateString(\"en-US\", { month: \"short\" }),\n        full: d.toLocaleDateString(\"en-US\", {\n          weekday: \"long\",\n          month: \"long\",\n          day: \"numeric\",\n          year: \"numeric\",\n        }),\n        isFirst: d.getDate() === 1,\n        isToday: id === todayId,\n      }\n    })\n  }, [timelineDays, today, todayId])\n\n  const defaultId = (initialDate ?? today).toLocaleDateString(\"en-CA\")\n  const [internalValue, setInternalValue] = useState(defaultId)\n  const selectedId = value ?? internalValue\n\n  const scrollRef = useRef<HTMLDivElement>(null)\n  const pinShaftRef = useRef<HTMLDivElement>(null)\n  const isDragging = useRef(false)\n  const startX = useRef(0)\n  const scrollLeft = useRef(0)\n  const rafId = useRef<number | null>(null)\n\n  const getIndex = useCallback(\n    (id: string) => timeline.findIndex((t) => t.id === id),\n    [timeline]\n  )\n\n  const scrollToIndex = useCallback((index: number, smooth = true) => {\n    const scrollEl = scrollRef.current\n    if (!scrollEl) return\n    const targetLeft = index * BOX_WIDTH\n    scrollEl.scrollTo({\n      left: targetLeft,\n      behavior: smooth ? \"smooth\" : \"instant\",\n    })\n  }, [])\n\n  const punchPin = useCallback(() => {\n    const el = pinShaftRef.current\n    if (!el) return\n    el.style.transition = \"none\"\n    el.style.transform = \"scaleY(0.65)\"\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        el.style.transition = \"transform 0.4s cubic-bezier(.34,1.56,.64,1)\"\n        el.style.transform = \"scaleY(1)\"\n      })\n    })\n  }, [])\n\n  const commitIndex = useCallback(\n    (index: number, smooth = true) => {\n      const clamped = Math.max(0, Math.min(index, timeline.length - 1))\n      const item = timeline[clamped]\n      if (!item) return\n\n      setInternalValue(item.id)\n      onValueChange?.(item.id)\n      scrollToIndex(clamped, smooth)\n      punchPin()\n    },\n    [timeline, onValueChange, scrollToIndex, punchPin]\n  )\n\n  // Initial mount\n  useEffect(() => {\n    const idx = getIndex(selectedId)\n    if (idx !== -1) scrollToIndex(idx, false)\n    const item = timeline.find((t) => t.id === selectedId)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // External value change\n  useEffect(() => {\n    if (value === undefined) return\n    const idx = getIndex(value)\n    if (idx !== -1) {\n      scrollToIndex(idx, true)\n      const item = timeline.find((t) => t.id === value)\n    }\n  }, [value, getIndex, scrollToIndex, timeline])\n\n  const handleScroll = useCallback(() => {\n    if (isDragging.current) return\n    if (rafId.current) cancelAnimationFrame(rafId.current)\n\n    rafId.current = requestAnimationFrame(() => {\n      const scrollEl = scrollRef.current\n      if (!scrollEl) return\n\n      const idx = Math.round(scrollEl.scrollLeft / BOX_WIDTH)\n      const item = timeline[Math.max(0, Math.min(idx, timeline.length - 1))]\n\n      if (item && item.id !== selectedId) {\n        setInternalValue(item.id)\n        onValueChange?.(item.id)\n        punchPin()\n      }\n    })\n  }, [timeline, selectedId, onValueChange, punchPin])\n\n  // Mouse drag\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    isDragging.current = true\n    startX.current = e.pageX\n    scrollLeft.current = scrollRef.current?.scrollLeft ?? 0\n    if (scrollRef.current) scrollRef.current.style.scrollBehavior = \"auto\"\n  }, [])\n\n  const handleMouseMove = useCallback((e: React.MouseEvent) => {\n    if (!isDragging.current || !scrollRef.current) return\n    e.preventDefault()\n    const walk = (e.pageX - startX.current) * 1.6 // tuned for better wheel feel\n    scrollRef.current.scrollLeft = scrollLeft.current - walk\n  }, [])\n\n  const stopDragging = useCallback(() => {\n    if (!isDragging.current) return\n    isDragging.current = false\n\n    const scrollEl = scrollRef.current\n    if (scrollEl) scrollEl.style.scrollBehavior = \"smooth\"\n\n    const idx = Math.round((scrollEl?.scrollLeft ?? 0) / BOX_WIDTH)\n    commitIndex(idx, true)\n  }, [commitIndex])\n\n  // Touch support (for better mobile wheel feel)\n  const handleTouchStart = useCallback((e: React.TouchEvent) => {\n    isDragging.current = true\n    startX.current = e.touches[0].pageX\n    scrollLeft.current = scrollRef.current?.scrollLeft ?? 0\n    if (scrollRef.current) scrollRef.current.style.scrollBehavior = \"auto\"\n  }, [])\n\n  const handleTouchMove = useCallback((e: React.TouchEvent) => {\n    if (!isDragging.current || !scrollRef.current) return\n    const walk = (e.touches[0].pageX - startX.current) * 1.6\n    scrollRef.current.scrollLeft = scrollLeft.current - walk\n  }, [])\n\n  const handleTouchEnd = stopDragging\n\n  const selectedIdx = getIndex(selectedId)\n\n  const neighborClass = (i: number) => {\n    const d = Math.abs(i - selectedIdx)\n    if (d === 0)\n      return \"scale-[1.13] !bg-foreground !text-background !border-transparent shadow-xl\"\n    if (d === 1) return \"scale-[1.04] text-foreground/80 border-border/70\"\n    if (d === 2) return \"scale-[1.02]\"\n    return \"\"\n  }\n\n  const tickNeighborClass = (i: number) => {\n    const d = Math.abs(i - selectedIdx)\n    if (d === 0) return \"!h-7 !bg-red-500 shadow-[0_0_8px_rgba(226,75,74,.4)]\"\n    if (d === 1) return \"!h-[22px] !bg-foreground/70\"\n    if (d === 2) return \"!h-[19px] !bg-border\"\n    return \"\"\n  }\n\n  return (\n    <div\n      className={cn(\n        \"relative flex w-full flex-col items-center overflow-x-hidden\",\n        className\n      )}\n    >\n      <style>{`\n        .tsc-scroll::-webkit-scrollbar{display:none}\n        .tsc-scroll{-ms-overflow-style:none;scrollbar-width:none}\n        .tsc-scroll * { user-select: none; -webkit-user-select: none; }\n      `}</style>\n\n      <div className=\"relative w-full max-w-2xl\">\n        {/* Pin */}\n        <div className=\"pointer-events-none absolute top-0 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center\">\n          <div\n            ref={pinShaftRef}\n            className=\"h-5 w-[2px] rounded-full bg-red-500\"\n            style={{ transformOrigin: \"top center\" }}\n          />\n          <div className=\"h-0 w-0 border-t-[9px] border-r-[5px] border-l-[5px] border-t-red-500 border-r-transparent border-l-transparent\" />\n        </div>\n\n        {/* Fades */}\n        <div className=\"from-background pointer-events-none absolute inset-y-0 left-0 z-30 w-20 bg-gradient-to-r to-transparent\" />\n        <div className=\"from-background pointer-events-none absolute inset-y-0 right-0 z-30 w-20 bg-gradient-to-l to-transparent\" />\n\n        <div\n          ref={scrollRef}\n          onScroll={handleScroll}\n          onMouseDown={handleMouseDown}\n          onMouseMove={handleMouseMove}\n          onMouseUp={stopDragging}\n          onMouseLeave={stopDragging}\n          onTouchStart={handleTouchStart}\n          onTouchMove={handleTouchMove}\n          onTouchEnd={handleTouchEnd}\n          className=\"tsc-scroll flex cursor-grab flex-col overflow-x-auto select-none active:cursor-grabbing\"\n          style={{\n            scrollSnapType: \"x mandatory\",\n            scrollBehavior: \"smooth\",\n            paddingLeft: `calc(50% - ${BOX_WIDTH / 2}px)`,\n            paddingRight: `calc(50% - ${BOX_WIDTH / 2}px)`,\n          }}\n        >\n          {/* Date cards */}\n          <div className=\"flex h-24 items-end\">\n            {timeline.map((item, i) => (\n              <div\n                key={item.id}\n                style={{ width: `${BOX_WIDTH}px`, scrollSnapAlign: \"center\" }}\n                className=\"relative flex shrink-0 justify-center pb-2.5\"\n              >\n                {item.isFirst && (\n                  <span className=\"absolute top-0 left-1/2 -translate-x-1/2 text-[8px] font-black tracking-[.22em] whitespace-nowrap text-blue-500 uppercase\">\n                    {item.monthName}\n                  </span>\n                )}\n                <div\n                  className={cn(\n                    \"flex h-[62px] w-[42px] flex-col items-center justify-center rounded-2xl\",\n                    \"border-border/40 bg-background text-muted-foreground border\",\n                    \"transition-all duration-300 ease-out\",\n                    item.isToday &&\n                      selectedId !== item.id &&\n                      \"border-red-400 text-red-500\",\n                    selectedId === item.id &&\n                      item.isToday &&\n                      \"!border-transparent !bg-red-500 !text-white\",\n                    neighborClass(i)\n                  )}\n                >\n                  <span className=\"mb-1 text-[7px] font-black tracking-[.13em] uppercase opacity-50\">\n                    {item.dayName}\n                  </span>\n                  <span className=\"text-[19px] leading-none font-black\">\n                    {item.dayNum}\n                  </span>\n                </div>\n              </div>\n            ))}\n          </div>\n\n          {/* Ticks */}\n          <div className=\"border-border/40 flex h-11 border-t\">\n            {timeline.map((item, i) => (\n              <div\n                key={item.id}\n                className=\"relative flex shrink-0 justify-center\"\n                style={{ width: `${BOX_WIDTH}px` }}\n              >\n                <div className=\"relative flex w-full flex-col items-center\">\n                  <div\n                    className={cn(\n                      \"bg-border/60 h-4 w-[2px] rounded-full transition-all duration-200 ease-out\",\n                      item.isToday &&\n                        selectedId !== item.id &&\n                        \"!h-5 !bg-red-400/50\",\n                      tickNeighborClass(i)\n                    )}\n                  />\n                  <div className=\"pointer-events-none absolute top-0 left-1/2 flex w-full justify-evenly px-[2px]\">\n                    {[0, 1, 2, 3].map((s) => (\n                      <div\n                        key={s}\n                        className=\"bg-border/50 mt-[3px] h-2 w-[1px] rounded-full\"\n                      />\n                    ))}\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default TimeScaleFilter\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/registry.json b/apps/www/public/registry.json
index 499944e16..ebade3dd2 100644
--- a/apps/www/public/registry.json
+++ b/apps/www/public/registry.json
@@ -18,6 +18,19 @@
       "files": [],
       "cssVars": {}
     },
+    {
+      "name": "time-scale-filter",
+      "type": "registry:ui",
+      "title": "Time Scale Filter",
+      "description": "An analog timeline-based date filter for browsing and filtering data by date.",
+      "dependencies": [],
+      "files": [
+        {
+          "path": "registry/magicui/time-scale-filter.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "magic-card",
       "type": "registry:ui",
@@ -1964,6 +1977,20 @@
         }
       ]
     },
+    {
+      "name": "time-scale-filter-demo",
+      "type": "registry:example",
+      "description": "Time Scale Filter demo",
+      "registryDependencies": [
+        "@magicui/time-scale-filter"
+      ],
+      "files": [
+        {
+          "path": "registry/example/time-scale-filter-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "marquee-demo",
       "type": "registry:example",
diff --git a/apps/www/registry.json b/apps/www/registry.json
index 499944e16..ebade3dd2 100644
--- a/apps/www/registry.json
+++ b/apps/www/registry.json
@@ -18,6 +18,19 @@
       "files": [],
       "cssVars": {}
     },
+    {
+      "name": "time-scale-filter",
+      "type": "registry:ui",
+      "title": "Time Scale Filter",
+      "description": "An analog timeline-based date filter for browsing and filtering data by date.",
+      "dependencies": [],
+      "files": [
+        {
+          "path": "registry/magicui/time-scale-filter.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "magic-card",
       "type": "registry:ui",
@@ -1964,6 +1977,20 @@
         }
       ]
     },
+    {
+      "name": "time-scale-filter-demo",
+      "type": "registry:example",
+      "description": "Time Scale Filter demo",
+      "registryDependencies": [
+        "@magicui/time-scale-filter"
+      ],
+      "files": [
+        {
+          "path": "registry/example/time-scale-filter-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "marquee-demo",
       "type": "registry:example",
diff --git a/apps/www/registry/__index__.tsx b/apps/www/registry/__index__.tsx
index 8c1517ae8..aa10dddcb 100644
--- a/apps/www/registry/__index__.tsx
+++ b/apps/www/registry/__index__.tsx
@@ -15,6 +15,23 @@ export const Index: Record<string, any> = {
     component: null,
     meta: undefined,
   },
+  "time-scale-filter": {
+    name: "time-scale-filter",
+    description: "An analog timeline-based date filter for browsing and filtering data by date.",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/magicui/time-scale-filter.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/magicui/time-scale-filter.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": {
     name: "magic-card",
     description: "A spotlight effect that follows your mouse cursor and highlights borders on hover.",
@@ -1987,6 +2004,23 @@ export const Index: Record<string, any> = {
     }),
     meta: undefined,
   },
+  "time-scale-filter-demo": {
+    name: "time-scale-filter-demo",
+    description: "Time Scale Filter demo",
+    type: "registry:example",
+    registryDependencies: ["@magicui/time-scale-filter"],
+    files: [{
+      path: "registry/example/time-scale-filter-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/example/time-scale-filter-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,
+  },
   "marquee-demo": {
     name: "marquee-demo",
     description: "Example showing an infinite scrolling component.",
diff --git a/apps/www/registry/example/time-scale-filter-demo.tsx b/apps/www/registry/example/time-scale-filter-demo.tsx
new file mode 100644
index 000000000..efe14741f
--- /dev/null
+++ b/apps/www/registry/example/time-scale-filter-demo.tsx
@@ -0,0 +1,242 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { Calendar, CheckSquare, CloudMoon, TrendingUp } from "lucide-react"
+
+import TimeScaleFilter from "@/registry/magicui/time-scale-filter"
+
+const today = new Date()
+
+const getDate = (offset: number) => {
+  const d = new Date(today)
+  d.setDate(d.getDate() + offset)
+  return d.toLocaleDateString("en-CA")
+}
+
+const data = [
+  {
+    id: 1,
+    type: "weather",
+    createdAt: getDate(0),
+  },
+  {
+    id: 2,
+    type: "tasks",
+    createdAt: getDate(0),
+  },
+  {
+    id: 3,
+    type: "events",
+    createdAt: getDate(0),
+  },
+  {
+    id: 4,
+    type: "analytics",
+    createdAt: getDate(-1),
+  },
+  {
+    id: 5,
+    type: "tasks",
+    createdAt: getDate(1),
+  },
+  {
+    id: 6,
+    type: "weather",
+    createdAt: getDate(2),
+  },
+]
+
+function WidgetCard({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="rounded-[32px] border border-zinc-200/70 bg-white p-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_20px_60px_rgb(0,0,0,0.08)] dark:border-zinc-800 dark:bg-zinc-900">
+      {children}
+    </div>
+  )
+}
+
+export default function TimeScaleFilterDemo() {
+  const [selectedDate, setSelectedDate] = useState(
+    new Date().toLocaleDateString("en-CA")
+  )
+
+  const filteredData = useMemo(() => {
+    return data.filter(
+      (item) =>
+        new Date(item.createdAt).toLocaleDateString("en-CA") === selectedDate
+    )
+  }, [selectedDate])
+
+  return (
+    <div className="mx-auto flex w-full max-w-6xl flex-col gap-8">
+      <TimeScaleFilter value={selectedDate} onValueChange={setSelectedDate} />
+
+      {/* Summary */}
+      <div className="flex items-center justify-between rounded-3xl border border-zinc-200/70 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
+        <div>
+          <p className="text-xs font-medium tracking-[0.25em] text-zinc-500 uppercase">
+            Selected Date
+          </p>
+
+          <h3 className="mt-2 text-xl font-bold text-zinc-900 dark:text-white">
+            {new Date(selectedDate).toLocaleDateString("en-US", {
+              weekday: "long",
+              month: "long",
+              day: "numeric",
+            })}
+          </h3>
+        </div>
+
+        <div className="text-right">
+          <p className="text-3xl font-bold text-zinc-900 dark:text-white">
+            {filteredData.length}
+          </p>
+
+          <p className="text-sm text-zinc-500">Filtered Items</p>
+        </div>
+      </div>
+
+      {/* Widgets */}
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {filteredData.map((item) => {
+          switch (item.type) {
+            case "weather":
+              return (
+                <WidgetCard key={item.id}>
+                  <div className="flex flex-col items-center justify-center py-4">
+                    <div className="mb-6 rounded-3xl bg-violet-100 p-6 dark:bg-violet-950">
+                      <CloudMoon className="h-14 w-14 text-violet-600" />
+                    </div>
+
+                    <h3 className="text-3xl font-bold text-zinc-900 dark:text-white">
+                      Cloudy 25°
+                    </h3>
+
+                    <p className="mt-2 text-sm text-zinc-500">
+                      Perfect weather for productivity
+                    </p>
+                  </div>
+                </WidgetCard>
+              )
+
+            case "tasks":
+              return (
+                <WidgetCard key={item.id}>
+                  <div className="mb-6 flex items-center gap-4">
+                    <div className="rounded-2xl bg-orange-100 p-3 dark:bg-orange-950">
+                      <CheckSquare className="h-6 w-6 text-orange-600" />
+                    </div>
+
+                    <div>
+                      <h3 className="text-3xl font-bold text-zinc-900 dark:text-white">
+                        9
+                      </h3>
+
+                      <p className="text-sm text-zinc-500">
+                        Today&apos;s Tasks
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-4">
+                    {[
+                      "Clean Workspace",
+                      "Financial Report",
+                      "Launch Campaign",
+                    ].map((task) => (
+                      <div
+                        key={task}
+                        className="flex items-center gap-3 border-b border-zinc-100 pb-3 dark:border-zinc-800"
+                      >
+                        <div className="h-2.5 w-2.5 rounded-full bg-orange-400" />
+
+                        <span className="text-zinc-700 dark:text-zinc-300">
+                          {task}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </WidgetCard>
+              )
+
+            case "events":
+              return (
+                <WidgetCard key={item.id}>
+                  <div className="mb-6 flex items-center gap-4">
+                    <div className="rounded-2xl bg-red-100 p-3 dark:bg-red-950">
+                      <Calendar className="h-6 w-6 text-red-600" />
+                    </div>
+
+                    <div>
+                      <h3 className="text-3xl font-bold text-zinc-900 dark:text-white">
+                        3
+                      </h3>
+
+                      <p className="text-sm text-zinc-500">
+                        Today&apos;s Events
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-5">
+                    <div className="flex gap-3">
+                      <div className="w-1 rounded-full bg-red-500" />
+
+                      <div>
+                        <p className="font-medium text-zinc-900 dark:text-white">
+                          Morning Sync
+                        </p>
+
+                        <p className="text-sm text-zinc-500">07:00 – 08:00</p>
+                      </div>
+                    </div>
+
+                    <div className="flex gap-3">
+                      <div className="w-1 rounded-full bg-emerald-500" />
+
+                      <div>
+                        <p className="font-medium text-zinc-900 dark:text-white">
+                          Focus Session
+                        </p>
+
+                        <p className="text-sm text-zinc-500">09:00 – 10:00</p>
+                      </div>
+                    </div>
+                  </div>
+                </WidgetCard>
+              )
+
+            case "analytics":
+              return (
+                <WidgetCard key={item.id}>
+                  <div className="mb-5 flex items-center gap-4">
+                    <div className="rounded-2xl bg-blue-100 p-3 dark:bg-blue-950">
+                      <TrendingUp className="h-6 w-6 text-blue-600" />
+                    </div>
+
+                    <div>
+                      <h3 className="text-3xl font-bold text-zinc-900 dark:text-white">
+                        +28%
+                      </h3>
+
+                      <p className="text-sm text-zinc-500">Weekly Growth</p>
+                    </div>
+                  </div>
+
+                  <div className="h-24 rounded-2xl bg-gradient-to-r from-blue-500/10 via-indigo-500/10 to-violet-500/10" />
+                </WidgetCard>
+              )
+
+            default:
+              return null
+          }
+        })}
+      </div>
+
+      {filteredData.length === 0 && (
+        <div className="rounded-[32px] border border-dashed border-zinc-200 py-20 text-center dark:border-zinc-800">
+          <p className="text-zinc-500">No records available for this date.</p>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/www/registry/magicui/time-scale-filter.tsx b/apps/www/registry/magicui/time-scale-filter.tsx
new file mode 100644
index 000000000..171dcaecc
--- /dev/null
+++ b/apps/www/registry/magicui/time-scale-filter.tsx
@@ -0,0 +1,324 @@
+"use client"
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TimeScaleFilterProps {
+  value?: string
+  onValueChange?: (value: string) => void
+  className?: string
+  timelineDays?: number
+  initialDate?: Date
+}
+
+const BOX_WIDTH = 52
+
+export function TimeScaleFilter({
+  value,
+  onValueChange,
+  className,
+  timelineDays = 90,
+  initialDate,
+}: TimeScaleFilterProps) {
+  const today = useMemo(() => {
+    const d = new Date()
+    d.setHours(0, 0, 0, 0)
+    return d
+  }, [])
+
+  const todayId = today.toLocaleDateString("en-CA")
+
+  const timeline = useMemo(() => {
+    return Array.from({ length: timelineDays }, (_, i) => {
+      const d = new Date(today)
+      d.setDate(d.getDate() - Math.floor(timelineDays / 2) + i)
+      const id = d.toLocaleDateString("en-CA")
+      return {
+        id,
+        dayNum: d.getDate(),
+        dayName: d.toLocaleDateString("en-US", { weekday: "short" }),
+        monthName: d.toLocaleDateString("en-US", { month: "short" }),
+        full: d.toLocaleDateString("en-US", {
+          weekday: "long",
+          month: "long",
+          day: "numeric",
+          year: "numeric",
+        }),
+        isFirst: d.getDate() === 1,
+        isToday: id === todayId,
+      }
+    })
+  }, [timelineDays, today, todayId])
+
+  const defaultId = (initialDate ?? today).toLocaleDateString("en-CA")
+  const [internalValue, setInternalValue] = useState(defaultId)
+  const selectedId = value ?? internalValue
+
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const pinShaftRef = useRef<HTMLDivElement>(null)
+  const isDragging = useRef(false)
+  const startX = useRef(0)
+  const scrollLeft = useRef(0)
+  const rafId = useRef<number | null>(null)
+
+  const getIndex = useCallback(
+    (id: string) => timeline.findIndex((t) => t.id === id),
+    [timeline]
+  )
+
+  const scrollToIndex = useCallback((index: number, smooth = true) => {
+    const scrollEl = scrollRef.current
+    if (!scrollEl) return
+    const targetLeft = index * BOX_WIDTH
+    scrollEl.scrollTo({
+      left: targetLeft,
+      behavior: smooth ? "smooth" : "instant",
+    })
+  }, [])
+
+  const punchPin = useCallback(() => {
+    const el = pinShaftRef.current
+    if (!el) return
+    el.style.transition = "none"
+    el.style.transform = "scaleY(0.65)"
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        el.style.transition = "transform 0.4s cubic-bezier(.34,1.56,.64,1)"
+        el.style.transform = "scaleY(1)"
+      })
+    })
+  }, [])
+
+  const commitIndex = useCallback(
+    (index: number, smooth = true) => {
+      const clamped = Math.max(0, Math.min(index, timeline.length - 1))
+      const item = timeline[clamped]
+      if (!item) return
+
+      setInternalValue(item.id)
+      onValueChange?.(item.id)
+      scrollToIndex(clamped, smooth)
+      punchPin()
+    },
+    [timeline, onValueChange, scrollToIndex, punchPin]
+  )
+
+  // Initial mount
+  useEffect(() => {
+    const idx = getIndex(selectedId)
+    if (idx !== -1) scrollToIndex(idx, false)
+    const item = timeline.find((t) => t.id === selectedId)
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // External value change
+  useEffect(() => {
+    if (value === undefined) return
+    const idx = getIndex(value)
+    if (idx !== -1) {
+      scrollToIndex(idx, true)
+      const item = timeline.find((t) => t.id === value)
+    }
+  }, [value, getIndex, scrollToIndex, timeline])
+
+  const handleScroll = useCallback(() => {
+    if (isDragging.current) return
+    if (rafId.current) cancelAnimationFrame(rafId.current)
+
+    rafId.current = requestAnimationFrame(() => {
+      const scrollEl = scrollRef.current
+      if (!scrollEl) return
+
+      const idx = Math.round(scrollEl.scrollLeft / BOX_WIDTH)
+      const item = timeline[Math.max(0, Math.min(idx, timeline.length - 1))]
+
+      if (item && item.id !== selectedId) {
+        setInternalValue(item.id)
+        onValueChange?.(item.id)
+        punchPin()
+      }
+    })
+  }, [timeline, selectedId, onValueChange, punchPin])
+
+  // Mouse drag
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    isDragging.current = true
+    startX.current = e.pageX
+    scrollLeft.current = scrollRef.current?.scrollLeft ?? 0
+    if (scrollRef.current) scrollRef.current.style.scrollBehavior = "auto"
+  }, [])
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!isDragging.current || !scrollRef.current) return
+    e.preventDefault()
+    const walk = (e.pageX - startX.current) * 1.6 // tuned for better wheel feel
+    scrollRef.current.scrollLeft = scrollLeft.current - walk
+  }, [])
+
+  const stopDragging = useCallback(() => {
+    if (!isDragging.current) return
+    isDragging.current = false
+
+    const scrollEl = scrollRef.current
+    if (scrollEl) scrollEl.style.scrollBehavior = "smooth"
+
+    const idx = Math.round((scrollEl?.scrollLeft ?? 0) / BOX_WIDTH)
+    commitIndex(idx, true)
+  }, [commitIndex])
+
+  // Touch support (for better mobile wheel feel)
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    isDragging.current = true
+    startX.current = e.touches[0].pageX
+    scrollLeft.current = scrollRef.current?.scrollLeft ?? 0
+    if (scrollRef.current) scrollRef.current.style.scrollBehavior = "auto"
+  }, [])
+
+  const handleTouchMove = useCallback((e: React.TouchEvent) => {
+    if (!isDragging.current || !scrollRef.current) return
+    const walk = (e.touches[0].pageX - startX.current) * 1.6
+    scrollRef.current.scrollLeft = scrollLeft.current - walk
+  }, [])
+
+  const handleTouchEnd = stopDragging
+
+  const selectedIdx = getIndex(selectedId)
+
+  const neighborClass = (i: number) => {
+    const d = Math.abs(i - selectedIdx)
+    if (d === 0)
+      return "scale-[1.13] !bg-foreground !text-background !border-transparent shadow-xl"
+    if (d === 1) return "scale-[1.04] text-foreground/80 border-border/70"
+    if (d === 2) return "scale-[1.02]"
+    return ""
+  }
+
+  const tickNeighborClass = (i: number) => {
+    const d = Math.abs(i - selectedIdx)
+    if (d === 0) return "!h-7 !bg-red-500 shadow-[0_0_8px_rgba(226,75,74,.4)]"
+    if (d === 1) return "!h-[22px] !bg-foreground/70"
+    if (d === 2) return "!h-[19px] !bg-border"
+    return ""
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative flex w-full flex-col items-center overflow-x-hidden",
+        className
+      )}
+    >
+      <style>{`
+        .tsc-scroll::-webkit-scrollbar{display:none}
+        .tsc-scroll{-ms-overflow-style:none;scrollbar-width:none}
+        .tsc-scroll * { user-select: none; -webkit-user-select: none; }
+      `}</style>
+
+      <div className="relative w-full max-w-2xl">
+        {/* Pin */}
+        <div className="pointer-events-none absolute top-0 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center">
+          <div
+            ref={pinShaftRef}
+            className="h-5 w-[2px] rounded-full bg-red-500"
+            style={{ transformOrigin: "top center" }}
+          />
+          <div className="h-0 w-0 border-t-[9px] border-r-[5px] border-l-[5px] border-t-red-500 border-r-transparent border-l-transparent" />
+        </div>
+
+        {/* Fades */}
+        <div className="from-background pointer-events-none absolute inset-y-0 left-0 z-30 w-20 bg-gradient-to-r to-transparent" />
+        <div className="from-background pointer-events-none absolute inset-y-0 right-0 z-30 w-20 bg-gradient-to-l to-transparent" />
+
+        <div
+          ref={scrollRef}
+          onScroll={handleScroll}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={stopDragging}
+          onMouseLeave={stopDragging}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+          className="tsc-scroll flex cursor-grab flex-col overflow-x-auto select-none active:cursor-grabbing"
+          style={{
+            scrollSnapType: "x mandatory",
+            scrollBehavior: "smooth",
+            paddingLeft: `calc(50% - ${BOX_WIDTH / 2}px)`,
+            paddingRight: `calc(50% - ${BOX_WIDTH / 2}px)`,
+          }}
+        >
+          {/* Date cards */}
+          <div className="flex h-24 items-end">
+            {timeline.map((item, i) => (
+              <div
+                key={item.id}
+                style={{ width: `${BOX_WIDTH}px`, scrollSnapAlign: "center" }}
+                className="relative flex shrink-0 justify-center pb-2.5"
+              >
+                {item.isFirst && (
+                  <span className="absolute top-0 left-1/2 -translate-x-1/2 text-[8px] font-black tracking-[.22em] whitespace-nowrap text-blue-500 uppercase">
+                    {item.monthName}
+                  </span>
+                )}
+                <div
+                  className={cn(
+                    "flex h-[62px] w-[42px] flex-col items-center justify-center rounded-2xl",
+                    "border-border/40 bg-background text-muted-foreground border",
+                    "transition-all duration-300 ease-out",
+                    item.isToday &&
+                      selectedId !== item.id &&
+                      "border-red-400 text-red-500",
+                    selectedId === item.id &&
+                      item.isToday &&
+                      "!border-transparent !bg-red-500 !text-white",
+                    neighborClass(i)
+                  )}
+                >
+                  <span className="mb-1 text-[7px] font-black tracking-[.13em] uppercase opacity-50">
+                    {item.dayName}
+                  </span>
+                  <span className="text-[19px] leading-none font-black">
+                    {item.dayNum}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Ticks */}
+          <div className="border-border/40 flex h-11 border-t">
+            {timeline.map((item, i) => (
+              <div
+                key={item.id}
+                className="relative flex shrink-0 justify-center"
+                style={{ width: `${BOX_WIDTH}px` }}
+              >
+                <div className="relative flex w-full flex-col items-center">
+                  <div
+                    className={cn(
+                      "bg-border/60 h-4 w-[2px] rounded-full transition-all duration-200 ease-out",
+                      item.isToday &&
+                        selectedId !== item.id &&
+                        "!h-5 !bg-red-400/50",
+                      tickNeighborClass(i)
+                    )}
+                  />
+                  <div className="pointer-events-none absolute top-0 left-1/2 flex w-full justify-evenly px-[2px]">
+                    {[0, 1, 2, 3].map((s) => (
+                      <div
+                        key={s}
+                        className="bg-border/50 mt-[3px] h-2 w-[1px] rounded-full"
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TimeScaleFilter
diff --git a/apps/www/registry/registry-examples.ts b/apps/www/registry/registry-examples.ts
index a112db472..f43f88cec 100644
--- a/apps/www/registry/registry-examples.ts
+++ b/apps/www/registry/registry-examples.ts
@@ -543,6 +543,18 @@ export const examples: Registry["items"] = [
       },
     ],
   },
+  {
+    name: "time-scale-filter-demo",
+    type: "registry:example",
+    description: "Time Scale Filter demo",
+    registryDependencies: ["@magicui/time-scale-filter"],
+    files: [
+      {
+        path: "example/time-scale-filter-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
   {
     name: "marquee-demo",
     type: "registry:example",
diff --git a/apps/www/registry/registry-ui.ts b/apps/www/registry/registry-ui.ts
index 0969e85f4..a25b98510 100644
--- a/apps/www/registry/registry-ui.ts
+++ b/apps/www/registry/registry-ui.ts
@@ -1,6 +1,20 @@
 import { type Registry } from "shadcn/schema"
 
 export const ui: Registry["items"] = [
+  {
+    name: "time-scale-filter",
+    type: "registry:ui",
+    title: "Time Scale Filter",
+    description:
+      "An analog timeline-based date filter for browsing and filtering data by date.",
+    dependencies: [],
+    files: [
+      {
+        path: "magicui/time-scale-filter.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
   {
     name: "magic-card",
     type: "registry:ui",