Edge Sliver Poster Hero
A saturated poster hero whose photographic sliver opens on hover, with live ticket tiers and a countdown.
DOM + CSS0 deps1 file · 10 KB TSX
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
// ---------------------------------------------------------------
}Details
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.
