Copy the source
Open the Code tab, copy the complete component, and paste it into your components folder. The source is yours to read, adapt, and ship.
Usage
import { MediaCapsule } from "@/components/themaginui/media-capsule";
<MediaCapsule variant="default" />Variants
The component ships with default, quiet, and expressive visual variants. Each shares the same semantic markup and focus behavior.
01Default
For general product UI.
02Quiet
For dense interfaces.
03Expressive
For key moments.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | quiet | expressive | default | Controls visual emphasis. |
| disabled | boolean | false | Prevents interaction. |
| className | string | — | Extends the root styles. |
| reducedMotion | boolean | system | Overrides motion preference. |
Motion explanation
A damped spring connects hover, focus, and entrance states. The transform-only animation remains GPU-friendly; opacity and translation are disabled when the user requests reduced motion.
Accessibility
- Keyboard interaction follows the relevant WAI-ARIA pattern.
- Focus indicators maintain at least 3:1 contrast against adjacent colors.
- Decorative motion has no semantic meaning and respects
prefers-reduced-motion. - Touch targets remain at least 44 × 44 CSS pixels.
Customization
Override semantic CSS tokens such as --surface, --ink, --line, and --accent. Structural classes can be composed with the exported cn utility.