Magnet Lines

`<pura-magnet-lines>` lays out a grid of short ticks that rotate to point at the cursor like compass needles, the hypnotic hero effect popularized by React Bits' Magnet Lines. The pure template renders the whole grid at the resting `base-angle`, so SSR and pre-JS paint a clean static field; on the client each line is aimed with `atan2(pointer - cell center)` on `pointermove`, writing one CSS custom property per cell, throttled to one update per animation frame. `rows` and `columns` size the grid (capped at 30 each) and slotted content layers above the field. Theming goes through `--pura-magnet-lines-color`, `--pura-magnet-lines-width` and `--pura-magnet-lines-height`. Under reduced motion the pointer listener is never attached and the field holds the resting angle. Each instance registers in `window.__puraMagnetLiness` by `data-pura-id` with `{ rows, columns, aim }`, where `aim(x, y)` points the field at viewport coordinates programmatically.

Preview

<!-- default 9x9 compass field, square by default -->
<pura-magnet-lines style="width: 420px;"></pura-magnet-lines>

<!-- hero banner: denser tinted field with content layered above -->
<pura-magnet-lines rows="9" columns="18" base-angle="-25"
  style="height: 60vh; --pura-magnet-lines-color: #8b5cf6; --pura-magnet-lines-height: 2rem;">
  <h1 style="margin: 0; padding-top: 24vh; text-align: center;">Point at me</h1>
</pura-magnet-lines>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/magnet-lines.js"></script>

import "./pura/lib/magnet-lines.js";