Visionary Video Hero Slider brings cinematic storytelling to your Framer site with an immersive, tag-based hero slider designed for portfolios, product showcases, and media-rich landing pages. It seamlessly blends video and image content with interactive overlays and smooth navigation.
Multi-Media Support: Mix videos and images in a single slider with support for both URL and file uploads.
Tag-Based Organization: Group slides by custom tags for category-specific navigation with automatic filtering.
Smart Progress Bar: Automatically calculates and displays real-time progress based on actual video durations and tag groups.
Interactive Overlays: Add time-based text overlays with tooltips and clickable links that appear during specific moments of video playback.
Motion Sensitivity: Mouse-tracking panorama on desktop and gyroscope-based parallax on mobile for depth and immersion.
Intelligent Gallery View: Grid-based thumbnail gallery with hover-to-play previews and active slide highlighting.
Mobile-First Responsiveness: Fully optimized touch interactions, mobile UI adjustments, and responsive layouts across all screen sizes.
Advanced Video Controls: Play/pause, mute/unmute, and automatic progression with smooth transitions between slides.
Customizable Styling: Full control over colors (tint, text, gallery background, progress bar), fonts, and visual effects (zoom, panorama strength).
Auto-Play Logic: Smart autoplay that respects user interactions, pauses on overlay hover, and handles gallery navigation seamlessly.
Flexible Dimensions: Configure width and height with support for px, %, vh, and vw units.
Creative Portfolios: Showcase video reels, project walkthroughs, and visual case studies with interactive hotspots.
Product Launches: Present product features with timed overlays that highlight key selling points during video demos.
Media & Entertainment: Display trailers, showreels, or event highlights organized by category tags.
Brand Storytelling: Create immersive brand experiences with parallax effects and cinematic transitions.
Agency Websites: Demonstrate client work across different industries using tag-based navigation.
Perfect for designers and agencies who want to create stunning, interactive hero sections that capture attention and guide visitors through rich visual narratives.
Puskal Kafle
