Zoom Zepa

Name: Zepa UI
Author: Sameer Shaik

Catalog loupe — three rivers of tags scroll past each other, and a glass sits on top. Drag it (or nudge it with the arrow keys) and the chips under the aperture sharpen, pick up colour, and enlarge around the point you are looking at. The rivers are CSS; the lens writes its position to custom properties, so a drag never re-renders.

Install

shadcn CLI

npx shadcn@latest add https://zepa.design/r/zoom-zepa.json

GitHub: @vij-sameerb5

Code

/**
 * Zepa UI — zoom-zepa
 * https://zepa.design/components/zoom-zepa
 * Free to use in your projects. Please don't republish or resell as your own.
 */
"use client"

import { ZoomZepa } from "./ui/zoom-zepa"

export default function ZoomZepaDemo() {
  return (
    <section
      className="relative flex w-full items-center justify-center bg-[#08080a] px-6 py-16 text-white"
      style={{
        minHeight: "100vh",
        fontFamily: "var(--font-manrope), ui-sans-serif, system-ui, sans-serif",
      }}
    >
      <ZoomZepa />
    </section>
  )
}

export const __demoId = "7c6c65a2858d"

Live demo

Loading demo…