Filmstrip Silhouette Hero
A saturated field with a multiply-blended silhouette and a thumbnail strip that drives it.
- Category
- Heroes
- Added
- 2026-09-20
- Deps
- none
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Harbor Echoes
Props
"use client";
import { useState } from "react";
export function FilmstripSilhouetteHero({
field = "#d32b1e",
brand = "MONTRA",
showStrip = true,
acts,
strip,
}: {
field?: string;
brand?: string;
/** The filmstrip, which doubles as the index and the navigation. */
showStrip?: boolean;
acts: { title: string; by: string; src: string }[];
strip: string[];
}) {
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this heroe
A flat field of one loud colour, a subject reduced to a silhouette inside it, and a strip of frames across the lower third doing double duty as index and navigation. The technique that carries it is the silhouette, and it is not a photograph placed on a colour — it is a photograph turned into the colour. Greyscale, contrast pushed to about 1.9, brightness lifted, then multiply blending, so the light areas of the frame collapse into the field and only the darks survive. That is the difference between something that reads as one printed object and something that reads as a cutout pasted onto a background, and it imposes a real constraint on the source photography: the subject must be shot high-key, because a dark or evenly-lit frame multiplies down into a muddy rectangle. The second decision is that the filmstrip is the control rather than ornament — picking a frame changes both the silhouette and the title — and the progress rule beneath it shows a genuine proportion of index over total rather than an animation. Making the decorative-looking element do real work is most of what separates a template from a mockup.
Curator’s note
Built for viberdy 2.2 as a partial template. The contrast value on the silhouette is the one number worth tuning per photograph.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Edge Sliver Poster Hero
heroesA saturated poster hero whose photographic sliver opens on hover, with live ticket tiers and a countdown.
Type Specimen Hero
heroesA magazine-cover hero where the photograph inverts through the letterforms, pinned to its own stacking context.
Duotone Plate Hero
heroesA real two-colour separation via SVG filters — with the sRGB interpolation flag that everyone leaves out.