component
StoryCard
By Malik Krechiche
Details
- Malik KrechicheAuthor
- componentType
- $8.00Price
- 2025-10-04Published
- 2025-10-01Updated
- 2025-09-22Added
- CardsCategories
Summary
What it is StoryCard is a clean, Instagram-style stories component for Framer.
Description
What it is StoryCard is a clean, Instagram-style stories component for Framer. It auto-advances through slides with animated top progress bars and supports tap left/right navigation, all editable in the right panel with zero external dependencies. Features - Auto-advance with animated progress bars - Tap left/right to navigate slides - Edit images, titles, text per slide in Framer (no code) - Loop on/off, custom duration per slide - Radius & shadow controls - Lightweight: pure React + inline styles Props (in the right panel) - Segments (Array) : for each slide set `image`, optional `date`, `title`, `text`, `link` - Duration (s) : slide duration - Loop : restart when last slide ends - Radius : corner radius - Shadow : toggle soft shadow How to use 1) Add → Code → StoryCard 2) Set the frame size (e.g. 360×560 or any ratio) 3) Add 2+ items in Segments to see auto-advance 4) Edit date/title/text directly in the panel Notes - A default marketing line is provided when text is empty. - No external libraries required. Version & Support v1.0.0 — by 0xMal1k . For support, contact DMs.
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #8970