Exploding Input

Component 43

About

Input component that spawns particle effects when typing.

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

Code

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

Usage.tsx

"use client";

import React from "react";
import { ExplodingInput } from "@/components/ui/exploding-input";

const settings = {
  count: 3,
  gravity: 0.7,
  randomVariation: 60,
  animate: true,
};

const emojis = ["🎉", "✨", "💥", "⭐️", "🔥", "💫"];

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="h-screen w-screen flex items-center justify-center bg-background">
      <label className="relative">
        <input
          type="text"
          placeholder="Type something…"
          defaultValue="Wow"
          className="h-12 w-72 rounded-lg border border-border bg-background px-4 text-base text-foreground outline-none focus:ring-2 focus:ring-ring"
        />
        <ExplodingInput
          content={emojis.map((e, i) => (
            <span key={i} style={{ fontSize: 22 }}>
              {e}
            </span>
          ))}
          count={s.count}
          gravity={s.gravity}
          direction={{ horizontal: "center", vertical: "top" }}
          scale={{
            value: 1,
            randomize: true,
            randomVariation: s.randomVariation,
          }}
          rotation={{ value: 0, animate: s.animate }}
        />
      </label>
    </div>
  );
}