HeroSlider — Cinematic Hero Slides

Key Features

• Cinematic Transitions

  • Slide → clean and modern

  • Dissolve → soft blur + premium fade

  • Cube → bold 3D rotation

  • Parallax → depth-driven movement

  Image-First Design

  • Full-screen background visuals

  • Built-in vignette for readability

  • Text overlays that never overpower imagery

  Smooth Autoplay

  • Adjustable timing

  • Seamless looping

  • Disabled in canvas for easier editing

  Elegant Progress UI

  • Minimal progress line

  • Circular timer for a premium feel

  Flexible Navigation

  • Clean text controls (BACK / NEXT)

  • Modern glass-style arrow icons

  Responsive by Default

  • Scales beautifully across devices

  • Optimized spacing for mobile

Fully Customizable

• Images, titles, and tags per slide

• Transition style (4 options)

• Accent color (UI + progress)

• Typography (font, size, weight)

• Navigation style

• Progress type (line or circular)

• Layout spacing & padding

• Toggle UI elements on/off

Why it works

Most sliders compete with your visuals.This one supports them.

• Motion adds depth without noise

• UI stays subtle and intentional

• Users focus on what matters: your images

What You Get

• Plug-and-play Framer component

• Smooth, high-performance animations

• Clean structure with full control

• Built for modern, visual-first design systems