uicapsule

Chibi Plants

Component

About

An interactive 3D raymarched chibi plant character (pot, body, leaves) rendered with WebGPU that turns its gaze toward the cursor, blinks, and morphs smoothly between cute character variants.

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

Code

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

Usage.tsx

"use client";

import ChibiPlants from "@/components/ui/chibi-plants";

export default function ChibiPlantsDemo() {
  return (
    <div className="relative h-screen w-full bg-[#0b0a0e]">
      <ChibiPlants variant="pip" className="absolute inset-0" />
    </div>
  );
}

Dependencies

More by uicapsule

View all
  • Gradient Orb

    Gradient Orb

    508
  • Background Pixel Stars

    Background Pixel Stars

    342
  • Geometric Orb

    Geometric Orb

    125
  • Background Shapes

    Background Shapes

    110
  • Formation

    Formation

    94
  • Voice Dictator

    Voice Dictator

    87
  • Infinite Grid

    Infinite Grid

    34
  • ASCII Renderer

    ASCII Renderer

    16