Skip to content

Filmstrip Silhouette Hero

A saturated field with a multiply-blended silhouette and a thumbnail strip that drives it.

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

Preview
MONTRA

Harbor Echoes

By Void Division
0104

Props

Show filmstrip
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Featured
NewPro

A saturated poster hero whose photographic sliver opens on hover, with live ticket tiers and a countdown.

heropostereditorial
Featured
NewPro

A magazine-cover hero where the photograph inverts through the letterforms, pinned to its own stacking context.

herotypeblend
Featured
NewPro

A real two-colour separation via SVG filters — with the sRGB interpolation flag that everyone leaves out.

heroduotonesvg-filter