Copy Flow

A premium copy-to-clipboard component for Framer that transforms a simple copy button into a polished interactive experience. Instead of instantly changing text, the component smoothly transitions through three customizable states, making every interaction feel intentional and delightful.

Whether you're displaying an

• email address

• website URL

• coupon code

• API key

• wallet address

• referral link

It makes copying effortless while keeping your interface clean and modern.

No coding is required. Simply drop it onto your canvas, customize it using Framer's native controls, and you're ready to go.

Interaction Flow

The component supports three independent text states.

Default State

• Display the original value (email, link, code, etc.)

Hover State

• Show a custom prompt like:

• Click to Copy

• Copy Email

• Copy Link

• Copy Coupon

Copied State

• Instantly changes after clicking.

• Examples:

  Copied!

Features

Native Clipboard Support

Smooth fade animations between text states

Automatic reset timer

Fully customizable typography

Adjustable animation speed

Custom shadows

Responsive sizing

Native Framer Font Control

Optional icon

Multiple icon styles

Custom icon background

Independent idle and copied colors

Adjustable spacing

Adjustable corner radius

Configurable max width

Lightweight

No external dependencies