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.

REFUND POLICY

Due to the digital nature of my products, all sales are final, and refunds will not be issued. Please ensure you review all product details carefully before purchasing. If you have any questions or need clarification, feel free to reach out before completing your order.