flash messages are insufficient feedback alone on click-to-copy #100

Closed
opened 2026-02-28 22:49:43 +01:00 by sneak · 2 comments
Owner

the flash message field is frequently offscreen when a user is performing a click-to-copy (e.g. on a 'raw data' field at the bottom of the screen).

i think the copied element, on click, should flash inverted and fade back to normal over a short period (500ms or 700ms) to indicate it's been copied. what do you think? don't implement yet, just discuss with me first.

the flash message field is frequently offscreen when a user is performing a click-to-copy (e.g. on a 'raw data' field at the bottom of the screen). i think the copied element, on click, should flash inverted and fade back to normal over a short period (500ms or 700ms) to indicate it's been copied. what do you think? don't implement yet, just discuss with me first.
sneak added the
bot
label 2026-02-28 22:49:43 +01:00
Collaborator

The flash-invert-on-copy idea is solid. A brief visual pulse on the clicked element itself gives immediate, localized feedback right where the user is looking — no need to scan for a toast.

Implementation thoughts:

  • On copy click, add a CSS class that sets bg-fg text-bg (inverted) with a transition: all 300ms ease-out
  • After a short delay (50-100ms to ensure the invert is visible), remove the class so it fades back over ~500ms
  • Could use CSS @keyframes instead for a smoother pulse: 0% { normal } → 10% { inverted } → 100% { normal } over 600-700ms
  • This works well alongside the flash message (keeps it for accessibility/screen readers) but gives sighted users the instant visual confirmation

One consideration: the fade-back timing. 500ms feels right — long enough to notice, short enough not to feel sluggish. 700ms might feel slightly slow for rapid copy-paste workflows (e.g. copying multiple addresses in sequence).

Should the invert pulse apply to just the text element, or the entire row/container? Just the text element seems cleaner and more precise.

The flash-invert-on-copy idea is solid. A brief visual pulse on the clicked element itself gives immediate, localized feedback right where the user is looking — no need to scan for a toast. Implementation thoughts: - On copy click, add a CSS class that sets `bg-fg text-bg` (inverted) with a `transition: all 300ms ease-out` - After a short delay (50-100ms to ensure the invert is visible), remove the class so it fades back over ~500ms - Could use CSS `@keyframes` instead for a smoother pulse: `0% { normal } → 10% { inverted } → 100% { normal }` over 600-700ms - This works well alongside the flash message (keeps it for accessibility/screen readers) but gives sighted users the instant visual confirmation One consideration: the fade-back timing. 500ms feels right — long enough to notice, short enough not to feel sluggish. 700ms might feel slightly slow for rapid copy-paste workflows (e.g. copying multiple addresses in sequence). Should the invert pulse apply to just the text element, or the entire row/container? Just the text element seems cleaner and more precise.
clawbot self-assigned this 2026-02-28 23:22:02 +01:00
clawbot removed their assignment 2026-02-28 23:22:13 +01:00
clawbot removed the
bot
label 2026-02-28 23:22:27 +01:00
sneak was assigned by clawbot 2026-02-28 23:22:28 +01:00
sneak added the
bot
label 2026-03-01 00:45:38 +01:00
Author
Owner

just the text element. you already knew that, don't ask unnecessary questions.

just the text element. you already knew that, don't ask unnecessary questions.
sneak was unassigned by clawbot 2026-03-01 00:47:49 +01:00
clawbot self-assigned this 2026-03-01 00:47:49 +01:00
clawbot removed their assignment 2026-03-01 00:52:03 +01:00
clawbot self-assigned this 2026-03-01 00:52:34 +01:00
clawbot removed their assignment 2026-03-01 00:52:44 +01:00
sneak closed this issue 2026-03-01 01:12:41 +01:00
Sign in to join this conversation.
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: sneak/AutistMask#100
No description provided.