← Outer RimMISSION 05 · THE POKÉ BALL SYSTEM

Interaction design · Motion · Spatial UI

The Poké Ball system

Turning a long list of design challenges into objects you want to pick up: branded balls that open into trading cards, a hand of cards you deal by scrolling, and a phone you can fall through.

RoleDesign, motion, prototyping
ToolsFigma, After Effects, Three.js, Claude Code
TypeSide project
StatusArchived: the Design Lab’s Creative theme
The finished Design Lab home shown in a prototype player: the pixel wordmark, the search box and a fanned hand of challenge cards.
Final prototype.

Brief

Make a library of practice challenges scannable (find "the Stripe one" in seconds) and inviting (practice is voluntary). Rule: the playful layer can delay information by one hover, never hide it.

How this is usually built, and how I built it

The classic pipeline a designer, a motion designer and an engineer
Research→Figma components→After Effects / Lottie motion→Motion spec doc→Engineer rebuilds it→QA loops on timing
What I did one person, with AI on the build
MeResearch→MeComponents + variables in Figma→MeMotion values as tokens→AICode drafted from my tokens + specs→Me + AITuned in the browser, every diff reviewed→MeDev Mode + token hand-off

The thinking, the system and every value stayed with me. AI removed the slowest step of the classic pipeline: rebuilding a motion study in code and losing the timing in translation.

Scope

2D balls, a hand of cards, one 3D scene.

Constraints

No build step. Smooth on a mid-range phone.

Motion budget

Under 500 ms, except the one journey (the portal).

Must have

Keyboard, touch and reduced motion from day one.

1 · The system, in Figma

One component set, two properties: Skin (company) and State (closed or open). The skin colour comes from a brand/* variable and the pattern from a domain/* one, so adding a challenge never means picking a hex.

Figma: the Ball component set with variants for Stripe, Zomato, WhatsApp, CRED and Airbnb in closed and open states, the Card component, layers and component properties.
Components page: Ball and Card component sets.
Figma: the local variables window showing the Motion collection with durations, easing curves and transforms.
Motion variables: what moves, for how long, and how. The same three axes Razorpay's Blade team uses for motion tokens.
Seventeen balls, one per domain, each with its company's colour and a domain pattern.
One skin per domain.

2 · Explorations

Figma explorations page: three sections of four frames each. A flips the ball into a card, B slides a card out, C opens the lid and raises the card. A green comment marks C as the decision.
Three directions. C won: the ball reacts, the lid opens, the card rises from inside.

3 · Prototype

Figma prototype mode: Ball / Closed connected to Ball / Open with a hover interaction, Smart animate and a custom bezier curve.
While hovering → Smart animate, custom bezier (.25, 1.45, .45, 1), 450 ms.
Closed ball.
0 ms
Card starting to rise.
90
Card half out.
180
Card overshooting.
270
Card settling.
360
Card at rest.
final

The same interaction in the browser, frame by frame at one-tenth speed.

4 · Play with it

These are the real values behind the reveal. Move a lever and the ball replays; the code below is what a developer receives.

Zomato●●○E-COMMERCE · B2CGroup food ordering without the chat chaosMobileOpen →
progresstime →1 

          

        

      

    


    

      
5 · Dealing the hand

      
Figma prototype mode: Hand / Rest frame with fanned cards connected to Hand / Dealt with cards in a row, plus annotations for the fan maths and the peek rule.
Two key frames in Figma; in the browser, scroll position drives everything in between.

    


    

      
6 · The portal

      
The first version painted a black hole on the screen and looked like a wallpaper. The fix: don't draw it, bend what's behind it. The phone is an empty frame; the page shows through it, warped.

      
Figma frame of the portal with annotations for the three render passes, the cursor pull and comfort limits.
Portal frame with build notes.

      

        
Lens off: an empty phone frame over flat grid paper.
Lens off

        
Lens on: the grid bends into the screen around a dark core.
Lens on

      

      

        
Falling in, 20%.
20%

        
Falling in, 50%.
50%

        
Falling in, 78%: nearby balls bend.
78%

        
Falling in, 95%.
95%

      

      
First review: it made people motion sick. Fall shortened to 1.4 s, zoom cut by two thirds, no camera roll, calmer stars on arrival.

    


    

      
7 · Where AI helped, and where it didn't

      

        
WorkWhoTools

        
Concept, grammar (skin = company, pattern = domain)MePencil, Figma

        
Components, variants, variablesMeFigma

        
Timing and curvesMeFigma Smart Animate, After Effects

        
CSS and JS from my tokens and specsAI drafts, I review every diffClaude Code

        
Lens shaderAI first draft, I tuned the constants against referencesClaude Code, GLSL, the browser

        
Performance and accessibility passMeChrome DevTools, reduced-motion and keyboard checks

        
Frames and captures for this pageAI-written script, my shot listHeadless Chrome

      

      
My guardrails: no value in the code that isn't in the Figma variables, nothing merged that I hadn't read, and every interaction checked at desktop and phone sizes.

    


    

      
8 · Hand-off, the way a big team would

      
Figma Dev Mode: the Card component marked ready for dev, with redlines, annotations for motion, accessibility and content, CSS and the variables used.
Dev Mode: ready for dev, with motion, accessibility and content notes on the component.

      
    
        
  • Tokens, not numbers: Figma variables → JSON → CSS custom properties, so design and code share one source.
    • 
        
  • A story per state in Storybook: closed, open, focused, reduced motion, missing logo.
    • 
        
  • Accessibility sign-off: buttons with full labels, focus = hover, reduced motion = fade only.
    • 
        
  • Performance budget: smooth on a mid-range Android, one WebGL scene that only renders while visible.
    • 
        
  • QA matrix: Chrome, Safari, Firefox; iOS and Android; mouse, touch, keyboard.
    • 
        
  • Rollout: behind a flag, watching hover → open rate and time to first opened challenge.
    • 
      

    


    

      
9 · Shipped

      
The live challenge grid: branded balls with company names underneath, one ball open showing its card.
The live grid, one ball open.

      
    
        
  • Delight has a budget. Everything is under half a second except the one moment meant to feel like a journey.
    • 
        
  • A metaphor needs a grammar. Once skin, pattern and button had fixed meanings, the toy became an index.
    • 
        
  • AI speeds up the build, not the judgement. The values came from Figma; the code just had to agree with them.
    • 
      

      
The Design Lab now runs on its Space theme, so this one is archived. Open the archived Creative theme ↗