Cinematic Crossfade

Cinematic Crossfade is a cinematic slider featuring smooth image and video transitions, subtle Ken Burns zoom effects, and staggered word-by-word headline animations. With customizable slide content, typography, overlays, and progress indicators, it’s perfect for creative portfolios, travel websites, hospitality brands, and immersive landing pages.

Customize Options

1. Slides & Content

- Slides – Add multiple slides with images or videos, titles, descriptions, and clickable links.

2. Timing & Animation

• Slide Duration – Set how long each slide displays.

• Fade Duration – Adjust the transition speed between slides.

• Ken Burns Zoom – Control the zoom intensity.

• Pause on Hover – Pause the slideshow when hovered or focused.

3. Layout & Spacing

• Side Padding – Adjust horizontal content spacing.

• Bottom Padding – Set the distance between the content and the bottom edge.

• Title → Desc – Customize the gap between the title and description.

• Bottom Shade – Adjust the dark gradient overlay for text readability.

4. Progress Indicators

• Show – Toggle progress indicators on or off.

• Color – Customize the progress indicator color.

• Gap – Adjust the spacing between indicators.

• Thickness – Set the indicator bar thickness.

• Bottom Offset – Adjust the distance of indicators from the bottom edge.

5. Typography & Color

• Title Font – Customize headline font, size, weight, and other font properties.

• Desc Font – Customize description typography.

• Text Color – Change the color of the text.

Additional Features

• Supports image and video slides.

• Includes clickable slide links.

• Automatically pauses animations when outside the viewport.

• Respects reduced-motion preferences.

• Supports static rendering in the Framer editor.