Focus Card
Centered 3-card carousel — active card enlarged and elevated with serif italic label and counter.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | FocusItem[] | DEFAULT_ITEMS (12 items) | Array of items with id, image URL, label, and category. |
| defaultActive | number | 5 | Index of the initially active card. |
| bgColor | string | #e8e8ea | Background color of the carousel container. |
When to Use
Use for editorial showcases, theme selectors, or any interface where a curated visual selection needs to feel intentional. The serif italic labels add a refined, magazine-like character.
Best Practices
Use images with strong focal points that read well at portrait aspect ratio. Keep labels short — 1-2 words maximum for the italic serif overlay.
Why This Component Matters
The centered focus pattern with counter (06/12) communicates curation and depth, implying a rich catalog behind the visible selection.
FAQ
QHow are the 3 cards positioned?
Three items render simultaneously — active at center with scale 1.0, adjacent cards at scale 0.80 and ±224px x-offset, using Framer Motion spring transitions.
QCan I click side cards to navigate?
Yes — clicking either side card advances in that direction.
QHow do I change the label font?
The label uses font-family Georgia (serif) with italic style. Pass a custom fontFamily inline or override the style in your own wrapper.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.