DEV Community

RAXXO Studios
RAXXO Studios

Posted on • Originally published at raxxo.shop

How I Built a Viral Web Game That Got 156K Views

  • Center This Div hit 156K views and 4,946 attempts in 48 hours from a single Reddit post

  • The 0.0001px threshold made it technically impossible to win, which drove engagement

  • Anti-cheat cron catches fabricated submissions using pattern analysis

  • Reddit r/webdev carried 90% of traffic, ProductHunt and DEV added long-tail

  • Building with Next.js and Vercel meant zero infrastructure headaches during the traffic spike

A CSS Game Hit 156K Views in 48 Hours

I built a game where you drag a div to the center of the screen. The precision threshold is 0.0001 pixels. Nobody has ever won. As of writing this, 4,946 people from 14 countries have tried. The closest anyone got was 0.02 pixels off center. The game went live on April 3rd as an April Fools project. By April 5th, it had 156K views, 307 upvotes on Reddit, and became the number one post of all time on r/webdev.

This is the full breakdown of how it happened: what I built, how I launched it, what went right, what I would change, and the exact numbers behind the viral run.

The Idea: Make the Simplest Game Impossibly Hard

Every web developer has centered a div. It is the most mocked skill in frontend development. "Can you center a div?" is a meme, a job interview question, and a running joke. I wanted to flip that into an actual challenge.

The core mechanic is dead simple: a draggable div, a target zone, and a score based on pixel distance from perfect center. What makes it absurd is the precision. The threshold is 0.0001 pixels. Most screens cannot even render that level of precision. Your monitor probably displays at 96 DPI, which means each physical pixel is roughly 0.26mm. A 0.0001px threshold is about 2,600 times smaller than a single screen pixel.

This means the game is technically unwinnable on consumer hardware. That was the point. The impossibility is what makes people share it. "Nobody has ever won" is a better hook than "try this fun game."

The Tech Stack: Next.js, Vercel, and Nothing Else

I built Center This Div with Next.js deployed on Vercel. No database. No backend framework. No paid services. The leaderboard uses Vercel's edge config for fast reads and a simple API route for writes.

The game canvas is pure DOM manipulation. No canvas element, no WebGL, no game engine. The div is a regular HTML element with CSS positioning. Drag events calculate the offset from center in real time and display it with six decimal places. The "deviation readout" panel shows X offset, Y offset, and total distance updated on every mouse move.

The live standings panel pulls from a sorted list of all submissions. Top 1%, top 5%, top 10%, percentile rankings. All calculated server-side on submission.

The live feed shows recent attempts in real time. When someone submits from Tokyo and you are playing in Berlin, their score appears in your feed within seconds. This created a competitive loop I did not anticipate. People started refreshing to see if someone beat their score.

Total build time: one evening. I started after work, had a playable prototype by midnight, and polished the UI the next morning. The dark theme with cyan accents and monospace typography was intentional. It looks like a developer tool, not a casual game. That aesthetic choice mattered for the audience I was targeting.

The Anti-Cheat System Nobody Expected

Within hours of launch, people started trying to cheat. Browser console submissions with fake coordinates. Automated scripts sending perfect scores. Someone even tried submitting negative pixel values.

I built an anti-cheat system that runs on a cron job. It analyzes submission patterns looking for:

  • Statistical anomalies: scores that are mathematically impossible given screen resolution constraints

  • Timing patterns: submissions that arrive too fast for human interaction (drag, pause, submit takes a minimum amount of time)

  • Coordinate fabrication: values that follow programmatic patterns rather than natural mouse movement

  • Duplicate fingerprints: multiple "perfect" attempts from the same session

The cron learns. Each run updates its model of what legitimate play looks like based on the growing dataset. Early attempts at cheating were crude (submitting 0.0000px directly via API). Later attempts got more sophisticated, randomizing values within a plausible range. The system catches both.

The footer of the game reads: "Submissions are pattern-analyzed. Fabricated values get the teapot. The cron learns." The teapot is HTTP status 418 (I'm a teapot), returned to detected cheaters. This became a talking point on Reddit. One comment with 144 upvotes asked about the anti-cheat system specifically.

The Reddit Launch That Changed Everything

I posted to r/webdev at 6 PM CET on April 3rd. The title: "I made a game where you center a div. The threshold is 0.0001px. Nobody has ever won." No tricks. No engagement bait. Just the fact.

The post hit the front page of r/webdev within two hours. By midnight, it had 100 upvotes and 30 comments. People were sharing their scores, discussing the sub-pixel rendering problem, debating whether the game was rigged, and complimenting the UI.

What made it spread:

The hook is the headline. "Nobody has ever won" is a challenge. Developers cannot resist trying to prove something wrong. Every comment like "I bet I can beat it" drove more traffic.

The experience is instant. No signup, no tutorial, no loading screen. You land on the page and the div is right there. Three seconds from click to play.

Shareability is built in. Your score and percentile ranking are shown immediately after submission. "I placed #1,237 of 4,946 (Top 25%)" is inherently shareable. People screenshotted their results and posted them in the comments.

The anti-cheat became content. The discussion about whether it is fair, how the cron works, and whether 0.0001px is even renderable generated dozens of comment threads. The game became a conversation, not just an experience.

Reddit drove 30.4% of views from the US, 7.9% from the UK, 6.3% from Canada. The remaining 55% spread across Europe, Asia, and Australia. The post reached 166 shares and 2 crossposts to other subreddits.

What the Numbers Actually Look Like

After 48 hours:

  • 156K+ views on the Reddit post alone

  • 4,946 attempts from unique sessions

  • 14 countries represented in the leaderboard

  • 307 upvotes, 90.3% upvote ratio

  • 76 comments, mostly positive

  • 166 shares, 2 crossposts

  • Zero infrastructure issues. Vercel handled the traffic spike without a single error. No scaling configuration needed. No emergency fixes.

The all-time leaderboard stabilized with a Top 1% threshold of 0.0349px or less. Top 5% is 0.1110px. The median player lands around 0.8841px off center. The closest anyone has gotten in the last 24 hours: 0.02002px.

ProductHunt added another wave of traffic after the Reddit surge cooled. I published a solo maker launch post there, which brought in a different audience: founders and product people rather than developers. The engagement was lower but the traffic converted better to store visits.

DEV.to syndication via my automated pipeline brought a third wave. Three articles about the game (launch announcement, anti-cheat deep dive, viral retrospective) are now indexed and driving organic search traffic.

What I Would Do Differently

Launch earlier in the day. My 6 PM CET post caught the US morning crowd, which worked. But an earlier post would have caught the European workday crowd too. Developers browse Reddit during lunch.

Add audio feedback. Several comments asked for sound effects on drag and submit. A satisfying click or whoosh would have increased time-on-site and shareability. I might add this in a future update.

Prepare the ProductHunt launch simultaneously. I posted to ProductHunt a day after Reddit. If both had launched the same day, the cross-platform momentum would have compounded.

Have merch ready. Multiple Reddit commenters asked if there was a t-shirt. There was not. I had the Shopify store but no Center This Div merch. Missed opportunity.

How I Built It This Fast

The entire game, from idea to deployed product, took one evening. That is not because I am fast. It is because my development environment handles most of the work. I use Claude Code with a pre-configured setup (40 skills, 5 enforcement hooks, automated deploy pipelines) that eliminates the friction between "I have an idea" and "it is live."

The deploy went through Vercel with zero configuration. Push to main, preview URL in 30 seconds, production deploy after verification. No Docker, no CI/CD pipeline to maintain, no server to provision.

Content distribution was automated too. Blog articles publish to Shopify, syndicate to Dev.to, Hashnode, and Medium, generate OG images, and schedule social posts via Buffer in a single command. The three articles about Center This Div were written, published, and distributed across 15 platforms in under an hour.

The Lesson for Builders

The biggest takeaway: simple ideas with a sharp hook outperform complex products with weak positioning. Center This Div has no AI, no blockchain, no subscription model. It is a draggable div with a leaderboard. The hook ("nobody has ever won") did all the heavy lifting.

If you are building side projects, optimize for the headline first. If you cannot explain what it does and why it is interesting in one sentence, the product is not ready for launch. Every minute spent on features nobody will see is a minute not spent on the thing that makes people click.

Build fast, launch where your audience already is, and make the experience shareable by default. The tools exist to go from idea to live product in a single session. The bottleneck is never the technology. It is the idea.

Top comments (0)