Filmstrip Silhouette Hero
A saturated field with a multiply-blended silhouette and a thumbnail strip that drives it.
DOM + CSS0 deps1 file · 4 KB TSX
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
// ---------------------------------------------------------------
}Details
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.
