Permission Wave Grid

An admin card with a single switch sits on the left (on top in narrow containers), a grid of member avatars sits on the right, and an SVG wire layer connects the two. Turning it on draws the trunk out of the switch's right edge, then branches off to each row in order; the moment a branch reaches its row, that row's avatars pop from grayscale, half-transparent and padlocked to full color with a check badge — wave after wave until everyone has access. Turning it off runs in reverse: wires retract starting from the last row and avatars lock again in turn. The switch state supports controlled and uncontrolled modes.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<PermissionWaveGrid/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/permission-wave-grid.en.json

Usage

import { PermissionWaveGrid } from "@/components/ui/permission-wave-grid";

const members = [
  { id: "1", name: "王小明" },
  { id: "2", name: "林怡君" },
  { id: "3", name: "陳家豪", initials: "家豪", color: "#0f766e" },
];

<PermissionWaveGrid
  members={members}
  columns={6}
  switchLabel="Let all members view financial reports"
  onEnabledChange={(enabled) => console.log(enabled ? "granted" : "revoked")}
/>

Props

PermissionWaveMember

getMemberInitials(name) is also exported, so you can reuse the same initials rule elsewhere.

How it works

• Wire coordinates are computed from measured DOM positions: the trunk leaves the switch's right edge, runs to a bus just left of the grid, then splits into one orthogonal branch per row with 8px rounded corners. When the container is narrow the layout stacks, and the trunk instead drops from the switch's bottom edge before turning into the grid's left side. A ResizeObserver recomputes everything when the layout changes.
• Turn-on timeline: the trunk draws over trunkDuration → row r's branch starts at trunkDuration + r × waveDelay (300ms) → once it arrives, that row's avatars unlock with a 0.9 → 1.06 → 1 bounce, staggered 30ms within the row. Turning off retracts from the last row back, then the trunk last.
• After the wave finishes, if pulse is on, a light dot travels along each route via CSS offset-path; its duration reads --wb-permission-wave-pulse (default 1600ms). The switch thumb's travel time is --wb-permission-wave-thumb (default 150ms).
• Rapid toggling retargets the animation from its current state, and the pulse only appears once the latest turn-on has fully played out.

Accessibility

• The switch is a native button with role="switch" and aria-checked, labelled via aria-labelledby pointing at switchLabel; Space and Enter both toggle it, with a focus-visible ring
• The member grid is role="list", and each avatar's aria-label reads e.g. "Ava Lin: access granted" or "Ava Lin: no access"
• When the wave completes, an aria-live="polite" region announces "Access granted to 24 members" (or that access was revoked)
• The SVG wire layer and pulse dots are aria-hidden and stay out of the way of assistive tech
• When the user's system has reduce motion enabled, wires appear or disappear instantly, all avatars switch together with a short fade, and no pulse runs