Exploding Input

A particle input companion that launches squares, emoji, images, or custom snippets outward from the cursor as user types.

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/exploding-input.json

Name	Type	Default	Description
`items`	`T[]`	`[]`	`The particle payloads to cycle through. Leave it empty to use the built-in square fallback.`
`children`	`Snippet<[T, number]> \| undefined`	`undefined`	`Optional snippet used to render each item when you want custom emoji, images, or component particles.`
`count`	`number`	`1`	`The number of particles spawned on each input event.`
`direction`	`{ horizontal?: "left" \| "center" \| "right"; vertical?: "top" \| "center" \| "bottom" }`	`{ horizontal: "center", vertical: "top" }`	`Controls the general launch direction of each burst.`
`gravity`	`number`	`0.7`	`Adjusts the simulated pull on particles, where lower values float more and higher values fall faster.`
`duration`	`number`	`3`	`Sets particle lifetime in seconds before each burst fades away.`
`scale`	`{ value?: number; randomize?: boolean; randomVariation?: number }`	`{ value: 1, randomize: false, randomVariation: 0 }`	`Defines the base particle scale and optional randomized size variation.`
`rotation`	`{ value?: number; animate?: boolean }`	`{ value: 0, animate: false }`	`Sets a fixed particle rotation or enables randomized spin animation.`
`target`	`HTMLInputElement \| null`	`null`	`Optionally bind the effect to a specific input when the component is not nested inside a label wrapper.`
`class`	`string`		`Custom classes merged onto the fixed overlay root element.`