Reel Player

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.

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.