GradientBorder

Sends a tail of light orbiting the ring. It needs the theme's `motion.tier` above `minimal` and at least one side left in `edges`; failing either, the static gradient ring is what you get.

Composes with the classes `Box` computes instead of replacing them.

The element it paints.

Which sides the light is seen on, clockwise from the top. It is a window, not a route: the light always orbits the whole frame at one speed, and the sides left out only hide it — so it slides in and out of the corners instead of appearing already there, and dropping sides never makes it faster. Read only while `beam` runs.

A theme gradient role, or a literal `{ from, to }` pair. With `beam` running it stops painting the ring — the ring drops to the plain border colour and the gradient moves into the travelling arc, which is the only way the arc is visible against it.

Animates the element in when it first scrolls into view. `true` takes the catalogue entrance; an object tunes it — `preset`, `distance`, `spring`, `duration`, `once`, `amount`, `rootMargin` and `index` for a stagger. It lives here rather than on each surface so that `Card`, `Paper`, `GradientBorder`, `Section` and anything else built on `Box` inherit one implementation. Without it `Box` stays a server component; with it the root swaps for a client shell and the children keep rendering on the server. The entrance is a CSS transition, not a JavaScript animation: it is the only motion in the catalogue that fires WHILE the user scrolls, and the compositor should own it.

What the light does with the sides that are off. `"continuous"` skips them: the cycle is only as long as the run that is lit, so the light comes straight back round instead of waiting out the dark stretch — at the same speed either way. `"spaced"` keeps the whole turn, so every side that is off costs its share of the cycle in darkness. Skipping needs the frame measured, so it lands on the client and only when the lit sides form one unbroken run; a broken one — `edges={[1, 3]}` — takes the whole turn whatever this says.

What fills the inside of the ring. `"none"` leaves it transparent, which is what keeps this a ring drawn around existing content rather than a card with a gradient edge.

Tunes the tail. Read in every configuration — `edges` only decides where the tail is seen, never how it is built.

Thickness of the ring, as a raw length.