Upgrade your website’s media experience with the Minimal Video Player, a custom-built HTML5 video component designed natively for Framer. Gone are the days of rigid, unstyleable default browser players. This component introduces a soft, neumorphic aesthetic with buttery-smooth micro-interactions, while fully supporting the native capabilities you expect from Framer's default video component.
Key Features:
- Native Framer Power: Supports URL or direct file uploads, autoplay, looping, muting, object-fit settings, and custom poster images—just like Framer's native player.
- Neumorphic Design: Soft, transitioning shadows give the player a tactile, physical feel.
- Morphing Play Controls: A custom SVG play/pause button that smoothly animates and depresses when activated.
- Interactive Timeline: A fully custom progress bar that supports smooth click-and-drag scrubbing to easily seek through your videos.
Customization Options:
- Colors & Styles: Full control over the player background, icon colors, and video background.
- Progress Bar: Choose between a solid color or a customizable two-color gradient for the timeline fill.
- Shadows: Customize both the light and dark shadow colors (with RGBA support) to perfectly match your site's background, whether it's light, dark, or tinted.
- Border Radii: Independently adjust the corner roundness of the outer container, the inner video, and even the play/pause button.
- Start Time: Set a specific percentage for the video to begin playing from.
- Disable Animations: A built-in toggle to disable the morphing icons and shadow transitions for accessibility or performance preferences.
Performance & Accessibility:
- Highly optimized using Framer's `useIsStaticRenderer` to ensure zero performance overhead while editing on the canvas.
- Smooth `requestAnimationFrame` loop for progress updates, which automatically cleans up when paused.
- Fully semantic HTML5 video tag usage.
Upgrade your website’s media experience with the Minimal Video Player, a custom-built HTML5 video component designed natively for Framer. Gone are the days of rigid, unstyleable default browser players. This component introduces a soft, neumorphic aesthetic with buttery-smooth micro-interactions, while fully supporting the native capabilities you expect from Framer's default video component.
Key Features:
- Native Framer Power: Supports URL or direct file uploads, autoplay, looping, muting, object-fit settings, and custom poster images—just like Framer's native player.
- Neumorphic Design: Soft, transitioning shadows give the player a tactile, physical feel.
- Morphing Play Controls: A custom SVG play/pause button that smoothly animates and depresses when activated.
- Interactive Timeline: A fully custom progress bar that supports smooth click-and-drag scrubbing to easily seek through your videos.
Customization Options:
- Colors & Styles: Full control over the player background, icon colors, and video background.
- Progress Bar: Choose between a solid color or a customizable two-color gradient for the timeline fill.
- Shadows: Customize both the light and dark shadow colors (with RGBA support) to perfectly match your site's background, whether it's light, dark, or tinted.
- Border Radii: Independently adjust the corner roundness of the outer container, the inner video, and even the play/pause button.
- Start Time: Set a specific percentage for the video to begin playing from.
- Disable Animations: A built-in toggle to disable the morphing icons and shadow transitions for accessibility or performance preferences.
Performance & Accessibility:
- Highly optimized using Framer's `useIsStaticRenderer` to ensure zero performance overhead while editing on the canvas.
- Smooth `requestAnimationFrame` loop for progress updates, which automatically cleans up when paused.
- Fully semantic HTML5 video tag usage.
