---
title: "CinematicSlideshow — Framer component · Best of Framer"
description: "$5.00 · Framer component · by piyush vichare · Carousels. Create immersive visual stories fast"
canonical: "https://framer.elliotli.dev/component/cinematicslideshow"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/CinematicSlideshow

# CinematicSlideshow

Create immersive stories, faster

[View on Framer](https://framer.com/marketplace/components/cinematicslideshow/?via=elliot-li)

![CinematicSlideshow preview image 1](https://framer.elliotli.dev/og/component/cinematicslideshow/f81fc4cf4913c793/1600x1200.jpg)

## Summary

Create immersive visual stories fast

## Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #851

## Details

- **Author**: piyush vichare
- **Price**: $5.00
- **Published**: 2026-05-26
- **Updated**: 2026-09-30
- **Added**: 2026-05-18
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view