Magnet Lines

# Brok UI: Magnet Lines (`magnet-lines`)

A grid of short lines that each rotate to point toward the cursor, creating a magnetic-field look; reduced motion holds every line at its base angle.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add magnet-lines
```

## Usage

```blade
<x-ui.magnet-lines class="text-primary" />
```

## Props

- `rows` (int, default `9`) — Number of grid rows.
- `columns` (int, default `9`) — Number of grid columns.
- `lineColor` (string, default `foreground`) — Line colour token: primary, muted, or foreground.
- `lineWidth` (string, default `2px`) — CSS width of each line.
- `lineHeight` (string, default `1.5rem`) — CSS height (length) of each line.
- `baseAngle` (int, default `-10`) — Resting rotation in degrees when no pointer is tracked or motion is reduced.
- `gap` (string, default `1rem`) — CSS gap between grid cells.

## Use when

- Use only when visual expression supports storytelling, brand differentiation, or a clear showcase moment.
- Adding a decorative grid of lines that visually point toward the cursor, for a hero or interactive background accent.
- Wanting a configurable rows/columns grid with a resting base angle that degrades gracefully without JS or motion.

## Avoid when

- Do not place heavy effects in task-dense workflows where clarity, speed, and readability matter more.
- Needing the effect to convey information; it is purely decorative and aria-hidden.
- Building a dense, content-heavy layout; the grid is best as a lightweight background flourish, not a functional UI element.

## Anti-patterns

- Heavy effects in forms or task-dense workflows
- Motion that interferes with reading or focus

## Rules

- Use the `<brok:magnet-lines>` tag (or `<x-ui.magnet-lines>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/magnet-lines
- Registry JSON (files, props, contract): https://brokui.dev/r/open/magnet-lines.json

@props([
    'rows' => 9,
    'columns' => 9,
    'lineColor' => 'foreground',
    'lineWidth' => '2px',
    'lineHeight' => '1.5rem',
    'baseAngle' => -10,
    'gap' => '1rem',
])

@php
    // A grid of short bars that each rotate to point at the cursor (a magnetic
    // field). Alpine (uiMagnetLines) listens for @pointermove on the root and
    // writes an inline `transform: rotate(...)` on each line from the angle
    // between the line's centre and the pointer; @pointerleave returns every
    // line to `baseAngle`. The line colour comes from a semantic `text-*` token
    // (the bars are `bg-current`), defaulting to text-foreground. For
    // reduced-motion users the JS never attaches a listener, so every bar holds
    // the inline `baseAngle` rendered below. The grid is decorative (aria-hidden).
    $colorClass = match ($lineColor) {
        'primary' => 'text-primary',
        'muted' => 'text-muted-foreground',
        'foreground' => 'text-foreground',
        default => 'text-foreground',
    };

    $count = (int) $rows * (int) $columns;
@endphp

<div
    data-slot="magnet-lines"
    aria-hidden="true"
    x-data="uiMagnetLines({ baseAngle: {{ (int) $baseAngle }} })"
    style="display:grid; grid-template-columns: repeat({{ (int) $columns }}, 1fr); grid-template-rows: repeat({{ (int) $rows }}, 1fr); gap: {{ $gap }}; place-items: center;"
    {{ $attributes->merge(['class' => 'w-full max-w-sm aspect-square ' . $colorClass]) }}
>
    @for ($i = 0; $i < $count; $i++)
        <span
            data-slot="magnet-line"
            class="block rounded-full bg-current origin-center"
            style="width: {{ $lineWidth }}; height: {{ $lineHeight }}; transform: rotate({{ (int) $baseAngle }}deg);"
        ></span>
    @endfor
</div>

/**
 * Magnet Lines behavior (spec §19 behavior layer).
 *
 * A rows×columns grid of short bars that each rotate to point at the cursor,
 * producing a magnetic-field look. On `pointermove` (listened on the root)
 * each line's rotation is computed from the angle between the line's centre and
 * the pointer — `Math.atan2(py - cy, px - cx)` — and written as an inline
 * `transform: rotate(...)` on that line. On `pointerleave` every line returns
 * to its resting `baseAngle`. A motion-safe CSS transition (ui.css) smooths
 * the rotation.
 *
 * Movement is gated behind `prefers-reduced-motion`: when reduced motion is
 * requested init() never attaches the pointer listener, so all lines sit at
 * their `baseAngle` (the Blade-rendered inline default), static.
 *
 * Self-registers on `alpine:init` so import order does not matter.
 */
document.addEventListener('alpine:init', () => {
    window.Alpine.data('uiMagnetLines', (config = {}) => ({
        baseAngle: config.baseAngle ?? -10,
        reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
        lines: [],
        onMoveBound: null,
        onLeaveBound: null,

        init() {
            this.lines = Array.from(this.$el.querySelectorAll('[data-slot="magnet-line"]'));
            // Reduced motion: leave the Blade-rendered baseAngle in place, no listener.
            if (this.reduced) return;
            this.onMoveBound = (event) => this.onMove(event);
            this.onLeaveBound = () => this.reset();
            this.$el.addEventListener('pointermove', this.onMoveBound);
            this.$el.addEventListener('pointerleave', this.onLeaveBound);
        },

        destroy() {
            if (this.onMoveBound) this.$el.removeEventListener('pointermove', this.onMoveBound);
            if (this.onLeaveBound) this.$el.removeEventListener('pointerleave', this.onLeaveBound);
        },

        onMove(event) {
            const px = event.clientX;
            const py = event.clientY;
            this.lines.forEach((line) => {
                const rect = line.getBoundingClientRect();
                const cx = rect.left + rect.width / 2;
                const cy = rect.top + rect.height / 2;
                // The bar points "up" at 0deg, so offset atan2 by 90deg.
                const deg = (Math.atan2(py - cy, px - cx) * 180) / Math.PI + 90;
                line.style.transform = `rotate(${deg}deg)`;
            });
        },

        reset() {
            this.lines.forEach((line) => {
                line.style.transform = `rotate(${this.baseAngle}deg)`;
            });
        },
    }));
});