Inverted-Fluid

Text 1

About

Fluid cursor with inverted mix-blend-mode and fluid canvas wake.

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

Code

How Inverted-Fluid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Component } from "@/components/ui/inverted-fluid";

const Demo = () => {
  return (
      <div style={{ width: "100vw", height: "100vh", background: "#111" }}>
            <Component>
                    <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 5vw" }}>
                              <p className="bbh-bartle-regular" style={{ fontSize: "clamp(3rem, 10vw, 12rem)", fontWeight: 400, color: "white", userSelect: "none", textAlign: "center", wordBreak: "keep-all", overflowWrap: "break-word", lineHeight: 1, margin: 0, width: "100%" }}>
                                          INVERT the FLUID
                                                    </p>
                                                            </div>
                                                                  </Component>
                                                                      </div>
                                                                        );
                                                                        };

                                                                        export default Demo;