Apple Invites

Apple Invites renders a small stack of overlapping cards that cycle through a list of events. At any time it shows up to three slots (left, center, right) with scaled/rotated transforms for the side cards and a blur-masked gradient underlay for depth. It auto-advances at interval ms (when mounted client-side), can be controlled via activeIndex, and emits update:activeIndex when the internal page changes. Responsive card sizing is supported via cardWidth/cardHeight/aspectRatio.

Usage

Pass an array of events. Each event needs an id and at least location; title, subtitle, badge, image or backgroundClassName, and participants (array of { avatar }) are optional. The carousel tracks its own page when activeIndex is undefined.

Social

Team Dinner

Celebrating a great quarter

New York, NY

Invite

Product Launch

Announcing our latest release

Online

Group

Design Meetup

Share ideas with the community

San Francisco, CA

<template>
  <div class="h-64 w-full max-w-sm">
    <MAppleInvites
      :events="events"
      :interval="2500"
    />
  </div>
</template>

<script setup lang="ts">
const events = [
  {
    id: 1,
    title: 'Product Launch',
    subtitle: 'Announcing our latest release',
    location: 'Online',
    badge: 'Invite',
    image: 'https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?w=800&h=500&fit=crop',
  },
  {
    id: 2,
    title: 'Design Meetup',
    subtitle: 'Share ideas with the community',
    location: 'San Francisco, CA',
    badge: 'Group',
    image: 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&h=500&fit=crop',
    participants: [
      { avatar: 'https://randomuser.me/api/portraits/women/44.jpg' },
      { avatar: 'https://randomuser.me/api/portraits/men/32.jpg' },
    ],
  },
  {
    id: 3,
    title: 'Team Dinner',
    subtitle: 'Celebrating a great quarter',
    location: 'New York, NY',
    badge: 'Social',
    image: 'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800&h=500&fit=crop',
    participants: [
      { avatar: 'https://randomuser.me/api/portraits/women/68.jpg' },
    ],
  },
]
</script>

Customize

Social

Team Dinner

Celebrating a great quarter

New York, NY

Invite

Product Launch

Announcing our latest release

Online

Group

Design Meetup

Share ideas with the community

San Francisco, CA

Customize

Reset

Active Index

Aspect Ratio1.5625

Card Class Name

Card Height

Card Width240

Interval3000

Props

Events

Slots

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.appleInvites in app.config.ts.

Accessibility

All three visible cards are absolutely positioned motion.div elements with no role or aria-label describing their state; decorative blur layers use aria-hidden not set but are non-interactive. Images use alt text (title or generic "Participant N"). The carousel advances automatically with no pause-on-hover/focus behavior declared. No keyboard controls are exposed. useReducedMotion is respected for transitions (swaps to zero-duration or reduced transitions), but focus management and ARIA live region for slide changes are not implemented. Consumers should provide their own controls/announcements if needed.

Performance

• Uses AnimatePresence with custom="direction" and variants for center/left/right/hidden. Side cards are scaled down (0.9) and rotated (±12°) with z-index layering.
• Responsive sizing computes metrics (font sizes, padding, avatar sizes, badge position) from resolved card width; initial size uses base or first available value, client-only re-resolves on viewport width.
• Auto-advance uses setInterval (only import.meta.client, restarted on page/interval/events change). Clears timer on unmount.
• Blurred underlay uses five stacked layers (BLUR_LAYERS = [1,2,3,6,12]) with backdrop-filter/mask-image for a gradient fade.
• When prefers-reduced-motion, transitions become near-zero duration (REDUCED_TRANSITION) and glass fade is shortened; variants still apply.
• For lists with < 3 events, the same event id may appear twice in visibleEvents (distinguished by key = id + "-" + slot) so Vue's keyed transitions don't collapse copies.