5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tebe,

About this Component

A polished and highly customizable hero slideshow component built for modern Framer projects. Designed for portfolio pages, product presentations, and immersive landing sections, it combines smooth slide transitions with clean text layout, refined interaction details, and support for both image and video slides.

This component gives you full control over slide content, timing, typography, colors, text visibility, and layout—while keeping the setup simple inside the Framer properties panel.

Core Features

Dynamic Slides Control

Add and manage multiple slide items directly from the properties panel. Each slide supports its own image, title, link, and brightness value.

Video Slide Support

Create immersive slideshow experiences with video backgrounds. Video slides support custom poster images, so you can keep your hero section looking clean, intentional, and polished before playback begins.

Multiple Slide Animations

Choose between Fade and Slide Left transitions to match the mood and pacing of your design.

Auto Progress System

Slides automatically rotate based on a customizable duration setting, with an animated progress line that visually indicates timing.

Flexible Content Visibility

Independently show or hide the Title, Counter, Link, Underline, and Progress Bar depending on the layout you want.

Custom Layout Positioning

Switch between Middle and Bottom layout variants for different content placement styles.

Typography Controls

Independent Fonts

Customize Counter, Title, and Link typography separately using extended font controls.

Advanced Font Styling

Fine-tune font family, size, weight, line height, and letter spacing for each text element individually.

Visual Customization

Per-Slide Brightness

Adjust image brightness for each slide independently to improve readability and visual balance.

Color Controls

Customize text color, progress line track, progress fill, and link underline color to fit your brand or composition.

Text Shadow Support

Enable or disable text shadow and control its color, vertical offset, and blur for improved legibility on top of images.

Interaction Features

Animated Text Appearance

Optionally enable text entrance animation for the counter, title, and link.

Hover Link Underline

Add a clean animated underline effect to the link for a more refined interactive feel.

Hover Animation

When the link is hovered, the background image can respond with increased brightness for added depth and feedback.

Framer Router Navigation Support

Built to work smoothly with Framer navigation logic, including internal route handling.

Best Use Cases

Hero sections
Portfolio showcases
Product highlights
Case study intros
Editorial landing pages
Fullscreen visual storytelling layouts

Built for clarity, flexibility, and premium presentation, this slideshow component fits perfectly into high-end Framer websites that need both strong visuals and precise control.

5a:[["$","$L5d",null,{"post":{"id":"019dcf5e-92e5-7a68-89d9-a695763e8465","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ec079f7a-68a9-4d4b-b29a-9fc363b0b88d","name":"Tory Loves Art","slug":"torylovesart","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ec079f7a-68a9-4d4b-b29a-9fc363b0b88d/6e3f7m3c","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"KIh1ZPLgXTv8TSEJRyO2","resolved":true,"title":"Hero Slideshow","body":"$5e","bodyJson":null,"introduction":"Elegant Animated Slideshow Component","slug":"hero-slideshow","author":{"framerUserId":"ec079f7a-68a9-4d4b-b29a-9fc363b0b88d","name":"Tory Loves Art","slug":"torylovesart","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ec079f7a-68a9-4d4b-b29a-9fc363b0b88d/6e3f7m3c","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/KIh1ZPLgXTv8TSEJRyO2/hero-slideshow-EY6dIFlhQ98DR7bvHrocL2795wBk77","metadata":{"tint":{"h":30,"s":67,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-07T20:16:18.780Z","updatedAt":"2026-05-20T19:34:49.076Z","publishedAt":"2026-04-27T14:36:14.949Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://heroslideshow.framer.website/","price":"19","paymentUrl":"https://contra.com/payment-link/cKP252Gk-hero-slideshow-elegant-animated-slideshow-component","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"C46G5w8hkjIDnGwgcWM2","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":22,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T14:36:14.949Z","updatedAt":"2026-04-27T14:36:14.949Z","reported":false}}],"$L5f"]

Suggested for you