Artistic Hero with Animated Blobs

Heroes

About

A full-screen, artistic hero component. Features a large title with a custom cursive font (Corinthia), several gently floating SVG blobs, and an infinitely scrolling curved text overlay. Ideal for portfolios and landing pages.

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

Code

How Artistic Hero with Animated Blobs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Component } from '@/components/ui/artistic-hero-with-animated-blobs';

export default function DemoOne() {
  const demoTitle = 'Contact';
  const demoBg =
    'https://cdn.21st.dev/assets/mirror/f9/f92c9326368b5ac531252ff6d13de150a0ff54eeac867e04270d51feb9d0e0db.jpg';

  return (
    <div className="relative w-full h-[600px] overflow-hidden rounded-lg border">
      <Component
        title={demoTitle}
        backgroundImage={demoBg}
        fontSize={700}
        lineHeight={0.5}
      />
    </div>
  );
}