Reveal Highlight

A light that follows your pointer and shows which parts of the page you can interact with.

Wrap a component with ax-reveal and it lights up when your pointer comes close: its border catches the light first, then its inside when the pointer is over it. Press it and a ripple spreads from your finger.

Reveal Highlight runs on Surface, so it only works for components on the screen, and draws much less while you move your pointer. Every look is a custom property: you style it in CSS, together with the rest of your component.

Installation

shell 
npm install @ax-design/reveal-highlight

and import it:

js 
import { register } from '@ax-design/reveal-highlight';
register();

If you don't use a bundler, load the script instead:

html 
<script src="https://unpkg.com/@ax-design/reveal-highlight/build/main.js"></script>
<script>AxRevealHighlight.register();</script>

Buttons

The basic use: wrap each button with ax-reveal. Move your pointer between the buttons and the borders around it light up, the closer the brighter.

Give the light a color that stands out from the background. On a dark background white works best.

Try it

#FFFFFF
0.4
1 px
html 
<ax-reveal>
  <button class="my-button">Welcome</button>
</ax-reveal>
css 
ax-reveal {
  --reveal-color: rgb(255, 255, 255);
  --reveal-opacity: 0.4;
  --reveal-border-width: 1px;
}

Hover light

While your pointer is over a component, a soft light fills its inside. The fill radius is relative to the size of the component: 1.5 lights a bit more than the component itself.

Turn it off when only the borders should react, for example on a busy list.

Try it

1.5
css 
ax-reveal {
  --reveal-hover-light: true;
  --reveal-hover-light-fill-radius: 1.5;
}

Press

Press a button and hold it: a ripple spreads from where you pressed, and speeds up when you let go.

The speed is in milliseconds for the ripple to cover the component; the accelerate rate is how much faster it finishes after the release.

Try it

2000
6
css 
ax-reveal {
  --reveal-press-animation: true;
  --reveal-press-animation-speed: 2000;
  --reveal-release-animation-accelerate-rate: 6;
}

Borders far away

By default the borders of every component near your pointer light up, also when the pointer is outside of them. Turn diffuse off and only the component under your pointer lights its border.

Try it

css 
ax-reveal {
  --reveal-diffuse: true;
}
Press me

With Surface

Reveal Highlight is also a layer of ax-surface. The light then follows the shape of the surface, corners and bites included, and stays under your pointer while the surface tilts.

Press the shape: it tilts toward your finger, and the border keeps the same width all around.

Try it

24 %
js 
import { register } from '@ax-design/surface';
import { registerRevealLayer } from '@ax-design/reveal-highlight';

registerRevealLayer();
register();
html 
<ax-surface class="my-shape" layers="fill reveal">...</ax-surface>
css 
.my-shape {
  --ax-radius: 24%;
  --ax-corner-shape: round;
  --ax-tilt-mode: absolute;
}

Reference

--reveal-color property

<color>, default rgb(0, 0, 0)

The color of the light, for the border, the hover light and the ripple unless they have colors of their own.

--reveal-opacity property

<number>, default 0.26

How bright the light is at its center.

--reveal-border-width property

<length>, default 1px

The width of the border light. Set --ax-border-width instead on ax-surface.

--reveal-border-color property

<color>

The color of the border light, when it differs from --reveal-color.

--reveal-border-fill-radius property

<number>, default 1.5

How far the border light reaches, relative to the size of the component.

--reveal-hover-light property

true | false, default true

Fill the component with light while the pointer is over it.

--reveal-hover-light-color property

<color>

The color of the hover light, when it differs from --reveal-color.

--reveal-hover-light-fill-radius property

<number>, default 1.5

How far the hover light reaches.

--reveal-hover-light-fill-radius-mode property

relative | absolute, default relative

relative: the fill radii are relative to the size of the component. absolute: they are in px.

--reveal-diffuse property

true | false, default true

Light the borders of components near the pointer, not only the one under it.

--reveal-press-animation property

true | false, default true

Spread a ripple from where the component is pressed.

--reveal-press-animation-color property

<color>

The color of the ripple, when it differs from --reveal-color.

--reveal-press-animation-radius-mode property

cover | constrained, default cover

cover: the ripple grows until it covers the component. constrained: it stops at the hover light radius.

--reveal-press-animation-speed property

<number>, default 2000

Milliseconds for the ripple to cover the component.

--reveal-release-animation-accelerate-rate property

<number>, default 6

How much faster the ripple finishes after the release.

borderDetectionMode method

register({ borderDetectionMode: 'strictEdge' | 'experimentalAutoFit' }), default 'strictEdge'

strictEdge lights the components only while your pointer is inside their ax-reveal-bound. experimentalAutoFit also lights them while your pointer is close to the boundary.