Media Card

An Interactive media cards with a fluid cursor and a polished, modern aesthetic.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/media-card.json

Usage

import { MediaCard, MediaCardItem } from "@/components/ui/media-card";

<MediaCard
      className="w-full min-h-[350px] flex items-center justify-center p-10"
      dotClassName="bg-blue-500 w-4 h-4"
      marqueeClassName="bg-blue-500/95 text-white"
    >
      <MediaCardItem
        src="https://www.pexels.com/download/video/1390942/"
        alt="Video"
        title="Lost in the view."
        type="video"
        className="w-full max-w-sm"
      />
    </MediaCard>

Examples

Image

API Reference

Media Card

An Interactive media cards with a fluid cursor and a polished, modern aesthetic.

Props

Property	Type	Default	Description
`className`	string	`—`	Custom class for the media card container.
`dotClassName`	string	`—`	Styles applied to the cursor dot.
`marqueeClassName`	string	`—`	Styles applied to the marquee cursor.
`springConfig`	{ stiffness?, damping?, mass? }	`-`	Spring physics configuration for cursor motion.
`marqueeSpeed`	number	`10`	Speed of the marquee text animation.
`marqueeDelay`	number	`0.5`	Delay before marquee animation starts.
`children`	ReactNode	`required`	MediaCardItem components.