Cycling verb, Conduction Design System

Design system / Components / Cycling verb

CyclingVerb · word-swap primitive on a 2.4 s fade loop

Default · cobalt-400 italic (ambient state) Aan het bouwen.

Cobalt variant · brand-strong We zijn shippen.

Orange variant · single-screen accent Vandaag aan het reviewen.

React / MDX usage

Mount in MDX as `<CyclingVerb/>`

Tiny word-swap primitive. Cycles through a list of verbs on a slow loop with a 200 ms opacity fade. Reads as ambient state (we're working on something) rather than motion (look, this is animated). The default colour is cobalt-400 italic so it sits behind the surrounding sentence; a cobalt or orange variant promotes it to a deliberate accent.

Brand rule: orange is the one-accent-per-screen colour. If the rest of the page already burns its orange budget, stick to the default cobalt-400.

Import & example

import {CyclingVerb} from '@conduction/docusaurus-preset/components';

Aan het <CyclingVerb verbs={['bouwen', 'shippen', 'testen', 'itereren', 'reviewen']}/>.

Props

verbs array of strings to cycle through
interval ms between swaps (default 2400)
color default / cobalt / orange (default default)
respectReducedMotion bool (default true) — freeze on the first verb when the user prefers reduced motion