The Hairstyle Won: Crafting Asian-Inspired CSS Cards the Pokemoon Way From Mexico to North America (That Didn't Work)

MEXICO

The Hairstyle Won

Crafting Asian-Inspired CSS Cards the Pokemoon Way (That Didn't Work)

Every front-end developer has that one project. The one that starts with genuine excitement, crosses international borders, and eventually collapses into a heap of technical debt because of a single, relentlessly stubborn design choice.

For me, that project was "Pokemoon."

It was supposed to be a masterpiece. We were going to blend Asian-inspired gacha mechanics with top-tier CSS architecture. It was a collaboration between our scrappy dev team in Mexico City and a visionary (read: heavily funded, easily distracted) startup based out of Los Angeles and Toronto. Spoiler alert: it was a massive disaster. But it was a spectacularly stylish disaster where, ultimately, a digital haircut defeated an entire engineering team.

A stylized visualization of crossing borders during our international development sprint[cite: 2].

The pitch sounded awesome at first. The LA/Toronto folks wanted to build a digital collectible platform—a legally distinct homage to a certain monster-catching franchise, mixed with some crypto-adjacent buzzwords and a heavy dose of Japanese anime aesthetics.

The UI was all about the cards. But they couldn't just be standard Bootstrap rectangles with a nice border radius. No, they had to be alive. We’re talking holographic hover states, glassmorphism layers, and characters that literally popped out of their frames.

At the time, my team was working out of a sweltering, sun-drenched coworking space in Mexico City. We were chugging cold brew, hyped to prove that our crew could execute world-class, award-winning frontend architecture. We had our grid systems mapped out. Our CSS variables were pristine. We were fully ready to build the ultimate Asian-inspired UI.

On Figma, the designs looked incredible. Asian-inspired web design is amazing at balancing insane information density with bright, playful visuals. The Pokemoon cards had tiny, intricate stat bars, glowing neon kanji, and rich backgrounds that tilted with your phone’s gyroscope. But the absolute centerpiece was the character art. Every single monster and trainer had that iconic, gravity-defying, aggressively spiky anime hair.

And that is exactly what broke us.

The Overflow Problem

Hover to see how elements that break out of the box interact with modern layouts.

If you write CSS, you know that a card component is supposed to be a polite little box. You slap overflow: hidden on it, and everything stays inside where it belongs. But the "Pokemoon Way" demanded that the characters’ heads—specifically those massive, Super Saiyan spikes—burst right through the top edge of the card.

At first, we treated it like a fun little puzzle. We swapped to overflow: visible, used absolute positioning for the character portraits, and meticulously layered our z-index values. The card background sat in the back, the character floated in the middle, and the stats hovered in front.

We spun up a local dev server, looked at a single card on a desktop monitor, and cheered. The character literally leaped off the screen. The hair pierced the digital veil. We felt like absolute coding gods.

Then we tried to render a grid of twenty of them.

Marching confidently into layout issues at the Texas border[cite: 4].

When you let elements just casually break out of their boxes inside a tightly packed CSS Grid, you are basically begging the DOM for a fistfight. The spiky hair from a card in row two started stabbing into the attack stats of the card in row one. The holographic glow effects—which relied on some pretty heavy ::before and ::after pseudo-elements—started bleeding across the entire screen like an oil spill.

Our cross-border Slack channel instantly turned into a hostage negotiation.

From our desks in Mexico, we practically begged the North American design team to compromise. Can we crop the hair? No. Can we shrink the avatars just a tiny bit? Absolutely not, it ruins the proportions. We even spent an entire Tuesday building a prototype using clip-path that elegantly masked the overflow while keeping the 3D vibe—as long as the hair wasn't too tall.

But the designers wouldn't budge. The massive, jagged anime hair was the core of the Pokemoon brand identity. Cropping it destroyed the "illusion." The vision was non-negotiable. The hairstyle had to win.

So, we did what any desperate dev team does: we tried to hack our way out of a design problem. We wrote some truly cursed JavaScript to dynamically calculate the top margins of every single card based on the exact pixel height of that specific character's hair. Our sleek CSS Grid morphed into a terrifying, staggered masonry layout that looked less like a premium digital collection and more like a badly packed game of Tetris.

Our engineering team attempting to maintain order[cite: 1].

When we finally tested it on mobile, the whole fragile ecosystem died. Responsive behavior squished the cards closer together, leading to a pile-up of neon spikes and floating text. Scrolling through your Pokemoon deck on an iPhone felt like trying to read a billboard through a chain-link fence. Between the overlapping transparent layers and the massive SVG files, the browser repaints alone made an iPhone 13 run hot enough to actually burn your palm.

Worse, the UX was completely bricked. You couldn't click the "Trade" button on half the cards because the invisible bounding box of a neighboring monster's exaggerated bangs was sitting right on top of it, stealing the pointer events.

Eventually, the North American startup burned through their runway. The investors realized that a gorgeous app that crashes your phone and doesn't let you click the buttons isn't a great business model. The Pokemoon project was quietly shelved. The Slack channels were archived, and the Figma links went dead.

Looking back at that weird, exhausting cross-continental sprint, I don't think we failed because we lacked skill. It was just a classic, timeless clash between an unyielding artistic ego and the literal physics of web browsers. We learned the hard way that while modern CSS can feel like magic, it still needs boundaries. You can build the most immersive, boundary-pushing UI in the world, but the second you sacrifice structural integrity for a cool stylistic trick, you're doomed.

I still have a local branch of that codebase sitting on an external hard drive somewhere. Every once in a while, I spin it up on localhost just to look at it. The layout is totally busted, the code makes me cringe, and scrolling drops the frame rate to single digits.

But I have to admit—when those neon gradients hit and those spiky bangs break the margin, the hair looks pretty damn good.