Skip to content

Edge Sliver Poster Hero

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

Probrutalisteditorialplayful
Category
Heroes
Added
2026-09-20
Deps
none
Updated
2026-09-21

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
Blackhorse Yard
Unit 4 · E17
Four rooms, one long bar,
and a licence that runs
until the trains start

NOCTURNE
ROOMS®

Doors in
—
Selected
Standard · £26
nocturnerooms.club

Props

Show photo sliver
No runtime dependencies
"use client";

import { useCallback, useRef, useState } from "react";

const WAYS = [
  { id: "magenta", field: "#f5a3f5", ink: "#0a0a0a", label: "Magenta" },
  { id: "acid", field: "#d6ff00", ink: "#0a0a0a", label: "Acid" },
  { id: "signal", field: "#ff3b1f", ink: "#0a0a0a", label: "Signal" },
  { id: "bone", field: "#e8e6e1", ink: "#0a0a0a", label: "Bone" },
];

type Tier = { id: string; label: string; price: number; left: number };

const TIERS: Tier[] = [
  { id: "early", label: "Early", price: 18, left: 0 },
  { id: "std", label: "Standard", price: 26, left: 64 },
  { id: "late", label: "Late entry", price: 32, left: 140 },
];

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this heroe

A hero section usually resolves one of two ways: a photograph filling the page with text laid over it, or no photograph at all. This is the third option. A strip about a tenth of the page wide runs down the leading edge, cropped so tightly that it registers as colour and texture rather than as a picture — the page gets a subject without surrendering the flat field, which is exactly what lets the type stay enormous and unshaded. The load-bearing detail is the wash: the field colour is laid back over the photograph with hard-light blending, so the strip belongs to the palette instead of sitting next to it. Remove that one span and the composition falls apart into a colour block with a stray image beside it. The strip now opens on hover and focus, and the restraint there matters — only the width animates, so the photograph is uncovered rather than stretched, and scaling the image instead is the version that looks cheap. Underneath the poster is something you can actually act on: tiers carry real remaining counts, a sold-out tier is genuinely disabled and struck through rather than merely dimmed, and the countdown is written through a ref instead of state, so a cosmetic figure never re-renders the hero and never disagrees with the server.

Curator’s note

Rebranded for 2.4 — the original copy was lifted straight from a reference image, which is exactly the thing this library must not ship. The layout technique is ours; the wording was not.

Related

Pairs well with

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

Featured
NewPro

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

herogalleryevent
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