Components

Card Stack

Animated stack of cards that automatically rotate with smooth transitions.

Card Stack

The CardStack component creates an animated stack of cards that automatically rotate with smooth transitions. It's perfect for showcasing a series of items with a visually appealing card stack effect.

Usage

<template>
  <MCardStack :items="[
    { id: 1, title: 'First Card', content: 'This is the first card in the stack.', name: 'Alice Johnson', designation: 'Software Engineer' },
    { id: 2, title: 'Second Card', content: 'This is the second card in the stack.', name: 'Bob Smith', designation: 'Product Manager' },
    { id: 3, title: 'Third Card', content: 'This is the third card in the stack.', name: 'Charlie Brown', designation: 'UX Designer' }
  ]" />
</template>

Props

items

Card[] required

Array of card objects to display in the stack.

offset

number

Vertical offset between cards in pixels.

scaleFactor

number

Scale factor for each subsequent card.

autoRotate

boolean

Whether to automatically rotate cards.

rotateInterval

number

Interval between automatic rotations in milliseconds.

class

string

CSS classes to apply to the container.

Card Object Structure

Each card in the items array should have the following properties:

number required

Unique identifier for the card.

name

string required

Name to display in the card footer.

designation

string required

Designation to display in the card footer.

content

string required

Content to display in the card body.

title

string

Title to display in the card header. If not provided, defaults to "Card id".

Methods

nextCard

function

Manually rotate to the next card.

prevCard

function

Manually rotate to the previous card.

startFlipping

function

Start automatic card rotation.

stopFlipping

function

Stop automatic card rotation.

Examples

Basic Card Stack

<template>
  <MCardStack :items="[
    { id: 1, title: 'Project Alpha', content: 'A revolutionary new product that changes everything.', name: 'Alex Developer', designation: 'Lead Developer' },
    { id: 2, title: 'Project Beta', content: 'An innovative solution for modern businesses.', name: 'Sam Designer', designation: 'Senior Designer' },
    { id: 3, title: 'Project Gamma', content: 'A cutting-edge platform for the future.', name: 'Jordan Manager', designation: 'Project Manager' }
  ]" />
</template>

Custom Offset and Scale

<template>
  <MCardStack 
    :items="[
      { id: 1, title: 'Card One', content: 'This card has custom spacing.', name: 'Designer One', designation: 'UI Designer' },
      { id: 2, title: 'Card Two', content: 'Notice the increased offset.', name: 'Designer Two', designation: 'UX Designer' },
      { id: 3, title: 'Card Three', content: 'And the different scale factor.', name: 'Designer Three', designation: 'Product Designer' }
    ]" 
    :offset="20" 
    :scale-factor="0.1" 
  />
</template>

Manual Control

<template>
  <div class="space-y-6">
    <div class="flex justify-center h-64">
      <MCardStack 
        ref="cardStackRef"
        :items="[
          { id: 1, title: 'Manual Control', content: 'Use the buttons below to control this card stack.', name: 'Control Panel', designation: 'Demo' },
          { id: 2, title: 'Second Card', content: 'This card can be manually rotated.', name: 'Manual Control', designation: 'Demo' },
          { id: 3, title: 'Third Card', content: 'The rotation interval has been disabled.', name: 'Manual Control', designation: 'Demo' }
        ]"
        :auto-rotate="false"
      />
    </div>
    
    <div class="flex justify-center gap-4">
      <UButton @click="prevCard">Previous</UButton>
      <UButton @click="nextCard">Next</UButton>
      <UButton @click="toggleAutoRotate">
        {{ isAutoRotating ? 'Stop' : 'Start' }} Auto Rotate
      </UButton>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const cardStackRef = ref()
const isAutoRotating = ref(false)

const nextCard = () => {
  cardStackRef.value.nextCard()
}

const prevCard = () => {
  cardStackRef.value.prevCard()
}

const toggleAutoRotate = () => {
  if (isAutoRotating.value) {
    cardStackRef.value.stopFlipping()
  } else {
    cardStackRef.value.startFlipping()
  }
  isAutoRotating.value = !isAutoRotating.value
}
</script>

Custom Rotation Interval

<template>
  <MCardStack 
    :items="[
      { id: 1, title: 'Fast Rotation', content: 'This stack rotates every 2 seconds.', name: 'Timer', designation: 'Demo' },
      { id: 2, title: 'Second Card', content: 'Notice the faster rotation speed.', name: 'Timer', designation: 'Demo' },
      { id: 3, title: 'Third Card', content: 'Great for dynamic content.', name: 'Timer', designation: 'Demo' }
    ]" 
    :rotate-interval="2000"
  />
</template>

With Custom Styling

<template>
  <MCardStack 
    :items="[
      { id: 1, title: 'Custom Style', content: 'This stack has custom dimensions and styling.', name: 'Designer', designation: 'UI/UX' },
      { id: 2, title: 'Second Card', content: 'Notice the different size and colors.', name: 'Designer', designation: 'UI/UX' },
      { id: 3, title: 'Third Card', content: 'Perfect for branded presentations.', name: 'Designer', designation: 'UI/UX' }
    ]" 
    class="h-72 w-80"
  />
</template>

Boxes Core

Animated grid of boxes with hover effects and customizable colors.

Collision

Collision detection system with animated beams and explosion effects.