Gooey Marquee

Text 339

About

The component uses two text layers - a blurred background layer with high contrast filtering and linear gradients for the gooey effect, and a clean foreground layer for readability.

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

Code

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

Usage.tsx

import { GooeyMarquee } from "@/components/ui/gooey-marquee";

export default function DemoOne() {
 return (
    <div className="min-h-screen flex items-center">
      <div className="max-w-2xl mx-auto px-4 py-12">
        <GooeyMarquee text="Design creates culture." />

        <p className="text-xl mt-8 text-primary/60">
          The component uses two text layers - a blurred background layer with high contrast filtering and linear gradients for the gooey effect, and a clean foreground layer for readability.
        </p>
      </div>
    </div>
  )
}