Back to Dictionary
Action Feedback
●○○Ready to Use
Use sparingly

Click Spark Feedback

Use Click Spark Feedback when the click itself deserves a tiny reward; use Ripple Effect for quieter material feedback.

Use

Adding a small celebratory response to a successful click without showing a full toast or success screen.

Avoid

Avoid it when the action requires calm trust or when the user may click many times in a row.

Safer Alternative

Ripple Effect

Risk Level

High attention

Timing

300-600ms, no loop. The burst should be gone before the user starts the next action.

Easing

Ease-out for particle travel and opacity fade.

Risk

distractionoverdesignedaccessibility sensitive

Live Demo

What It Is

A short burst of tiny particles or rays emitted from the click point to make a lightweight action feel tactile.

Decision Guidance

Use Click Spark Feedback when the click itself deserves a tiny reward; use Ripple Effect for quieter material feedback.

Best For

Adding a small celebratory response to a successful click without showing a full toast or success screen.

Avoid When

Avoid it when the action requires calm trust or when the user may click many times in a row.

Timing

300-600ms, no loop. The burst should be gone before the user starts the next action.

Easing

Ease-out for particle travel and opacity fade.

Risk Tags

distractionoverdesignedaccessibility sensitive

Alternatives

Ripple EffectScale on PressConfetti Burst

✓When to Use

  • Playful primary actions
  • Gamified completion moments
  • Canvas or creative tools where click location matters

✕When NOT to Use

  • Serious financial or destructive actions
  • High-frequency controls that users click repeatedly
  • Dense enterprise screens where sparks add noise

Configuration Tips

  • 01Emit from the pointer position rather than the button center when possible
  • 02Keep the burst under 600ms
  • 03Use one color from the brand palette instead of random confetti colors

You've Seen It In

Creative coding toolsGame dashboardsGamified onboarding

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Add a small click spark burst to a playful Save button. On click, emit 6-10 short amber rays from the click point and fade them out within half a second.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

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

export function ClickSparkFeedback() {
  const [sparks, setSparks] = useState<number[]>([]);

  function handleClick() {
    const createdAt = Date.now();
    setSparks((items) => [...items, createdAt]);
    window.setTimeout(() => setSparks((items) => items.filter((id) => id !== createdAt)), 600);
  }

  return (
    <button onClick={handleClick} className="relative overflow-visible rounded-full bg-stone-950 px-5 py-2.5 text-sm font-semibold text-white">
      Save
      {sparks.map((id) => (
        <span key={id} className="pointer-events-none absolute left-1/2 top-1/2 h-16 w-16 -translate-x-1/2 -translate-y-1/2 animate-ping rounded-full border border-amber-400" />
      ))}
    </button>
  );
}

Related Effects

Ripple Effect

A circular wave that expands from the point of contact when a user clicks or taps an element, providing immediate spatial feedback.

Scale on Press

A simpler, non-spring version of tactile feedback where an element scales down slightly and instantly when pressed.

Confetti Burst

A joyful explosion of colorful particles from the center or edges of the screen to celebrate a major user milestone.