Animation

Diagonal Glare Sweep

A wrapper that slides a narrow band of light diagonally across whatever it contains when the pointer or keyboard focus arrives.

Using Diagonal Glare Sweep

A wrapper that slides a narrow band of light diagonally across whatever it contains when the pointer or keyboard focus arrives.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: angle, bandWidth, duration, glareColor, intensity, playOnce

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2206Pointer MagnetAnimationA wrapper that lets whatever it holds drift toward the pointer while it is inside a padded catch zone, then glide back to rest.

1763Bobble tile gridAnimationA grid of colored tiles that bobble away from the pointer on a spring, bouncing harder the faster the pointer swept across them.

1676Composable RevealAnimationOne reveal wrapper whose slide, fade, zoom and defocus parts can each be switched on and combined into a single spring transition.

1780Interruptible hover swellAnimationA tile whose two stage hover swell always starts from its current size, so darting the pointer on and off never makes it snap.

1721Magnetic pull targetAnimationA tile that leans toward the pointer whenever it comes inside a set radius, pulling harder the closer it gets and easing home when the pointer leaves.

2203Peelable stickerAnimationA vinyl sticker you can drag around its area, whose edge lifts off the surface on hover and peels further while you hold it.