u/quintin331

You know the feeling. You have 8 cards on screen. Each one has its own shimmer animation. They all start at slightly different times. The whole page just... flickers chaotically.

I spent way too long accepting this as normal. Then I built shimmer-trace to fix it.

The core idea is simple: Instead of animating each skeleton block separately, the library renders your real component invisibly, traces every element's exact shape using getBoundingClientRect, and paints one single shimmer wave across the whole page using a CSS mask.

The result looks noticeably more premium. One clean wave instead of chaos.
🔗 Demo: https://jeetvora331.github.io/shimmer-trace/

Usage is literally one line:

// Before: manual skeleton hell
<SkeletonRect width="100%" height={24} borderRadius={8} />
<SkeletonRect width="60%" height={16} borderRadius={4} />
<SkeletonCircle size={48} />

// After: just wrap it
<Shimmer loading={loading}>
  <UserCard />
</Shimmer>

No <SkeletonCard />. No grey div juggling. No layout shift. Your real component already knows its shape — the library just reads it.

Hit 500+ downloads last weekend. Would love harsh feedback from this community specifically, what edge cases would break this for your use case?

⭐ GitHub: https://github.com/jeetvora331/shimmer-trace
🔗 npmjs: https://www.npmjs.com/package/shimmer-trace

Every time I built a skeleton loader, it was the same pain: copy the card, replace content with grey boxes, tweak padding after every design change, watch all the shimmer animations run out of sync like a broken disco floor.

So I built shimmer-trace, a React library that wraps your real component and automatically traces the shape of every element to generate a perfectly matched skeleton. One wrapper, zero hand-drawn boxes.

    <Shimmer loading={isLoading}>
      <UserCard user={user} />
    </Shimmer>

That's literally it. No <SkeletonCard />. No fake grey divs.

• 🔗 Live demo: https://jeetvora331.github.io/shimmer-trace/
• 📦 npm: https://www.npmjs.com/package/shimmer-trace
• ⭐ GitHub: https://github.com/jeetvora331/shimmer-trace

Every time I built a skeleton loader, it was the same pain: copy the card, replace content with grey boxes, tweak padding after every design change, watch all the shimmer animations run out of sync like a broken disco floor.

So I built shimmer-trace — a React library that wraps your real component and automatically traces the shape of every element to generate a perfectly matched skeleton. One wrapper, zero hand-drawn boxes.

<Shimmer loading={isLoading}>
  <UserCard user={user} />
</Shimmer>

That's literally it. No <SkeletonCard />. No fake grey divs.

🔗 Live demo: https://jeetvora331.github.io/shimmer-trace/ 📦 npm: npm install shimmer-trace ⭐ GitHub: https://github.com/jeetvora331/shimmer-trace Would love feedback — especially if anyone's hit edge cases with deeply nested components or SSR setups.