Lens Reel

Component 1

About

Palette: graphite + neon cyan (inspiration: dark dev-tool UIs on GradientDeck, blueprint grids). A 3D coverflow of product screens with a draggable peek lens that reveals a blueprint layer (real sizes) of the same screen.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Lens Reel to your project and fits it to your theme.

Code

How Lens Reel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react"
import { LensReel } from "@/components/ui/cd-lens-reel"

const DEMO: LensShot[] = [
  { id: "a", kind: "dashboard", title: "Live dashboards", tag: "Analytics", blurb: "Every chart updates as the data lands." },
  { id: "b", kind: "inbox", title: "Shared inbox", tag: "Support", blurb: "One queue for the whole team." },
  { id: "c", kind: "calendar", title: "Team calendar", tag: "Planning", blurb: "Drag events, see conflicts early." },
  { id: "d", kind: "editor", title: "Doc editor", tag: "Writing", blurb: "Comments and edits in the same place." },
  { id: "e", kind: "insights", title: "Usage insights", tag: "Reports", blurb: "Plain answers instead of raw tables." },
]
export default function LensReelDemo() {
  return <LensReel items={DEMO} defaultIndex={0} />
}