Coyote Labby Coyote Concept

CSS + small JS · custom properties · radial-gradient

Spotlight

A soft glow follows the cursor across the surface and lights the border nearest to it.

Class
.CCSpotlight
Weight
1.2 KB
Needs
CSS + a few lines of JS
Best for
Feature cards, forms, dashboards

Tune it

Every snippet on this page follows these settings.

How Spotlight works

  1. Script writes the cursor's position inside the element into --cc-x and --cc-y on every move.
  2. ::before paints a wide, soft radial glow centred on that point, behind the content.
  3. ::after paints a tighter glow, masked down to a 1px ring, so the border nearest the cursor lights up.
  4. Both fade in on hover and out when the cursor leaves.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCSpotlight">.
  4. Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Spotlight on card, button, input, tabs, dropdown.

More ways to use it

The same class on image card, nav bar, modal.

Pairs well with

Avoid on the same element Moonrise (::after, ::before), Border Beam (::after), Glare Sweep (::after), 3D Tilt (::after).

Browser support

Chrome & Edge111+
Safari16.2+
Firefox113+

Older browsers show the element without the effect: nothing breaks.

Accessibility

  • Decorative only.
  • The border light also shows on keyboard focus inside the element.
  • No motion of its own, so it's safe under reduced motion.

Performance

  • 1.2 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Spotlight

How do I add Spotlight to a button?

Add the class CCSpotlight next to CCButton, inside an element with the CCTheme class, then include the Spotlight CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Spotlight need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Spotlight?

Chrome and Edge 111+, Safari 16.2+ and Firefox 113+. Older browsers show the element without the effect, so nothing breaks.

Is Spotlight accessible?

Decorative only. The border light also shows on keyboard focus inside the element. No motion of its own, so it's safe under reduced motion.