# Y2K friend profile with stickers > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The own-profile screen of "Glowpage", an invented social app with a 2003 personal-page soul. Mira Okafor's page sits on a pearly iridescent ground: a chrome wordmark, glossy bubble buttons, a scrolling mood status, a "TOP 8" friends grid and a sticker tray at the bottom from which you drag a star, heart, butterfly, CD or "2COOL" tag onto your profile card, where it slaps down with an overshoot. Every tap anywhere throws a small burst of glitter sparkles. The style is loud, but every word of text sits on a solid white or tinted plate with a 2px ink outline, so it reads at 4.5:1 or better. Worth copying: Y2K done as a real, usable screen. The chrome, iridescence and gloss live only in decoration (wordmark, avatar ring, stickers, button highlights); type and ground stay solid. The language is neither iOS nor Material: it is its own Y2K component set (2px ink outlines, 4px hard offset shadows, pill bubbles with an inner bottom shade and a top gloss stripe). Native behaviour is kept where it matters: 44px+ targets, controls in the lower third, no custom scroll physics. ## Reference behaviour 1. First frame at 390 × 844 (the Lounge draws the status bar; content starts at 54px). Header row 52px tall: the chrome SVG wordmark "glowpage" (196 × 44) with a 4-point sparkle after it on the left; two 44px round bubble buttons on the right (messages with a pink "3" badge, edit page). 2. Profile plate 8px below: white, 2px `#1F1A3D` outline, radius 22, hard shadow `4px 4px 0 #1F1A3D`, 16px padding. Inside: - an 88px avatar: 5px iridescent conic ring around a pink `#D81B7A` disc with "MO" in Rubik Mono One 26px white, and a green online dot (18px, white 3px ring) that breathes between `#13A05A` and `#3ED98A` every 2.4s; - "MIRA OKAFOR" (Rubik Mono One 19px), "@mirabelle.exe" (14/600, `#544D72`), three 24px chips: "online now" (mint fill), "Leeds", "pisces"; - a stats strip `#F3F6FF` with three cells: 1,204 friends, 38 stickers, 9,481 page views (numbers in Rubik Mono One 15px, labels 12/600); - two 48px bubbles: "Add friend" (primary, pink `#D81B7A`, white text, plus icon, flex 1) and "Wink" (butter `#FFE27A`, 132px). - two stickers already placed: a gold star on the avatar's top-right edge (rotated 14°) and the "2COOL" tag hanging off the plate's bottom-right corner (−10°). 3. Mood bar 12px below: a 48px white pill with a 34px ink "MOOD" label (star icon in butter) and a marquee reading "burning a mixtape for saturday · new film camera, ask me · rain on repeat", looping every 16s, edges faded with a 12px / 16px mask. 4. TOP 8 plate: "TOP 8" (Rubik Mono One 14px) and "edited 2 days ago"; a 4 × 2 grid of friend tiles (`#FFF4FA`, radius 14). Each tile: 48px initials disc on its own pastel (yellow, aqua, lime, pink, lilac, peach, mint, butter) with a 2px ink outline, a 20px ink rank badge at the top-left, and the first name (13/700) under it. 5. Sticker tray pinned 34px above the bottom, 12px from both sides: white plate, radius 26, "Drag a sticker onto your page" and a live count "2 placed" on the right, then five 58px sticker buttons. 6. Press a tray sticker and drag: a ghost copy (scale 1.18, deeper drop shadow) follows the finger. While over the profile plate the plate's offset shadow turns pink and a 4px pink halo appears. 7. Release over the plate: the sticker lands at the release point with a random rotation between −12° and 12° and slaps down (scale 1.35 → 0.9 → 1 over 420ms, overshoot curve). The count updates; a polite live region says "Pink heart stuck on your page." 8. Release anywhere else: the ghost glides back to its tray slot over 260ms expo-out while fading, then is removed. 9. Placed stickers can be dragged again. Drop on the plate to move; drop outside to peel it off (count drops, "Pink heart peeled off."). 10. Tap anywhere: eight 16px 4-point sparkles (gold, pink, aqua, white, each with a 0.8px ink stroke) burst from the pointer 34–64px outwards, rotating 120°, fading over 640ms. 11. "Add friend" toggles to "Friends" with a check icon on green `#0F7A45`; the friend count goes 1,204 → 1,205; aria-pressed flips. Tap again to undo. 12. Keyboard: Enter or Space on a tray sticker sticks it onto the next of five free spots on the plate (corners and edges, never over text). Delete or Backspace on a focused placed sticker peels it off. 13. Reduced motion: the marquee stops and the mood wraps to two lines at 13px; glitter is one sparkle that fades in place; no slap, no glide, no breathing dot. ## Structure ``` 390 × 844 ┌──────────────────────────────────────┐ │ 54 status (Lounge) │ │ GLOWPAGE✦ (✉3) (✎) │ 54–106 header, bubbles 44 │ ┌──────────────────────────────────┐ │ profile plate, r22, shadow 4/4 │ │ (MO)★ MIRA OKAFOR │ │ avatar 88 │ │ @mirabelle.exe │ │ │ │ [online now][Leeds][pisces]│ │ chips 24 │ │ ┌ 1,204 ─── 38 ──── 9,481 ─────┐ │ │ stats strip │ │ [ + Add friend ] [ ➤ Wink ] │ │ bubbles 48 │ └───────────────────────────[2COOL]┘ │ │ ( MOOD ) burning a mixtape for sat… │ mood pill 48, marquee │ ┌ TOP 8 ─────────── edited 2 days ┐ │ │ │ (PD) (TW) (JA) (KM) │ │ 4 × 2 tiles, disc 48 │ │ (RV) (EB) (NH) (LV) │ │ │ └──────────────────────────────────┘ │ │ ┌ Drag a sticker onto… 2 placed ┐ │ tray, bottom 34, r26 │ │ ★ ♥ ✿ ◎ [2COOL] │ │ 58px stickers │ └──────────────────────────────────┘ │ └──────────────────────────────────────┘ 34 home indicator ``` - `
` with `overflow: hidden` (ghosts and glitter must never widen the page). - `
`: wordmark as `` with SVG `` filled by a chrome gradient; `

`, chips as ``, stats `
`s, two `