Bring the engaging, swipeable experience of modern social media directly to your Framer website. The Reel Player is a meticulously crafted React component that replicates the look, feel, and physics of native short-form video players.
Perfect for portfolios, product demos, or creator landing pages, this component grabs attention and keeps users interacting.
Key Features
Authentic Gestures: Supports swipe up/down and mouse wheel scrolling to navigate between videos with physics-based spring animations.
Interactive UI: Tap to pause/play, double-tap to trigger a dynamic flying heart "like" animation, and toggle video sound seamlessly.
Native & Custom Sharing: Includes a share button that uses the Web Share API on supported devices, or falls back to custom URL redirection/clipboard copying.
Dynamic iPhone Mockup: Features a built-in SVG iPhone mockup. Simply choose a base color, and the component automatically calculates cohesive highlights, shadows, and gradients for a photorealistic device frame.
Smart Video Caching: Preloads videos to prevent flashing and spinner states when swiping between reels.
Customization Options
Reels List: Add unlimited reels. For each reel, configure the Video Source (URL or direct File upload), Avatar Image (URL or direct File upload), Username, and Caption.
Appearance Mode: Choose to display the videos inside the dynamic iPhone Mockup, or select "None" for a clean, borderless (or framed) video player.
Device Colors: If using the iPhone mockup, set a single Phone Color, and the component handles the rest.
Custom Framing: If not using the mockup, you have total control over the Frame Padding, Border Radius, Border Width, Border Color, Box Shadow, and Background Color.
Share Settings: Enable "Custom Share URL" to define exactly where users are taken (or what link is copied) when they hit the share button.
Customization Options
Reels List: Total control over individual video files, URLs, profile pictures, and text.
Appearance Mode: Switch between "iPhone" and "None" mockup styles.
Custom Framing: Adjust Frame Padding, Border Radius, Border Width, Box Shadow, and Background Color for the borderless mode.
Share Settings: Enable "Custom Share URL" to define exactly where users are taken when they hit share.
Bring the engaging, swipeable experience of modern social media directly to your Framer website. The Reel Player is a meticulously crafted React component that replicates the look, feel, and physics of native short-form video players.
Perfect for portfolios, product demos, or creator landing pages, this component grabs attention and keeps users interacting.
Key Features
Authentic Gestures: Supports swipe up/down and mouse wheel scrolling to navigate between videos with physics-based spring animations.
Interactive UI: Tap to pause/play, double-tap to trigger a dynamic flying heart "like" animation, and toggle video sound seamlessly.
Native & Custom Sharing: Includes a share button that uses the Web Share API on supported devices, or falls back to custom URL redirection/clipboard copying.
Dynamic iPhone Mockup: Features a built-in SVG iPhone mockup. Simply choose a base color, and the component automatically calculates cohesive highlights, shadows, and gradients for a photorealistic device frame.
Smart Video Caching: Preloads videos to prevent flashing and spinner states when swiping between reels.
Customization Options
Reels List: Add unlimited reels. For each reel, configure the Video Source (URL or direct File upload), Avatar Image (URL or direct File upload), Username, and Caption.
Appearance Mode: Choose to display the videos inside the dynamic iPhone Mockup, or select "None" for a clean, borderless (or framed) video player.
Device Colors: If using the iPhone mockup, set a single Phone Color, and the component handles the rest.
Custom Framing: If not using the mockup, you have total control over the Frame Padding, Border Radius, Border Width, Border Color, Box Shadow, and Background Color.
Share Settings: Enable "Custom Share URL" to define exactly where users are taken (or what link is copied) when they hit the share button.
Customization Options
Reels List: Total control over individual video files, URLs, profile pictures, and text.
Appearance Mode: Switch between "iPhone" and "None" mockup styles.
Custom Framing: Adjust Frame Padding, Border Radius, Border Width, Box Shadow, and Background Color for the borderless mode.
Share Settings: Enable "Custom Share URL" to define exactly where users are taken when they hit share.
