Generating Orb

AI chats 68

About

An animated glowing orb loader with a rotating chromatic glow and pulsing center text, used to indicate AI content generation or long-running processes, available as a CSS or Canvas 2D renderer.

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

Code

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

Usage.tsx

"use client";

import GeneratingOrb from "@/components/ui/generating-orb";

export default function GeneratingOrbDemo() {
  return (
    <div className="flex size-full min-h-[400px] items-center justify-center p-6">
      <GeneratingOrb
        renderer="css"
        size={240}
        depth={1.0}
        speed={2.0}
        duration={2000}
        stagger={100}
        pop={1.15}
        restOpacity={0.4}
        textSize={1.2}
        tracking={0}
        text="Generating"
        showText={true}
        highlightColor="#ffffff"
        haloColor="#ad5fff"
        coreColor="#471eec"
        haloColorAlt="#d60a47"
        coreColorAlt="#311e80"
        textColor="#ffffff"
        playback="play"
      />
    </div>
  );
}