namic CSS 🌐Orb with Custom Properties and Gradients (One Element)!"}]}]]}],["$","div",null,{"className":"text-xs flex items-center justify-end space-x-3 text-foreground/60","children":["$","div",null,{"className":"hidden md:inline-flex opacity-0 group-hover:opacity-100 items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border-transparent bg-primary hover:bg-primary/80 text-red-600","children":"read article"}]}]]}]}]]]}]]}] f:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Colorful Binocular Navbar / Powered by Dev Resource / dev-resources.site 💗"}],["$","meta","3",{"name":"description","content":"Find everything you need for coding and development at dev-resources.site, including tools, guides, and code to streamline your workflow."}],["$","meta","4",{"name":"google-site-verification","content":"W3xG0R8ES_dhlXhNnP1VNN03oAQG2hYF_1ZCpf5ETak"}],["$","meta","5",{"name":"google-adsense-account","content":"ca-pub-5834256338017594"}],["$","meta","6",{"name":"google-site-verification","content":"W3xG0R8ES_dhlXhNnP1VNN03oAQG2hYF_1ZCpf5ETak"}],["$","meta","7",{"property":"og:title","content":"Colorful Binocular Navbar / Powered by Dev Resource / dev-resources.site 💗"}],["$","meta","8",{"property":"og:description","content":"

Inspired by a Framer Project, just by using simple positioning calculations of getting the center of an item and moving from it in all directions, then using those coordinates to transform the binocular bar, along with getting the current item to clip the whole binocular to a specific item

\n\n

"}],["$","meta","9",{"property":"og:url","content":"https://dev.to/alishata128/colorful-binocular-navbar-32ce"}],["$","meta","10",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","11",{"name":"twitter:title","content":"Colorful Binocular Navbar / Powered by Dev Resource / dev-resources.site 💗"}],["$","meta","12",{"name":"twitter:description","content":"

\n\n

"}],["$","link","13",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] 3:null 1e:I[7558,["609","static/chunks/609-cc37860f8f268b0f.js","691","static/chunks/app/content/%5B...data%5D/page-2449eaf8da25debc.js"],"default"] 12:["$","div","0",{"className":"mb-4 prose prose-sm md:prose-base prose-invert prose-neutral max-w-none","children":[["$","div",null,{"className":"mb-4 rounded-xl grid grid-cols-1 border border-neutral-800 divide-y divide-neutral-800 overflow-hidden","children":[["$","div",null,{"className":"p-2 px-4 py-6 flex flex-row justify-between bg-neutral-900 relative","children":["$","h1",null,{"className":"pb-0 mb-0","children":"Colorful Binocular Navbar"}]}],["$","div",null,{"className":"p-2 px-4 flex flex-row justify-between bg-neutral-900 relative","children":[["$","div",null,{"className":"font-bold text-foreground text-xs md:text-base flex items-center justify-center","children":"Published at"}],["$","div",null,{"className":"text-xs flex items-center justify-end space-x-3 text-foreground/60","children":["$","div",null,{"className":"inline-flex text-amber-500 text-xs opacity-80","children":"9/29/2024"}]}]]}],["$","div",null,{"className":"p-2 px-4 flex flex-row justify-between bg-neutral-900 relative","children":[["$","div",null,{"className":"font-bold text-foreground text-xs md:text-base flex items-center justify-center","children":"Categories"}],["$","div",null,{"className":"text-xs flex items-center