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

Render image URLs as particle payloads so each typed character can release branded badges, avatars, or product thumbnails.

Pass lightweight component references into items and render them through the snippet API for fully custom particle shapes.

Reuse the Svelte logo component from the shared icons folder and burst branded particles directly from the input cursor.

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.`