Premi Copia prompt qui sopra, apri il progetto nell'agente e incollalo. Il prompt contiene i link ai fotogrammi originali, così l'agente li guarda prima di costruire.
Mettili uno accanto all'altro. Se qualcosa non torna, di' all'agente cosa esattamente: tempi, dimensioni, colori o spazi.
REFERENCE - Gallery page: https://magpui.com/en/i/navbar-with-a-peeking-mascot-542d6f - First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/navbar-with-a-peeking-mascot-542d6f/shot.jpg - Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/navbar-with-a-peeking-mascot-542d6f/clip.mp4 - Original post: https://21st.dev/@jatin-yadav05/components/anime-navbar by Jatin Yadav Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth. BUILD A centered dark pill navigation (Home, Convert, Pricing, About). The active tab has a lighter pill behind it, and a tiny white round mascot with a face peeks out from the top edge of that pill. Hovering another tab slides the pill and the mascot there; the mascot blinks and its expression changes (neutral, happy, sleepy). DESIGN SYSTEM - Background #0B0B0C with a faint grid; nav pill #141416, 1px border #FFFFFF12, radius 999px, height 40px. - Tabs 13px medium #9A9AA0, active white on #26262A pill. - Mascot: 26px white circle with two dot eyes and a small mouth (SVG), drop shadow, sits half above the active pill, tilted 8deg. MOTION - Active pill moves with a shared layout animation (spring 400/30). - Mascot follows with 60ms delay and a small hop (y -6px then back, 300ms), rotating toward the move direction. - Expression swap: eyes squash to lines for 120ms (blink) then the new mouth shape fades in. - Mobile: the nav collapses to icons, mascot stays on the active icon. SECTIONS - Nav container, tabs, active pill, mascot (eyes, mouth states). - States: idle (blink every 4s), hover move, active route. IMPLEMENTATION - Motion layoutId for the pill and a second motion element for the mascot; mascot faces as small inline SVGs. - prefers-reduced-motion: swap the motion for a 150ms opacity change. - Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense. - Animate only transform, opacity and filter. ADAPT TO THE PROJECT Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders. SUCCESS CHECK - The mascot always sits on the hovered or active tab. - It blinks when idle. - Keyboard focus on a tab moves the pill and mascot the same way.