---
title: "Instagram Story — Free Framer component · Best of Framer"
description: "Free Framer component · by Endra Kuornie · Interactive. Create engaging Instagram-style stories on your website with this interactive Story Viewer component."
canonical: "https://framer.elliotli.dev/component/instagram-story"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Instagram Story

# Instagram Story

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

![Instagram Story preview image 1](https://framer.elliotli.dev/og/component/instagram-story/21a69246a8ddb0e7/1600x1200.jpg)

## Summary

Create engaging Instagram-style stories on your website with this interactive Story Viewer component.

## Description

Create engaging Instagram-style stories on your website with this interactive Story Viewer component. Perfect for showcasing products, announcements, or visual narratives with automatic progression and smooth transitions.

**Key Features:**

-   **uto-Play Stories**: Automatically cycles through images with customizable duration per slide
    
-   **Interactive Navigation**: Click left or right side to navigate between stories - **Visual Progress Bars**: Shows progress for each story with customizable colors and height
    
-   **Pause on Hover**: Optionally pause playback when users hover over the component - **Smooth Transitions**: Beautiful fade animations between stories (0.5s easeInOut)
    
-   **Fully Customizable**: Adjust border radius, progress bar styling, and timing
    
-   **Responsive Design**: Works perfectly at any size with object-fit cover for images
    
-   **Use Cases:** - Product showcases and launches - Behind-the-scenes content - Step-by-step tutorials - Event highlights - Promotional campaigns - Portfolio presentations
    

**How to Use:** Simply add the component to your canvas, upload your images, and set the duration for each story.

## Rank history [How rankings work →](/terms#rankings)

-   All · #3073

## Details

- **Author**: Endra Kuornie
- **Published**: 2025-11-25
- **Updated**: 2025-11-25
- **Added**: 2025-11-09
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase