Kinetix is a custom, cyberpunk-themed new tab dashboard built with vanilla HTML, CSS, and JS. It serves as a functional command center featuring a live Open-Meteo weather widget, a custom HTML5 music player, a dynamic calendar, a persistent local-storage terminal notepad, and an interactive 3D WebGL globe.
I built Kinetix, a custom cyberpunk-themed new tab dashboard using vanilla HTML, CSS, and JS. The biggest challenge was wrangling CSS Flexbox to keep my widget grid perfectly aligned, along with debugging a bizarre GitHub Pages deployment issue that was corrupting my MP3 files. I am most proud of integrating the interactive 3D WebGL globe on the left side and building a persistent “Hacker Notepad” using the browser’s local storage API. To test the project, try clicking and dragging the globe to spin it, use your scroll wheel or trackpad pinch to zoom, play a synthwave track, and type a quick note in the bottom-right terminal log—if you refresh the page, your text will still be exactly where you left it!
23m 17s logged
Mission Complete: Launching Kinetix V1 for the Stardance ChallengeWe finally made it to the finish line. After battling GitHub deployment bugs, Safari audio caching, and stubborn CSS flexbox layouts, Version 1 of Kinetix is officially live and fully functional. This project started as a way to build a custom cyberpunk-themed new tab page, but it evolved into a highly interactive dashboard that hits every requirement for the Stardance Challenge.In this final sprint, I added two major features to complete the command-center vibe:The Persistent Terminal Log: I built a custom scratchpad in the bottom right corner using a and JavaScript’s localStorage API. It instantly saves any text as I type, meaning I can open a new tab, jot down a quick note or hex code, close the browser, and my data is perfectly preserved when I return.Interactive 3D Globe: To balance the left column under the music player, I integrated Globe.gl. Getting this working was a puzzle of its own—I had to fight with HTML nesting to keep it from escaping its widget panel, track down a missing closing tag that accidentally trapped the 3D canvas inside the audio player, and manually configure the WebGL controls to allow mouse wheel and trackpad pinch-to-zoom. Now, there is a fully textured, auto-rotating, full-color Earth floating right on the dashboard.
1h 22m 49s logged
I just wrapped up V1 of Kinetix, a custom cyberpunk-themed new tab dashboard built with vanilla HTML, CSS, and JS featuring a live Open-Meteo weather widget, a dynamic calendar, and a custom HTML5 music player. The build went smoothly until deployment, where I ran into a gauntlet of bizarre bugs: GitHub’s web editor stripping my uploaded MP3s into corrupted 2-byte text files, Safari aggressively caching that broken audio, and CSS Flexbox stubbornly stretching my music widget across the entire screen. After dragging and dropping fresh binary files directly into the repo, forcing a hard cache clear, and overriding the global flex layout with a strict #music-panel ID, the layout finally snapped into place and the synthwave tracks are blasting perfectly.
47m 47s logged
The Kinetix start page has officially evolved into a practical daily-driver dashboard with a clean, three-column layout. I anchored the center with a glowing “KINETIX” header, a functional search bar, and quick-link shortcuts to my most used sites. On the sides, I implemented CSS glassmorphism to create frosted, semi-transparent widget panels that will soon house a music player, weather tracker, and calendar. These UI updates sit seamlessly over the interactive canvas particle network, perfectly balancing everyday functionality with the core sci-fi aesthetic.
23m 8s logged
Core Engine Online: Neon Clock & Particle Physics! The foundation for Kinetix is officially live. I’ve successfully implemented the core sci-fi aesthetic for this custom start page, completely replacing the standard default browser tab.
