Story Rings

Row of avatars wrapped in sunset gradient rings. Seen stories fade to muted.

MÖ

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Media7 } from "@/components/beste/piece/media7";

<Media7
  stories={[
    {
      "src": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face",
      "alt": "Ayşe",
      "fallback": "AK"
    },
    {
      "src": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face",
      "alt": "Merve",
      "fallback": "MÖ"
    },
    {
      "src": "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face",
      "alt": "Sarah",
      "fallback": "SB",
      "seen": true
    },
    {
      "src": "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face",
      "alt": "John",
      "fallback": "JD"
    }
  ]}
/>