# Glow bars
> A cash-flow chart. The month under the pointer lights up in violet and blue, and a tooltip glides along with it, rolling its figures.
A monthly chart of incomes and outcomes, muted at rest. Point at a month, or move with the arrow keys, and its two bars light up: incomes in a violet-pink glow and outcomes in blue, both with a fine grain and a sheen running up them. The light and the tooltip glide from month to month, and the tooltip’s figures roll to their new values.
A React component by Bruno Delorence: https://brunodelorence.com/components/glow-bars. MIT License, Copyright (c) 2026 Bruno Delorence.
Category: Data.
## Anatomy
1. **Title**: Names the card, and labels it for a screen reader together with the first and last period. The subtitle under it says what is compared.
2. **Menu button**: The ⋮ button, a real button labelled “Chart options”: it calls `onMenu`.
3. **Y axis**: Seven labels, $0 to `max`, one on every sixth of it, each centred on its gridline.
4. **Muted bars**: Each period’s pair at rest, incomes left and outcomes right: a soft grey gradient, its top on its value, 4 px above the $0 line.
5. **Lit period**: One glowing pair, a column wide, that slides to the period under the pointer while its bars stretch to the new values. A sheen runs up them once they settle.
6. **Tooltip**: Both figures and the period, riding with the lit pair: lifted to the taller bar, and over to its left near the right edge.
7. **Periods**: The short name under each column (`short` in `months`); the full name is in the tooltip and is what gets announced.
8. **Legend**: The two series’ names, from `series`, with a swatch in each one’s glow.
## When to use
- Two money series side by side over a few periods, money in against money out, where the reader compares one period at a time.
- Between 4 and 12 periods: months, quarters or seasons, each with a short name under its column.
- A dashboard card where the exact figures matter on demand: the tooltip gives both, to the cent, for the lit period.
- A hero chart worth a moment of delight: the lit pair glides from column to column and its digits roll.
## When not to use
- More than two series, or series that are not money. Use a grouped bar chart with its own legend and axis format.
- A long time series (years of days or weeks). Use a line or area chart that can zoom and pan.
- When every value must be readable at once, as in a report or a print. Use a table, or bars with their labels on them.
- Totals that are negative, or a net figure on its own. The bars start at $0; show the net in the subtitle, updated through `onMonthChange`.
- Dense screens with several charts: one glowing card draws the eye, several compete for it.
## Installation
Install it with the shadcn CLI, into components/glow-bars of any React project:
```sh
npx shadcn@latest add https://brunodelorence.com/r/glow-bars.json
```
Or copy all the source files below into one folder of your project. Either way it needs React 19 and a bundler with CSS Modules (Next.js, Vite).
It has a dark colour scheme. Its colours are CSS light-dark() pairs, kept inside @supports so that builds which rewrite light-dark() for older browsers leave them alone: it follows your page’s color-scheme (light unless the page sets one) or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light.
## Usage
```tsx
'use client';
import { useState } from 'react';
import { GlowBars } from './glow-bars';
import { MONTHS } from './months';
export function CashFlowCard() {
const [month, setMonth] = useState(2);
return (
);
}
```
## States
- **Lit period**: The default: March lit, the tooltip on the pair’s right, lifted to its taller bar.
- **First period**: The lit pair at the left edge; the tooltip still opens to its right.
- **Near the right edge**: Past 70% of the way across, the tooltip moves to the other side of the pair so it stays on the card.
- **Few periods**: Four quarters with their own `max` and `series`: the columns share the width, so the bars are wider.
- **Twelve periods**: A full year with one-letter names: narrow columns, the same tooltip.
- **Narrow card**: Under 520 px the type gets smaller and the tooltip stacks its two figures over one date.
- **Light**: With `colorScheme="light"`: a white card whose lit bars cast a soft light of their colour.
- **Dark**: With `colorScheme="dark"`: a dark card; the bars shine on their own, with no light cast.
## Examples
### Quarters
A shop’s year in four quarters: wider bars on a $12k axis, the series named Sales and Costs, and the fourth quarter lit.
```tsx
import { GlowBars } from './glow-bars';
import type { CashMonth } from './months';
const QUARTERS: CashMonth[] = [
{ short: 'Q1', name: 'Q1 2025', income: 6842.3, outcome: 4915.6 },
{ short: 'Q2', name: 'Q2 2025', income: 7960.45, outcome: 5288.1 },
{ short: 'Q3', name: 'Q3 2025', income: 5410.8, outcome: 4702.35 },
{ short: 'Q4', name: 'Q4 2025', income: 9276.9, outcome: 6134.55 },
];
export function Quarters() {
return (
);
}
```
### Full year
Twelve months of a lake cabin’s rentals, with slimmer bars over the months’ initials and August, the busiest, lit at first.
```tsx
import { GlowBars } from './glow-bars';
import type { CashMonth } from './months';
const YEAR: CashMonth[] = [
{ short: 'J', name: 'January 2025', income: 980, outcome: 1236.4 },
{ short: 'F', name: 'February 2025', income: 1240, outcome: 1198.75 },
{ short: 'M', name: 'March 2025', income: 1685.5, outcome: 1154.2 },
{ short: 'A', name: 'April 2025', income: 2410, outcome: 1302.85 },
{ short: 'M', name: 'May 2025', income: 3175.25, outcome: 1388.6 },
{ short: 'J', name: 'June 2025', income: 4260, outcome: 1546.3 },
{ short: 'J', name: 'July 2025', income: 4985.5, outcome: 1712.95 },
{ short: 'A', name: 'August 2025', income: 5040, outcome: 1768.4 },
{ short: 'S', name: 'September 2025', income: 3620.75, outcome: 1421.1 },
{ short: 'O', name: 'October 2025', income: 2290, outcome: 1265.55 },
{ short: 'N', name: 'November 2025', income: 1120, outcome: 1184.9 },
{ short: 'D', name: 'December 2025', income: 1845, outcome: 1327.65 },
];
export function FullYear() {
return (
);
}
```
### Over budget
Six months on a $3k axis in which spending passes earnings twice; September is lit, so the tooltip sits on the taller blue bar.
```tsx
import { GlowBars } from './glow-bars';
import type { CashMonth } from './months';
const BUDGET: CashMonth[] = [
{ short: 'Jul', name: 'July 2025', income: 1860, outcome: 1512.4 },
{ short: 'Aug', name: 'August 2025', income: 1860, outcome: 1698.75 },
{ short: 'Sep', name: 'September 2025', income: 1925, outcome: 2384.6 },
{ short: 'Oct', name: 'October 2025', income: 2045.5, outcome: 1621.3 },
{ short: 'Nov', name: 'November 2025', income: 1925, outcome: 1587.9 },
{ short: 'Dec', name: 'December 2025', income: 2310, outcome: 2486.2 },
];
export function OverBudget() {
return (
);
}
```
### Net per month
A cash-flow card whose subtitle gives the lit month’s net, incomes less outcomes: onMonthChange keeps it current.
```tsx
'use client';
import { useState } from 'react';
import { GlowBars } from './glow-bars';
import { MONTHS } from './months';
const net = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
signDisplay: 'exceptZero',
});
export function NetPerMonth() {
const [month, setMonth] = useState(MONTHS.length - 1);
const { name, income, outcome } = MONTHS[month];
return (
);
}
```
## How it works
- The lit pair is a single column of two glowing bars that a transform moves to the active month. Each bar’s height is a clip-path inset and its gradient a background-size, both transitioned, so the light stretches as it glides and no box ever changes size.
- The tooltip travels inside that column, placed by three nested transforms set from CSS variables: one lifts it to the taller bar, one flips it to the other side of the pair near the right edge, and one gives it its own offset. Each digit of its figures is a reel of 0 to 9 that slides to its value.
- The first time the chart comes into view, the bars grow in month after month, with the Web Animations API on clip-path. Once a glide settles, a soft white band runs up the two lit bars. The frosted look comes from a tiled noise texture and an inset rim.
- With a mouse or a pen, the month under the pointer lights up; a touch picks a month while it is down, and a press or a key also announces the month. The month is read from the plot’s box, so it still lands right when the chart is drawn scaled down.
- The demo pointer sweeps from January to July and back to March. The sweep is an animation the compositor plays, and the lit month is worked out from how far along it is rather than from the page’s geometry, so the demo never forces a layout.
- Every colour is a light-dark() token, so the card follows the page’s color-scheme, or the colorScheme prop: white by day, near-black at night, on the same light grid. On white the lit bars are a shade deeper and cast a soft light in their own colour, a drop shadow on a wrapper round each bar, so it follows the bar as it stretches and grows in.
## API reference
- **title** (`string`, default `'Cash Flow Trends'`): The card’s title.
- **subtitle** (`string`, default `'Monthly income vs expenses comparison'`): The line under the title.
- **months** (`CashMonth[]`, default `MONTHS`): The months in order, each with a short name, a full name, and incomes and outcomes in dollars.
- **max** (`number`, default `6000`): The top of the y axis in dollars; there is a gridline at every sixth of it.
- **series** (`{ income: string; outcome: string }`, default `{ income: 'Incomes', outcome: 'Outcomes' }`): The names of the two series, money in and money out, as the legend shows them and screen readers hear them.
- **defaultMonth** (`number`, default `2`): The month lit at first, as its index in months.
- **onMonthChange** (`(index: number) => void`): Called with the index of each month the reader lights.
- **onMenu** (`() => void`): Called when the ⋮ button is pressed.
- **autoplay** (`boolean`, default `true`): While on screen and untouched, a demo pointer sweeps across the months.
- **growIn** (`boolean`, default `true`): The bars grow in, month after month, the first time the chart comes into view; false draws them at their values at once.
- **colorScheme** (`'light' | 'dark' | 'system'`): Its colours: light, dark, or the reader’s system setting. Without it the component follows the page’s color-scheme, which is light unless the page sets one.
- **className** (`string`): Extra class for the root, a stage of its own.
## Accessibility
- The chart is a focusable group with the role description “chart” and a short hint. The arrow keys, Home and End move between months, and each month’s two figures are read out in a polite live region; the demo’s own moves are not announced.
- The ⋮ is a labelled button and the legend is a list. The gridlines, bars, axis labels and the tooltip drawing are hidden from screen readers.
- Focus rings are visible on the chart and on the button. Under reduced motion there is no grow-in, glide, rolling digits, sheen or demo.
- The server renders a complete chart with March lit, so it reads the same without JavaScript.
## Source
### glow-bars/glow-bars.tsx
```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.
'use client';
import {
useEffect,
useId,
useRef,
useState,
type CSSProperties,
type FocusEvent,
type KeyboardEvent,
type PointerEvent,
} from 'react';
import { DemoPointer, runDemo, type Point } from './demo-pointer';
import { MONTHS, type CashMonth } from './months';
import { useAutoplay } from './use-autoplay';
import styles from './glow-bars.module.css';
/*
* Glow bars: a cash-flow card whose bars light up under the pointer.
*
* - Each month is a pair of rounded bars, incomes and outcomes, muted at rest. The month under the
* pointer (or picked with the arrow keys) glows: incomes in violet and pink, outcomes in blue
* and cyan, with a fine grain and a sheen that runs up them once they settle.
* - The glow is one pair of bars that travels from month to month, so the light glides rather
* than blinks. Its column slides with a transform; each bar's height is a clip-path, and its
* gradient a background-size, both transitioned, so the bars stretch while they travel.
* - The tooltip rides along: a column wide, it is moved with transforms only (across, up to the
* taller bar, and over to the other side of the pair near the right edge), from CSS variables.
* Its figures roll: each digit is a reel of 0 to 9 that slides to its place.
* - The bars grow in, month after month, the first time the chart comes into view.
* - The chart is focusable: the arrow keys, Home and End move between months, and the month's
* figures are announced.
* - Light or dark: every colour is a light-dark() token in the CSS, so the card is white on a
* light page and dark on a dark one (the page's color-scheme, or the one the colorScheme prop
* sets). On white, the lit bars cast a soft light of their colour: a drop shadow on a wrapper
* round each bar, so it follows the bar as it is clipped and grows in. At night it is
* transparent: the bars shine on their own.
*
* GlowBars is the card on its stage; while the stage is on screen and untouched, a demo pointer
* sweeps across the months.
*/
/** The y axis' steps: gridlines at every sixth of the maximum. */
const STEPS = 6;
/** How long the bars take to grow in, and the delay from one month to the next, in ms. */
const GROW = 760;
const STAGGER = 70;
/** How long after a month lights up its sheen runs, in ms: once the glide has settled. */
const SHEEN_DELAY = 260;
const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
/** An axis label: $0, $500, $1k, $1.5k … */
const tick = (value: number) =>
value < 1000 ? `$${Math.round(value)}` : `$${Number((value / 1000).toFixed(1)).toString()}k`;
/** The two series' names, unless the chart is given others. */
const SERIES = { income: 'Incomes', outcome: 'Outcomes' };
const reducedMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/** A figure whose digits roll to their places: each digit is a reel of 0 to 9, moved by CSS. */
function RollingFigure({ text }: { text: string }) {
const characters = [...text];
return (
{characters.map((character, index) => {
// Keyed from the right, so that each place keeps its reel when the figure grows a digit.
const key = characters.length - index;
if (!/\d/.test(character)) {
return (
{character}
);
}
return (
{'0123456789'.split('').map((digit) => (
{digit}
))}
);
})}
);
}
export function GlowBars({
title = 'Cash Flow Trends',
subtitle = 'Monthly income vs expenses comparison',
months = MONTHS,
max = 6000,
series = SERIES,
defaultMonth = 2,
onMonthChange,
onMenu,
autoplay = true,
growIn = true,
colorScheme,
className = '',
}: {
/** The card's title. */
title?: string;
/** The line under the title. */
subtitle?: string;
/** The months, in order: a short name, a full name, incomes and outcomes in dollars. */
months?: CashMonth[];
/** The top of the y axis, in dollars; the axis has a gridline at every sixth of it. */
max?: number;
/** The names of the two series, money in and money out: in the legend and when announced. */
series?: { income: string; outcome: string };
/** The month lit at first, as its place in `months`. */
defaultMonth?: number;
/** Called with the place of each month the reader lights. */
onMonthChange?: (index: number) => void;
/** Called when the ⋮ button is pressed. */
onMenu?: () => void;
/** While on screen and untouched, a demo pointer sweeps across the months. */
autoplay?: boolean;
/** The bars grow in, month after month, the first time the chart comes into view; false draws
* them at their values at once. */
growIn?: boolean;
/** Light or dark colours, or 'system' for the reader's; without it, the page's color-scheme. */
colorScheme?: 'light' | 'dark' | 'system';
/** Extra class for the root, a stage of its own. */
className?: string;
}) {
const { ref: root, playing, take } = useAutoplay(6000);
const last = months.length - 1;
const [active, setActive] = useState(() => Math.min(last, Math.max(0, defaultMonth)));
/** The lit month as last set, for keys pressed faster than the chart redraws. */
const current = useRef(active);
const [announcement, setAnnouncement] = useState('');
/** Keyboard focus is on the stage: the demo leaves it alone. */
const [keyboard, setKeyboard] = useState(false);
const band = useRef(null);
const plot = useRef(null);
const pointer = useRef(null);
const stopDemo = useRef<(() => void) | null>(null);
const hintId = useId();
const month = months[Math.min(active, last)];
const share = (value: number) => Math.min(1, Math.max(0, value / max));
/** Lights a month; the reader's own picks are reported, and announced when `say` is set. */
const light = (index: number, by: 'reader' | 'demo', say = false) => {
const next = Math.min(last, Math.max(0, index));
current.current = next;
setActive(next);
if (by === 'demo') return;
onMonthChange?.(next);
if (say) {
const { name, income, outcome } = months[next];
setAnnouncement(
`${name}: ${series.income} ${money.format(income)}, ${series.outcome} ${money.format(outcome)}.`,
);
}
};
/** The month under a point of the screen (the chart may be drawn scaled). */
const monthAt = (clientX: number) => {
const element = band.current;
if (!element) return active;
const box = element.getBoundingClientRect();
return Math.floor(((clientX - box.left) / box.width) * months.length);
};
// The bars grow in the first time the chart is on screen. Until then, a stage that starts off
// screen keeps them hidden, so that they do not show full and then drop to nothing.
useEffect(() => {
const stage = root.current;
const area = plot.current;
if (!stage || !area || !growIn || reducedMotion()) return;
const running: Animation[] = [];
let first = true;
const observer = new IntersectionObserver(
([entry]) => {
if (!entry.isIntersecting) {
if (first) stage.dataset.waiting = '';
first = false;
return;
}
observer.disconnect();
delete stage.dataset.waiting;
const easing = 'cubic-bezier(0.22, 1, 0.36, 1)';
const hidden = 'inset(100% 0 0 0 round 6px)';
area.querySelectorAll('[data-month]').forEach((bar) => {
const delay = Number(bar.dataset.month) * STAGGER;
const grow = { duration: GROW, delay, easing, fill: 'backwards' as const };
// A muted bar is its own height; a glow is clipped to its value (as its stylesheet does).
const rest = 1 - Number(bar.style.getPropertyValue('--v') || 0);
const shown = bar.hasAttribute('data-glow')
? `inset(calc(${(rest * 100).toFixed(3)}% + ${(rest * 4).toFixed(3)}px) 0 0 0 round 6px)`
: 'inset(0 0 0 0 round 6px)';
running.push(bar.animate([{ clipPath: hidden }, { clipPath: shown }], grow));
});
const tip = area.querySelector('[data-tip]');
if (tip) {
running.push(
tip.animate([{ opacity: 0 }, { opacity: 1 }], {
duration: 320,
delay: GROW * 0.55 + months.length * STAGGER * 0.5,
fill: 'backwards',
}),
);
}
},
{ threshold: 0.3 },
);
observer.observe(stage);
return () => {
observer.disconnect();
running.forEach((animation) => animation.cancel());
delete stage.dataset.waiting;
};
}, [root, months.length, growIn]);
// Once a month is lit and the glide has settled, a sheen runs up its two bars.
useEffect(() => {
const area = plot.current;
if (!area || reducedMotion()) return;
const running: Animation[] = [];
const timer = window.setTimeout(() => {
area.querySelectorAll('[data-sheen]').forEach((sheen, index) => {
const value = share(index === 0 ? month.income : month.outcome);
// From under the bar to past its top, in the sheen's own height (30% of the column).
const travel = ((value + 0.3) / 0.3) * 100;
running.push(
sheen.animate(
[
{ transform: 'translateY(0)', opacity: 0 },
{ opacity: 1, offset: 0.2 },
{ opacity: 1, offset: 0.7 },
{ transform: `translateY(-${travel.toFixed(1)}%)`, opacity: 0 },
],
{ duration: 1300, delay: index * 90, easing: 'cubic-bezier(0.3, 0, 0.3, 1)' },
),
);
});
}, SHEEN_DELAY);
return () => {
window.clearTimeout(timer);
running.forEach((animation) => animation.cancel());
};
// The sheen runs for each new month; the month's figures come with it.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [active]);
// The demo: the pointer comes onto January, sweeps slowly to July, comes back to March, rests,
// and leaves the chart for a while.
const demo = autoplay && playing && !keyboard;
useEffect(() => {
const stage = root.current;
const arrow = pointer.current;
if (!demo || !stage || !arrow) return;
/** A point over month `index`, `height` of the way up the plot, on the screen. */
const over = (index: number, height: number): Point => {
const box = band.current?.getBoundingClientRect();
if (!box) return { x: 0, y: 0 };
return {
x: box.left + ((index + 0.5) / months.length) * box.width,
y: box.bottom - height * box.height,
};
};
const stop = runDemo(stage, arrow, async ({ wait, moveTo, sweep }) => {
/** Sweeps from over month `from` to over month `to`, lighting each month it passes. */
const across = (from: number, to: number, height: number, ms: number) =>
sweep(over(to, height), ms, (share) => {
// The pointer runs from the middle of one month to the middle of the other.
light(Math.floor(from + 0.5 + (to - from) * share), 'demo');
});
await wait(1400);
for (;;) {
await moveTo(over(0, 0.34));
light(0, 'demo');
await wait(700);
await across(0, last, 0.46, 520 * last);
await wait(1100);
const back = Math.min(2, last);
await across(last, back, 0.4, 600 * Math.max(1, last - back));
await wait(2600);
const box = stage.getBoundingClientRect();
await moveTo({ x: box.left + box.width * 0.86, y: box.top + box.height * 0.9 });
await wait(2200);
}
});
stopDemo.current = stop;
return stop;
// The demo reads the months through `over` and `light` as it plays.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [demo, root]);
/** The reader takes over: the demo stops at once and waits until they leave it alone. */
const readerActs = () => {
stopDemo.current?.();
take();
};
const onPointerMove = (event: PointerEvent) => {
// A touch picks while it is down; a mouse or a pen as it hovers.
if (event.pointerType === 'touch' && !event.buttons) return;
readerActs();
const index = monthAt(event.clientX);
if (index !== current.current && index >= 0 && index <= last) light(index, 'reader');
};
const onPointerDown = (event: PointerEvent) => {
const index = monthAt(event.clientX);
if (index >= 0 && index <= last) light(index, 'reader', true);
};
const onKeyDown = (event: KeyboardEvent) => {
const from = current.current;
const moves: Partial> = {
ArrowRight: from + 1,
ArrowDown: from + 1,
ArrowLeft: from - 1,
ArrowUp: from - 1,
Home: 0,
End: last,
};
const next = moves[event.key];
if (next === undefined) return;
event.preventDefault();
light(next, 'reader', true);
};
const onFocus = (event: FocusEvent) => {
if (event.target.matches(':focus-visible')) setKeyboard(true);
};
const onBlur = (event: FocusEvent) => {
if (!event.currentTarget.contains(event.relatedTarget)) setKeyboard(false);
};
const income = share(month.income);
const outcome = share(month.outcome);
// Near the right edge the tooltip sits on the other side of the pair.
const flip = (active + 0.5) / months.length > 0.7 ? 1 : 0;
const lit = {
'--n': months.length,
'--i': active,
'--top': Math.max(income, outcome),
'--flip': flip,
} as CSSProperties;
return (