StoryCard
Instagram-style story slider for Framer. Auto-advance with progress bars, per-slide image/title/text, loop, radius & shadow controls and no dependencies.
Make it with Workshop
Build your own component with AI
Instagram-style story slider for Framer. Auto-advance with progress bars, per-slide image/title/text, loop, radius & shadow controls and no dependencies.
Make it with Workshop
Build your own component with AI
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.
