@Lokesh_Lal

Custom New Tab — a JARVIS-flavored browser home base
What I built
A completely custom new-tab experience — think glass UI, a greeting that shifts with the time of day, a centered search bar, a side dock of shortcuts that magnifies its neighbors when you hover, a Super Menu packed with clock, weather, todos, notes, themes, and wallpaper controls, plus an optional geopolitical live map (World Monitor) and animated anime wallpapers you can toggle off when you want focus.
It’s not a theme slapped on Chrome’s defaults. Every surface — the glass panels, the background rays and particles, the hero type, the dock behavior — was hand-built and borrowed spirit from JARVIS-style interfaces, then wired into something that actually feels like my dashboard.
Live: https://anonymouscoderartist.github.io/custom-new-tab/
What was challenging

• The map fights you back. World Monitor blocks being iframed, so I had to fetch their HTML client-side, inject a tag, rewrite root-relative assets, and smuggle it in via srcdoc — with a graceful fallback when that fails.
• Neighbor magnify is fiddly CSS. Getting ±1 and ±2 dock icons to scale in a wave (1.35 / 1.18 / 1.08) without clipping or fighting the scroll container took real iteration — :has(), padding reserves, mobile overrides.
• The search bar went through an identity crisis. Square? Too tall. Bottom-anchored? Not JARVIS enough. Final answer: centered at 54%, pill-sized, chips tucked inside the orb directly under the input.
• Deploy trust. Every push means polling GitHub Pages until the build is genuinely built and the live bytes match local — CDN caches love to lie to you for a minute.
  What I’m proud of
  Honestly? The details that don’t announce themselves:
• Hover the dock and watch the ripple of scale — it feels alive.
• The Super Menu has no tacky white sheen; the title still shimmers.
• Fonts are fully local — nothing phones home.
• It ships with a real default dashboard URL, not a placeholder.
• State lives in localStorage only. Your todos and notes never leave the browser.
  I didn’t just assemble widgets. I made a UI with a point of view.
  How to test it (please do)

1. Open it: https://anonymouscoderartist.github.io/custom-new-tab/
   — or locally: npm run dev → http://localhost:3000
2. Watch the greeting — reload at different times of day; it changes.
3. Search bar — dead center. Type and hit Enter (Google by default). Change the engine in Super Menu → Search.
4. Dock hover test — mouse across the shortcut icons. Nearest neighbors should scale up in a wave. Click × to delete one, add your own from Super Menu.
5. Super Menu (top right) — poke everything: clock, weather, todos, notes, theme dots (bottom-right: blue/purple/mixed/minimal), wallpaper on/off, JARVIS effects toggle, custom dashboard URL.
6. Map chip — hit Show Map. Should load the exact World Monitor view (conflicts, sanctions, weather, satellites, the works). If it ever blanks, you’ll see a fallback instead of a dead frame.
7. Wallpaper — flip through live anime videos and photo presets; try it with effects off for a clean, quiet version.
   Credits where due: JARVIS for the visual soul, World Monitor for the dashboard, Pixabay & Unsplash for wallpapers, Oxanium/Maven Pro/Geist for type, Google’s favicon service for shortcut icons.
   Go break it. 🛠️