---
title: "`animate-*` class with no matching `--animate-*` theme variable or `@keyframes` (lint/animate-undefined)"
description: "lint/animate-undefined: Registry components (Aceternity spotlight, React Bits StarBorder, meteors) ship `animate-spotlight`-style classes whose keyframes…"
canonical: https://void-design.vercel.app/rules/lint/animate-undefined
lastModified: 2026-09-16
---

# `animate-*` class with no matching `--animate-*` theme variable or `@keyframes`

`lint/animate-undefined` · severity **error** · category Lint · detected by `void lint` and `void audit`

## Why it matters

Registry components (Aceternity spotlight, React Bits StarBorder, meteors) ship `animate-spotlight`-style classes whose keyframes lived in a v3 `tailwind.config.js` or a comment. On Tailwind v4 the class compiles to nothing; when the base state is `opacity-0` the element is invisible forever, with no error.

## How to fix it

Define the animation in your CSS entry: `@theme { --animate-spotlight: spotlight 2s var(--ease-out) both; @keyframes spotlight { … } }`, or delete the class. void compiles the real CSS and reports every `animate-*` candidate that emitted no rule.

## Example

```css
@theme {
  --animate-spotlight: spotlight 2s cubic-bezier(0.23, 1, 0.32, 1) 0.75s both;
  @keyframes spotlight {
    from { opacity: 0; transform: translate(-72%, -62%) scale(0.5); }
    to   { opacity: 1; transform: translate(-50%, -40%) scale(1); }
  }
}
```

## References

- https://tailwindcss.com/docs/animation#customizing-your-theme

## More lint rules

`void lint` reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.

- `sitemap-lastmod-now` Sitemap uses `new Date()` for `lastModified` — [lint/sitemap-lastmod-now](https://void-design.vercel.app/rules/lint/sitemap-lastmod-now)
- `multiple-h1` More than one `<h1>` in a route's page + layouts — [lint/multiple-h1](https://void-design.vercel.app/rules/lint/multiple-h1)
- `jsonld-deprecated-type` JSON-LD type that no longer produces rich results — [lint/jsonld-deprecated-type](https://void-design.vercel.app/rules/lint/jsonld-deprecated-type)
- `route-js-budget` Route first-load JS over budget (from `.next` build output) — [lint/route-js-budget](https://void-design.vercel.app/rules/lint/route-js-budget)
- `random-in-render` `Math.random()` / `Date.now()` / `new Date()` evaluated in a component render body — [lint/random-in-render](https://void-design.vercel.app/rules/lint/random-in-render)
- `duplicate-children-not-hidden` Children repeated for a marquee/loop without `aria-hidden` or `inert` on the copies — [lint/duplicate-children-not-hidden](https://void-design.vercel.app/rules/lint/duplicate-children-not-hidden)
- `conditional-hook` Hook called inside a JSX expression, `&&`, ternary or callback — [lint/conditional-hook](https://void-design.vercel.app/rules/lint/conditional-hook)
- `svg-global-id` Hardcoded `id` on an SVG `<filter>`, gradient, `<clipPath>` or `<mask>` inside a reusable component — [lint/svg-global-id](https://void-design.vercel.app/rules/lint/svg-global-id)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/animate-undefined`