Wrap any element. A light travels its edge and follows the pointer.
npm i @craftedstudios/shaders
The same effects, drawn as a thin outline around something of yours: a button, a card, a field. A light travels the edge and comes to the pointer when it is near, with a faint glow where it passes. Your element is left as it is; the outline is laid over it and lets clicks through.
import { Outline } from '@craftedstudios/shaders/react'; <Outline seed="checkout"> <button>Get started</button> </Outline>
Wrap one element. The outline measures it, so it follows the element's size and its rounded corners. If your element moves or scales on press, put that on the Outline instead, so the two move together.
Outline
seed
effect
auto
linear
radial
thermal
topography
plasma
colors
thickness
1
glow
0.5
light
both
circle
pointer
speed
motion
still
radius
Six metals are for outlines only, and a seed never picks them: ask for one by name. Each keeps its own colors unless you pass yours, and its highlights bloom a little past the edge.
chrome
liquid-metal
gold
rose-gold
titanium
iridescent
Without React, outline() takes an element that is already on the page. For one that can't hold anything inside it, like an input, wrap it and outline the wrapper.
outline()
import { outline } from '@craftedstudios/shaders'; const o = outline(button, { seed: 'checkout' }); o.update({ effect: 'gold', thickness: 2 }); o.destroy();