About this component

A card built around a rotating compass rose. The cardinal and intercardinal directions pulse with magnetic energy. Hovering aligns the compass needle toward a 'hidden north' — the cursor position. Clicking locks the bearing and displays directional data.

Difficulty

Intermediate

Style

Spin / Rotation / Flip

Frameworks

HTML/CSS, Tailwind, React, Vue, Angular, Svelte, LWC

Embed this component

Paste this snippet into any site — the design renders in a sandboxed iframe served from /embed/compass-rose-card.