3D Story Mockup

3D Story Mockup
3D Story Mockup

About 3D Story Mockup

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.

From Can Girgin

PromoBar
Cookie Banner Pro
Gradient Type Waves
Neural Logic Graph

Related Components

3D Flipping Book
3D Viewer
AI Chat Prompt
Bordered Tooltip