Louis's Graphics

Metaball Loader

Component

About

Gooey metaball loader: ink beads circle a tilted ring, fusing into chains and pinching apart. WebGL, crisp edges, no dependencies.

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

Code

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

Usage.tsx

"use client"

import * as React from "react"
import { MetaballLoader } from "@/components/ui/metaball-loader"

export default function MetaballLoaderDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#efeee9] p-8 text-neutral-950 dark:bg-neutral-950 dark:text-[#edebe3]">
      <MetaballLoader size={320} />
    </div>
  )
}

More by Louis's Graphics

View all
  • Thinking Pill

    Thinking Pill

  • Glow Button

    Glow Button

  • Orb Loader

    Orb Loader