Audit Boxes

$ pnpm dlx shadcn@latest add @remocn/audit-boxes

Usage

AuditBoxes is a full-frame scene. Each issue's box traces itself clockwise from the top left, then its note pops on beside it. A counter above the frame's top right counts the boxes as they land.

import { AuditBoxes } from "@/components/remocn/audit-boxes";
 
export const Lint = () => <AuditBoxes />;

Without children it audits a demo calendar dashboard. For your own UI, pass it as children in a 1280×720 frame and list the issues in frame pixels.

import { AuditBoxes } from "@/components/remocn/audit-boxes";
 
export const Lint = () => (
  <AuditBoxes
    issues={[
      { rect: { x: 320, y: 180, w: 200, h: 40 }, note: "contrast 3.1:1" },
      { rect: { x: 900, y: 80, w: 120, h: 32 }, note: "hit 28 → 44", side: "end" },
    ]}
    counterLabel="problems"
  >
    <MyScreen />
  </AuditBoxes>
);

side places the note: start sits above the box's left edge, end above its right edge, below under its left edge. Set counterLabel="" to hide the counter.

Timing

At 30 fps and speed={1}:

auditBoxesLength is 56 with the seven demo issues. speed scales the whole timeline.