Cast Reel

Team cards fan out in 3D around a focused card on a dotted ground. By default they form a wave of cards tinted in a tonal ramp of the theme primary, with serif names, mono roles and a pill that fills with the primary colour on the focused card; the filmstrip variant lays them out as a ruled contact sheet whose portraits warm from greyscale as they come into focus. Move the pointer to scrub, scroll or use the arrow keys to step, and click a card to bring it forward; after a few idle seconds the deck drifts on its own. The wave can also flip between horizontal and vertical (double-click or Space). Everything follows light and dark mode and the palette picker. It pauses off screen and snaps instead of easing when the user prefers reduced motion.

preview

code

Copy prompt

Live Preview

Ines VargaType DesignerSay helloTheo OkaforMotion LeadSay helloMara LindqvistDesign EngineerSay helloRen AokiSystems ArchitectSay helloInes VargaType DesignerSay helloTheo OkaforMotion LeadSay helloMara LindqvistDesign EngineerSay helloRen AokiSystems ArchitectSay helloTheo OkaforMotion LeadSay hello

Installation

CLI

npx @modus-ui/cli add cast-reel

Manual

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

Usage

import { CastReel } from "@/components/ui/cast-reel";

export default function Example() {
  return (
    <div className="relative h-[520px] w-full">
      <CastReel variant="wave" />
    </div>
  );
}

Props