A light portfolio section with two rows of project cards gliding in opposite directions, faded at the edges and paused on hover or focus.
Selected work
Eighty-six launches across fintech, health and commerce. Hover a row to pause it and take a closer look.
npx shadcn@latest add https://hyperblur.dev/r/showcase-marquee-cards.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/showcase-marquee-cards.tsx.
import { ShowcaseMarqueeCards } from "@/components/hyperblur/showcase-marquee-cards"
<ShowcaseMarqueeCards duration={40} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Selected work" | Label above the title. |
| title | string | "Products our clients actually shipped" | Section heading. |
| subtitle | string | "Eighty-six launches across fintech..." | Supporting paragraph under the title. |
| cta | { label: string; href: string } | null | { label: "View all projects", href: "#" } | Dark pill link beside the heading. |
| items | { title: string; tag: string; year: string; href: string; colors?: [string, string, string] }[] | 12 projects | Projects split evenly into two rows. Without `colors` each cover gets a gradient from the built-in palette. |
| duration | number | 48 | Seconds for one full loop of the first row. The second row runs 15% slower. |
| accent | string | "#2f7bff" | Accent for the eyebrow rule, focus ring and card arrow. |
| background | string | "#ffffff" | Section background color. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |