A typographic project index where hovering a row brings up a preview card that trails the cursor with spring lag and a slight tilt. Each project wipes in over the previous one; on narrow screens the previews become inline thumbnails.
Selected work 2024 to 2026
Five engagements across finance, logistics and health. Hover a project to preview it, or tab through the list.
All case studies
npx shadcn@latest add https://hyperblur.dev/r/showcase-cursor-preview.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/showcase-cursor-preview.tsx.
import { ShowcaseCursorPreview } from "@/components/hyperblur/showcase-cursor-preview"
<ShowcaseCursorPreview accent="#c8ff3d" onProjectSelect={(p) => console.log(p.name)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Selected work 2024 to 2026" | Small label above the title. Empty string hides it. |
| title | string | "Work that shipped and kept shipping" | Section heading. |
| subtitle | string | "Five engagements across finance..." | Supporting paragraph under the heading. |
| projects | { name: string; client: string; discipline: string; year: string; hue: number; href: string; tagline?: string }[] | 5 sample projects | Rows of the index. `hue` tints the drawn preview art. |
| defaultActive | number | null | null | Row whose preview is shown before any pointer movement. |
| cta | { label: string; href: string } | { label: "All case studies", href: "#" } | Link under the heading. |
| accent | string | "#c8ff3d" | Accent for the row underline, arrow and preview label dot. |
| onProjectSelect | (project: CursorPreviewProject, index: number) => void | Called when a row is clicked. |