Devlog #3: How I Fought WebGL Gravity Won 🥊

Last time, I built the background automation engine for NOVA Break — the lightweight, non-blocking browser extension that visually suggests breaks by injecting a miniature, Interstellar-style anomaly directly over your active tab.

My goal today: upgrade that basic overlay into a stunning, hardware-accelerated Three.js raymarching canvas layer.

Easy, right? …Right?

The Final Boss 👹: Twin Singularities & Stutter Lag

The moment I pushed my gravitational lens formulas into a standard 3D bounding sphere, everything broke.

The fragment shader executed the raymarching math twice — once on the front face, once on the back face.

The Fallout:

• Ghosting Effects: Two black holes rendering simultaneously on top of each other.
• GPU Choke: Billions of relativistic steps calculated every single frame.
• System Meltdown: Browser thread choked, text selection vanished, laptop fans screaming.

No matter what I tried, the effect stuttered, broke apart, or turned into a weird golden mustache clipping at the edges.

The Plot Twist 🌀

The double-image artifact gave it away. The math wasn’t wrong — the geometry container was simply too deep.

Treating the simulation as a full 3D sphere volume meant computing spatial warping across layers of empty air. Worse, the canvas matched the entire 100vw layout, becoming an invisible wall that swallowed every click and text selection underneath.

The Solution 🛠️

I tore out the 3D bounding geometry entirely and engineered a 2D plane geometry pass, restricted to a floating 450px × 450px container centered on screen.

Optimization Breakdown:

1. Single Pass — Camera ray hits the shader exactly once per pixel.
2. Loop Reduction — Raymarching loop slashed to a 38-step pass.
3. Hardware Capping — Capped pixel scaling, injected pointer-events: none.
4. Cinematic Scaling — CSS cubic ease-out handles scale-up without tearing the physics.

#blackhole-canvas-root {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 450px;
  height: 450px;
  transform: translate(-50%, -50%) scale(1.0);
  transition: transform 4.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 100000;
}

The Result:

Ghosting gone. The black hole now grows from zero, drifting at a flawless 60 FPS, while every background link, button, and text field stays fully interactive.

And this masterpiece won the Hack Club Showcase! 🎉

Next Up 🚀

• Cosmic Audio — Subtle cosmic sound effects as the singularity expands.
• Space-Time Distortion — Text distortion filters that warp webpage text near the event horizon.

Take a look at the before-and-after photos below. Would love your feedback in the comments!

Zero frame drops. Zero laptop sacrifices.

Today I polished the NOVA Break popup UI and launched a live demo.

While testing, I realized screenshots don’t really capture the effect.

NOVA Break is all about how the black hole slowly appears and grows over time, so I wanted people to experience it instantly instead of just looking at images.

Live Demo:

https://prfhh.github.io/NovaBreakDemo

For anyone new to the project:

•It is an Browser extension for people who hate productivity apps.

• Creates a cinematic 3D black hole after a period of work.

• No popups, notifications, or screen locks.

• Can be completely ignored.

• Slowly grows if you keep working as a gentle reminder to take a break.

• Runs directly in your browser tabs.

No popups and No nagging.

The live demo is a quick web sandbox built so anyone can test the 3D black hole mechanics instantly without installing the extension. The actual project is a full Chrome extension that runs the exact same script to inject the anomaly into your real browser tabs!

I’ve been building NOVA Break because I got tired of Pomodoro apps interrupting me with giant popups and screen locks right when I’m focused.

Instead of forcing a break, NOVA Break creates a small Interstellar-inspired black hole after 20 minutes of work. It doesn’t block clicks, typing, or scrolling—you can completely ignore it.

The twist is that if you keep ignoring it, the black hole slowly grows. The goal is to gently encourage breaks instead of demanding them.

The hardest part wasn’t the timer logic but making the effect actually feel like a black hole. Early versions looked more like glowing spinning circles, so I spent most of my time experimenting with CSS layers, blur effects, gradients, and perspective transforms until it felt cinematic.

I also added pointer-events: none so the effect never interferes with the page. Finding the right growth rate took a lot of tweaking too—too fast and it’s annoying, too slow and nobody notices it.

Next I’m experimenting with text warping, subtle audio effects, and stronger gravitational distortion.

My goal isn’t to make another productivity app—it’s to create a small sci-fi experience that reminds you to take a break without getting in your way.