gra-ui

Component

IdleUnspool

It starts unspooling on its own after mounting: one child at a time leaves the main row and settles on a separate shelf. The migration stops when every child has moved, and refiling starts the needless process again.

Possible use

It could be used to let an ignored handoff card slowly move its fields into an aside, or to make a presenter let agenda items peel into side notes between talking points.

Reasonable alternative

A reasonable local alternative is a static row, or one local array and a CSS transition if the content really must be moved. Publishing an idle timer that relocates children is difficult to defend because waiting should not reorganize a layout.

01 / Preview

Try it yourself.

Preview Ready

02 / Usage

Put it somewhere.

example.tsxTSX
import { IdleUnspool } from "gra-ui";
import "gra-ui/styles.css";

export function NeglectedAgenda() {
  return (
    <IdleUnspool>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Date</span>
    </IdleUnspool>
  );
}

03 / API

Small surface area.

PropTypeDescription
childrenReactNodeThe content that leaves the main row one item at a time while idle.