Curved Carousel Hero

A one-screen hero for showing work in motion: a badge, a two-line headline and a lede above an arched row of tall cards. The cards drift right to left on their own; drag or fling them, or press the arrow keys, and they coast to a stop before the drift carries on. Cards near the edges grow taller and lean outward, recomputed every frame as rounded quads. Handwritten notes and arrows draw themselves in. Colours come from theme tokens, so it follows light and dark mode and the palette picker. Below 820px it stacks into a centred column with a shorter carousel. With reduced motion there is no entrance, no drift and no video.

preview

code

Copy prompt

Live Preview

New · Curved carousel

Every story,in motion

Line your work up on a curved row that drifts on its own and answers to a drag. Drop in clips or images and it does the rest.

Get started

Drag the row

It's free

Installation

CLI

npx @modus-ui/cli add curved-carousel-hero

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/curved-carousel-hero.tsx.
3. Paste the code.

Usage

import { CurvedCarouselHero } from "@/components/ui/curved-carousel-hero";

export default function Example() {
  return (
    <div className="relative h-screen w-full">
      <CurvedCarouselHero
        cards={[
          { video: "/clips/sneaker.mp4", image: "/clips/sneaker.jpg" },
          { image: "/clips/latte.jpg" },
        ]}
      />
    </div>
  );
}

Props