---
title: "3D Story Mockup — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Can Girgin · Interactive. Whether you need a high-fidelity device mockup for your designs or a complete, interactive story player, 3D Story Mockup…"
canonical: "https://framer.elliotli.dev/component/3d-story-mockup"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/3D Story Mockup

# 3D Story Mockup

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

![3D Story Mockup preview image 1](https://framer.elliotli.dev/og/component/3d-story-mockup/647f5d6137e581fc/1600x1200.jpg)

## Summary

Whether you need a high-fidelity device mockup for your designs or a complete, interactive story player, 3D Story Mockup is your ultimate solution.

## Description

## The All-in-One Mockup and Story Player for Framer.

Whether you need a high-fidelity **device mockup** for your designs or a complete, **interactive story player**, 3D Story Mockup is your ultimate solution.

Stop sending users to other platforms. With 3D Story Mockup, you can capture attention with immersive, full-screen stories right on your website. Announce new features, showcase portfolio pieces, or create beautiful tutorials in a format that feels modern and familiar. Or, simply turn off playback to use it as a stunning, static iPhone mockup.

## Core Features

-   **Dual Mode:** Use it as a dynamic **Story Player** or as a beautiful, static **iPhone Mockup** to display your images and designs.
    
-   **Rich Media Support:** Easily use **images or videos** for each story.
    
-   **Interactive Playback:** Full story functionality including auto-play, pause-on-hover, tap/swipe navigation, and looping.
    
-   **Animated Progress Bars:** Clear, intuitive progress bars automatically guide the user.
    
-   **Stunning iPhone Mockup:** A realistic device frame with a sleek Dynamic Island.
    
-   **3D Parallax Effect:** An eye-catching 3D tilt effect on hover that adds depth and a premium feel.
    

## Unmatched Customization

**Everything is customizable** to perfectly match your brand and vision.

-   **Mockup Controls:**
    
    -   Show or hide the mockup entirely.
        
    -   Adjust the mockup's color, width, and scale.
        
    -   Toggle details like the Dynamic Island and side buttons.
        
-   **Content Styling:**
    
    -   Easily add and style **titles, subtitles, and call-to-action (CTA) buttons** to each story.
        
    -   Full control over fonts, sizes, and colors.
        
-   **Advanced Behavior:**
    
    -   Includes keyboard navigation, scroll-to-play triggers, and a "reduce motion" option for accessibility.
        

## Perfect For:

-   Product Updates & Feature Announcements
    
-   Portfolio Case Studies
    
-   Displaying App Screenshots
    
-   User Onboarding & Mini-Tutorials
    
-   Personal Blogs & Travel Diaries
    

All options are neatly organized in the property panel with clear English descriptions.

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

-   All · #10200

## Details

- **Author**: Can Girgin
- **Price**: $7.00
- **Published**: 2025-09-19
- **Updated**: 2025-12-15
- **Added**: 2025-09-13
- **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