Skip to content

Playground

Vibe-coded, for the fun of it.

Projects, small tools and interaction experiments, built with AI and code. They're all live, so go ahead and play.

Projects

Bigger pieces, each with a short case study: where the idea came from, the problem, and the design decisions behind it. Sparked by winners of Figma's Makeathon.

Small tools

Useful little SaaS pieces: the kind of widget a product team builds every week. Each one is inspired by a pattern I found online and rebuilt with its own content and look.

  • Meeting cost

    Ready

    This meeting has cost

    £0.00

    00:00:00£330.00 / hour

    Not even a coffee yet.

    In the room

    APMKJSLRTNOB
    6

    Tool · Teams

    Meeting cost meter

    Set who's in the room and a rough hourly rate, press start, and watch the cost of the meeting tick up live.

    ↳ Start it, then add peopleInspired by “Meeting Cost Calculator” by Taskade ↗

  • LLedgerly

    £86/ month

    Billed yearly · you save £259

    Seats12 × £7.20
    11050100

    Team planfrom 10 seats

    • Everything in Starter
    • Approval flows
    • Roles & permissions

    Tool · Pricing

    Seat-based pricing

    A pricing card for a made-up invoicing tool. The plan picks itself as seats grow, and yearly billing shows what you save.

    ↳ Drag the seats sliderInspired by “pricing slider components” by Framer Marketplace ↗

  • Outstanding

    £2,930

    • #1042Northwind£1,840Paid
    • #1043Atlas Co.£620Due
    • #1044Pine & Oak£2,310Due

    Press ⌘K / Ctrl K, or click the K button

    Tool · Navigation

    ⌘K command menu

    A command menu inside a tiny invoicing app. Type, use the arrow keys, press Enter, and the command really runs.

    ↳ Try “create”, then “paid”Inspired by “Command Menu” by 21st.dev ↗

  • Sprint 14

    20% done · drag cards between columns

    To do2

    QA

    Usability test round 2

    Design

    Notification settings

    In progress2/2

    Design

    Approval flow wireframes

    Build

    Invoice table component

    Done1

    Research

    Interview 5 finance leads

    Tool · Planning

    Sprint board

    A small kanban with a work-in-progress limit. It warns you when too much is in progress at once.

    ↳ Drag a card to In progressInspired by “Kanban Board” by 21st.dev ↗

  • Contrast check

    Pay invoice

    Your invoice #1044 for £2,310 is due on Friday. Pay now to avoid a late fee.

    3.45:1Large text only
    • AA Body text
    • AA Large text
    • AAA Body text
    • AAA Large text

    Tool · Accessibility

    Contrast checker

    Check text against its background with the WCAG formula. If it fails, “Fix it” finds the nearest colour that passes.

    ↳ Pick a preset, then Fix itInspired by “Contrast Checker” by WebAIM ↗

Motion studies

Each one starts from a Figma Riff, a motion study the Figma Community shares for others to remix, and gets its own content, look and behaviour.

  • Postcards · 5 chapters

    Gesture · Cards

    Postcard deck

    Five chapters, five places. The top card flies off and the rest step forward with depth.

    ↳ Tap or flick the top cardRiffed from “Card shuffle” by @alefunlab ↗

  • Send files

    Drag the file up and shoot

    00/ 000% made
    brief_v3_FINAL.pdf2.4 MB

    Physics · Upload

    Free-throw upload

    An upload field you play like a free throw. Make the shot and the file uploads. Miss and it comes back.

    ↳ Drag the file up and let goRiffed from “Upload dropzone” by @jm_fuster ↗

  • Paused

    Night Bus

    Lumen Tapes · 2024

    0:48-2:46

    Motion · Media

    Record player

    Press play and the record slides out of its sleeve, the tonearm drops and the label spins.

    ↳ Press play, then skipRiffed from “Billie Jean on repeat” by @hijrat ↗

  • Toolkit

    Drop, bounce, throw

    Everything
    lands somewhere.

    Research
    Flows
    Systems
    Tables
    Prototypes
    AI
    Components
    Interviews
    Craft

    Physics · Hero

    Toolkit drop

    A hero section where the toolkit falls in, bounces and piles up. Every tile can be thrown.

    ↳ Grab a tile and throw itRiffed from “Bounce hero” by @Nasiwho ↗

  • pPenny

    Your savings
    start at £1

    Log inSign up
    £
    %
    ★
    1
    £
    +

    3D · Onboarding

    Coin orbit

    Onboarding for a made-up savings app. A ring of thick CSS coins orbits behind the headline.

    ↳ Just watch it loopRiffed from “Looping coins” by @nitinbhatnagarp ↗