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