Token Tags

The UI washes out around one area and leader lines run from its elements to dark chips naming their design tokens

Installation

$ pnpm dlx shadcn@latest add @remocn/token-tags

Usage

TokenTags is a full-frame scene. Everything outside focus washes toward the background. Then, tag by tag, a dot lands on the element, a leader line runs out with one elbow and a dark chip with a color swatch and the token name settles at its end.

tsx

import { TokenTags } from "@/components/remocn/token-tags";
 
export const Tokens = () => <TokenTags />;

Without children it tags the demo dashboard's card row. For your own UI, pass it as children in a 1280×720 frame and list the tags in frame pixels. With children the wash is off unless you pass focus.

tsx

import { TokenTags } from "@/components/remocn/token-tags";
 
export const Tokens = () => (
  <TokenTags
    focus={{ x: 300, y: 160, w: 680, h: 120 }}
    tokens={[
      { anchor: [340, 220], at: [420, 360], label: "bg/brand", swatch: "#7D52F4" },
      { anchor: [620, 200], at: [700, 400], label: "text/strong", swatch: "#0E121B" },
    ]}
  >
    <MyScreen />
  </TokenTags>
);

The leader leaves anchor diagonally, bends at the chip's height and runs level into the chip at at, so place chips below or above their anchors.

Timing

At 30 fps and speed={1}:

Frames	Motion
0–12	The wash fades in around `focus`
12 + n × `stagger`	Tag n's dot pops onto its element
15 + n × `stagger`	Its leader line draws over 14 frames
25 + n × `stagger`	Its chip rises in over 12 frames

tokenTagsLength is 61 with the five demo tags. speed scales the whole timeline.

Props7

Prop	Type	Default
children	React.ReactNode— UI to tag, laid out in a 1280×720 frame. Without it a demo dashboard is drawn
tokens	{ anchor: [number, number]; at: [number, number]; label: string; swatch: string }[]— Tags in frame pixels: a dot on anchor, the chip centered on at. Defaults to the demo tags, or none with children
focus	{ x: number; y: number; w: number; h: number } \| null— Area kept bright while the rest washes out; null skips the wash. Defaults to the demo card row, or null with children
lineColor	string"#0E121B" Leader line and dot color
background	string"#EDEDEF" Stage color, also used for the wash
stagger	number6 Frames between one tag and the next
speed	number1 Playback multiplier

childrenReact.ReactNode
UI to tag, laid out in a 1280×720 frame. Without it a demo dashboard is drawn
tokens{ anchor: [number, number]; at: [number, number]; label: string; swatch: string }[]
Tags in frame pixels: a dot on anchor, the chip centered on at. Defaults to the demo tags, or none with children
focus{ x: number; y: number; w: number; h: number } | null
Area kept bright while the rest washes out; null skips the wash. Defaults to the demo card row, or null with children
lineColorstring
Leader line and dot color
Default"#0E121B"
backgroundstring
Stage color, also used for the wash
Default"#EDEDEF"
staggernumber
Frames between one tag and the next
Default6
speednumber
Playback multiplier
Default1