EXTENDED UI

Perfect Scrollbar

Custom-looking scroll areas that stay native underneath — wheel, touch, keyboard and screen readers just work.

THEME

Playground

Thumb, visibility, colour, axes and shadows

1Spring 27 campaignNordic Thread

2Website v2Kaya Ceramics

3Parka lookbookFjord Outdoor

4October retainerLumen Coffee

5Frames campaignMira Optics

6Holiday socialNordic Thread

7Glaze studiesKaya Ceramics

8AW26 e-comFjord Outdoor

9Store opening filmLumen Coffee

10PackagingMira Optics

11Coast BTSNordic Thread

12Winter 26Kaya Ceramics

13Kiln & Co launchFjord Outdoor

14Norrland SkisLumen Coffee

15Saga Books coverMira Optics

16Oslo Opera posterNordic Thread

17Spring 27 campaign · 2Kaya Ceramics

18Website v2 · 2Fjord Outdoor

19Parka lookbook · 2Lumen Coffee

20October retainer · 2Mira Optics

21Frames campaign · 2Nordic Thread

22Holiday social · 2Kaya Ceramics

23Glaze studies · 2Fjord Outdoor

24AW26 e-com · 2Lumen Coffee

25Store opening film · 2Mira Optics

26Packaging · 2Nordic Thread

27Coast BTS · 2Kaya Ceramics

28Winter 26 · 2Fjord Outdoor

29Kiln & Co launch · 2Lumen Coffee

30Norrland Skis · 2Mira Optics

31Saga Books cover · 2Nordic Thread

32Oslo Opera poster · 2Kaya Ceramics

33Spring 27 campaign · 3Fjord Outdoor

34Website v2 · 3Lumen Coffee

35Parka lookbook · 3Mira Optics

36October retainer · 3Nordic Thread

37Frames campaign · 3Kaya Ceramics

38Holiday social · 3Fjord Outdoor

39Glaze studies · 3Lumen Coffee

40AW26 e-com · 3Mira Optics

41Store opening film · 3Nordic Thread

42Packaging · 3Kaya Ceramics

43Coast BTS · 3Fjord Outdoor

44Winter 26 · 3Lumen Coffee

45Kiln & Co launch · 3Mira Optics

46Norrland Skis · 3Nordic Thread

47Saga Books cover · 3Kaya Ceramics

48Oslo Opera poster · 3Fjord Outdoor

1–0 of 48 · 0%

Settings

THUMB

VISIBILITY

COLOUR

AXES

Patterns

Menus, tables, chat, ribbons, dropdowns and logs

Sidebar menusticky header · shadow on scroll

PROJECTS · 24

Tablesticky header + first column · both axes

INVOICE	CLIENT	PROJECT	AMOUNT	ISSUED	DUE	STATUS
AV-2026-248	Nordic Thread	Spring 27 campaign	€2,400	Oct 1	Oct 31	Paid
AV-2026-247	Kaya Ceramics	Website v2	€5,400	Sep 30	Oct 30	Sent
AV-2026-246	Fjord Outdoor	Parka lookbook	€8,400	Sep 29	Oct 29	Overdue
AV-2026-245	Lumen Coffee	October retainer	€11,400	Sep 28	Oct 28	Draft
AV-2026-244	Mira Optics	Frames campaign	€14,400	Sep 27	Oct 27	Paid
AV-2026-243	Nordic Thread	Holiday social	€17,400	Sep 26	Oct 26	Sent
AV-2026-242	Kaya Ceramics	Glaze studies	€20,400	Sep 25	Oct 25	Overdue
AV-2026-241	Fjord Outdoor	AW26 e-com	€23,400	Sep 24	Oct 24	Draft
AV-2026-240	Lumen Coffee	Store opening film	€26,400	Sep 23	Oct 23	Paid
AV-2026-239	Mira Optics	Packaging	€29,400	Sep 22	Oct 22	Sent
AV-2026-238	Nordic Thread	Coast BTS	€32,400	Sep 21	Oct 21	Overdue
AV-2026-237	Kaya Ceramics	Winter 26	€35,400	Sep 20	Oct 20	Draft
AV-2026-236	Fjord Outdoor	Kiln & Co launch	€38,400	Sep 19	Oct 19	Paid
AV-2026-235	Lumen Coffee	Norrland Skis	€4,400	Sep 18	Oct 18	Sent
AV-2026-234	Mira Optics	Saga Books cover	€7,400	Sep 17	Oct 17	Overdue
AV-2026-233	Nordic Thread	Oslo Opera poster	€10,400	Sep 16	Oct 16	Draft
AV-2026-232	Kaya Ceramics	Spring 27 campaign	€13,400	Sep 15	Oct 15	Paid
AV-2026-231	Fjord Outdoor	Website v2	€16,400	Sep 14	Oct 14	Sent
AV-2026-230	Lumen Coffee	Parka lookbook	€19,400	Sep 13	Oct 13	Overdue
AV-2026-229	Mira Optics	October retainer	€22,400	Sep 12	Oct 12	Draft
AV-2026-228	Nordic Thread	Frames campaign	€25,400	Sep 11	Oct 11	Paid
AV-2026-227	Kaya Ceramics	Holiday social	€28,400	Sep 10	Oct 10	Sent
AV-2026-226	Fjord Outdoor	Glaze studies	€31,400	Sep 9	Oct 9	Overdue
AV-2026-225	Lumen Coffee	AW26 e-com	€34,400	Sep 8	Oct 8	Draft
AV-2026-224	Mira Optics	Store opening film	€37,400	Sep 7	Oct 7	Paid
AV-2026-223	Nordic Thread	Packaging	€3,400	Sep 6	Oct 6	Sent
AV-2026-222	Kaya Ceramics	Coast BTS	€6,400	Sep 5	Oct 5	Overdue
AV-2026-221	Fjord Outdoor	Winter 26	€9,400	Sep 4	Oct 4	Draft
AV-2026-220	Lumen Coffee	Kiln & Co launch	€12,400	Oct 1	Oct 31	Paid
AV-2026-219	Mira Optics	Norrland Skis	€15,400	Sep 30	Oct 30	Sent

Chatstick to bottom · “↓ new” when scrolled up

Morning! Selects are up.Lovely — looking now.Hero 04 is my favourite.Can we try more blue?Sure, Ana is on it.Friday OK?Perfect.Also the logo on the sleeve…Noted, will sharpen.Thanks!v2 uploaded.Looks great.Approving now.🎉

Horizontal ribbonsnap · arrows · fade edges

Lake 04

Coast 12

Moss 07

Glacier 02

Crew BTS

Parka 17

Dawn 01

Ice 09

Black sand

Fjord

Dropdownmax-height 240 · selected kept in view

Log / codeline numbers · both axes

12026-10-17 09:12:00 INFO export.worker resized 1/42 → 2400 px · watermark 20% · sRGB · q=88

22026-10-17 09:12:07 INFO export.worker resized 2/42 → 2400 px · watermark 20% · sRGB · q=88

32026-10-17 09:12:14 INFO export.worker resized 3/42 → 2400 px · watermark 20% · sRGB · q=88

42026-10-17 09:13:21 INFO export.worker resized 4/42 → 2400 px · watermark 20% · sRGB · q=88

52026-10-17 09:13:28 WARN export.worker file over 200 MB, streaming in chunks of 16 MB to s3://avava-exports/spring27/

62026-10-17 09:13:35 INFO export.worker resized 6/42 → 2400 px · watermark 20% · sRGB · q=88

72026-10-17 09:14:42 INFO export.worker resized 7/42 → 2400 px · watermark 20% · sRGB · q=88

82026-10-17 09:14:49 ERROR export.worker glacier_RAW_12.cr3 — unsupported codec, skipped (retry with --raw-fallback)

92026-10-17 09:14:56 INFO export.worker resized 9/42 → 2400 px · watermark 20% · sRGB · q=88

102026-10-17 09:15:03 INFO export.worker resized 10/42 → 2400 px · watermark 20% · sRGB · q=88

112026-10-17 09:15:10 INFO export.worker resized 11/42 → 2400 px · watermark 20% · sRGB · q=88

122026-10-17 09:15:17 INFO export.worker resized 12/42 → 2400 px · watermark 20% · sRGB · q=88

132026-10-17 09:16:24 INFO export.worker resized 13/42 → 2400 px · watermark 20% · sRGB · q=88

142026-10-17 09:16:31 WARN export.worker file over 200 MB, streaming in chunks of 16 MB to s3://avava-exports/spring27/

152026-10-17 09:16:38 INFO export.worker resized 15/42 → 2400 px · watermark 20% · sRGB · q=88

162026-10-17 09:17:45 INFO export.worker resized 16/42 → 2400 px · watermark 20% · sRGB · q=88

172026-10-17 09:17:52 INFO export.worker resized 17/42 → 2400 px · watermark 20% · sRGB · q=88

182026-10-17 09:17:59 INFO export.worker resized 18/42 → 2400 px · watermark 20% · sRGB · q=88

192026-10-17 09:18:06 INFO export.worker resized 19/42 → 2400 px · watermark 20% · sRGB · q=88

202026-10-17 09:18:13 INFO export.worker resized 20/42 → 2400 px · watermark 20% · sRGB · q=88

212026-10-17 09:18:20 ERROR export.worker glacier_RAW_12.cr3 — unsupported codec, skipped (retry with --raw-fallback)

222026-10-17 09:19:27 INFO export.worker resized 22/42 → 2400 px · watermark 20% · sRGB · q=88

232026-10-17 09:19:34 WARN export.worker file over 200 MB, streaming in chunks of 16 MB to s3://avava-exports/spring27/

242026-10-17 09:19:41 INFO export.worker resized 24/42 → 2400 px · watermark 20% · sRGB · q=88

252026-10-17 09:20:48 INFO export.worker resized 25/42 → 2400 px · watermark 20% · sRGB · q=88

262026-10-17 09:20:55 INFO export.worker resized 26/42 → 2400 px · watermark 20% · sRGB · q=88

272026-10-17 09:20:02 INFO export.worker resized 27/42 → 2400 px · watermark 20% · sRGB · q=88

282026-10-17 09:21:09 INFO export.worker resized 28/42 → 2400 px · watermark 20% · sRGB · q=88

292026-10-17 09:21:16 INFO export.worker resized 29/42 → 2400 px · watermark 20% · sRGB · q=88

302026-10-17 09:21:23 INFO export.worker resized 30/42 → 2400 px · watermark 20% · sRGB · q=88

312026-10-17 09:22:30 INFO export.worker resized 31/42 → 2400 px · watermark 20% · sRGB · q=88

322026-10-17 09:22:37 WARN export.worker file over 200 MB, streaming in chunks of 16 MB to s3://avava-exports/spring27/

332026-10-17 09:22:44 INFO export.worker resized 33/42 → 2400 px · watermark 20% · sRGB · q=88

342026-10-17 09:23:51 ERROR export.worker glacier_RAW_12.cr3 — unsupported codec, skipped (retry with --raw-fallback)

352026-10-17 09:23:58 INFO export.worker resized 35/42 → 2400 px · watermark 20% · sRGB · q=88

362026-10-17 09:23:05 INFO export.worker resized 36/42 → 2400 px · watermark 20% · sRGB · q=88

372026-10-17 09:24:12 INFO export.worker resized 37/42 → 2400 px · watermark 20% · sRGB · q=88

382026-10-17 09:24:19 INFO export.worker resized 38/42 → 2400 px · watermark 20% · sRGB · q=88

392026-10-17 09:24:26 INFO export.worker resized 39/42 → 2400 px · watermark 20% · sRGB · q=88

402026-10-17 09:25:33 INFO export.worker resized 40/42 → 2400 px · watermark 20% · sRGB · q=88

Behaviour

Infinite load, jump to item, remembered position, nesting

Infinite loadloads 80 px before the end

1Ana uploaded 12 files

2Lena commented on Hero 04

3Invoice AV-041 viewed

4Jon booked Studio A

5Kaya signed the proposal

6Ana uploaded 12 files

7Lena commented on Hero 04

8Invoice AV-041 viewed

9Jon booked Studio A

10Kaya signed the proposal

11Ana uploaded 12 files

12Lena commented on Hero 04

13Invoice AV-041 viewed

14Jon booked Studio A

15Kaya signed the proposal

16Ana uploaded 12 files

17Lena commented on Hero 04

18Invoice AV-041 viewed

19Jon booked Studio A

20Kaya signed the proposal

20 of 120 loaded · scroll inside

Scroll to itemsmooth · highlight · respects reduced motion

1Oct 18 · CastingNordic Thread

2Oct 19 · Location scoutKaya Ceramics

3Oct 20 · ShootFjord Outdoor

4Oct 21 · SelectsLumen Coffee

5Oct 22 · RetouchMira Optics

6Oct 23 · DeliveryNordic Thread

7Oct 24 · CastingKaya Ceramics

8Oct 25 · Location scoutFjord Outdoor

9Oct 26 · ShootLumen Coffee

10Oct 27 · SelectsMira Optics

11Oct 28 · RetouchNordic Thread

12Oct 29 · DeliveryKaya Ceramics

13Oct 30 · CastingFjord Outdoor

14Oct 31 · Location scoutLumen Coffee

15Nov 1 · ShootMira Optics

16Nov 2 · SelectsNordic Thread

17Nov 3 · RetouchKaya Ceramics

18Nov 4 · DeliveryFjord Outdoor

19Nov 5 · CastingLumen Coffee

20Nov 6 · Location scoutMira Optics

21Nov 7 · ShootNordic Thread

22Nov 8 · SelectsKaya Ceramics

23Nov 9 · RetouchFjord Outdoor

24Nov 10 · DeliveryLumen Coffee

25Nov 11 · CastingMira Optics

26Nov 12 · Location scoutNordic Thread

27Nov 13 · ShootKaya Ceramics

28Nov 14 · SelectsFjord Outdoor

29Nov 15 · RetouchLumen Coffee

30Nov 16 · DeliveryMira Optics

31Nov 17 · CastingNordic Thread

32Nov 18 · Location scoutKaya Ceramics

Remembered positioneach tab keeps its scroll

1Goal · 1Nordic Thread

2Audience · 2Kaya Ceramics

3Tone · 3Fjord Outdoor

4Deliverables · 4Lumen Coffee

5Budget · 5Mira Optics

6Timeline · 6Nordic Thread

7Goal · 7Kaya Ceramics

8Audience · 8Fjord Outdoor

9Tone · 9Lumen Coffee

10Deliverables · 10Mira Optics

11Budget · 11Nordic Thread

12Timeline · 12Kaya Ceramics

13Goal · 13Fjord Outdoor

14Audience · 14Lumen Coffee

15Tone · 15Mira Optics

16Deliverables · 16Nordic Thread

17Budget · 17Kaya Ceramics

18Timeline · 18Fjord Outdoor

19Goal · 19Lumen Coffee

20Audience · 20Mira Optics

21Tone · 21Nordic Thread

22Deliverables · 22Kaya Ceramics

23Budget · 23Fjord Outdoor

24Timeline · 24Lumen Coffee

25Goal · 25Mira Optics

26Audience · 26Nordic Thread

27Tone · 27Kaya Ceramics

28Deliverables · 28Fjord Outdoor

29Budget · 29Lumen Coffee

30Timeline · 30Mira Optics

Saved positions: Brief 0 px · Files 0 px · Activity 0 px

Nested areasinner scroll doesn’t drag the outer one

Project briefOuter area. Scroll inside the grey box below — when it reaches its end the page doesn’t take over (overscroll-behavior: contain).

1Spring 27 campaignNordic Thread

2Website v2Kaya Ceramics

3Parka lookbookFjord Outdoor

4October retainerLumen Coffee

5Frames campaignMira Optics

6Holiday socialNordic Thread

7Glaze studiesKaya Ceramics

8AW26 e-comFjord Outdoor

9Store opening filmLumen Coffee

10PackagingMira Optics

11Coast BTSNordic Thread

12Winter 26Kaya Ceramics

MoodboardReferencesCasting notesLocation listGear listCall sheet

Rules & a11y

Checklist and when to use what

Checklist

CUSTOM BARPanels inside the app where the native bar looks heavy.Sidebars, dropdowns, chat

NATIVE BARThe page itself and long documents.Body scroll, articles

PAGINATIONPeople need to find their place again.Invoices, Data List

SHOW MOREShort lists that rarely grow.Comments, activity

DO✓Keep native scrolling — style only the bar✓Widen the thumb on hover✓Fade edges when there is more✓Keep sticky headers inside the area✓Scroll the selected item into view

DON’T✕Hijack the wheel with fake scrolling✕Hide every scrollbar on desktop✕Nest areas without containing overscroll✕Make the thumb smaller than 28 px✕Animate long jumps when reduced motion is on