# tw-shimmer
> Tailwind CSS v4 plugin for shimmer effects
Latest version **0.4.13** (published 2026-09-11) · MIT license · 0 weekly downloads
## Install
```sh
npm install tw-shimmer
pnpm add tw-shimmer
yarn add tw-shimmer
bun add tw-shimmer
```
## Health
**Score 70/100 (B)** — status: active.
Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo.
Warnings: low downloads; no types; pre 1.0.
## Facts
| | |
|---|---|
| Version | 0.4.13 |
| Published | 2026-09-11 |
| First published | 2025-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 12289 |
| Author | AgentbaseAI Inc. |
| Maintainers | yonom, agentbase-bot |
| Keywords | tailwindcss, tailwind, shimmer, skeleton, loading, animation, css |
## Links
- npm: https://www.npmjs.com/package/tw-shimmer
- Repository: https://github.com/assistant-ui/assistant-ui
- Homepage: https://www.assistant-ui.com/tw-shimmer
- Issues: https://github.com/assistant-ui/assistant-ui/issues
- npm.io page: https://npm.io/package/tw-shimmer
## Alternatives
- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
## Recent versions
- 0.4.13 (latest) — 2026-09-11
- 0.4.12 — 2026-07-16
- 0.4.11 — 2026-04-24
- 0.4.10 — 2026-04-06
- 0.4.9 — 2026-03-17
- 0.4.8 — 2026-03-04
- 0.4.7 — 2026-02-25
- 0.4.6 — 2026-02-06
- 0.4.5 — 2026-02-04
- 0.4.4 — 2026-01-29
- 0.4.3 — 2026-01-21
- 0.4.2 — 2025-12-20
- 0.4.1 — 2025-12-12
- 0.4.0 — 2025-12-08
- 0.2.2 — 2025-11-27
- … 3 more at https://npm.io/package/tw-shimmer/versions
## README
# `tw-shimmer`
[](https://www.npmjs.com/package/tw-shimmer)
[](https://www.npmjs.com/package/tw-shimmer)
[](https://github.com/assistant-ui/assistant-ui)
Tailwind CSS v4 plugin for shimmer effects. Zero-dependency, CSS-only, with sine-eased gradients for buttery-smooth highlights and OKLCH color space for perceptually uniform color mixing. Provides text-shimmer and skeleton/background-shimmer variants with customizable speed, spread, angle, and colors.
## Installation
```bash
npm install tw-shimmer
```
```css
/* app/globals.css */
@import "tailwindcss";
@import "tw-shimmer";
```
## Usage
Text shimmer keeps one text node. Where `-webkit-mask-clip: text` is supported, the host is masked and an additive highlight band moves on the compositor. Other browsers keep the existing gradient fallback.
```html
Loading...
```
Inside a `shimmer-container`, the plugin derives the track width from the container width. Because the container exposes only its inline size, the height term for angled gradients uses the nearest block-size query container when available and otherwise the small viewport height, with half the container width and `200px` as minimums. Text shimmer hosts should contain text only: the host mask clips every descendant, including icons. Selection backgrounds are clipped to the glyphs on the compositor path.
The compositor highlight is additive. It defaults to white and `--shimmer-color`, including `shimmer-color-*`, overrides the band color. This matches the gradient on white and dark surfaces but can look different on tinted surfaces. `shimmer-invert` selects a black band.
Text shimmer holds still under `prefers-reduced-motion: reduce` on both paths, leaving the label in its plain text color. `shimmer-bg` keeps animating.
## Utilities
| Utility | Effect |
| ------------------------ | ----------------------------------------------------------------------------- |
| `shimmer` | Base text shimmer. Pair with a low-opacity text color. |
| `shimmer-bg` | Background shimmer; requires `shimmer` and a base `bg-*` class. |
| `shimmer-container` | Parent container that sizes the animation track for children. |
| `shimmer-speed-{value}` | Animation speed in px per second (text: 200, background: 1000 by default). |
| `--shimmer-track-width` | Animation track width for timing (200px by default). |
| `shimmer-spread-{value}` | Highlight thickness (text: `calc(4ch + 80px)`, background: 480px by default). |
| `shimmer-angle-{value}` | Highlight angle in degrees (15 by default). |
| `shimmer-repeat-delay-*` | Pause between cycles in ms (text: 100, background: 20 by default). |
| `shimmer-color-{color}` | Highlight color from your Tailwind palette. |
| `shimmer-invert` | Use a contrasting additive highlight band. |
Variables are inheritable; set them on any ancestor element and descendants pick them up unless they override. The same speed, duration, repeat delay, angle, and track width drive both rendering paths.
## Documentation
Full utility reference, accessibility notes, and the technical details of the sine-eased gradient pipeline at [assistant-ui.com/tw-shimmer](https://www.assistant-ui.com/tw-shimmer).
---
_Source: https://npm.io/package/tw-shimmer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._