Skip to main content
Digitaltableteur

Design system components

PixelLoop

Decorative constellation loop with rounded-dot and 45-degree vector-stroke variants; the glyph pool includes the studio D and T initials.

Status: beta. Group: display. Markdown version: /design-system/components/pixel-loop.md

When to use

Decorative constellation loop with rounded-dot and 45-degree vector-stroke variants; the glyph pool includes the studio D and T initials.

When not to use

  • Do not use it to communicate loading, progress, status, or instructions.
  • Do not add labels or interaction to the glyphs.
  • Do not replace the stepped cross-fade with smooth motion.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

PixelLoop props
PropTypeDefaultDescriptionRequired
size"sm" | "md" | "lg"mdScales the glyphs and the equal space between them.No
variant"dots" | "strokes"dotsRounded dots or short, round-capped 45-degree strokes.No
rowsPixelLoopRows2Number of three-cell rows in the field.No
animatebooleantrueRuns the cross-fade cycle. Disable for a deliberate static composition.No
cyclebooleanfalseRenders a single glyph cell (one row, one column) that steps through the whole glyph pool one formation at a time. Ignores rows.No
collapsedbooleanfalseOne row only (rows={1}): shows just the first cell, and the loop is one cell wide. Turning it false grows the other cells open left to right, so a title that follows the loop slides along with it; instant when the visitor prefers reduced motion. Ignored with cycle and more rows.No

Variants

  • Available sizes: sm, md, lg (default md).
  • Available variants: dots, strokes (default dots).
  • Allowed rows values: 1, 2, 3 (default 2).

Invalid combinations

The contract records no invalid combinations.

Keyboard

PixelLoop keyboard behaviour
KeyBehaviour
GeneralNone: the graphic is decorative and never takes focus.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

PixelLoop rules
LevelRuleHow it is checked
MUSTARIA: The decorative container and every glyph are hidden from assistive technology.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: The component never enters the tab order.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTRequired stories produce no axe violations at the configured severity.Automated by npm run test:stories:matrix:ci. WCAG 2.5.8.
MUSTThe accessibility tree (role, name, state) matches the committed snapshot for every required story.Automated by npm run test:stories:matrix:ci. WCAG 1.3.1, 4.1.2.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Automated by npm run test:stories:hc.
MUSTPositional, scale, and opacity motion is suppressed under prefers-reduced-motion.Manual review, last on 2026-10-31. WCAG 2.2.2, 2.3.3.
MUSTEvery documented keyboard interaction works as specified.Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUSTA human completed an end-to-end accessibility review of this component.Manual review, last on 2026-10-31.

Install and import

  • Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
  • Import: import { PixelLoop } from "@digitaltableteur/react";
  • Entry point: @digitaltableteur/react/content exports it too.
  • Styles: import @digitaltableteur/react/style.css once at the app boundary.

Links