Liquid Logo (Paper Shaders Liquid Metal)
Turn a logo into animated liquid metal with a WebGL shader — the viral liquid.paper.design tool, open-sourced by Paper and shipped as the
LiquidMetalshader in Paper Shaders. Source: github.com/paper-design/liquid-logo, 2026-06-15
What it is
paper-design/liquid-logo (775 GitHub stars as of 2026-07-03, TypeScript, by Paper) is the source behind liquid.paper.design: upload a logo (transparent PNG/SVG) and a WebGL2 fragment shader animates a liquid-metal material — flowing stripe patterns, chromatic aberration (RGB shift), and edge contouring. Source: github.com/paper-design/liquid-logo, 2026-07-03
It's part of Paper Shaders (@paper-design/shaders + @paper-design/shaders-react) — a zero-dependency WebGL2 shader collection. The package snapshot on 2026-07-03 is @paper-design/shaders@0.0.77 and @paper-design/shaders-react@0.0.77 (latest; canary 0.0.0-canary.a9965bd0). Source: npm registry, 2026-07-03
The Paper Shader launch-day bookmark is launch/promo evidence for the same package family, not a separate tool. It records Paper pushing heavy free usage during launch week; the durable technical surface remains the Paper Shaders package and liquid-metal shader docs. Source: X/@paper, 2026-04-14
import { LiquidMetal } from '@paper-design/shaders-react';
<LiquidMetal image="/logo.png" shape="diamond" speed={1}
distortion={0.07} contour={0.4} repetition={2}
shiftRed={0.3} shiftBlue={0.3} colorTint="#ffffff" />
Vanilla JS uses mountShader(canvas, { fragmentShader: liquidMetalFragmentShader, … }) after preprocessing the image with toProcessedLiquidMetal. Built-in shapes when no image is supplied: circle, daisy, diamond, metaballs. Source: shaders.paper.design/liquid-metal, 2026-06-15
When to use
Hero / brand moments — a logo reveal, a sci-fi or "modern" wordmark treatment, a launch page. It is decorative: keep one strong move and let the rest of the UI stay quiet (see Frontier Stack 2026). For glass (refraction/blur) rather than metal, see Liquid Glass JS; for the design-language debate, Liquid Glass vs Flat 2026.
Timeline
- 2026-07-04 | Reviewed Paper's text-only Shader launch row and linked it to this Paper Shaders / LiquidMetal route. No extra media or new version check was needed; the current package authority remains the 2026-07-03 npm snapshot. Source: X/@paper, 2026-04-14
- 2026-07-03 | Refreshed source snapshot:
paper-design/liquid-logoat 775 stars, no GitHub releases/tags;@paper-design/shadersand@paper-design/shaders-reactboth0.0.77. Linked AliGrids' toolbar demo through Interface Micro-Polish as an active-state use case. Source: GitHub API; npm registry, 2026-07-03 - 2026-06-15 | Added (Kevin) — Paper's liquid-metal logo shader (
@paper-design/shadersLiquidMetal); part of the Shader Effects Libraries cluster, built by Paper. Source: User, 2026-06-15; github.com/paper-design/liquid-logo