Noir AuroraMotion
"How it works": tabs that each show a title, text, points, meta and a media panel (APG tabs, automatic activation). horizontal puts the tabs above the panel (they scroll sideways on phones); vertical (the Noir look) lists them as numbered steps over 4 columns beside an 8-column lit panel (above it under lg); the selected step is a lit tile with its number in aurora.
"How it works": tabs that each show a title, text, points, meta and a media panel (APG tabs, automatic activation). horizontal puts the tabs above the panel (they scroll sideways on phones); vertical (the Noir look) lists them as numbered steps over 4 columns beside an 8-column lit panel (above it under lg); the selected step is a lit tile with its number in aurora. With autoplay the tabs advance on their own and a bar fills under the current one; it pauses on hover, focus, offscreen, in a hidden browser tab and with MotionToggle, stops for good once someone picks a tab, and is off under reduced motion. Client component.
It is part of Noir Aurora. The style’s 91 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
"How it works": large folder tabs (each with an auto number chip, 01, 02 …, volt when selected) sitting on a ruled panel: a card-white text cell (a mono label row from meta, the title, text and ticked points) beside a dotted media cell.
"How it works": a pill track of tabs (the white clay thumb springs to the picked one and squashes on arrival) above one clay panel per tab, with title, text, ticked points and meta on one side and the media on a candy side (APG tabs, automatic activation).
"How it works": tabs on hairline rules, each a mono meta row ("Step 01" with a small square that turns lime) over a large label, then a panel with the copy on 4 columns and a raised media card on 7 (APG tabs, automatic activation). vertical lists the tabs down the left.