Media Card

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

Installation

npx shadcn@latest add @scrollxui/media-card

Usage

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

<MediaCard
  className='w-full min-h-87.5 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.