MotionCards

Elegant cards in seamless flow for clean web design.

Installation

npx shadcn@latest add @scrollxui/motioncards

Usage

import MotionCards, { MotionCardContent } from '@/components/ui/motioncards';

<MotionCards interval={1300}>
  <MotionCardContent>
    <div className='p-4 text-center'>Card 1: Analytics</div>
  </MotionCardContent>
  <MotionCardContent>
    <div className='p-4 text-center'>Card 2: Performance</div>
  </MotionCardContent>
  <MotionCardContent>
    <div className='p-4 text-center'>Card 3: Components</div>
  </MotionCardContent>
  <MotionCardContent>
    <div className='p-4 text-center'>Card 4: Developers</div>
  </MotionCardContent>
</MotionCards>

API Reference

MotionCards

Elegant cards in seamless flow for clean web design.

Props

Property	Type	Default	Description
`children`	ReactNode	`required`	The content of each card. Can be any valid ReactNode. Required.
`interval`	number	`2000`	Time in milliseconds between card transitions. Optional.