Copy Field masks a string (or grouped digits), reveals it with a one-tap eye control, then copies the real value to the clipboard with stroke → check success. Fine-pointer hover hints (View / Copy), optional inline “Copied” chip, Clash-friendly Font control, and full Appearance tokens for field, accent, and button. Canvas-safe, reduced-motion aware, zero external packages. Desktop interaction is the product — no Auto Demo.
Categories / tags: Components · Forms · Clipboard · Copy · Mask · Password · Interaction · Motion · Utility · Accessibility Features
Masked → reveal → copy → success flow
Real clipboard (writeText + execCommand fallback)
Optional digit grouping (4s)
Hover hints (View / Copy) on fine pointer
Optional inline copied feedback chip
Appearance: field, text, accent, button BG, radius, border, padding, shadow
Custom reveal / copy / success icons
ControlType.Font for value typography
Reduced-motion + canvas-safe idle
Zero external dependencies (framer + framer-motion)
No Auto Demo — pointer is the product
Setup (buyer)
Insert Copy Field and set a fixed width (e.g. 420–560px).
Paste the Value (and optional Mask char / Group 4).
Tune Appearance (accent #6FD3FF default) and Button size/radius.
Optional: turn Feedback on and edit Copied / hint labels.
Match Font to your site type.
Copy Field masks a string (or grouped digits), reveals it with a one-tap eye control, then copies the real value to the clipboard with stroke → check success. Fine-pointer hover hints (View / Copy), optional inline “Copied” chip, Clash-friendly Font control, and full Appearance tokens for field, accent, and button. Canvas-safe, reduced-motion aware, zero external packages. Desktop interaction is the product — no Auto Demo.
Categories / tags: Components · Forms · Clipboard · Copy · Mask · Password · Interaction · Motion · Utility · Accessibility Features
Masked → reveal → copy → success flow
Real clipboard (writeText + execCommand fallback)
Optional digit grouping (4s)
Hover hints (View / Copy) on fine pointer
Optional inline copied feedback chip
Appearance: field, text, accent, button BG, radius, border, padding, shadow
Custom reveal / copy / success icons
ControlType.Font for value typography
Reduced-motion + canvas-safe idle
Zero external dependencies (framer + framer-motion)
No Auto Demo — pointer is the product
Setup (buyer)
Insert Copy Field and set a fixed width (e.g. 420–560px).
Paste the Value (and optional Mask char / Group 4).
Tune Appearance (accent #6FD3FF default) and Button size/radius.
Optional: turn Feedback on and edit Copied / hint labels.
Match Font to your site type.
