Components

ScrollArea

Scrollers with claude.ai edge fades (28px stepped masks revealed by scroll-driven animation), the sidebar's 12px “scrolled” fade, a sticky surface edge, native or Reka overlay scrollbars.

Fades

fade="y": the edge you are at is never faded; mid-scroll both edges fade; a box that does not overflow has no mask. Where scroll timelines are unsupported (Safari < 26, Firefox) there is no mask, as on claude.ai. Focus a scroller with Tab: 1px inset accent ring.

Reka, fade y (28px)

Conversation 1 · Draft the launch email
Conversation 2 · Summarise the meeting notes
Conversation 3 · Fix the flaky test
Conversation 4 · Plan the offsite
Conversation 5 · Draft the launch email
Conversation 6 · Summarise the meeting notes
Conversation 7 · Fix the flaky test
Conversation 8 · Plan the offsite
Conversation 9 · Draft the launch email
Conversation 10 · Summarise the meeting notes
Conversation 11 · Fix the flaky test
Conversation 12 · Plan the offsite
Conversation 13 · Draft the launch email
Conversation 14 · Summarise the meeting notes
Conversation 15 · Fix the flaky test
Conversation 16 · Plan the offsite
Conversation 17 · Draft the launch email
Conversation 18 · Summarise the meeting notes
Conversation 19 · Fix the flaky test
Conversation 20 · Plan the offsite
Conversation 21 · Draft the launch email
Conversation 22 · Summarise the meeting notes
Conversation 23 · Fix the flaky test
Conversation 24 · Plan the offsite

native, fade y size 6 (24px)

Conversation 1 · Draft the launch email
Conversation 2 · Summarise the meeting notes
Conversation 3 · Fix the flaky test
Conversation 4 · Plan the offsite
Conversation 5 · Draft the launch email
Conversation 6 · Summarise the meeting notes
Conversation 7 · Fix the flaky test
Conversation 8 · Plan the offsite
Conversation 9 · Draft the launch email
Conversation 10 · Summarise the meeting notes
Conversation 11 · Fix the flaky test
Conversation 12 · Plan the offsite
Conversation 13 · Draft the launch email
Conversation 14 · Summarise the meeting notes
Conversation 15 · Fix the flaky test
Conversation 16 · Plan the offsite
Conversation 17 · Draft the launch email
Conversation 18 · Summarise the meeting notes
Conversation 19 · Fix the flaky test
Conversation 20 · Plan the offsite
Conversation 21 · Draft the launch email
Conversation 22 · Summarise the meeting notes
Conversation 23 · Fix the flaky test
Conversation 24 · Plan the offsite

fade scrolled (sidebar)

Conversation 1 · Draft the launch email
Conversation 2 · Summarise the meeting notes
Conversation 3 · Fix the flaky test
Conversation 4 · Plan the offsite
Conversation 5 · Draft the launch email
Conversation 6 · Summarise the meeting notes
Conversation 7 · Fix the flaky test
Conversation 8 · Plan the offsite
Conversation 9 · Draft the launch email
Conversation 10 · Summarise the meeting notes
Conversation 11 · Fix the flaky test
Conversation 12 · Plan the offsite
Conversation 13 · Draft the launch email
Conversation 14 · Summarise the meeting notes
Conversation 15 · Fix the flaky test
Conversation 16 · Plan the offsite
Conversation 17 · Draft the launch email
Conversation 18 · Summarise the meeting notes
Conversation 19 · Fix the flaky test
Conversation 20 · Plan the offsite
Conversation 21 · Draft the launch email
Conversation 22 · Summarise the meeting notes
Conversation 23 · Fix the flaky test
Conversation 24 · Plan the offsite

scrolled: false

sticky edge (surface-2 panel)

Account

Setting row 1

Setting row 2

Setting row 3

Setting row 4

Setting row 5

Setting row 6

Setting row 7

Setting row 8

Setting row 9

Setting row 10

Setting row 11

Setting row 12

Horizontal and scrollbars

fade x masks the start / end edges (phone settings tab strip). The Reka overlay scrollbar is 8px with a 20 % ink thumb (35 % on hover) and fades out after hover.

fade x

GeneralAccountPrivacyBillingUsageCapabilitiesConnectorsClaude CodeDeveloperTeam

light

Conversation 1 · Draft the launch email

Conversation 2 · Summarise the meeting notes

Conversation 3 · Fix the flaky test

Conversation 4 · Plan the offsite

Conversation 5 · Draft the launch email

Conversation 6 · Summarise the meeting notes

Conversation 7 · Fix the flaky test

Conversation 8 · Plan the offsite

Conversation 9 · Draft the launch email

Conversation 10 · Summarise the meeting notes

Conversation 11 · Fix the flaky test

Conversation 12 · Plan the offsite

dark