Skip to content

Neo-BrutalMotion

Feature Tabs

"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.

Live, interactive React component · light themeResponsive

About the Neo-Brutal Feature Tabs

"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. Folders switch at once and the panel's cells rise in (APG tabs, automatic activation). vertical lists the steps as ruled rows beside the panel. With autoplay the tabs advance on their own and a volt bar fills along the open folder; 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 Neo-Brutal. The style’s 92 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.

The same piece, drawn for a different look. Open one to compare it live.

Noir Aurora Feature Tabs

"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.

Soft Bento Feature Tabs

"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).

Swiss Tech Mono Feature Tabs

"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.