FilmstripHero

FilmstripHero 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.