Spotlight Testimonial Card Block for React

Edit QUOTE and AUTHOR at the top of the file, and point the link at the full story. Keep the quote to two sentences or so; the panel is sized for about thirty words at the large type size. Use the customer's exact words and ask them first.

A small handler writes the pointer's position onto the panel as two CSS variables, --x and --y. Two decorative layers read them: a radial gradient made from your text colour at 10% with color-mix, and a grid masked by a radial gradient. There is no animation loop; the browser repaints when the variables change. When the pointer leaves, the variables are removed and the light returns to its resting place. The glow is greyscale, so it reads in every preset and keeps the Shine Button as the one primary control.

Touch screens don't follow a finger, so the panel keeps its resting glow. For keyboards, the light moves to whichever control inside the panel has focus (the panel holds none, so the light stays at rest and the Shine Button in the header keeps the standard focus ring) and returns when focus leaves. The effect is decoration only: nothing is hidden or shown by it, and no control depends on it.

The light no longer follows the pointer or focus and stays at its resting place, and the entrance doesn't play.

The quote is a figure with a blockquote and a figcaption for the author, and the star row reads as "Rated 5 out of 5". The glow, the grid and the initials avatar are hidden from assistive technology. The Shine Button in the header reads as the single call to action. The panel's frame and + marks are lines drawn by Guides, which are hidden from assistive technology.

Yes. The quote sits in a bdi so its quotation marks stay at the ends of the sentence, the caption and header follow the reading direction, so the Shine Button moves to the start side. The light follows the pointer's real position on screen, so it needs no change.

On Base UI, the Shine Button renders through render={<a href="…" />} with nativeButton={false}.