Liquid Chrome

Shaders 39

About

Beautiuful interactive animation of liquid

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Liquid Chrome to your project and fits it to your theme.

Code

How Liquid Chrome is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react";
import { Component } from "@/components/ui/liquid-chrome"; 

const DemoOne = () => {
  return (
   
    <div className="w-screen h-screen bg-black overflow-hidden"> 

      <Component
        baseColor={[0.1, 0.1, 0.1]} 
        speed={0.2}
        amplitude={0.6}
        frequencyX={3.0}
        frequencyY={2.0}
        interactive={true}
      />
    </div>
  );
};

export { DemoOne };