The Illusion of Zero Dependencies: Unpacking liquid-effect-animation

How a Next.js component uses runtime script injection and hidden 2D canvases to deliver high-end WebGL shaders without touching your package.json.

6 min read · StarKnightt/liquid-effect-animation

A wide shot illustrating the contrast between heavy build-time dependencies and lightweight runtime injection. Massive cranes load standardized crates onto a cargo ship at a highly structured shipping port, representing NPM and Webpack. In the foreground, a sleek, unmarked speedboat bypasses the port entirely, speeding toward a pristine glass storefront on the shore while carrying a single glowing, distorted sphere, representing the CDN injection. — The component bypasses the traditional build-time bundle process to deliver the payload at runtime.

nothing just an experimental component

StarKnightt, Author/Maintainer · StarKnightt/liquid-effect-animation

Key Takeaways

The project achieves a "zero-dependency" WebGL effect by injecting Three.js via a runtime CDN script, bypassing the NPM bundler entirely.
To save performance, it fakes 3D typography by painting 2D text onto a hidden HTML5 canvas, applying a simulated lighting gradient, and exporting it as a flat WebGL texture.
The component relies on Tailwind v4 and the OKLCH color space to ensure perceptually uniform color transitions, critical for selling the physical illusion of liquid metal.
Distributed via the shadcn registry model, it reflects a shift from installing black-box NPM libraries to owning and modifying the rendering pipeline.

The Smuggler's Architecture

Most high-end WebGL UI effects require heavy 3D libraries that bloat your bundle size. liquid-effect-animation claims zero dependencies. It achieves this through a massive cheat: it injects the Three.js engine via a runtime CDN script. This bypasses the build-time bundler entirely.

useEffect(() => {
  const script = document.createElement('script');
  script.type = 'module';
  script.src = 'https://cdn.jsdelivr.net/npm/threejs-components@0.0.17/build/liquid1.min.js';
  document.body.appendChild(script);
  // ...
}, []);

This is a bold choice for a React component, moving the dependency from build-time (npm install) to run-time (browser fetch).

Faking 3D with a Hidden Canvas

Rendering true 3D text is computationally heavy. The component instead paints 2D text onto an offscreen canvas, applies a radial gradient to simulate ambient light, and exports it as a Base64 image to be used as a texture on a flat WebGL plane.

The hybrid rendering pipeline translates 2D canvas data into a 3D WebGL texture to save performance.

This pipeline allows for easy text customization while maintaining the performance of a WebGL fragment shader.

The Chrome Aesthetic and OKLCH

The styling choices rely on Tailwind v4 and the OKLCH color space to ensure perceptually uniform color transitions. This is critical for selling the physical illusion of liquid metal.

A split-screen illustration comparing RGB and OKLCH color spaces. The left side depicts a metallic sphere rendered with rigid, stepped bands of shadow, representing legacy RGB gradients. The right side depicts an identical sphere where the shadows and highlights curve with perfect smoothness, reflecting a soft ambient light, representing the OKLCH color space. — OKLCH provides perceptually uniform color transitions compared to RGB or HSL.

The End of the Black-Box Library

The shadcn registry model shifts power to the developer by letting them own and modify the complex pipeline rather than just passing props to a compiled NPM package.

Instead of installing a black-box package, developers own the source code, allowing for deep customization.