Make it
liquid metal.

Open Liquid Metal in the component playground. The Apple logo sample is ready to try. Choose Upload image or drag your file onto the upload area.

Use a bold SVG or transparent PNG for the cleanest silhouette. JPG and WebP also work, up to 10 MB. A photo with a solid background can become a rectangle: this effect follows the image’s silhouette.

Leave Remove white background on for a dark logo on white. Turn it off for a white logo on a transparent background. Images are processed locally and are kept only for the current visit.

Download the sample logo used in the recording to follow along.

Start with Chrome, Gold, or Ripple, then move a slider and watch the preview. Open Color & refraction for tint, background, colored edges, and flow direction.

Speed

Sets the pace. Try 0.5 for a slower flow; 0 holds a still frame.

Stripe density

Changes how many bands of light cross the logo.

Liquid movement

Adds irregular ripples. Start low and increase gradually.

Edge definition & softness

Shape the contours and smooth the transitions between dark and light.

Logo size

Scales the image within the preview. Keep some room around its edges.

Use Original / Liquid to compare. Pause preview freezes the animation while you inspect it; copied code keeps your speed setting. Reset settings restores Chrome and keeps your uploaded image.

1. Choose Download LiquidLogo.tsx for the component and Download logo.png for the prepared transparent image.
2. Choose Copy React code. This usage example contains the settings you just selected.
3. In Claude, attach the component and image, or paste the component’s text. Add the usage example and the prompt below. Include the page you want to edit, or open Claude Code in your existing project.
4. Have Claude install the package, save the image as public/images/logo.png, and place the component next to the example. Ask it to run your project and check the result.

npm install @paper-design/shaders-react@0.0.81

Add this liquid metal logo to my existing React site at [describe where it should appear]. I attached LiquidLogo.tsx and logo.png. Here is the usage code from the toolandtea playground:

[Paste the copied React code here]

Install @paper-design/shaders-react@0.0.81. Put logo.png in public/images and keep the LiquidLogo import pointing to the attached component. Preserve the selected settings and my site's layout. Replace the example alt text with an accurate description of my logo.

Use a responsive width and an explicit height. Keep the reduced-motion behavior and static WebGL fallback in the wrapper. Run the project, check that the image loads, and verify desktop and mobile layouts. Tell me which files changed.

The PNG download is the logo mask, not an animated image. React code renders the moving metal. A normal Claude chat can help write the files; use your project or Claude Code to run the integrated site.

paper-design/liquid-logo is the original demo. It is a separate route: its controls and exported code differ from this playground, which uses Paper’s current shader package.

The demo’s source is available under PolyForm Shield 1.0.0, including a noncompete restriction. This playground uses Paper Shaders under Apache-2.0. Keep the relevant notices when using either project.

1. Open the repository and choose Code → Download ZIP, then unzip it.
2. In Claude, attach or paste package.json, LICENSE, src/hero/params.ts, src/hero/canvas.tsx, src/hero/parse-logo-image.ts, and src/app/hero/liquid-frag.ts. Include src/hero/hero.tsx if you want help with the demo’s controls.
3. Alternatively, use Claude’s + → Add from GitHub when available and select the relevant files from a connected repository. Fork it to your GitHub account if needed. A pasted repository URL alone may not give Claude all the files.
4. Add your logo and the prompt below. Ask Claude to identify the project’s requirements before making changes.

Help me use https://github.com/paper-design/liquid-logo in my project. I have supplied the relevant repository files and my logo. First read package.json and LICENSE, and explain any requirements that affect my intended use: [describe your site and where the effect will appear].

Trace the image preparation, WebGL canvas, shader, and settings controls before editing. Create a locally processed logo upload and adjustable liquid metal preview in my existing site. Preserve the aspect ratio, include loading and invalid-file states, pause animation, respect reduced motion, and clean up graphics resources.

The original demo has optional hosted upload/share features. For my local preview, avoid requiring a hosted storage account. Keep source notices. Use my project's existing framework and package manager, verify compatible dependencies, then give me exact run commands and test the upload and controls. If any source files are missing, name them rather than guessing their contents.

If Claude Code and Git are already installed, clone the original project and start Claude inside it. This gives Claude access to the files it needs to inspect. To add the effect to an existing site, work in that site and supply the downloaded reference folder.

git clone https://github.com/paper-design/liquid-logo.git
cd liquid-logo
claude

Paste the repository prompt above. Have Claude review the dependencies and run scripts, install with the appropriate package manager, and launch the local preview. Test with your image, move each control, and check the browser console before integrating the result.