Skip to content

1440 × 900

Tambour Beacon

A hero over tambour set on the sill of the glass: the claim, the support and the button in one band along the black floor, catching the light's colour as it slides above them.

Preview only — the code isn’t included

tambour puts its light high in the frame and leaves a black floor under it, so this hero sets everything it says along that floor in one band, read left to right like a placard under a picture: the claim, the line of support, the button.

The light is kept on a rail. It still follows your cursor, but only sideways, so it never slides behind the copy, and the copy is on black at every moment, not just at rest. The words catch the light: the claim and the support take a pale wash of its own colours, cyan under its narrow end and pink under its broad one, and the wash moves with it as it slides.

The button calls the light. Hover it, or tab to it, and the light slides along the rail until its brightest part sits over the button, brightens, and lights the button's top edge, so the keyboard gets what the pointer gets. With reduced motion the light holds where the reference has it, and the wash holds under it.

Preview only. This section's code isn't offered to copy.

Details

Kind
Hero
Stack
React · TypeScript
Licence
Free
Added
26 Sep 2026
Tags
background, bottom-aligned, launch, pointer-driven

Its light

  • 68%
  • 14%
  • 8%
  • 6%
  • 4%

Start with a background.

The backgrounds are the most finished corner of the catalogue. Take one and drop it under your own copy.

Browse backgrounds