Steal CSS

Give me a webpage. I will steal its style and ruin it beautifully.

Comment

Inspiration

The inspiration came directly from the hackathon's brief: "originality is illegal and creativity is criminal." I thought, what's the most shameless, blatant "theft" I can pull off? Instead of stealing one project, why not build a tool that lets everyone steal the style from any website?

This project is a direct answer to the "remix culture" prompt. It's a celebration of "theft, but with taste," turning the entire web into a canvas for chaotic, playful vandalism.

What it does

Steal.css is a tool for "innovation laundering." It lets you perform a visual heist on any website.

  1. You "steal" a URL: Paste any live URL into the tool.
  2. You "flip" it: Choose your "Chaos Mode" ("Mild" or "Max") to instantly vandalize the site's CSS with new fonts, glitched-out animations, and inverted colors.
  3. You "ship" it: You can take a pixel-perfect screenshot of your crime and hang it on the "Stolen Styles" Gallery—a persistent, public wall of shame (or fame) for all to see.

It's a meme-generation factory, and I'm gunning for that Meme Heist Award.

How I built it

This heist required some serious tools. The entire project is built on a Node.js/Express server, containerized with Docker.

  • The "Crowbar": I use Puppeteer as my digital crowbar. It launches a headless browser to "steal" the HTML and CSS from the target site. I use Cheerio to inject the vandalized styles for the iframe preview.
  • The "Forger": To get pixel-perfect screenshots of the "Max Chaos" mode (with all its filter and @keyframe animations), a client-side solution was too weak. So I built a server-side forger, again using Puppeteer, to create a perfect "Master Forgery" of the vandalized page.
  • The "Vault": All "stolen" screenshots are saved as Base64 strings in a MongoDB Atlas database, making the entire app stateless and scalable.

Challenges I ran into

The "cops" (Vercel's deployment limits) were on my tail the entire time.

  1. The Serverless Trap: My first attempt was serverless. It failed immediately. Puppeteer is a resource-hungry beast, and the Vercel environment was missing critical system libraries (that cursed libnss3.so error).
  2. The Getaway Car: The only way to escape was to build my own getaway car. I had to learn and write a full Dockerfile from scratch, bundling all of Node.js, all the system libraries for Chromium, and my app code into one self-contained unit. This fixed all the errors and was a massive breakthrough.

Accomplishments that I'm proud of

I'm incredibly proud of pulling off what I call the "Grand Heist Architect" move: successfully containerizing a heavy-duty Puppeteer application. Diagnosing the libnss3.so error and realizing that Docker was the only answer was a huge "a-ha!" moment.

I didn't just build a simple app; I built a robust, deployable system that can reliably perform this heist over and over.

What I learned

This hackathon's tagline is "Good artists copy. Great hackers steal, make it awesome and ship." I learned the "make it awesome and ship" part is the hardest—and most important.

I learned that the "right" tech stack isn't just about what's cool; it's about what works for your specific, chaotic goal. In this case, Docker wasn't a "nice to have"; it was the only way to get the job done.

What's next for Steal CSS

The heist isn't over.

  • More Chaos Modes: I want to add new, themed vandalism modes ("90s GeoCities Mode," "Broken CRT Monitor Mode").
  • User "Safes": Allow users to create accounts and build their own private galleries of "stolen" goods.
  • "Robin Hood Recognition": I want to add a "Readability" mode that steals a site's content and re-styles it to be hyper-accessible, flipping the "theft" into something genuinely useful.
Share this project:

Updates