Balloons

Buttons 94

About

shadcn/ui-like implementation of balloons.js

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

Code

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

Usage.tsx

import { Balloons } from "@/components/ui/balloons"
import { Button } from "@/components/ui/button"
import { useRef } from "react"

export function TextBalloonsDemo() {
  const balloonsRef = useRef<{ launchAnimation: () => void } | null>(null)

  const handleLaunch = () => {
    if (balloonsRef.current) {
      balloonsRef.current.launchAnimation()
    }
  }

  return (
    <div className="flex min-h-screen flex-col items-center justify-center gap-4 p-4">      
      <Button 
        onClick={handleLaunch}
      >
        Launch Text Balloons! 🎈
      </Button>

      <Balloons 
        ref={balloonsRef}
        type="text"
        text="🎈✨🎉"
        fontSize={120}
        color="#000000"
      />
    </div>
  )
}