0% completedDrag across the word to change it.

Show progress inside a word.

glyphfill makes letters heavier, or fills them with ink, as a task gets done. Use it in React, Vue, Svelte or plain JavaScript.

npmpnpmyarnbun

npm install glyphfill

Fits in a sentence

Your is filling up, this month’s is on track, and your is still loading.

Hover over a word, or Tab to it, to see its exact progress.

Playground

Try a word, a mode and a font. The code below updates as you go.

import { GlyphFill } from 'glyphfill/react';
import 'glyphfill/styles.css';

<GlyphFill value={40}>USAGE</GlyphFill>

Three modes

Pick how the progress shows. Drag the slider to compare them side by side.

Progress55%

`mode="sweep"`

Letters before the progress point turn heavy and the rest stay thin. The letter on the edge sits between the two. This is the default.

`mode="fill"`

Solid ink covers outlined letters from left to right and can stop partway through a letter. Works with any font.

`mode="weight"`

The whole word gets heavier together. Best when the word itself matters more than where the progress is.

`fillColor`

Filled letters change to any CSS color, so a word can turn your brand color, or green as it nears 100%.

No value yet

Leave out value while you wait for real numbers. A wave of weight moves through the word, and screen readers hear that it is loading.

Works with your stack

glyphfill only styles its own classes, with zero specificity, so your utility classes, themes and styled() wrappers win. The word takes your font, size and color.

Import the stylesheet into Tailwind’s components layer, so utilities override it: text-*, data-[gf-state=complete]:*, or arbitrary properties for the CSS variables. On Tailwind v3, a plain import is enough.

app.css

@import "tailwindcss";
@import "glyphfill/styles.css" layer(components);

Usage.tsx

<GlyphFill
  value={used}
  className="text-5xl text-zinc-500 [--gf-fill:var(--color-emerald-600)] data-[gf-state=complete]:text-emerald-600"
>
  USAGE
</GlyphFill>

Usage

Install

npmpnpmyarnbun

npm install glyphfill

Use it

Renders on the server and works in React Server Components. It forwards its ref, so asChild, styled() and motion() wrappers work.

import { GlyphFill } from 'glyphfill/react';
import 'glyphfill/styles.css';

export function Usage({ used }: { used: number }) {
  return <GlyphFill value={used}>USAGE</GlyphFill>;
}

Fonts

Sweep and weight modes need a variable font to move smoothly. With a static font, the browser snaps each letter to the nearest weight the font has. Fill mode works with any font.

Styling

The word inherits your font, size and color. Override anything with your own classes, or use the CSS variables and attributes below.

Accessibility

Each word is a progress bar with a value, so screen readers announce it as “storage, 72% completed”, or as loading. When the tooltip is on, the word can be reached with Tab. Animations turn off when the reader prefers reduced motion.

Options

Option	Type	Default	What it does
`value`	`number`	`none`	Percent complete, from 0 to 100. Leave it out to show a loading animation.
`mode`	`'sweep' \| 'fill' \| 'weight'`	`'sweep'`	How the progress is drawn.
`minWeight`	`number`	`100`	Weight of the unfilled letters.
`maxWeight`	`number`	`900`	Weight of the filled letters.
`fillColor`	`string`	`none`	Any CSS color. Filled letters change to it.
`duration`	`number`	`300`	Transition length in ms. Turned off when the reader prefers reduced motion.
`tooltip`	`boolean \| string \| (word, pct) => string`	`true`	Text shown on hover and focus. Pass false to hide it. pct is null while loading.
`text`	`string`	`children`	The word, for Svelte and plain JavaScript. React and Vue read it from children.

CSS variables and attributes

Name	Kind	What it does
`--gf-fill`	CSS variable	Fill color. Same as the fillColor option.
`--gf-tip-bg`	CSS variable	Tooltip background.
`--gf-tip-fg`	CSS variable	Tooltip text color.
`--gf-stroke`	CSS variable	Outline width in fill mode.
`data-gf-state`	attribute	loading, progress or complete. Style the finished state with it.
`data-gf-mode`	attribute	sweep, fill or weight.

Add it with an AI assistant

Paste this into Claude Code, Cursor, Copilot or any coding assistant. It points the assistant at llms-full.txt, the full docs as plain text. There is also a shorter llms.txt.

Prompt

Add glyphfill to this project. It shows progress inside a word: letters get heavier, or fill with ink, as a task completes.

1. Install it: npm install glyphfill
2. Read https://glyphfill.sush.dev/llms-full.txt for the full API before writing code.
3. Import 'glyphfill/styles.css' once, in the global stylesheet or root layout. If the project uses Tailwind CSS v4, add @import "glyphfill/styles.css" layer(components); to the main CSS file instead.
4. Use the entry point for this project's framework: GlyphFill from 'glyphfill/react', 'glyphfill/vue' or 'glyphfill/svelte', or glyphfill(element, options) from 'glyphfill' anywhere else.
5. Find places where we show a percentage next to a label (usage, quotas, uploads, onboarding steps) and suggest where a GlyphFill word would fit. Ask me before replacing an existing progress bar.