DEV Community: Dhruvil Chauhan

I built a CLI that tells you why your Next.js components became client components

Dhruvil Chauhan — Thu, 04 Jun 2026 07:49:36 +0000

React Server Components are great — until "use client" starts spreading through your codebase like a virus.

You added it to one file months ago. Now half your component tree is running on the client and you have no
idea which import dragged it there. Your bundle is massive, your Lighthouse score is suffering, and nobody
can explain why.

I built client-creep to solve this.

## What it does

  npx client-creep

Zero setup. No install. Runs on any Next.js 13/14/15/16 project.

It answers three questions no existing tool answered together:

Why is this a client component? — which import chain caused it
Did it need to be? — or is it client purely by accident, with zero hooks or browser APIs?
What is it costing you? — estimated KB being shipped to the browser

## Real output on a 534-file Next.js app

  ────────────────────────────────────────────────────────────
    client-creep  Next.js client component analysis
  ────────────────────────────────────────────────────────────

    Files scanned:            534
    Client components:        418  (182 boundaries)
    Estimated client JS:      2.29 MB
    Potentially recoverable:  237.4 KB  (113 creep candidates)

  ────────────────────────────────────────────────────────────
    ⚠  Accidental Client Creep
  ────────────────────────────────────────────────────────────

    ⚠ src/app/chat-insights/components/EmptyStates.tsx  19.7 KB recoverable
      No hooks, event handlers, or browser APIs detected
      Why client:
      ⚡ src/app/chat-insights/page.tsx ← use client
        └─ src/app/chat-insights/components/index.ts
             └─ src/app/chat-insights/components/EmptyStates.tsx

That last section is the key one — accidental creep candidates. Components that are only client because
something upstream imported them through a barrel file. No hooks. No browser APIs. Just an accident.

## The full ecosystem

The CLI is the core, but there's more:

ESLint plugin — catches creep as you write code, not after:

  npm install -D eslint-plugin-client-creep

  // eslint.config.js
  import clientCreep from 'eslint-plugin-client-creep'
  export default [clientCreep.configs.recommended]

GitHub Action — posts a PR comment showing new creep introduced by a branch:

  - uses: DhruvilChauahan0210/client-creep@main
    with:
      ci: true
      budget: 500  # fail if > 500 KB client JS

Dashboard — track creep trend over time across PRs:
client-creep-dashboard.vercel.app

VS Code extension — inline diagnostics as you type (Marketplace publish coming soon).

## Interactive HTML graph

  npx client-creep --html

Generates a D3 force-directed graph of your entire import graph, color-coded by component type. Click any
node to see its import chain and why it's client. Useful for showing the team where the real problems are.

## CI usage

  # Fail if any accidental creep exists
  npx client-creep --ci

  # Fail if client JS exceeds 500 KB
  npx client-creep --budget 500

## How it works

It's a static analyzer — no need to run your app.

Globs all .ts/.tsx files, skipping node_modules and .next
Parses each file with a Babel AST, detects "use client" and extracts imports
Resolves imports including tsconfig path aliases and monorepo workspace packages
Builds a directed import graph and propagates client boundaries via BFS
Flags nodes with no detected client signals (hooks, browser globals, event handlers) as accidental creep

Works in monorepos too — auto-detects pnpm/turbo/yarn workspaces and resolves cross-package imports.

GitHub: github.com/DhruvilChauahan0210/client-creep
npm: npx client-creep

Would love feedback — especially if you run it on your codebase and find something unexpected.

I replaced GSAP DrawSVG with 4.4 KB (and it uses native CSS where it can)

Dhruvil Chauhan — Mon, 01 Jun 2026 16:33:27 +0000

The setup

You know the pattern. You have an SVG — a logo, a path, a hand-drawn illustration — and you want it to draw itself as the user scrolls. It looks incredible. Every design agency uses it. Every portfolio has it.

So you reach for GSAP DrawSVG.

Then you see the pricing page.

GSAP DrawSVG requires a Club GreenSock license for commercial use. That's fine if you're at an agency billing $200/hr. It's annoying if you're shipping a SaaS or an open-source project. And either way, you just imported ~40 KB of runtime for one visual effect.

Framer Motion does scroll-triggered SVG animation too. It's ~35 KB, React-only, and your Vue teammates will look at you funny.

I got tired of the options, so I built the missing one.

svg-scroll-draw — what it is

npm i svg-scroll-draw

~4.4 KB gzipped. Zero dependencies. MIT license.

Works in React, Next.js, Vue 3, Svelte, Solid.js, Angular, Nuxt, Astro, Web Component, and vanilla JS — same library, nine thin adapters.

The simplest possible usage:

// React
import { ScrollDraw } from 'svg-scroll-draw/react';

export function Hero() {
  return (
    <ScrollDraw>
      <svg viewBox="0 0 200 100" fill="none">
        <path d="M10 50 Q100 10 190 50" stroke="black" strokeWidth="2" />
      </svg>
    </ScrollDraw>
  );
}

That's it. The engine discovers every path, line, rect, circle, polyline, and polygon inside the container, measures total stroke length, and animates stroke-dashoffset as the element enters the viewport. No configuration required.

The part that makes it different: native CSS

Here's what I didn't expect when building this: for the common case, you don't need JavaScript at all.

When the browser supports animation-timeline: view() (Chrome, Edge, Firefox — about 75% of global traffic today), svg-scroll-draw hands the animation to the compositor entirely. Zero per-frame JS. No scroll listeners. No requestAnimationFrame. The GPU does it.

// This runs on the compositor in supporting browsers —
// no scroll event, no rAF, no JS per frame
<ScrollDraw easing="ease-out" fade>
  <svg>...</svg>
</ScrollDraw>

The library detects support at runtime and falls back to the full JS engine automatically. You never change your code.

What triggers the JS fallback?

Any feature CSS can't express declaratively: onProgress / onComplete callbacks, stagger, morphTo, velocityScale, autoReverse, once, repeat, custom scroll containers, speed ≠ 1, spring easing, or animated strokeColor / strokeWidth / fillOpacity.

The escape hatch if you need it:

// Force the JS engine regardless
<ScrollDraw native={false} easing="spring">
  <svg>...</svg>
</ScrollDraw>

The full instance API — pause(), resume(), seek(), replay(), destroy() — works identically on both paths.

It's not just stroke-dashoffset

I've been thinking about scroll-driven SVG animation for a while, and there are more patterns than just "draw a line":

Stroke color animation — the stroke interpolates between two colors as the path draws:

<ScrollDraw strokeColor={['#ff6b9d', '#ffc900']} easing="ease-out">
  <svg>...</svg>
</ScrollDraw>

Fill opacity flood — the fill appears as the outline traces itself. Useful for logo reveals where the shape "fills in" after the stroke completes:

<ScrollDraw fillOpacity={[0, 1]} easing="ease-out">
  <svg>
    <path d="..." stroke="#ff90e8" fill="#ff90e8" />
  </svg>
</ScrollDraw>

Path morphing — the shape interpolates from its original d to a target on scroll:

<ScrollDraw morphTo="M 130 40 L 220 130 L 130 220 L 40 130 Z" easing="ease-in-out">
  <svg>
    <path d="M 130 40 C 220 40 220 220 130 220 C 40 220 40 40 130 40 Z" stroke="black" />
  </svg>
</ScrollDraw>

Clip-path reveal — reveal any content (not just SVGs — images, divs, text) using CSS clip-path instead of stroke animation:

// Works on images, headings, anything
<ScrollDraw clip="left" speed={0.8}>
  <img src="/hero.jpg" alt="..." />
</ScrollDraw>

Stagger — multiple paths draw in sequence, each starting after the previous:

<ScrollDraw stagger={0.1} easing="ease-out">
  <svg>
    {/* chart bars, each draws in sequence */}
    <rect ... />
    <rect ... />
    <rect ... />
  </svg>
</ScrollDraw>

Velocity scale — draw speed scales with how fast the user is scrolling:

<ScrollDraw velocityScale={1.5}>
  <svg>...</svg>
</ScrollDraw>

Framework usage

Vue 3:

<template>
  <ScrollDraw easing="ease-out" :speed="1.2" fade once>
    <svg viewBox="0 0 200 100" fill="none">
      <path d="M10 50 Q100 10 190 50" stroke="black" stroke-width="2" />
    </svg>
  </ScrollDraw>
</template>

<script setup>
import { ScrollDraw } from 'svg-scroll-draw/vue';
</script>

Svelte:

<script>
  import { scrollDraw } from 'svg-scroll-draw/svelte';
</script>

<div use:scrollDraw={{ easing: 'spring', fade: true, once: true }}>
  <svg viewBox="0 0 200 100" fill="none">
    <path d="M10 50 Q100 10 190 50" stroke="black" stroke-width="2" />
  </svg>
</div>

Vanilla JS:

import { scrollDraw } from 'svg-scroll-draw';

const instance = scrollDraw('#hero-svg', {
  easing: 'ease-out',
  speed: 1.2,
  fade: true,
  once: true,
  onComplete: () => console.log('all paths drawn!'),
});

// Full imperative control
instance.pause();
instance.resume();
instance.seek(0.5); // jump to 50%
instance.replay();
instance.destroy(); // cleanup on unmount

Astro:

<div
  data-scroll-draw
  data-scroll-draw-options='{"easing":"ease-out","fade":true,"once":true}'
>
  <svg viewBox="0 0 200 100" fill="none">
    <path d="M10 50 Q100 10 190 50" stroke="black" stroke-width="2" />
  </svg>
</div>

<script>
  import { initScrollDraw } from 'svg-scroll-draw/astro';
  initScrollDraw();
</script>

Bundle size comparison (minified + gzipped)

Library	Size	License	Frameworks
svg-scroll-draw	~4.4 KB	MIT (free)	React, Vue, Svelte, Solid, Angular, Nuxt, Astro, Web Component, Vanilla
Framer Motion	~35 KB	MIT	React only
GSAP DrawSVG	~40 KB	Commercial license required	Any (with adapter)

Under the hood — how the JS engine works

For the curious: the core engine uses IntersectionObserver to start a requestAnimationFrame loop when the element enters the viewport, and stops it when the element exits. This avoids scroll listeners entirely and keeps idle cost near zero.

The progress value is derived from getBoundingClientRect() relative to the viewport, clamped to [0, 1], and mapped through the easing function. stroke-dasharray is set once (to the total path length), and only stroke-dashoffset changes per frame — a cheap, compositable property.

The prefers-reduced-motion check is handled in the engine: if the user has reduced motion enabled, the draw completes immediately at full progress without animation.

Try it

Live playground: https://svg-scroll-draw.vercel.app/playground — paste any SVG, tweak options, get a shareable link
Examples: https://svg-scroll-draw.vercel.app/examples — 10 production-ready demos (logo reveal, revenue chart, delivery route, API architecture diagram, etc.)
Docs: https://svg-scroll-draw.vercel.app/docs
npm: npm i svg-scroll-draw
GitHub: https://github.com/DhruvilChauahan0210/ink-scroll

221 tests passing. 7 suites. MIT.

If you've been reaching for GSAP or Framer just to draw an SVG on scroll, give this a shot. The playground makes it easy to test with your own SVG before adding it to your project.

[Boost]

Dhruvil Chauhan — Sat, 23 May 2026 03:21:00 +0000

Dhruvil Chauhan

May 22

I built React components that run Qwen2.5 in the browser via WebGPU – no server, no API key, works offline

#ai #webdev #react

1 min read

I built React components that run Qwen2.5 in the browser via WebGPU – no server, no API key, works offline

Dhruvil Chauhan — Fri, 22 May 2026 21:38:38 +0000

Been working on this for a while – open sourced it this week.
It's a React library called Local Ghost that runs Qwen2.5-Coder-0.5B
entirely in the browser via WebGPU (WASM fallback for unsupported
browsers). No server, no API key, no per-query cost.

Three components:

SmartDataGrid – natural language filter/sort over any data array.
Type "show engineers older than 30 sorted by salary" and it generates
a sandboxed JS filter and executes it locally.

SmartForm – paste any unstructured text (receipt, email, bio) and the
model extracts structured JSON to fill form fields.

SmartAnalytics – describe a chart in plain English, get bar/line/pie/
scatter rendered instantly from your data.

Tech: Qwen2.5-Coder-0.5B-Instruct via u/huggingface,
WebGPU with automatic device-lost hotswap to WASM, 5-min idle VRAM
purge, IndexedDB query cache, hardened sandbox (nulls window/document/
fetch/localStorage inside generated code).

Model downloads once (~300MB), cached in CacheStorage forever.

npm: u/dhruvil0210
Demo: https://local-ghost-demo.vercel.app
Docs: https://local-ghost-docs.vercel.app