Animation

Compass bar grid

A grid of short bars that all rotate to point at the pointer, so the field reads like iron filings finding a magnet.

Using Compass bar grid

A grid of short bars that all rotate to point at the pointer, so the field reads like iron filings finding a magnet.

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: rows, columns, barLength, restAngle, accent

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

1781Iron filings fieldAnimationA square grid of tiny dashes that all rotate to point at the pointer, like iron filings snapping to a magnet dragged over them.

1818Tilting cube fieldAnimationA grid of hollow cubes that lean toward the pointer within a falloff radius, wander on their own when left alone, and flash outward in rings on a click.

1669Blur revealAnimationA wrapper that keeps its child out of focus and slightly offset until it first enters the viewport, then resolves the blur and closes the gap in one move.

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.

1771Drag tile trackAnimationA tile you can throw around a bounded track that tilts into the drag, resists past the edges and coasts to a stop with momentum.

2155Focus LensAnimationAn outlined shape that stays soft and out of focus everywhere except in a small circle that follows the pointer, where it snaps sharp.