Back to work

Live at spider-verse-cards.netlify.app ↗

What if the Spider‑Verse chose you?

A playful side project where I turned the thrill of opening a trading card pack into an interactive web experience. Designed in Figma, explored with ChatGPT, vibecoded in Cursor.

Figma

Designed

ChatGPT

Explored

Cursor

Vibecoded

Ready to meet your spider?

play

Watch the video on X ↗

it’s live, tap reveal!

tilt the card at the end ✦

Role

Design, prompts, build

Type

Personal experiment

Platform

Web + iOS app

Cards

7 Spider-People, 7 Earths

It started with a childhood obsession.

I grew up collecting trading cards. The best part was never the card itself. It was the few seconds before you saw it: the anticipation, the surprise, the joy of meeting a new character.

I wanted to see if I could recreate that feeling on the web, with the Spider-Verse.

Open

the pack

Wait

the suspense!

Reveal

omg!

Happiness

every time

Okay, let’s ask AI.

I started with words, not pixels. I sketched the card skeleton myself, with a placeholder hero called “The Crimson Warden”, and asked ChatGPT to fill it in for each of my seven Spider-People.

Seven prompts, seven blueprints

Every reply came back as a text wireframe: the type badge, what the art should show, a short bio, three stats and a signature ability. These became the spec for every card in Figma.

pick a character to see its blueprint →

Peter

Miles

Gwen

Miguel

Noir

Punk

Ham

ChatGPT · Card wireframes

Jul 23, 2026

give me wireframe content for

Peter Parker (Earth-616)

The original and most iconic Spider-Man.

</> Plain text

★ Legendary

🕷 Spider

CHARACTER ART

Classic red-and-blue suit

Swinging pose with web effects

New York skyline backdrop

PETER PARKER (EARTH-616)

The Amazing Spider-Man

The original Spider-Man whose courage, quick thinking, and unwavering sense of responsibility inspire heroes across the multiverse.

Strength

Agility

Intelligence

Signature Ability

Spider Sense

Precognitive danger detection

#001

Earth-616

Legendary

Marvel

Then I asked for the look

ChatGPT · Card templates

Prompt

Can you make a trading card template inspired by Pokémon cards? Futuristic and holographic. Leave the character area empty, I’ll add the art myself. Include space for name, type and powers.

But there was a catch. ChatGPT couldn’t create the actual Spider-Verse characters because they’re copyrighted. So every template came back with a “Place character art here” slot, and the heroes were up to me.

Seven templates from ChatGPT

Same structure. Different personalities.

I brought the ChatGPT templates into Figma and made each one mine: character art, names, Earths, rarity and stats. Drag the slider to watch a template turn into the final card.

AI template

The frame, slots and stat bars

Character art

Placed and blended into each frame

Name, subtitle and Earth

Peter Parker, Earth-616, #001

One color story per card

Later reused to tint the whole screen

ChatGPTFigma

From design to something alive.

Static cards looked good, but I wanted the reveal to feel like ripping open a pack. I vibecoded the whole experience in Cursor, describing the feeling I wanted and tuning the motion until it felt right.

spider-verse-cards

src

components

LandingStage.tsx

CardOrbitStage.tsx

HolographicCard.tsx

ShareCard.tsx

lib

shufflePhysics.ts

motion.ts

data

cards.ts

// HolographicCard.tsx

const MAX_TILT = 12

const SPRING = { stiffness: 150, damping: 18 }

const onMove = (e) => {

const nx = (e.clientX - rect.left) / rect.width

const ny = (e.clientY - rect.top) / rect.height

rotateY.set((nx * 2 - 1) * MAX_TILT)

rotateX.set(-(ny * 2 - 1) * MAX_TILT)

lightX.set(nx * 100) // the shine follows your finger

}

CHAT

Make the cards orbit like a magical deck being shuffled. Some should pass in front, some behind.

Added 3 depth lanes and a breathing radius in shufflePhysics.ts

Needs more suspense. Slow down after one full spin before picking a card.

Orbit now ramps up, then coasts with decay 0.94

5.8s

of orbit before the pick. Long enough for suspense, short enough to keep you watching.

3 lanes

of depth so cards weave in front of and behind each other, like a real shuffle.

12°

of tilt on the final card, with a foil and a highlight that follow your finger.

BUILT WITH

Next.js

React

Framer Motion

Tailwind

Capacitor

A little idea that actually works.

The finished flow is six beats long. I also wrapped it as an iOS app with Capacitor so I could feel it in my hand, and the reveal ends with a native share sheet.

Tap “Reveal my spider”

start

A red web pulls you into the deck

0.5s

The deck wakes into a ring

0.9s

Cards orbit and weave

5.8s

One card is pulled out

settle

Your card, in your colors

reveal