Ethereal Ink

The design focuses on creating a premium, immersive feel. The text and buttons float over the interactive animation using a "glassmorphism" effect, which involves background blur and transparency. This ensures the content is perfectly readable while still feeling integrated with the background. I've combined all the necessary code, including the shader logic and the new hero section layout, into a single, self-contained component for you.

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

import ShaderComponent from "@/components/ui/ethereal-ink";

const settings = {
  hue: 25,
  speed: 0.4,
  intensity: 1.0,
  complexity: 2.0,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <ShaderComponent {...s} />
    </div>
  );
}