ZENTU · WIDGET #99

Look at the right edge of this page. It is drawn by the Custom engine: a progress track, a dot for every section — hover to read it, click to jump — and a tooltip with the section name and how far you are. Drag it, click the track, or just scroll as usual.

2 engines14 native presets7 custom stylessection markerssection tooltipdrag & clickauto-hidehover expandhorizontalpage / selector / box
CUSTOM ENGINE · 7 STYLES

The browser bar is hidden and Zentu draws its own — so it can glow, flow, show progress and markers. Wheel, keyboard and touch scrolling stay native.

pillhairlineneonflowglassprogresscapsuledraghover expand
Gradient pill Custom engine

Why small details matter

Visitors notice polish even when they can’t say why. A scrollbar that matches your brand is one of those quiet details that makes a site feel finished.

Keep it readable

Contrast matters more than color. The thumb should be easy to find at a glance, on light and dark sections alike.

Think about long pages

On long articles, section markers help readers see how much is left and jump straight to the part they need.

Don’t break scrolling

Wheel, keyboard and touch scrolling stay exactly as the browser does them — only the look changes.

Test on mobile

Phones show their own overlay bars, so by default the normal scrollbar is kept on touch devices.

Gradient pillBlog article · the default: a gradient thumb that widens on hover.
Hairline Custom engine

1. Your account

You are responsible for keeping your login details safe and for all activity under your account. Tell us straight away if you think someone else has used it. This is sample text for the demo and not a real legal document.

2. Orders & payment

Prices include VAT where it applies. We confirm every order by email; the contract starts when we send that email, not when you place the order. This is sample text for the demo and not a real legal document.

3. Delivery

Delivery times shown at checkout are estimates. If a parcel is late by more than 10 working days you may cancel and get a full refund. This is sample text for the demo and not a real legal document.

4. Returns

You can return most items within 30 days in their original condition. Personalised items can’t be returned unless they are faulty. This is sample text for the demo and not a real legal document.

5. Privacy

We only use your data to run your orders and, if you agree, to send you news. See our privacy policy for the details. This is sample text for the demo and not a real legal document.

6. Changes to these terms

We may update these terms. The version that applies is the one shown when you placed your order. This is sample text for the demo and not a real legal document.

HairlineTerms page · a 3px line that stays out of the way until you need it.
Neon Custom engine
1import { createStore } from './store';
2
3// Keep the cart in sync across tabs
4const cart = createStore({
5  items: [],
6  coupon: null,
7});
8
9export function addItem(product, qty = 1) {
10  const found = cart.items.find(i => i.id === product.id);
11  if (found) {
12    found.qty += qty;
13  } else {
14    cart.items.push({ ...product, qty });
15  }
16  cart.save();
17}
18
19export function total() {
20  return cart.items.reduce(
21    (sum, i) => sum + i.price * i.qty, 0
22  );
23}
24
25window.addEventListener('storage', () => cart.reload());
NeonDeveloper docs · a glowing thumb on a dark code block.
Flowing gradient Custom engine
Hi! 👋 I ordered the Trail Runner shoes on Monday. Any news on delivery?
Hello! Let me check that for you — one moment.
Your parcel left our warehouse this morning. It should arrive on Thursday.
Great, thanks! Can I still change the size?
It has already shipped, but exchanges are free within 30 days. I can email you a return label.
Perfect, please do.
Done! Check your inbox. Anything else I can help with?
That’s all — have a nice day!
You too! 😊
Flowing gradientSupport chat · the colors slowly flow along the thumb.
Glass Custom engine
1Morning LightAria Vale3:42
2Neon StreetsThe Lowtides4:05
3Paper PlanesJuno Park2:58
4Slow TideMaren & Co5:11
5Golden HourAria Vale3:27
6Static HeartsNightcall3:49
7Open RoadWilder Sun4:22
8Low OrbitKepler Kids3:15
9Home AgainJuno Park4:40
10Last TrainThe Lowtides3:33
GlassMusic app · a frosted thumb for dark, colorful designs.
Progress track Custom engine

Why small details matter

Visitors notice polish even when they can’t say why. A scrollbar that matches your brand is one of those quiet details that makes a site feel finished.

Keep it readable

Contrast matters more than color. The thumb should be easy to find at a glance, on light and dark sections alike.

Think about long pages

On long articles, section markers help readers see how much is left and jump straight to the part they need.

Don’t break scrolling

Wheel, keyboard and touch scrolling stay exactly as the browser does them — only the look changes.

Test on mobile

Phones show their own overlay bars, so by default the normal scrollbar is kept on touch devices.

Progress trackLong read · the track fills as you go, dots mark each heading.
Floating capsule Custom engine

1. Your account

You are responsible for keeping your login details safe and for all activity under your account. Tell us straight away if you think someone else has used it. This is sample text for the demo and not a real legal document.

2. Orders & payment

Prices include VAT where it applies. We confirm every order by email; the contract starts when we send that email, not when you place the order. This is sample text for the demo and not a real legal document.

3. Delivery

Delivery times shown at checkout are estimates. If a parcel is late by more than 10 working days you may cancel and get a full refund. This is sample text for the demo and not a real legal document.

4. Returns

You can return most items within 30 days in their original condition. Personalised items can’t be returned unless they are faulty. This is sample text for the demo and not a real legal document.

5. Privacy

We only use your data to run your orders and, if you agree, to send you news. See our privacy policy for the details. This is sample text for the demo and not a real legal document.

6. Changes to these terms

We may update these terms. The version that applies is the one shown when you placed your order. This is sample text for the demo and not a real legal document.

Floating capsuleCheckout terms · a floating capsule with markers and the section name.
NATIVE CSS · 14 PRESETS

The browser’s own scrollbar, restyled with CSS. Chrome, Edge and Safari show the full style; Firefox gets the matching colors and width.

gradientslimroundedneonsquareinsetdarkglassrainbowstripedoutlinecandyrevealhidden
Gradient pill Native CSS

Why small details matter

Visitors notice polish even when they can’t say why. A scrollbar that matches your brand is one of those quiet details that makes a site feel finished.

Keep it readable

Contrast matters more than color. The thumb should be easy to find at a glance, on light and dark sections alike.

Think about long pages

On long articles, section markers help readers see how much is left and jump straight to the part they need.

Don’t break scrolling

Wheel, keyboard and touch scrolling stay exactly as the browser does them — only the look changes.

Test on mobile

Phones show their own overlay bars, so by default the normal scrollbar is kept on touch devices.

Gradient pillPure CSS — no JavaScript at all. Colors, width and radius are yours.
Slim line Native CSS
1Morning LightAria Vale3:42
2Neon StreetsThe Lowtides4:05
3Paper PlanesJuno Park2:58
4Slow TideMaren & Co5:11
5Golden HourAria Vale3:27
6Static HeartsNightcall3:49
7Open RoadWilder Sun4:22
8Low OrbitKepler Kids3:15
9Home AgainJuno Park4:40
10Last TrainThe Lowtides3:33
Slim linePure CSS — no JavaScript at all. Colors, width and radius are yours.
Chunky rounded Native CSS
Hi! 👋 I ordered the Trail Runner shoes on Monday. Any news on delivery?
Hello! Let me check that for you — one moment.
Your parcel left our warehouse this morning. It should arrive on Thursday.
Great, thanks! Can I still change the size?
It has already shipped, but exchanges are free within 30 days. I can email you a return label.
Perfect, please do.
Done! Check your inbox. Anything else I can help with?
That’s all — have a nice day!
You too! 😊
Chunky roundedPure CSS — no JavaScript at all. Colors, width and radius are yours.
Neon glow Native CSS
1import { createStore } from './store';
2
3// Keep the cart in sync across tabs
4const cart = createStore({
5  items: [],
6  coupon: null,
7});
8
9export function addItem(product, qty = 1) {
10  const found = cart.items.find(i => i.id === product.id);
11  if (found) {
12    found.qty += qty;
13  } else {
14    cart.items.push({ ...product, qty });
15  }
16  cart.save();
17}
18
19export function total() {
20  return cart.items.reduce(
21    (sum, i) => sum + i.price * i.qty, 0
22  );
23}
24
25window.addEventListener('storage', () => cart.reload());
Neon glowPure CSS — no JavaScript at all. Colors, width and radius are yours.
Square minimal Native CSS

Why small details matter

Visitors notice polish even when they can’t say why. A scrollbar that matches your brand is one of those quiet details that makes a site feel finished.

Keep it readable

Contrast matters more than color. The thumb should be easy to find at a glance, on light and dark sections alike.

Think about long pages

On long articles, section markers help readers see how much is left and jump straight to the part they need.

Don’t break scrolling

Wheel, keyboard and touch scrolling stay exactly as the browser does them — only the look changes.

Test on mobile

Phones show their own overlay bars, so by default the normal scrollbar is kept on touch devices.

Square minimalPure CSS — no JavaScript at all. Colors, width and radius are yours.
Inset track Native CSS

1. Your account

You are responsible for keeping your login details safe and for all activity under your account. Tell us straight away if you think someone else has used it. This is sample text for the demo and not a real legal document.

2. Orders & payment

Prices include VAT where it applies. We confirm every order by email; the contract starts when we send that email, not when you place the order. This is sample text for the demo and not a real legal document.

3. Delivery

Delivery times shown at checkout are estimates. If a parcel is late by more than 10 working days you may cancel and get a full refund. This is sample text for the demo and not a real legal document.

4. Returns

You can return most items within 30 days in their original condition. Personalised items can’t be returned unless they are faulty. This is sample text for the demo and not a real legal document.

5. Privacy

We only use your data to run your orders and, if you agree, to send you news. See our privacy policy for the details. This is sample text for the demo and not a real legal document.

6. Changes to these terms

We may update these terms. The version that applies is the one shown when you placed your order. This is sample text for the demo and not a real legal document.

Inset trackPure CSS — no JavaScript at all. Colors, width and radius are yours.
Dark pro Native CSS
1import { createStore } from './store';
2
3// Keep the cart in sync across tabs
4const cart = createStore({
5  items: [],
6  coupon: null,
7});
8
9export function addItem(product, qty = 1) {
10  const found = cart.items.find(i => i.id === product.id);
11  if (found) {
12    found.qty += qty;
13  } else {
14    cart.items.push({ ...product, qty });
15  }
16  cart.save();
17}
18
19export function total() {
20  return cart.items.reduce(
21    (sum, i) => sum + i.price * i.qty, 0
22  );
23}
24
25window.addEventListener('storage', () => cart.reload());
Dark proPure CSS — no JavaScript at all. Colors, width and radius are yours.
Glass Native CSS
1Morning LightAria Vale3:42
2Neon StreetsThe Lowtides4:05
3Paper PlanesJuno Park2:58
4Slow TideMaren & Co5:11
5Golden HourAria Vale3:27
6Static HeartsNightcall3:49
7Open RoadWilder Sun4:22
8Low OrbitKepler Kids3:15
9Home AgainJuno Park4:40
10Last TrainThe Lowtides3:33
GlassPure CSS — no JavaScript at all. Colors, width and radius are yours.
Rainbow Native CSS
Hi! 👋 I ordered the Trail Runner shoes on Monday. Any news on delivery?
Hello! Let me check that for you — one moment.
Your parcel left our warehouse this morning. It should arrive on Thursday.
Great, thanks! Can I still change the size?
It has already shipped, but exchanges are free within 30 days. I can email you a return label.
Perfect, please do.
Done! Check your inbox. Anything else I can help with?
That’s all — have a nice day!
You too! 😊
RainbowPure CSS — no JavaScript at all. Colors, width and radius are yours.
Striped Native CSS

Why small details matter

Visitors notice polish even when they can’t say why. A scrollbar that matches your brand is one of those quiet details that makes a site feel finished.

Keep it readable

Contrast matters more than color. The thumb should be easy to find at a glance, on light and dark sections alike.

Think about long pages

On long articles, section markers help readers see how much is left and jump straight to the part they need.

Don’t break scrolling

Wheel, keyboard and touch scrolling stay exactly as the browser does them — only the look changes.

Test on mobile

Phones show their own overlay bars, so by default the normal scrollbar is kept on touch devices.

StripedPure CSS — no JavaScript at all. Colors, width and radius are yours.
Outline Native CSS

1. Your account

You are responsible for keeping your login details safe and for all activity under your account. Tell us straight away if you think someone else has used it. This is sample text for the demo and not a real legal document.

2. Orders & payment

Prices include VAT where it applies. We confirm every order by email; the contract starts when we send that email, not when you place the order. This is sample text for the demo and not a real legal document.

3. Delivery

Delivery times shown at checkout are estimates. If a parcel is late by more than 10 working days you may cancel and get a full refund. This is sample text for the demo and not a real legal document.

4. Returns

You can return most items within 30 days in their original condition. Personalised items can’t be returned unless they are faulty. This is sample text for the demo and not a real legal document.

5. Privacy

We only use your data to run your orders and, if you agree, to send you news. See our privacy policy for the details. This is sample text for the demo and not a real legal document.

6. Changes to these terms

We may update these terms. The version that applies is the one shown when you placed your order. This is sample text for the demo and not a real legal document.

OutlinePure CSS — no JavaScript at all. Colors, width and radius are yours.
Candy 3D Native CSS
1Morning LightAria Vale3:42
2Neon StreetsThe Lowtides4:05
3Paper PlanesJuno Park2:58
4Slow TideMaren & Co5:11
5Golden HourAria Vale3:27
6Static HeartsNightcall3:49
7Open RoadWilder Sun4:22
8Low OrbitKepler Kids3:15
9Home AgainJuno Park4:40
10Last TrainThe Lowtides3:33
Candy 3DPure CSS — no JavaScript at all. Colors, width and radius are yours.
Reveal on hover Native CSS

Why small details matter

Visitors notice polish even when they can’t say why. A scrollbar that matches your brand is one of those quiet details that makes a site feel finished.

Keep it readable

Contrast matters more than color. The thumb should be easy to find at a glance, on light and dark sections alike.

Think about long pages

On long articles, section markers help readers see how much is left and jump straight to the part they need.

Don’t break scrolling

Wheel, keyboard and touch scrolling stay exactly as the browser does them — only the look changes.

Test on mobile

Phones show their own overlay bars, so by default the normal scrollbar is kept on touch devices.

Reveal on hoverInvisible until the pointer is over the box.
Hidden (still scrolls) Native CSS
Hi! 👋 I ordered the Trail Runner shoes on Monday. Any news on delivery?
Hello! Let me check that for you — one moment.
Your parcel left our warehouse this morning. It should arrive on Thursday.
Great, thanks! Can I still change the size?
It has already shipped, but exchanges are free within 30 days. I can email you a return label.
Perfect, please do.
Done! Check your inbox. Anything else I can help with?
That’s all — have a nice day!
You too! 😊
Hidden (still scrolls)For carousels and kiosks — no bar at all, scrolling still works.
REAL WEBSITES

Scrollable panels are everywhere — chats, code, terms, product rows, playlists. Each one below is a single widget set to “Only this widget’s showcase box”.

shophelp deskcheckoutdocsmusicmagazine
Online shop · product rowA horizontal row of products with a pill bar underneath — drag it or shift-scroll.
Support · Mia Custom engine
Hi! 👋 I ordered the Trail Runner shoes on Monday. Any news on delivery?
Hello! Let me check that for you — one moment.
Your parcel left our warehouse this morning. It should arrive on Thursday.
Great, thanks! Can I still change the size?
It has already shipped, but exchanges are free within 30 days. I can email you a return label.
Perfect, please do.
Done! Check your inbox. Anything else I can help with?
That’s all — have a nice day!
You too! 😊
Help desk · live chatA hairline bar that hides itself when the visitor stops scrolling.
Terms of sale Custom engine

1. Your account

You are responsible for keeping your login details safe and for all activity under your account. Tell us straight away if you think someone else has used it. This is sample text for the demo and not a real legal document.

2. Orders & payment

Prices include VAT where it applies. We confirm every order by email; the contract starts when we send that email, not when you place the order. This is sample text for the demo and not a real legal document.

3. Delivery

Delivery times shown at checkout are estimates. If a parcel is late by more than 10 working days you may cancel and get a full refund. This is sample text for the demo and not a real legal document.

4. Returns

You can return most items within 30 days in their original condition. Personalised items can’t be returned unless they are faulty. This is sample text for the demo and not a real legal document.

5. Privacy

We only use your data to run your orders and, if you agree, to send you news. See our privacy policy for the details. This is sample text for the demo and not a real legal document.

6. Changes to these terms

We may update these terms. The version that applies is the one shown when you placed your order. This is sample text for the demo and not a real legal document.

Checkout · terms & conditionsMarkers for every clause and the clause name in the tooltip, so buyers know where they are.
cart.js Native CSS
1import { createStore } from './store';
2
3// Keep the cart in sync across tabs
4const cart = createStore({
5  items: [],
6  coupon: null,
7});
8
9export function addItem(product, qty = 1) {
10  const found = cart.items.find(i => i.id === product.id);
11  if (found) {
12    found.qty += qty;
13  } else {
14    cart.items.push({ ...product, qty });
15  }
16  cart.save();
17}
18
19export function total() {
20  return cart.items.reduce(
21    (sum, i) => sum + i.price * i.qty, 0
22  );
23}
24
25window.addEventListener('storage', () => cart.reload());
Docs · code sampleNative CSS neon on a dark code block — no script needed.
Weekend mix Custom engine
1Morning LightAria Vale3:42
2Neon StreetsThe Lowtides4:05
3Paper PlanesJuno Park2:58
4Slow TideMaren & Co5:11
5Golden HourAria Vale3:27
6Static HeartsNightcall3:49
7Open RoadWilder Sun4:22
8Low OrbitKepler Kids3:15
9Home AgainJuno Park4:40
10Last TrainThe Lowtides3:33
Music app · playlistGlass bar on a dark player that fades out when idle.
The small details Custom engine

Why small details matter

Visitors notice polish even when they can’t say why. A scrollbar that matches your brand is one of those quiet details that makes a site feel finished.

Keep it readable

Contrast matters more than color. The thumb should be easy to find at a glance, on light and dark sections alike.

Think about long pages

On long articles, section markers help readers see how much is left and jump straight to the part they need.

Don’t break scrolling

Wheel, keyboard and touch scrolling stay exactly as the browser does them — only the look changes.

Test on mobile

Phones show their own overlay bars, so by default the normal scrollbar is kept on touch devices.

Magazine · long readProgress track on the left with heading markers and “section · percent” tooltip.
HOW IT WORKS

Only the look changes — scrolling stays fast, accessible and familiar.

accessibleno scroll hijackingFirefox colorsreduced motion
🎯
Page, selector or box
Style the whole page, any element by CSS selector (sidebars, modals, code blocks) — or both.
⚡
Two engines
Native CSS is the lightest. The Custom engine draws its own bar for motion, markers and tooltips.
📍
Section markers
A dot for each heading on the track. Hover to read it, click to jump — with an offset for sticky headers.
💬
Smart tooltip
Shows the percent scrolled, the current section, or both while you scroll or drag.
🖐
Drag & click
Grab the thumb, or click anywhere on the track to glide there.
🌙
Auto-hide & hover expand
Fades away when idle and grows wider under the pointer.
↔
Horizontal too
Product rows and tables that scroll sideways get a matching bottom bar.
📱
Touch friendly
Phones keep their normal overlay bar by default; scrolling itself is never replaced.

The chat, products, songs and terms in these boxes are sample content for the demo.

201 premium elements, Custom Scrollbar included.