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.
Hoshine
