--- title: "Upstream bugs in component libraries, grouped by pattern (components)" description: "These 48 bugs were found by reading registry source (fetched 2026-09-16) and in shipped apps." canonical: https://void-design.vercel.app/docs/components/upstream-bugs lastModified: 2026-09-16 --- # Upstream bugs in component libraries, grouped by pattern These 48 bugs were found by reading registry source (fetched 2026-09-16) and in shipped apps. They are grouped by **pattern**: when you audit any registry component, scan for each pattern's signature, not just for the named components. Lint ids are `void lint` rules that catch the pattern statically. Format: **Library / component**: the bug → the impact. The fix pattern closes each group. ## 1. Dead on Tailwind v4 (silent: no error, the effect never shows) Signature: `animate-` classes with no `css`/`cssVars` in the registry item; keyframes in `tailwind.config.*` or in comments; v3 utility names; undefined theme classes. - **Aceternity `spotlight`**: `animate-spotlight` ships with no CSS, and the base class is `opacity-0` → invisible forever. - **Aceternity `meteors`, `moving-border`** (and other custom `animate-*` items): no CSS in the registry item → no animation. - **React Bits `StarBorder`**: keyframes exist only as a commented `tailwind.config.js` block → static. - **Registries generally**: `bg-gradient-to-*`, `flex-shrink-0`, bare `shadow`/`rounded`, `outline-none`, config keyframes → gradients missing, sizes one step off. - **Cult `direction-aware-tabs`**: undefined `shadow-inner-shadow` → silent style loss. - **kibo `gantt`**: undefined `--color-backdrop` → silent style loss. - **ReUI `frame`**: served JSON lost variant prefixes → dead variants. **Fix pattern:** put `@keyframes` + a class in `@layer components`, or `--animate-x` + `@keyframes` in `@theme`. Rename v3 utilities (`bg-linear-to-*`, `shrink-0`, `shadow-xs`, `outline-hidden`). Run `next build` and confirm the class exists in the compiled CSS. Lint: `lint/tw-unknown-class`, `lint/tw-js-config-ignored`, `lint/tw-v3-renamed`, `lint/tw-v3-arbitrary-var`. ## 2. Hidden or placeholder server HTML (SEO, no-JS, LCP) Signature: `opacity-0`, `initial={{ opacity: 0 }}` or `initial="hidden"` on text; a number component rendering `0`/`""`/`startValue`; GSAP `set` after hydration. - **Magic UI `number-ticker`**: SSR renders `startValue` (`0`), and a width change from `0` to `12,400` causes CLS → crawlers and link previews see 0. - **React Bits `CountUp`**: SSR renders an empty `` → no number without JS. - **Aceternity `text-generate-effect`**: every word SSRs at `opacity-0` + `blur(10px)` → invisible without JS; LCP delayed to the end of a 0.2s × N stagger. - **Magic UI `text-animate`**: `initial="hidden"` → text at opacity 0 before hydration. - **React Bits `SplitText`**: full text on the server, then GSAP sets `opacity:0; y:40` after `fonts.ready` → flash, hide, reveal; LCP moves. - **React Bits `SplitText`**: `willChange: "transform, opacity"` left on the parent after completion; pulls gsap + ScrollTrigger + SplitText (~45–70 KB) for one headline → a permanent layer; weight. Lint: `lint/will-change-static`. **Fix pattern:** SSR the final value and visible text. Animate position, not visibility, on LCP text (`RevealText`). Numbers animate only if they start offscreen (`NumberTicker`, or `@number-flow/react`). ## 3. SSR crashes and hydration mismatches Signature: `window`/`document`/`navigator`/`matchMedia`/`localStorage` at module scope or in render; `Math.random()`/`Date.now()` in render; `createPortal(document.body)` in render. - **Skiper106**: `navigator.userAgent` at module scope → SSR crash. - **Aceternity `background-beams`**: `Math.random()` in render for duration, delay and `y2` → hydration mismatch, and values re-randomise each render. - **Aceternity (26 of 118 free items)**: `Math.random()` in render → hydration risk. - **Magic UI `globe`**: `setTimeout(() => style.opacity = "1", 0)` → a hydration-timing hack. - **React Bits (all 171 files)**: no `'use client'` → RSC import errors. **Fix pattern:** browser globals only inside effects or `useSyncExternalStore` (server snapshot). Seeded or precomputed values instead of `Math.random()` in render. `'use client'` only on the interactive leaf. Lint: `lint/browser-global-in-render`. ## 4. Leaks: subscriptions and loops without cleanup Signature: `.on('change'` or `addEventListener` outside `useEffect`; `requestAnimationFrame` without `cancelAnimationFrame`; `new Lenis` without `destroy`; `api.on` without `off`; `setInterval` per instance. - **Skiper34, Skiper37**: `scrollY.on('change')` in the render body → a new listener every render. - **Skiper30** (+16/17/28/31/34): the Lenis rAF loop is never cancelled and `lenis.destroy()` is missing → a permanent rAF after unmount. - **Skiper54**: `api.on('select')` is never removed → listener leak. - **kibo `relative-time`**: a `setInterval` per instance, never paused → N timers. **Fix pattern:** `useMotionValueEvent` or an effect with an unsubscribe. Match every add, observe, rAF, interval or create with its remove, disconnect, cancel, clear or destroy. One shared ticker for lists. No Lenis. Lint: `lint/motionvalue-subscribe-in-render`, `lint/raf-without-cancel`, `lint/listener-without-cleanup`, `lint/timer-in-render`. ## 5. Hooks misuse Signature: `use[A-Z]…(` inside `&&`, ternaries, JSX or `style={{}}`; `m.create()` or component definitions in render; `ref.current` in deps; props already read from refs listed in effect deps. - **Magic UI `magic-card`**: `useMotionTemplate` inside `{mode === "gradient" && …}` → React throws when `mode` changes. - **Skiper19**: `useTransform` inside a `style={{}}` literal → rules-of-hooks violation. - **tailark `animated-group`**: `m.create()` in render → remount and replay every render. - **Aceternity `text-generate-effect`**: `[scope.current]` as an effect dep → a stale or ineffective effect. - **React Bits `Aurora`**: deps `[amplitude]` although the value is read from a ref → destroys and rebuilds the WebGL context on prop change. - **Magic UI `globe`**: `config` object in effect deps → inline `config={{…}}` recreates the globe every render. - **Cult `direction-aware-tabs`**: hardcoded `layoutId="bubble"` → two instances fight. **Fix pattern:** hooks at the top level; `useMemo` for created components; `useId()`-scoped `layoutId`; stable primitives in deps; update uniforms instead of rebuilding. ## 6. Per-frame React work and allocation Signature: `setState` inside `mousemove`/`pointermove`/`scroll`/rAF/`useAnimationFrame`; `new Intl.NumberFormat`, `new Color` or `getBoundingClientRect` inside loops; `window` listeners per instance. - **React Bits `Magnet`**: a window `mousemove` per instance + `getBoundingClientRect` + `setState` on every move → N listeners, layout reads and re-renders per event. - **React Bits `SpotlightCard`**: `setState` per move and a repainted full-card `radial-gradient` → re-renders children every frame. - **Magic UI `number-ticker`, React Bits `CountUp`**: a new `Intl.NumberFormat` per frame, locale hardcoded to `en-US` → GC churn; wrong locale. - **React Bits `Aurora`**: `new Color()` ×3 per frame → ~420 allocations/s. - **Aceternity `dotted-glow-background`**: `getBoundingClientRect` inside draw + `shadowBlur` per dot → forced layout at 60fps. - **ReUI `scrollspy`**: capture-phase scroll + a forced layout loop; its `throttleTime` prop is unused → scroll jank. - **Magic UI `number-ticker`**: `useSpring` with damping 60 → slow settle (the top idle cost in a shipped app). **Fix pattern:** refs + one rAF writing `el.style.translate` (`SpotlightCard`, `Magnetic`); measure once on enter or in a ResizeObserver; hoist formatters; IntersectionObserver instead of scroll listeners; near-critical springs. ## 7. Never stops: offscreen spin and no visibility pause Signature: `repeat: Infinity`, `infinite`, `useAnimationFrame` or a rAF loop with no IntersectionObserver, `useInView` or `data-fx`; WebGL libraries' internal loops. - **Magic UI `border-beam`**: motion animates `offset-distance` on the main thread forever → idle CPU. - **motion-primitives `border-trail`, tailark `infinite-slider`**: `repeat: Infinity`, never paused → idle main thread. - **React Bits `ShinyText`**: a perpetual `useAnimationFrame` writing `background-position` (still ticking when `disabled`) → a paint every frame per instance. - **Magic UI `globe`**: cobe's rAF runs until unmount; no IntersectionObserver or visibility pause → GPU burn. - **Magic UI `animated-beam`**: `repeat = Infinity` JS gradient animation → a repaint every frame. - **Magic UI `animated-beam`**: its ResizeObserver watches only the container; endpoints that move (font swap, image load, accordion) leave the beam pointing at stale coordinates. - **React Bits backgrounds**: 35/56 have no offscreen pause, 53/56 no reduced motion, 23/56 no DPR cap → GPU burn; WCAG 2.3.3. - **Aceternity `spotlight-new`**: infinite motion + `z-40` → covers content and never rests. **Fix pattern:** CSS animation + `data-fx` + `FxGate` (recipes §0). JS loops cancel (not skip) on IntersectionObserver and `visibilitychange`. Lint: `smooth/raf-loop-idle`. ## 8. Paint-bound or layout-bound animation Signature: animating `background`, `background-position`, `filter`, `box-shadow`, SVG gradient attributes, `width`/`height`/`top`/`left`; many stacked `backdrop-filter`s; `mask-image` over animated children. - **RareUI `HookSidebar`**: springs `top`/`height` → layout every frame. - **Magic UI `animated-beam`**: animates `x1/x2/y1/y2` of a `linearGradient` → path repaint per frame. - **Aceternity `background-beams`**: 50 SVG paths × animated gradients, no IntersectionObserver or RM → CPU raster. - **Magic UI `magic-card`** (orb mode): `filter: blur(60px)` on a 420px element moving with the pointer → a huge blurred layer per frame. - **Aceternity `text-generate-effect`**: `filter: blur` animated per word → rasterisation per word per frame. - **tailark `progressive-blur`**: 8 stacked `backdrop-filter` layers → 8–15ms per frame. - **kibo `gantt`**: 5× `backdrop-blur` on sticky elements → scroll jank. - **void measurement** (recipes §8–9): a `mask-image` fade over animated blobs → 10% dropped frames; a paint animation over an animated backdrop without its own layer → 14–46%. **Fix pattern:** move pre-rasterised layers with `translate`/`rotate` (`BeamBorder`, `AuroraBackdrop`, `SpotlightCard`); one blur + one mask; a static overlay instead of a mask over animation; `will-change: transform` on a single small paint-animated element. Lint: `lint/animate-layout-prop`, `lint/transition-all`, `smooth/animate-layout-property`. ## 9. DOM and node explosions Signature: `Array(n).fill().map` of animated nodes; per-character motion spans; SVG `` grids. - **Magic UI `dot-pattern`** (glow): ~5,130 ``s, each with an infinite spring → DOM and animation explosion. - **Magic UI `animated-grid-pattern`**: the same node explosion. - **motion-primitives `text-effect`**: per-character motion nodes by default → ~60 nodes per headline. **Fix pattern:** CSS gradients (`PatternBackdrop`); `per="word"` or CSS per-word (`RevealText`). ## 10. WebGL, canvas and expensive dependencies Signature: a `getContext('webgl')`/``/`createGlobe` per instance or in `.map()`; DPR 2 hardcoded; three/R3F for a 2D quad; heavy or stale dependencies. - **RareUI `FluidOrb`**: one WebGL context per instance, uncapped rAF, DPR 2 → the 9th context evicts the 1st in lists. - **React Bits `Silk`**: three + R3F (~150 KB) for one quad, `frameloop="always"` → the worst cost/benefit. - **React Bits `GridScan`**: imports `face-api.js` (~700 KB + weights) → a bundle bomb. - **Aceternity `globe`/`3d-globe`/`canvas-reveal-effect`/`vortex`**: three-globe or R3F, one context each → 600 KB+. - **Magic UI `globe`**: pins `cobe@^0.6.4` (current 2.0.1); `devicePixelRatio: 2` and `width * 2` hardcoded; `mapSamples: 16000` → a stale major; 4× pixels on DPR-1 screens. - **Magic UI `globe`**: drag uses `onPointerOut` with no `setPointerCapture` → the drag drops at the canvas edge. - **Animate UI** (17 items): depends on `@base-ui-components/react` (renamed to `@base-ui/react`) → a duplicate, older Base UI. - **shadcnblocks**: `import { cn } from "cn"` + a `"cn"` dependency → phantom dependency. - **ReUI `tree`/`rating`**: site-internal `@/app/(create)/…` imports → build break. **Fix pattern:** ≤1 context per page, never in lists (static seeded frame for many instances); DPR ≤1.5; ≤30fps; ogl or raw WebGL2 per `speed` → `references/rendering-smoothness.md` §8; cobe 2.x for globes; diff registry `dependencies` against `package.json`. Lint: `lint/webgl-in-map`, `lint/heavy-import`, `smooth/multiple-webgl-contexts`. ## 11. Accessibility Signature: duplicated content without `aria-hidden`/`inert`; `aria-label` on generic elements; clickable `
  • `/`
    `; `