12:I[93649,["/_next/static/immutable/chunks/1tf2pn9278k7y.js","/_next/static/immutable/chunks/1kp1o4kqi1096.js","/_next/static/immutable/chunks/0-fj_ecsqdsom.js","/_next/static/immutable/chunks/2azpml8fkc4bk.js"],"DocsSidebar"] 13:I[67919,["/_next/static/immutable/chunks/1tf2pn9278k7y.js","/_next/static/immutable/chunks/1kp1o4kqi1096.js","/_next/static/immutable/chunks/0-fj_ecsqdsom.js","/_next/static/immutable/chunks/2azpml8fkc4bk.js"],"PreviewTabs"] 14:I[27615,["/_next/static/immutable/chunks/1tf2pn9278k7y.js","/_next/static/immutable/chunks/1kp1o4kqi1096.js","/_next/static/immutable/chunks/0-fj_ecsqdsom.js","/_next/static/immutable/chunks/2azpml8fkc4bk.js"],"CopyBlock"] 15:T3d8e,# Gradient-Ring Profile Dropdown — AI Prompt Copy this prompt into **v0**, **Bolt**, **Cursor**, **Framer AI**, or **Claude** to generate this component from scratch. > **Use case:** Ideal for the account/profile corner of a product dashboard or SaaS app bar where a polished, Framer-tier micro-interaction signals attention to craft. --- # Profile Hover Dropdown — Gradient-Ring Avatar with Themed Menu + Dark-Mode Toggle > **This is an ADDITION to my existing project. DO NOT create a new HTML file. DO NOT overwrite my current ``, ``, or global styles.** > Insert this action-bar (theme toggle + profile hover dropdown) at the spot I mark. If Inter is already loaded from Google Fonts, reuse — don't duplicate the link. Namespace any new class names to avoid collisions. If my project already has a dark-mode system, adapt the CSS variables to plug into mine — this component drives dark mode via `data-mode="dark"` on `` with persistence in `localStorage.mode`. Build a pixel-perfect **profile hover dropdown** — the kind you'd see on a Framer / Cursor / Rauno-tier product bar. Left of the avatar is a **round icon-only theme toggle** (sun ↔ moon with springy rotate). Hovering the avatar opens a 250px-wide dropdown with a **gradient-ring avatar**, staggered slide-in menu items, an inline **PRO** badge on "Subscription", and a hairline divider before the sign-out group. Everything is fully themed (light + dark) via CSS variables — every color, shadow, and hover state remaps on toggle. Every value below is exact, not "roughly". --- ## FRAMEWORK - Plain **HTML + CSS + vanilla JS**. No React. No libraries. - Single Google Font: **Inter** (weights 400 / 500 / 600 / 700). - All icons are inline SVG. No icon libraries. - Dark mode persisted in `localStorage.mode` (`"dark"` | `"light"`). --- ## ASSETS Fonts only (skip if already loaded): ```html ``` Single avatar image (Pinterest CDN — use this exact URL, no placeholder): - `https://i.pinimg.com/736x/da/03/5c/da035cb2cb2ec2f97248cc8a85187542.jpg` --- ## DESIGN TOKENS (paste verbatim — two theme scopes) Read persisted mode **inline in `` before body paint** so the component never flashes wrong colors on reload: ```html ``` ```css :root { --bg: #F8F9FA; --card-bg: #FFFFFF; --text-main: #111111; --text-secondary: #555555; --hover-bg: #F4F4F5; --border: #E5E5E5; --pro-bg: #FDF4FF; --pro-text: #D946EF; --toggle-bg: #EAEAEA; --toggle-bg-hover: #E0E0E0; --shadow-1: 0 16px 40px rgba(0,0,0,0.06); --shadow-2: 0 4px 12px rgba(0,0,0,0.03); --shadow-hair: 0 0 0 1px rgba(0,0,0,0.02); } :root[data-mode="dark"] { --bg: #0B0B0D; --card-bg: #17171A; --text-main: #FFFFFF; --text-secondary: #A0A0A8; --hover-bg: #23232A; --border: #2A2A31; --pro-bg: #2A1132; --pro-text: #E879F9; --toggle-bg: #23232A; --toggle-bg-hover: #2E2E36; --shadow-1: 0 16px 40px rgba(0,0,0,0.5); --shadow-2: 0 4px 12px rgba(0,0,0,0.35); --shadow-hair: 0 0 0 1px rgba(255,255,255,0.05); } body { margin: 0; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding-top: 120px; background: var(--bg); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; transition: background-color 0.35s ease; } ``` --- ## THE ACTION BAR ```html

…

``` ```css .action-bar { display: flex; align-items: center; gap: 16px; } ``` --- ## THEME TOGGLE (round, icon-only — replaces the old Share button) ```html ``` ```css .theme-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--toggle-bg); border: none; border-radius: 999px; cursor: pointer; position: relative; overflow: hidden; transition: background 0.25s ease, transform 0.1s; } .theme-btn:hover { background: var(--toggle-bg-hover); } .theme-btn:active { transform: scale(0.94); } .theme-btn svg { position: absolute; width: 18px; height: 18px; stroke: var(--text-main); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease; } :root[data-mode="dark"] .theme-btn .sun { opacity: 1; transform: rotate(0); } :root[data-mode="dark"] .theme-btn .moon { opacity: 0; transform: rotate(90deg) scale(0.6); } :root:not([data-mode="dark"]) .theme-btn .sun { opacity: 0; transform: rotate(-90deg) scale(0.6); } :root:not([data-mode="dark"]) .theme-btn .moon { opacity: 1; transform: rotate(0); } ``` Only one icon is visible per mode; the other rotates + scales down + fades. Springy `cubic-bezier(0.34,1.56,0.64,1)` on the rotate gives the pop. Toggle JS: ```js const btn = document.getElementById('themeBtn'); btn.addEventListener('click', () => { const isDark = document.documentElement.getAttribute('data-mode') === 'dark'; if (isDark) { document.documentElement.removeAttribute('data-mode'); localStorage.setItem('mode', 'light'); } else { document.documentElement.setAttribute('data-mode', 'dark'); localStorage.setItem('mode', 'dark'); } }); ``` --- ## GRADIENT-RING AVATAR ```html

``` ```css .profile-wrapper { position: relative; } .avatar-ring { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #FF9A9E, #FECFEF, #A1C4FD); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 2.5px; box-sizing: border-box; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .profile-wrapper:hover .avatar-ring { transform: scale(1.05); } .avatar-inner { width: 100%; height: 100%; background: var(--card-bg); /* white in light, dark card in dark */ border-radius: 50%; padding: 2.5px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; transition: background 0.35s ease; } .avatar-inner img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } ``` Ring gradient is a **fixed 3-stop** (`#FF9A9E → #FECFEF → #A1C4FD`, 135deg) — same in both modes so the ring pops equally. The inner gap swaps with the theme (creates the "hairline gap" between ring and avatar). --- ## DROPDOWN CONTAINER ```css .dropdown-menu { position: absolute; top: calc(100% + 14px); right: 0; width: 250px; background: var(--card-bg); border-radius: 16px; box-shadow: var(--shadow-1), var(--shadow-2), var(--shadow-hair); padding: 8px; opacity: 0; visibility: hidden; transform: scale(0.96) translateY(-10px); transform-origin: top right; transition: opacity 0.3s cubic-bezier(0.22,1,0.36,1), visibility 0.3s cubic-bezier(0.22,1,0.36,1), transform 0.3s cubic-bezier(0.22,1,0.36,1), background 0.35s ease, box-shadow 0.35s ease; pointer-events: none; } .profile-wrapper:hover .dropdown-menu { opacity: 1; visibility: visible; transform: scale(1) translateY(0); pointer-events: auto; } ``` Fires on `:hover` of `.profile-wrapper`. Origin top-right (grows down-and-left from the avatar). --- ## MENU ITEMS ```html ``` ```css .menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; text-decoration: none; color: var(--text-main); font-size: 14.5px; font-weight: 500; transition: background 0.15s, transform 0.1s, color 0.2s; } .menu-item:hover { background: var(--hover-bg); } .menu-item:active { transform: scale(0.98); } .menu-item svg { width: 18px; height: 18px; stroke: var(--text-secondary); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; } .menu-item:hover svg { stroke: var(--text-main); } ``` Exact icon SVGs (paste inside each `.menu-item`): - **Profile**: `` - **Community**: `` - **Subscription (card)**: `` - **Settings (toggle pill)**: `` - **Help center**: `` - **Sign out**: `` Labels are exactly: **Profile · Community · Subscription · Settings · Help center · Sign out**. --- ## PRO BADGE (inline on Subscription) ```html PRO ``` ```css .pro-badge { margin-left: auto; display: flex; align-items: center; gap: 4px; background: var(--pro-bg); color: var(--pro-text); padding: 4px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; transition: background 0.35s ease, color 0.35s ease; } .pro-badge svg { width: 10px; height: 10px; stroke: none; fill: var(--pro-text); transition: fill 0.35s ease; } ``` Both `--pro-bg` and `--pro-text` swap on dark — badge remains legible with the same hue family. --- ## HAIRLINE DIVIDER ```css .divider { height: 1px; background: var(--border); margin: 8px 14px; transition: background 0.35s ease; } ``` --- ## STAGGERED SLIDE-IN Each menu item slides in from `-6px` on the X axis with a 30ms stagger. `nth-child` targets both groups separately so the divider doesn't reset the count. ```css .profile-wrapper:hover .menu-item { animation: slideIn 0.4s cubic-bezier(0.22,1,0.36,1) forwards; opacity: 0; } .profile-wrapper:hover .top-group .menu-item:nth-child(1) { animation-delay: 0.03s; } .profile-wrapper:hover .top-group .menu-item:nth-child(2) { animation-delay: 0.06s; } .profile-wrapper:hover .top-group .menu-item:nth-child(3) { animation-delay: 0.09s; } .profile-wrapper:hover .top-group .menu-item:nth-child(4) { animation-delay: 0.12s; } .profile-wrapper:hover .bottom-group .menu-item:nth-child(1) { animation-delay: 0.15s; } .profile-wrapper:hover .bottom-group .menu-item:nth-child(2) { animation-delay: 0.18s; } @keyframes slideIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } ``` --- ## Responsive - **≥ 480px** — as specified above. - **≤ 480px**: dropdown clamps to `width: calc(100vw - 40px)`, right-anchor holds so it doesn't clip the viewport; theme button + avatar remain at 44/48. Padding-top of body drops to 60px. ```css @media (max-width: 480px) { body { padding-top: 60px; } .dropdown-menu { width: calc(100vw - 40px); right: 0; } } ``` - **Touch** — replace the `:hover`-only trigger with `.open` class + click handler. Add: ```css .profile-wrapper.open .dropdown-menu { opacity: 1; visibility: visible; transform: scale(1) translateY(0); pointer-events: auto; } ``` Wire `avatar-ring click → wrapper.classList.toggle('open')` and click-outside to close. `.profile-wrapper.open .menu-item { animation: ... }` mirrors the hover selectors. - **`prefers-reduced-motion: reduce`**: skip the slide-in stagger and the theme-toggle icon rotate — swap opacity only. ```css @media (prefers-reduced-motion: reduce) { .profile-wrapper:hover .menu-item { animation: none !important; opacity: 1 !important; } .theme-btn svg { transition: opacity 0.2s ease !important; transform: none !important; } } ``` - Test in DevTools at 320, 375, 480, 768, 1024, 1440. --- ## Deliverable checklist (all must be true) - [ ] Two theme scopes on ``: default light, `data-mode="dark"` swaps 14 CSS vars. - [ ] Inline `` script reads `localStorage.mode` before first paint — no flash of light theme when reloading in dark. - [ ] Theme toggle is a **44px round button** with two absolutely-stacked SVGs. Sun visible in dark mode, moon in light. Switch = 0.5s rotate with springy `cubic-bezier(0.34,1.56,0.64,1)`; opposite icon rotates + scales 0.6 + fades out. - [ ] Toggle click persists `light` or `dark` to `localStorage.mode`. - [ ] Gradient ring avatar is 48×48 with a fixed 3-stop `linear-gradient(135deg, #FF9A9E, #FECFEF, #A1C4FD)`. Inner gap is 2.5px, background bound to `--card-bg` so it swaps with theme. - [ ] Avatar ring scales to 1.05 on `.profile-wrapper:hover`. - [ ] Dropdown is exactly **250px wide**, radius 16, padding 8, positioned `top: calc(100% + 14px); right: 0`, transform-origin `top right`. - [ ] Dropdown 3-layer shadow (`--shadow-1 + --shadow-2 + --shadow-hair`) swaps to darker values in dark mode. - [ ] Hover-open transition = 0.3s `cubic-bezier(0.22,1,0.36,1)` on opacity + visibility + transform (0.96 → 1, translateY -10 → 0). - [ ] 6 menu items in the exact order: Profile · Community · Subscription (with PRO badge) · Settings · [divider] · Help center · Sign out. - [ ] Each menu item is 10/14 padding, 10 radius, 14.5px / weight 500, gap 12, icon stroke swaps from `--text-secondary` to `--text-main` on hover. - [ ] PRO badge sits `margin-left: auto`, magenta family (`--pro-text: #D946EF` light / `#E879F9` dark), lightning-bolt SVG filled with `--pro-text`. - [ ] Divider is 1px, `background: var(--border)`, `margin: 8px 14px`. - [ ] Each item slides in from `translateX(-6px)` with `+0.03s` stagger — top-group 0.03–0.12s, bottom-group 0.15–0.18s. - [ ] `prefers-reduced-motion: reduce` disables stagger + icon rotate. - [ ] No console errors, no layout shift, no theme flash on reload. --- **Awwwards-tier version →** https://cuedesign.space/component/cue049 11:["$","div",null,{"className":"mx-auto flex max-w-[1400px] gap-6 px-5 py-8 md:gap-10 md:px-6 md:py-10","children":[["$","$L12",null,{"activeSlug":"gradient-ring-profile-dropdown"}],["$","div",null,{"className":"min-w-0 flex-1","children":[["$","div",null,{"className":"mb-6 text-[13px] text-[#9CA3AF]","children":[["$","$Lf",null,{"href":"/","className":"hover:text-[#111827]","children":"Layouts"}],["$","span",null,{"className":"mx-2","children":"/"}],["$","span",null,{"className":"text-[#6B7280]","children":"Gradient-Ring Profile Dropdown"}]]}],["$","div",null,{"className":"mb-3 flex items-start justify-between gap-6","children":[["$","div",null,{"className":"flex items-baseline gap-3","children":[["$","h1",null,{"className":"text-[28px] font-medium leading-[1.15] tracking-tight text-[#2D2D2D] md:text-[40px]","children":"Gradient-Ring Profile Dropdown"}],["$","span",null,{"className":"rounded-full border border-[#5C6DFF]/20 bg-[#EFF2FF] px-2.5 py-1 text-[9px] font-bold uppercase tracking-widest text-[#5C6DFF]","children":"New"}],false]}],["$","button",null,{"type":"button","className":"hidden shrink-0 items-center gap-2 rounded-[4px] border border-[#E5E7EB] bg-white px-3 py-1.5 text-[13px] text-[#6B7280] hover:text-[#111827] sm:inline-flex","children":[["$","span",null,{"children":"⧉"}]," Copy Page"]}]]}],["$","p",null,{"className":"mb-10 max-w-2xl text-[16px] leading-[1.5] text-[#6B7280]","children":"A hover-triggered profile dropdown with a gradient-ring avatar, staggered menu item slide-ins, a PRO badge, and a springy dark-mode toggle."}],["$","$L13",null,{"preview":["$","div",null,{"className":"overflow-hidden rounded-[4px] border border-[#E5E7EB] bg-[#FAFAFA]","style":{"boxShadow":"0 12px 30px rgba(0,0,0,0.04), 0 4px 10px rgba(0,0,0,0.02)"},"children":["$","video",null,{"src":"https://pub-bffac370ca114a6f873486297600ac6f.r2.dev/1788246583654-6esbq2.mp4","poster":"https://pub-bffac370ca114a6f873486297600ac6f.r2.dev/1787461373850-wuhc0f.jpg","autoPlay":true,"loop":true,"muted":true,"playsInline":true,"preload":"metadata","className":"w-full"}]}],"usage":["$","$L14",null,{"content":"$15","label":"The AI prompt","bodyClassName":"max-h-[500px] whitespace-pre-wrap"}],"code":"$L16"}],false,"$undefined",false,"$L17"]}]]}]