---
title: "StoryCard — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Malik Krechiche · Cards. What it is StoryCard is a clean, Instagram-style stories component for Framer."
canonical: "https://framer.elliotli.dev/component/storycard"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/StoryCard

# StoryCard

[View on Framer](https://framer.com/marketplace/components/storycard/?via=elliot-li)

![StoryCard preview image 1](https://framer.elliotli.dev/og/component/storycard/53e39f63d30fa855/1600x1200.jpg)

## 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 [How rankings work →](/terms#rankings)

-   All · #8988

## Details

- **Author**: Malik Krechiche
- **Price**: $8.00
- **Published**: 2025-10-04
- **Updated**: 2025-10-01
- **Added**: 2025-09-22
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator