Marquee
Endlessly scrolling row or column for client names, skills or testimonials, with edge fades, reverse direction, pause on hover or on demand and an optional scroll-velocity drive.
Installation
pnpm dlx shadcn@latest add @portfolio-kit/marqueeFirst time? Add the @portfolio-kit registry to components.json
components.json
{
"registries": {
"@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
}
}Usage
Examples
Headline
An edge-to-edge band of display type between two rules, used as a divider between sections.
Opposing rows
Two rows of skills running in opposite directions with reverse.
Vertical testimonials
Columns of testimonial cards moving in opposite directions with orientation="vertical", and a MarqueePauseButton wired to paused so visitors can stop them to read. The second column appears on wider screens.
Scroll Velocity
Headline bands driven by the page: they rush while you scroll, run backwards after you scroll up, and lean into the motion. Scroll the preview.