---
title: "ScreeningHero — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Hamim Reza · Sections. ScreeningHero is a dark, editorial hero carousel for Framer built for screenings and event announcements, with a draggable filmstrip,…"
canonical: "https://framer.elliotli.dev/component/screeninghero"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/ScreeningHero

# ScreeningHero

Editorial hero carousel for events

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

![ScreeningHero preview image 1](https://framer.elliotli.dev/og/component/screeninghero/1eda83d46066eb73/1600x1200.jpg)

## Summary

ScreeningHero is a dark, editorial hero carousel for Framer built for screenings and event announcements, with a draggable filmstrip, animated headline, and per-slide date, time,…

## Description

ScreeningHero is a dark, editorial hero carousel for Framer built for screenings and event announcements, with a draggable filmstrip, animated headline, and per-slide date, time, and venue details.

Each slide carries a full-bleed tinted image, an animated headline with credit line, and a meta block for date, time, and location, exactly what a screening or live event needs up front. A draggable filmstrip sits below with wheel, keyboard, and touch navigation.

### **WHAT IT DOES**

Add slides with an image, title, credit, accent color, and meta fields. Visitors navigate by dragging the filmstrip, scrolling with the wheel, arrow keys, or prev/next. Every switch animates the headline, swaps the tinted background, and updates the progress rail.

### **KEY FEATURES**

-   Per-slide accent color tint blended directly into the background image
    
-   Animated film-grain noise texture for a textured backdrop
    
-   Draggable filmstrip, active and inactive card states
    
-   Wheel, keyboard, drag, and click navigation, gesture-locked triggers
    
-   Meta block per slide, date, time, venue, or any custom labels
    
-   Animated headline and credit line transitions per slide
    
-   Numbered progress rail showing current position
    
-   Autoplay pauses on hover, drag, focus, or when off-screen
    
-   Reduced-motion support, falls back to instant transitions
    
-   Responsive layout via ResizeObserver
    
-   Full typography and color controls
    

### **WHY IT WORKS**

Generic hero carousels show an image and a headline. ScreeningHero is built around the information a screening or live event needs at a glance, without losing the cinematic, editorial feel of a magazine layout.

### **PERFECT FOR**

Film festivals, gallery exhibitions, live event pages, and any Framer site presenting a schedule of dated, located events.

### **WHAT'S INCLUDED**

A single drop-in component. Add slides with image, title, credit, meta details, and accent color, then tune typography and colors through property controls.

Drop it in, load your program, and let the hero do the announcing.

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

-   All · #3501

## Details

- **Author**: Hamim Reza
- **Price**: $12.00
- **Published**: 2026-09-01
- **Updated**: 2026-09-01
- **Added**: 2026-09-01
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove