Edge Sliver Poster Hero
A saturated poster hero whose photographic sliver opens on hover, with live ticket tiers and a countdown.
- 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.
and a licence that runs
until the trains start
NOCTURNE
ROOMS®
Props
"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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
A saturated field with a multiply-blended silhouette and a thumbnail strip that drives it.
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.