Forem: Gaurav Kalal

💥 I Was Tired of Boring UIs, So I Built a CSS Framework Straight Out of a 1962 Comic Book

Gaurav Kalal — Sun, 29 Mar 2026 11:36:34 +0000

Let me ask you something.

When was the last time you visited a website and thought "wow, this UI has a personality"?

Be honest. Because I've been building on the web for years, and lately every project I open in Figma — or every starter template I pull from npm — looks identical. A sterile off-white background. Inter font at font-weight: 400. A primary color from a muted blue palette that some product manager once called "trustworthy." A card with border-radius: 8px and a whisper of a box-shadow.

It's safe. It's clean. It's everywhere.

And I am absolutely exhausted by it.

🎨 The Web Used to Have Soul

There was a time when websites were weird. Aggressively, unapologetically weird. Colors screamed at you. Borders were thick and black like someone drew them with a Sharpie. Things were misaligned in ways that somehow felt intentional and full of energy.

That visual language had a name: it lived in vintage comic books, in Roy Lichtenstein pop art, in the chunky, ink-heavy print design of the 50s, 60s, and yes — even the gloriously chaotic 90s.

So I asked myself: what if I just… brought that back?

Not as a joke. Not as a gimmick. But as a real, usable CSS design system that any developer could drop into a project and instantly make something that felt alive.

That's how KABOOM! UI was born. 💥

🚀 What is KABOOM! UI?

KABOOM! UI is a 100% pure CSS, zero-dependency design system built to replicate the aesthetic of vintage comic books, Pop Art, and 90s nostalgia.

There is no JavaScript. No build step. No npm install. You download one .css file, drop a <link> tag in your <head>, and you're immediately writing UI that looks like it was printed on a comic book press.

Heavy ink borders. Misaligned CMYK print shadows. Halftone dot backgrounds. Hand-drawn wobbly aesthetics. It's all in there, and it weighs almost nothing.

🎨 See the live demo → kaboom-ui-kit.pages.dev

⭐ GitHub Repo → github.com/Gorupa/kaboom-ui-kit

Go check out the demo. I'll wait. I genuinely think it'll make you smile.

🛠️ The CSS Tricks That Make It Work

Okay, here's the part I'm most excited to share — because building this thing taught me that you can achieve a lot of personality with very basic CSS primitives. Let me walk you through two of my favorite techniques.

1. 🔵 Halftone Dot Backgrounds with `radial-gradient`

If you've ever looked closely at a printed comic book, you'll notice the backgrounds and shading aren't solid colors — they're made up of tiny dots. This is called the Ben-Day dot process, and it's pure visual gold.

Here's the thing: you don't need SVGs, images, or a canvas element to fake it. You can do it entirely with CSS using radial-gradient inside background-image:

.k-halftone {
  background-color: #fff;
  background-image: radial-gradient(
    circle,
    #000 1.5px,
    transparent 1.5px
  );
  background-size: 10px 10px;
}

What's happening here? The radial-gradient draws a tiny filled circle (1.5px radius, solid black) at the center of each tile, and then fades to transparent for the rest of the space. The background-size controls how far apart the dots are. Make the tile smaller and the dots get denser. Make the dot radius larger and you get that bold, chunky comic book look.

Tweak the dot color, tile size, and radius, and you can create everything from a subtle texture to a screaming pop-art background. No images, no JavaScript, no dependencies — just math and gradients. 🎨

2. 🟡 Misaligned Print Shadows with `box-shadow`

This is my personal favourite trick in the whole framework. If you look at cheaply printed comic books from the 60s, you'll notice that the color plates didn't always line up perfectly with the black ink outlines. This created a gorgeous off-register shadow effect — a halo of cyan or magenta peeking out from behind the black border.

You can fake this almost perfectly with a solid, no-blur box-shadow:

.k-card {
  border: 3px solid #000;
  box-shadow: 5px 5px 0px #000;
}

The key here is blur-radius: 0. A standard drop shadow uses blur to create a soft, realistic fade. But set it to zero and the shadow becomes a solid, hard-edged duplicate of your element — offset a few pixels down and to the right. It looks exactly like a second printing plate that didn't quite line up.

Want to push it even further into "cheap print" territory? Stack multiple shadows and use CMYK-inspired colors:

.k-card--pop {
  border: 3px solid #000;
  box-shadow:
    4px 4px 0px #00bcd4,   /* cyan plate — slightly offset */
    7px 7px 0px #000;       /* black plate — the outermost shadow */
}

Now your element looks like it was legitimately pulled from a Roy Lichtenstein print. For zero lines of JavaScript. 💥

✍️ How Easy Is It to Actually Use?

This was a core design goal: getting from zero to comic-book in under 60 seconds. Here's all you need:

Step 1 — Link the stylesheet

<link rel="stylesheet" href="comic-ui.css" />

Step 2 — Use the classes

<!-- A comic-book style card -->
<div class="k-card">
  <div class="k-card__badge">HOT TAKE #7</div>
  <h2 class="k-card__title">Flat Design Is Overrated</h2>
  <p class="k-card__body">
    I said what I said. Give me ink borders or give me death.
  </p>
  <button class="k-btn">Fight Me →</button>
</div>

<!-- A halftone hero section -->
<section class="k-halftone">
  <h1 class="k-splash-title">POW!</h1>
  <p>No npm install required. Incredible.</p>
  <button class="k-btn k-btn--danger">KABOOM!</button>
</section>

That's it. No configuration. No theme tokens to set up. No tailwind.config.js. Just classes that do exactly what they sound like.

🚀 Go Build Something Weird

Here's the deal.

The Free "Sidekick" Tier is fully open-sourced on GitHub right now. It includes the core components — buttons, cards, badges, speech bubbles, halftone backgrounds, and the full ink border and offset shadow system. Everything you need to build something that turns heads.

👉 Grab it on GitHub → github.com/Gorupa/kaboom-ui-kit

If you want to go deeper, there's also a Premium "Superhero" Tier available on the demo site. It unlocks 50+ components, ready-to-use full HTML page templates (landing pages, pricing pages, portfolios), and the Figma source files — for the designers in the room who want to prototype with the same energy.

👉 Check out the full demo → kaboom-ui-kit.pages.dev

💬 Now I Want to Hear From You

I built KABOOM! UI because I genuinely believe the web gets more interesting when we stop optimizing purely for "professional" and start leaving a little room for fun.

A few things I'd love your feedback on:

What components should I build next? Speech bubbles? Comic-strip grid layouts? A villain-red alert banner? Drop your ideas in the comments.
Does the aesthetic resonate? Are there other nostalgic design eras you'd love to see explored in CSS?
Any CSS tricks you'd add? I'm always looking to learn — if you've got a cool technique that fits the vibe, share it below.

And if the halftone dots and ink borders put a smile on your face — even a small one — it would genuinely mean the world if you dropped a ⭐ on the GitHub repo. It helps other developers find it, and it lets me know this weird little project is worth continuing.

Now go make something that doesn't look like every other website on the internet. 🥊

Happy to answer any questions about the CSS techniques used or the design decisions behind the framework. Ask me anything in the comments!

I built a zero-dependency validation library for every Indian developer

Gaurav Kalal — Sun, 15 Mar 2026 03:28:12 +0000

Indian developer building a form has hit the same wall.

You need to validate a PAN number. Or an Aadhaar. Or a GSTIN. Or an IFSC code. So you Google it, find a Stack Overflow answer from 2016, copy a regex, and hope it works.

There was no clean, trustworthy, zero-dependency JavaScript library that handled all of this in one place.

So I built one.

Introducing india-validators

india-validators is a client-side JavaScript library that validates 9 common Indian document and identifier formats — with proper checksums, not just regex.

npm install india-validators

Or drop it in directly:

<script src="https://cdn.jsdelivr.net/npm/india-validators/india-validators.js"></script>

No backend. No API calls. No data sent anywhere. Everything runs in the browser.

What it validates

Validator	What it checks
`aadhaar`	12-digit format + Verhoeff checksum
`pan`	10-char format + entity type decode
`gstin`	15-char format + state code + mod-36 checksum
`ifsc`	11-char bank branch code format
`pincode`	6-digit PIN + postal zone lookup
`mobile`	10-digit Indian mobile + series check
`vehicle`	India vehicle registration format
`passport`	Indian passport number format
`upi`	UPI virtual payment address format

Every validator returns the same clean object

{
    valid:   true | false,
    message: 'Human readable message',
    meta:    { /* optional extra info */ }
}

Consistent. Predictable. No surprises.

Real examples

Aadhaar — Verhoeff checksum

Most Aadhaar validators online just check if it's 12 digits. That's not enough.

india-validators runs the actual Verhoeff algorithm — the same checksum UIDAI uses — to catch invalid numbers that pass the basic digit check.

IndiaValidators.aadhaar('234567890123');
// → { valid: true, message: 'Valid Aadhaar format.' }

IndiaValidators.aadhaar('123456789012');
// → { valid: false, message: 'Cannot start with 0 or 1.' }

IndiaValidators.aadhaar('234567890124'); // valid digits, wrong checksum
// → { valid: false, message: 'Checksum failed — invalid Aadhaar.' }

PAN — entity type decoded

PAN isn't just a format — the 4th character encodes the entity type. india-validators decodes it and returns it in meta.

IndiaValidators.pan('ABCPE1234F');
// → {
//     valid: true,
//     message: 'Valid PAN format.',
//     meta: { entity: 'Individual', code: 'P' }
//   }

IndiaValidators.pan('AAAPL1234C');
// → { meta: { entity: 'Company', code: 'C' } }

GSTIN — state + embedded PAN

GSTIN contains the state code and the taxpayer's PAN. india-validators extracts both.

IndiaValidators.gstin('27AAAPZ0327R1ZV');
// → {
//     valid: true,
//     message: 'Valid GSTIN.',
//     meta: {
//       state: 'Maharashtra',
//       stateCode: '27',
//       pan: 'AAAPZ0327R'
//     }
//   }

Mobile — strips country code automatically

IndiaValidators.mobile('+91 9876543210');
// → { valid: true, message: 'Valid Indian mobile number.' }

IndiaValidators.mobile('09876543210');
// → { valid: true } // strips leading 0 automatically

IndiaValidators.mobile('5876543210');
// → { valid: false, message: 'Must start with 6, 7, 8, or 9.' }

UPI — known provider detection

IndiaValidators.upi('gaurav@okaxis');
// → {
//     valid: true,
//     meta: { username: 'gaurav', handle: 'okaxis', knownProvider: true }
//   }

Batch validation — validate multiple fields at once

The most useful feature for form validation:

const results = IndiaValidators.validate({
    pan:     'ABCPE1234F',
    mobile:  '9876543210',
    gstin:   '27AAAPZ0327R1ZV',
    pincode: '400001',
});

// results.pan.valid     → true
// results.mobile.valid  → true
// results.gstin.meta.state → 'Maharashtra'
// results.pincode.meta.zone → 'Maharashtra, Goa, MP, Chhattisgarh'

One call. Clean results for every field.

Use in React

import IndiaValidators from 'india-validators';

function KYCForm() {
    const [pan, setPan] = useState('');
    const result = IndiaValidators.pan(pan);

    return (
        <div>
            <input
                value={pan}
                onChange={e => setPan(e.target.value)}
                placeholder="Enter PAN"
            />
            {pan && (
                <span style={{ color: result.valid ? 'green' : 'red' }}>
                    {result.message}
                </span>
            )}
            {result.meta && <small>Entity: {result.meta.entity}</small>}
        </div>
    );
}

Why checksums matter

Most validators online use regex only. Regex catches format errors — wrong number of characters, wrong pattern. But it can't catch a number that looks right but isn't.

Aadhaar uses the Verhoeff algorithm. GSTIN uses mod-36. india-validators implements both properly.

This means fewer false positives in your forms — numbers that look valid but would be rejected by the actual government system get caught at the client side before they reach your backend.

Important disclaimer

india-validators performs format and checksum validation only. It does not connect to UIDAI, NSDL, GSTN, or any government API. It cannot verify identity. It cannot confirm a document is genuine.

Always comply with applicable Indian laws when collecting and processing sensitive identifiers like Aadhaar and PAN.

Why I built this

I'm a law student who also builds open source tools. I kept running into this problem — needing to validate Indian identifiers in projects and finding no clean library that handled it properly.

india-validators is part of a growing set of open source tools I'm building for Indian developers under the gorupa namespace — alongside pulsekit.js for PhonePe Pulse data visualisation and vaad.in for court case tracking.

What's next — v0.2

Voter ID format validation
Driving licence (DL) format validation
CIN — Company Identification Number
TAN — Tax Deduction Account Number
TypeScript definitions (.d.ts)

PRs welcome. If you find a bug or a format that's wrong, open an issue.

Try it

🔗 Live demo: https://gorupa.github.io/india-validators/demo/
📦 npm: https://www.npmjs.com/package/india-validators
⭐ GitHub: https://github.com/Gorupa/india-validators

If it saves you time — a star on GitHub means a lot.

Built by @gorupa · MIT License · Zero dependencies

I built the first open source JS library for PhonePe Pulse data

Gaurav Kalal — Sat, 14 Mar 2026 10:58:49 +0000

PhonePe Pulse is one of the most interesting public datasets in India.

It contains real UPI transaction data — broken down by state, district, category and quarter — going all the way back to 2018. It covers all 36 states. It updates every quarter. And it is completely free and open.

The problem? It lives as raw JSON files in a GitHub repo. There is no SDK. No wrapper. No way to drop it into a project without writing a lot of fetch and parse logic yourself.

So I built one.

Introducing pulsekit.js

pulsekit.js is a zero-dependency JavaScript library that wraps the PhonePe Pulse dataset and lets you render beautiful India payments charts with a single function call.

No API key. No backend. No build step. Just one <script> tag.

<script src="https://cdn.jsdelivr.net/gh/gorupa/pulsekit/src/pulsekit.js"></script>

Three components out of the box

📊 CategoryChart

Shows transaction categories (P2P, P2M, Recharge, Financial Services, etc.) for any state and quarter as animated horizontal bars.

PulseKit.CategoryChart('#chart', {
  state:   'maharashtra',
  year:    2023,
  quarter: 1,
  metric:  'count' // or 'amount'
});

What you get — a clean card showing every transaction category for Maharashtra in Q1 2023, with animated bars and the actual transaction counts. All data fetched live from the PhonePe Pulse GitHub repo.

📈 GrowthChart

A line chart showing UPI growth across every available quarter for a state — from 2018 all the way to 2023. Hover over any dot to see the exact value.

PulseKit.GrowthChart('#chart', {
  state:  'delhi',
  metric: 'amount'
});

This one is my favourite. You can actually see India's UPI adoption curve in one chart. The growth from 2018 Q1 to 2023 Q4 is remarkable.

🏆 StateRanking

Ranks all 36 Indian states by transaction volume or amount for a given period. You can control how many states to show.

PulseKit.StateRanking('#chart', {
  year:    2023,
  quarter: 4,
  metric:  'count',
  top:     10
});

Maharashtra, Karnataka and Delhi consistently dominate — but the growth in tier-2 states over recent years is the real story.

How it works

pulsekit.js fetches data directly from raw.githubusercontent.com/PhonePe/pulse. No proxy. No middleman. The data goes straight from PhonePe's public repo to your user's browser.

PhonePe Pulse GitHub repo
        ↓
raw.githubusercontent.com
        ↓
pulsekit.js fetch()
        ↓
Your chart

Each component handles its own loading state, error state and animation. You just point it at a container and pass options.

Advanced usage

For developers who want to go beyond the built-in components, all the data fetching utilities are exposed:

// Fetch one quarter for a state
const data = await PulseKit.utils.fetchStateQuarter('karnataka', 2022, 3);

// Fetch all quarters for a state
const history = await PulseKit.utils.fetchAllQuarters('rajasthan');

// Fetch all states for a period — for custom ranking
const states = await PulseKit.utils.fetchAllStates(2023, 1);

// Format helpers
PulseKit.utils.formatCrore(9870000000); // → "987.00 Cr"
PulseKit.utils.toDisplayName('tamil-nadu'); // → "Tamil Nadu"

Why I built this

I'm a law student with a deep interest in India's digital infrastructure. I was building a small data dashboard and wanted to show UPI trends by state. The PhonePe Pulse data was exactly what I needed — but there was no clean way to use it.

After writing the same fetch-and-render logic three times, I extracted it into a library. Then I thought — if I needed this, other developers do too.

That's the whole story. A real problem, a clean solution, open sourced.

What's next — v0.2

India choropleth map — an SVG map of India where states are coloured by transaction intensity. This is the feature I'm most excited about.
NPCI data support — monthly UPI stats from NPCI alongside PhonePe Pulse, making pulsekit.js the most complete India payments data library available.
React wrapper — a proper @gorupa/pulsekit-react package on npm.

Try it

🔗 Live demo: https://gorupa.github.io/pulsekit/demo/
⭐ GitHub: https://github.com/Gorupa/pulsekit
📦 Data source: https://github.com/PhonePe/pulse

If you find it useful — a star on GitHub goes a long way. And if you build something with it, I'd genuinely love to see it.

Forem: Gaurav Kalal

💥 I Was Tired of Boring UIs, So I Built a CSS Framework Straight Out of a 1962 Comic Book

🎨 The Web Used to Have Soul

🚀 What is KABOOM! UI?

🛠️ The CSS Tricks That Make It Work

1. 🔵 Halftone Dot Backgrounds with radial-gradient

2. 🟡 Misaligned Print Shadows with box-shadow

✍️ How Easy Is It to Actually Use?

🚀 Go Build Something Weird

💬 Now I Want to Hear From You

I built a zero-dependency validation library for every Indian developer

Introducing india-validators

What it validates

Every validator returns the same clean object

Real examples

Aadhaar — Verhoeff checksum

PAN — entity type decoded

GSTIN — state + embedded PAN

Mobile — strips country code automatically

UPI — known provider detection

Batch validation — validate multiple fields at once

Use in React

Why checksums matter

Important disclaimer

Why I built this

What's next — v0.2

Try it

I built the first open source JS library for PhonePe Pulse data

Introducing pulsekit.js

Three components out of the box

📊 CategoryChart

📈 GrowthChart

🏆 StateRanking

How it works

Advanced usage

Why I built this

What's next — v0.2

Try it

1. 🔵 Halftone Dot Backgrounds with `radial-gradient`

2. 🟡 Misaligned Print Shadows with `box-shadow`