Back to Dictionary
Action Feedback
●○○Ready to Use

Copy Confirmation Flash

A rapid, transient background color change (usually to green or a brand color) on an element that was just copied to the clipboard, providing unmistakable visual confirmation.

Live Demo

npm install framer-motion

What It Is

A rapid, transient background color change (usually to green or a brand color) on an element that was just copied to the clipboard, providing unmistakable visual confirmation.

✓When to Use

  • Copy to clipboard code blocks
  • API key fields
  • Share links

✕When NOT to Use

  • Standard text selection
  • Large container elements where a full flash is overwhelming

Configuration Tips

  • 01Flash to a success color (like emerald-500/20) then fade back to transparent
  • 02Keep the flash very fast (100ms in) and the fade-out slower (500ms out) to mimic a camera flash

You've Seen It In

VercelTailwind DocsStripe Docs

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Make this code block flash green momentarily when I click the copy button.

Code Example (Tailwind CSS)

export function CopyConfirmationFlashDemo() {}

Related Effects

Toast Notification

A small, non-obtrusive popup that slides in (usually from the bottom or top right) to provide brief feedback about an operation, then disappears.

Checkmark Draw Animation

An SVG checkmark that progressively draws itself from left to right inside a circle, confirming a successful action.