ConfettiButton

confettibutton-1779394643177.tsx

'use client'
import { useState } from 'react'

const COLORS = ['#6d28d9','#2563eb','#10b981','#f59e0b','#ef4444','#ec4899','#a78bfa','#60a5fa']

export default function ConfettiButton({ label = 'Celebrate! 🎊' }) {
  const [pieces, setPieces] = useState([])
  const fire = () => {
    const newPieces = Array.from({ length: 30 }, (_, i) => ({
      id: Date.now() + i,
      x: 40 + Math.random() * 20,
      color: COLORS[Math.floor(Math.random() * COLORS.length)],
      size: 6 + Math.random() * 8,
      angle: Math.random() * 360,
      velocity: { x:(Math.random()-0.5)*200, y:-(100+Math.random()*200) },
    }))
    setPieces(p => [...p, ...newPieces])
    setTimeout(() => setPieces(p => p.filter(x => !newPieces.find(n => n.id===x.id))), 1000)
  }
  return (
    <div style={{ position:'relative', display:'inline-block', padding:'10px' }}>
      <style>{'@keyframes confetti{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(var(--vx),var(--vy)) rotate(720deg);opacity:0}}'}</style>
      <button onClick={fire} style={{
        background:'linear-gradient(135deg,#6d28d9,#f59e0b)',
        color:'#fff', border:'none', borderRadius:'12px',
        padding:'14px 28px', fontSize:'16px', fontWeight:700,
        cursor:'pointer', boxShadow:'0 4px 20px rgba(109,40,217,0.3)',
      }}>{label}</button>
      {pieces.map(p => (
        <div key={p.id} style={{
          position:'absolute', top:'50%', left:p.x+'%',
          width:p.size, height:p.size*0.6, background:p.color,
          borderRadius:'2px', pointerEvents:'none',
          '--vx': p.velocity.x+'px', '--vy': p.velocity.y+'px',
          animation:'confetti 1s ease-out forwards',
        }} />
      ))}
    </div>
  )
}

Component info

CategoryAnimations

Frameworkreact

TierFREE

Copies0

About

Button that triggers a CSS confetti explosion on click

More from Animations

'use client'
import { useState, useEffect } from 'react'

const STRINGS = ['Build faster.', 'Ship better.', 'Design smarter.', 'Scale effortlessly.']

export default function TypingAnimation({ strings = STRINGS, speed = 80, pause = 1500 }) {
  const

TypingAnimation

Animations

'use client'
export default function PulseIndicator({
  label = 'Live',
  color = '#10b981',
  size = 12,
  rings = 2,
}) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:'10px' }}>
      <div style={{ position:'relative', widt

PulseIndicator

Animations

'use client'
import { useState } from 'react'

function Shimmer({ w = '100%', h = '16px', r = '6px' }) {
  return (
    <div style={{
      width:w, height:h, borderRadius:r,
      background:'linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%

ShimmerCard

Animations

'use client'
export default function GradientText({
  text = 'Empire UI',
  size = '48px',
  gradient = 'linear-gradient(90deg, #6d28d9, #2563eb, #0891b2, #10b981, #6d28d9)',
}) {
  return (
    <div>
      <style>{'@keyframes flow{0%{background-posi

GradientText

Animations