Bring your TikTok and Instagram content to life inside Framer. Drop in videos or images into a realistic 3D-tilting iPhone mockup with smooth playback and swipe navigation. Includes ambient glow, floating stats cards, verified badge, and a live demo mode.
Live Preview: https://socialmediamockup.framer.website
iPhone Social Media Mockup brings your TikTok and Instagram content into Framer inside a photorealistic iPhone frame, complete with 3D tilt interaction, smooth media playback, and floating analytics cards. Built for landing pages, agency portfolios, and product showcases where communicating social media presence needs to feel as polished as the content itself.
The iPhone frame renders with physical accuracy, including side buttons, layered inner shadows, and a dynamic glare effect that shifts with the cursor. A spring-based 3D tilt tracks mouse movement in real time, giving the device a tactile, premium feel that static mockup images simply cannot replicate. Frame color switches between Titanium and Black, and phone size scales to fit any layout without breaking proportions.
Media playback supports up to five items, mixing videos and images in any order you define. Videos play automatically, loop optionally, and hand off to the next item when they end. Images advance after a configurable duration with a smooth crossfade. A dot indicator tracks the active item, and swipe gestures work on touch devices, making the feed feel genuinely interactive.
The social UI layer sits over the media with a blurred username pill, circular avatar, and a verified badge. These controls are fully exposed in the property panel, so you can represent any social media creator, brand account, or TikTok or Instagram profile without modifying the source code.
Floating analytics cards can be toggled on the left, right, and bottom of the device. Each card supports a custom title, value, badge label, positive or negative color state, and an optional sparkline chart, all animating with a gentle continuous float. These make the component equally useful for social media dashboards, SaaS marketing pages, and creator economy landing pages.
Ambient glow color, intensity, tilt strength, and phone size are all controlled directly from Framer's property panel. A built-in demo mode activates a live canvas toolbar for resizing and recoloring the device in real time, making client presentations seamless without leaving the editor.
What's Included
Photorealistic iPhone frame with Titanium and Black color options, physical button detail, and layered inner shadows
Media player supporting up to 5 videos and images in any custom order
Fully responsive design optimized for desktop, tablet, and mobile breakpoints
3D tilt effect with spring physics that tracks cursor position in real time
Dynamic glare overlay that shifts across the screen as the device tilts
Ambient glow with adjustable color and intensity
Username overlay with circular avatar, name label, and verified badge
Dot indicator for multi-item media navigation with swipe and click support
Three independent floating analytics cards (left, right, bottom) with title, value, badge, color state, and optional sparkline chart
Continuous floating animation on all stat cards
Demo mode with a live canvas toolbar for resizing and recoloring the device
Full Framer property controls
How It Works
Add the component to your Framer canvas and upload up to five videos or images through the Media property group. Set the playback order using the Order array control, configure autoplay, loop behavior, and image duration independently.
Enter a username and upload an avatar image to activate the social overlay. Toggle the verified badge on or off from the property panel. Enable any combination of the three floating stat cards and fill in titles, values, and badge labels to match your data narrative.
Switch the frame between Titanium and Black, adjust the phone size, and tune the ambient glow color and intensity until the mockup fits your layout. Turn on Demo Mode to present the component live on canvas with an interactive size slider and frame switcher — no preview link required.
Use Cases
Social media agency portfolios showcasing client content and account metrics
TikTok and Instagram creator landing pages with engagement stats
SaaS and creator economy marketing pages featuring platform integrations
Product demos and pitch decks for social media tools and analytics dashboards
App store preview mockups for video-first mobile applications
Interactive storytelling and editorial layouts with embedded video content
Conference and event presentations requiring a live, animated phone mockup
Keywords
iphone mockup, social media mockup, tiktok mockup, instagram mockup, phone mockup, video mockup, 3d phone mockup, animated iphone, social media component, tiktok framer component, instagram component, short form video mockup, vertical video mockup, iphone frame component, social media phone frame, creator landing page, floating stats cards, analytics card framer, social media dashboard, phone tilt effect framer, ambient glow mockup, verified badge, video player framer, media mockup, iphone 3d tilt framer, social proof component framer, engagement stats, content creator mockup, framer phone component, framer social mockup, responsive phone mockup, framer video component, black iphone mockup, titanium iphone mockup, framer no code mockup, interactive phone mockup, avatar overlay, marketing component, agency portfolio
Ahmet Loca
