StoryCard

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.