Hairline List
A list as rule-separated rows rather than bullets — each item on its own line under a hairline, with a quiet tabular index and a closing rule under the last row. Rows arrive one after another as the list scrolls in, each rule drawing from the left (.hairline-rule) just ahead of its text. Used for the AI design workflow consulting list on /services.
Live Preview
- 01Choose AI design tools that fit your team and goals
- 02Set up reusable prompts, skill docs, and brand guidelines
- 03Coach your team to prototype and make brand assets with AI
tsx
<HairlineList items={['First item', 'Second item']} />Reduced motion
The site's MotionConfig makes the rule and row transforms instant, and .hairline-rule keeps every rule drawn even before the list is in view — only the text's opacity still fades.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items* | string[] | - | One line per row, in order. Each row gets a quiet 01–NN index. |
Import
tsx
import { HairlineList } from '@/components/ui/HairlineList'