---
name: Liquid Logo
slug: liquid-logo
url: "https://dontmakeitugly.com/resources/liquid-logo"
website: "https://liquid.paper.design"
github: "https://github.com/paper-design/liquid-logo"
type: tool
categories:
  - motion
  - tools
tags:
  - shaders
  - webgl
  - liquid-metal
  - logo
  - hero
  - react
  - effects
  - paper
frameworks:
  - react
  - nextjs
pricing: free
license: PolyForm Shield 1.0.0
openSource: false
agentFriendly: good
agentAccessMethods:
  - github
  - public_web
difficulty: intermediate
staffPick: true
dateAdded: "2026-09-03"
---

# Liquid Logo

Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.

- Type: Tool
- Categories: Motion, Tools
- Pricing: Free · License: PolyForm Shield 1.0.0
- Open source: no
- Works with: React, Next.js, Paper Shaders, WebGL

## What it is

Liquid Logo by Paper turns any logo image into an animated liquid-metal version in the browser. Upload an SVG or PNG, tweak the parameters and you have a hero-worthy moment. It's built on Paper Shaders, the same team's open-source React shader library, and the whole app is on GitHub so you can see exactly how the effect is made.

## Why it's here

One of the best examples of a single effect done with real craft. Use it for a launch page or a loading state, not for every logo on the site. The source is more valuable than the app: it shows how to wire a shader into a React app properly.

## Best for

- a launch-page hero moment
- logo reveals
- learning how shader effects are wired into React

## Links

- Website: https://liquid.paper.design
- GitHub: https://github.com/paper-design/liquid-logo

## Can my agent use this?

Partly. The app's source is public, so your agent can read how the effect is built and adapt the approach using the MIT-licensed Paper Shaders package. Note the app itself is under PolyForm Shield, which restricts building a competing product from it; read the licence before copying code wholesale.

Agent friendliness: Good. Publicly accessible and useful to reference, but the agent will need to interpret it rather than install it.
Access methods: GitHub, Public website.

## Prompt to hand your agent

```text
Use Liquid Logo as a design and implementation reference for this project.

What it is: Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.

Website: https://liquid.paper.design
GitHub: https://github.com/paper-design/liquid-logo

Use it specifically for:
- a launch-page hero moment
- logo reveals
- learning how shader effects are wired into React

How you can access it: GitHub, Public website.
Works with: React, Next.js.
License: PolyForm Shield 1.0.0. Respect it.

Study the relevant design and implementation patterns, but adapt them to this project's existing architecture, visual language, accessibility requirements and conventions. Do not blindly copy the entire resource.
```

## Related

- [ShaderGradient](https://dontmakeitugly.com/resources/shadergradient.md): Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design.
- [Liquid Glass JS](https://dontmakeitugly.com/resources/liquid-glass-js.md): Apple's Liquid Glass look on the web: real-time refraction, blur and masking in WebGL.
- [React Three Fiber](https://dontmakeitugly.com/resources/react-three-fiber.md): Three.js as React components, with a huge helper ecosystem.
- [Aceternity UI](https://dontmakeitugly.com/resources/aceternity-ui.md): Showy, copy-paste React components for landing pages that need a moment.

## In collections

- [Motion resources worth knowing](https://dontmakeitugly.com/collections/motion-worth-knowing.md)

Liquid Logo is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.