Old-surface header buttons — website + extension
Button options for the emojicopy.com header and the JoyPixels Chrome-extension popup — the button that opens the beta-invitation modal. Both picked 7/20.
⚠️
Old-app surfaces. This page mocks the existing emojicopy.com header (the Angular
site) and the JoyPixels Chrome-extension popup, not the beta app — raw HTML/CSS, not
componentized.
Reference The header today — live pill, unchanged
Search
Smileys & People
😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘
WHY MOVEOne click in, a returning visitor has "seen the update" and the pill goes
banner-blind — and the label promises an update to this site rather than pointing at the new app. The options below
each fix the message a different way; the look moves with it.
Option 1 · The Introduction "The new EmojiCopy"
SearchSmileys & People
😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘
MESSAGEPlain-spoken and true: an introduction to a new product, not a patch
note for this one. The white pill reads calm and editorial next to
the logo's green COPY tag instead of competing with it.
Option 2 · The Tile Peek "It's here"
SearchSmileys & People
😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘
MESSAGEShow the new thing instead of describing it — the tilted green tile
wearing the new mark is the announcement, and it's the same tile language the modal's tile-drop uses, so the click pays off
what the button teases. Dark shell + green keyline keeps it inside the black bar's world.
Option 3 · The Invitation "You're invited"
SearchSmileys & People
😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘
MESSAGEThe modal is a beta invitation, so the pill promises exactly what
the click opens. The only option that speaks to you instead of about us — personal, zero jargon, high curiosity — and the
soft green tint reads warm rather than promotional.
Option 4 · The Velvet Rope — PICKED 7/20 "Early access"
SearchSmileys & People
😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘
MESSAGEPICKED 7/20 — first-wave energy without any offer mechanics on the button; the
modal handles the pitch. The ghost outline is the quietest treatment of the five: it sits inside the header's design language
instead of shouting over it, and the slow glow pulse does the eye-catching. Fills solid green on hover. Dev hand-off at the bottom of this page.
Option 5 · The Curiosity Gap "Sneak peek"
SearchSmileys & People
😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘
MESSAGEClaims nothing, promises a look — the shortest label of the set,
built for repeat visitors who have tuned the current pill out. Flat bright green keeps today's energy but drops the gradient
and shine sweep for a cleaner, more current read.
The lineup Every pill on the bar — silhouettes side by side
Current · live
Already built
1 · Introduction
2 · Tile peek
3 · Invitation
4 · Velvet rope — PICKED
5 · Curiosity gap
NEXTDECIDED 7/20 — option 4, the Velvet Rope ("EARLY ACCESS"). Dev hand-off at the
bottom of this page (same drop-in pattern as the live pill, wired to the modal hand-off in
old-emojicopy-modal.html); mirror the live pill's ≤768px compact behavior when swapping.
Part two — the Chrome extension
The same button in the JoyPixels Chrome-extension popup. It is a JoyPixels surface, so the options use the JoyPixels voice and palette instead of EmojiCopy’s.
Reference The extension today — live pill, unchanged
joypixels™11.0
Search or press tab
Recents CLEAR
🦾👴🕵️👵👦💋😀🫠🤫🤩😎
Smileys & People
😀😃😄😁😆😅😂🤣☺️😊😇
WHY MOVEBlack-on-teal is a strong slot — the silhouette can stay. The words are
the problem: on a JoyPixels surface, BIG UPDATE! reads as a big update to the extension, when what's actually on
offer is JoyPixels' new app opening its beta.
Option 1 · The Hand-off "Meet EmojiCopy"
joypixels™11.0
Search or press tab
Recents CLEAR
🦾👴🕵️👵👦💋😀🫠🤫🤩😎
Smileys & People
😀😃😄😁😆😅😂🤣☺️😊😇
MESSAGEThe name is the news — extension users have never heard it.
White pops hardest on teal, and the small tilted tile walks the new brand into JoyPixels chrome at mark size, not
fill size.
Option 2 · The Maker's Note "We made this"
joypixels™11.0
Search or press tab
Recents CLEAR
🦾👴🕵️👵👦💋😀🫠🤫🤩😎
Smileys & People
😀😃😄😁😆😅😂🤣☺️😊😇
MESSAGEKeeps the silhouette that already owns this bar and changes only the
words — first person, because on its own surface JoyPixels is the one talking. The cheapest swap to ship.
Option 3 · The Plain Ask — PICKED 7/20 "New web app" · ships one step smaller (.xq--xs)
joypixels™11.0
Search or press tab
Recents CLEAR
🦾👴🕵️👵👦💋😀🫠🤫🤩😎
Smileys & People
😀😃😄😁😆😅😂🤣☺️😊😇
MESSAGEPICKED 7/20 — copy is now NEW WEB APP: names the thing itself, the arrow does the asking. The ghost outline sits inside the teal instead of on top of it — quietest of the five; fills white on hover. Ships one step smaller than the other options (28px tall) — dev hand-off at the bottom of this page.
Option 4 · The Whisper "Psst…"
joypixels™11.0
Search or press tab
Recents CLEAR
🦾👴🕵️👵👦💋😀🫠🤫🤩😎
Smileys & People
😀😃😄😁😆😅😂🤣☺️😊😇
MESSAGETone-on-tone deep teal reads like the extension leaning over to its
regulars, not an ad shipped into it. Lowest ego, highest curiosity — for the crowd that opens this popup every
day.
Option 5 · The Sunny One "EmojiCopy is here"
joypixels™11.0
Search or press tab
Recents CLEAR
🦾👴🕵️👵👦💋😀🫠🤫🤩😎
Smileys & People
😀😃😄😁😆😅😂🤣☺️😊😇
MESSAGEEmoji yellow is the one loud color this surface already owns, so
the pill feels like it grew out of the product — celebration energy with zero EmojiCopy green.
Option 6 · The Tile Peek "It's here"
joypixels™11.0
Search or press tab
Recents CLEAR
🦾👴🕵️👵👦💋😀🫠🤫🤩😎
Smileys & People
😀😃😄😁😆😅😂🤣☺️😊😇
MESSAGESite option 2 carried across, in extension clothes: the black
shell keeps the silhouette this bar already trusts, the tilted tile does the naming, and the label just announces. Run it
on both surfaces and the message matches everywhere a user meets it.
The extension lineup Every pill on the teal — silhouettes side by side
Current · live
1 · Hand-off
2 · Maker's note
3 · Plain ask — PICKED
4 · Whisper
5 · Sunny one
6 · Tile peek
NEXTSite pick and extension pick are independent — the pairs don't have to
match. Extension: DECIDED 7/20 — option 3 Plain Ask, copy NEW WEB APP, one step smaller.
Site: DECIDED 7/20 — option 4 Velvet Rope, "EARLY ACCESS". Both hand-offs below, alongside the
modal's hand-off in old-emojicopy-modal.html.
Hand-off — header buttons
2 cards · site + extension · picked 2026-07-20
Site header pill · Velvet Rope, "EARLY ACCESS"
Replaces BIG UPDATE! in the emojicopy.com header · opens the beta-invitation modal
↑ exact ship pill — same scale as the option above; glow pulses, fills solid green on hover
<button class="ec-early-pill" type="button" data-ec-open>
<span>EARLY ACCESS</span>
<svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
.ec-early-pill {
position: relative; display: inline-flex; align-items: center; gap: 9px;
padding: 10px 16px; border: 0; border-radius: 999px;
background: transparent; color: #85FC64;
box-shadow: inset 0 0 0 1.5px #85FC64;
font-family: proxima-nova, sans-serif;
font-size: 12px; font-weight: 800; letter-spacing: .4px; line-height: 1;
white-space: nowrap; cursor: pointer;
animation: ecearly-glow 3.6s ease-in-out infinite;
transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .18s ease, color .18s ease;
}
.ec-early-pill svg { flex-shrink: 0; margin-left: 2px; transition: transform .2s ease; }
.ec-early-pill:hover { transform: translateY(-2px); background: #85FC64; color: #052A1E; animation: none; }
.ec-early-pill:hover svg { transform: translateX(3px); }
.ec-early-pill:focus-visible { outline: 2px solid #85FC64; outline-offset: 2px; }
@keyframes ecearly-glow {
0%, 100% { box-shadow: inset 0 0 0 1.5px #85FC64, 0 0 0 rgba(133,252,100,0); }
50% { box-shadow: inset 0 0 0 1.5px #85FC64, 0 0 18px rgba(133,252,100,.32); }
}
@media (prefers-reduced-motion: reduce) {
.ec-early-pill { animation: none; }
.ec-early-pill, .ec-early-pill svg { transition: none; }
}
Extension header button · Plain Ask, white
Replaces BIG UPDATE! in the popup header · opens the extension invite modal (F)
↑ exact ship size — 28px tall, one step smaller than the option pills above
<button class="jpx-newapp-pill" type="button" data-ec-open>
<span>NEW WEB APP</span>
<svg viewBox="0 0 14 14" width="10" height="10" fill="none" aria-hidden="true"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
.jpx-newapp-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px; min-height: 28px; box-sizing: border-box;
border: 0; border-radius: 999px;
background: transparent; color: #fff;
box-shadow: inset 0 0 0 1.5px #fff;
font-family: inherit; /* popup UI font */
font-size: 10px; font-weight: 800; letter-spacing: .3px;
line-height: 1; white-space: nowrap; cursor: pointer;
transition: transform .18s ease, background .18s ease, color .18s ease;
}
.jpx-newapp-pill svg { flex-shrink: 0; transition: transform .2s ease; }
.jpx-newapp-pill:hover { transform: translateY(-1px); background: #fff; color: #0E5A4C; }
.jpx-newapp-pill:hover svg { transform: translateX(2px); }
.jpx-newapp-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.jpx-newapp-pill, .jpx-newapp-pill svg { transition: none; }
}