3D Story Mockup: Premium UI Component by Can Girgin

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.