CinematicSlideshow

Cinematic Slideshow

Cinematic Slideshow is a premium Framer component built for modern storytelling and immersive visual experiences. It features smooth autoplay transitions, clickable progress navigation, cinematic image animations, customizable text effects, and full typography controls.

Perfect for portfolios, real estate, fashion, agencies, and landing pages, the component helps you create elegant and interactive slideshow sections with minimal setup.

Features

• Smooth autoplay slideshow

• Clickable progress navigation

• Multiple image effects

• Multiple text animations

• Unlimited font customization

• Responsive layout

Marketplace optimizedHow to Use

1. Add the Component

Drag the Cinematic Slideshow component onto your Framer canvas.

2. Add Slides

Inside the properties panel:

Open:

Slides

Then add:

• Image

• Title

Each slide contains:

• One image

• One title

Example:

• Slide 1 → Modern Villa

• Slide 2 → Luxury Interior

• Slide 3 → Urban Living

3. Customize Typography

Open:Font

You can fully customize:

• Font family

• Font size

• Weight

• Spacing

• Line height

This uses Framer’s native font controls, so all installed Framer fonts work automatically.

4. Change Image Animation

Open:Image Effect

Available options:

• Fade

• Zoom

• Slide Up

• Slide Left

This controls how images transition between slides.

5. Change Text Animation

Open:Text Effect

Available options:

• Fade

• Slide Up

• Zoom

• Blur

This controls how the slide titles animate.

6. Adjust Duration

Open:Duration

Controls how long each slide stays visible before moving to the next slide.

Example:

• 2 → fast transitions

• 4 → balanced timing

• 8 → slower cinematic feel

7. Adjust Border Radius

Open:Radius

Controls slideshow corner roundness.

Example:

• 0 → sharp corners

• 20 → modern rounded layout

• 50+ → soft card style

Interaction Behavior

Autoplay

Slides automatically move to the next slide after the selected duration.

Progress Navigation

Clicking on a progress bar instantly changes slides.

Smooth Timing Reset

When users manually change slides:

• Autoplay restarts correctly

• Progress timing resets smoothly

• No animation jump occurs

Tips for Best Results

Use High Quality Images

Cinematic transitions look best with premium visuals.

Keep Titles Short

Shorter titles create a cleaner cinematic feel.

Match Animation Style to Brand

• Zoom → premium luxury feel

• Fade → minimal modern feel

• Slide → dynamic energetic feel

Use Consistent Aspect Ratios

Consistent image dimensions improve visual smoothness.