# All work

Every screenshot, image and video from my projects.

## [Pilgrimage](https://www.tomjohn.design/content/pilgrimage)

- [Pilgrimage: illustrated medieval wordmark, pilgrims, and a church](https://www.tomjohn.design/images/content/pilgrimage/social-cover.webp)
- [Dithering in my game world](https://www.tomjohn.design/videos/pilgrimage/dithering.mp4)
- [My sheep and goat pen](https://www.tomjohn.design/videos/pilgrimage/sheep-and-goats.mp4)
- [My walking-tree experiment](https://www.tomjohn.design/videos/pilgrimage/walking-trees.mp4)
- [My mobile performance test](https://www.tomjohn.design/videos/pilgrimage/mobile-performance.mp4)
- [My experiment with AI-assisted performance tuning](https://www.tomjohn.design/videos/pilgrimage/performance-tuning.mp4)
- [My save-and-resume transition](https://www.tomjohn.design/videos/pilgrimage/save-and-resume.mp4)
- [The rigging editor I built for procedural characters](https://www.tomjohn.design/videos/pilgrimage/rigging-editor.mp4)
- [How I’m testing sprite and 3D-asset ordering](https://www.tomjohn.design/videos/pilgrimage/sprite-ordering.mp4)
- [My group-animation debugging view](https://www.tomjohn.design/videos/pilgrimage/group-animation.mp4)
- [The small shrine at the centre of my settlement](https://www.tomjohn.design/images/content/pilgrimage/shrine.png)
- [The world I’m building: forests, rivers, roads, and a small shrine](https://www.tomjohn.design/images/content/pilgrimage/world.png)

## [What the Port?](https://www.tomjohn.design/content/what-the-port)

- [What the Port? landing page demo](https://www.tomjohn.design/videos/what-the-port/landing-page.mp4)
- [My demo of the What the Port? terminal UI](https://www.tomjohn.design/videos/what-the-port/terminal.mp4)
- [What the Port? settings in Simplified Chinese](https://www.tomjohn.design/images/content/what-the-port/settings-chinese.webp)
- [What the Port? onboarding in Japanese](https://www.tomjohn.design/images/content/what-the-port/onboarding-japanese.webp)
- [The What the Port? design boards in Paper](https://www.tomjohn.design/images/content/what-the-port/paper.webp)

## [shadercam](https://www.tomjohn.design/content/stipple-cam)

- [Electrostatic stippling](https://www.tomjohn.design/videos/stipple-cam/stippling.mp4): Dithering is dead. Electro-static stippling is king.
- [shadercam stippling a webcam image, with hand-tracking controls](https://www.tomjohn.design/videos/stipple-cam/webcam.mp4): now we’re getting somewhere. made with v0
- [shadercam running in a phone’s browser](https://www.tomjohn.design/videos/stipple-cam/mobile.mp4): Oh man it works so well on mobile this is cool
- [shadercam’s bundled stipple shader demo](https://www.tomjohn.design/images/content/stipple-cam/cover.webp)

## [Basedash](https://www.tomjohn.design/content/basedash)

- [A Basedash growth dashboard showing signups, monthly users, and new customers](https://www.tomjohn.design/images/work/img-03-GfpYwwu0cjUZFrAFkeaKuN2Fg.png)
- [Cards](https://www.tomjohn.design/videos/basedash/cards.mp4)
- [Card stack](https://www.tomjohn.design/videos/basedash/card-stack.mp4)
- [Dither hover](https://www.tomjohn.design/videos/basedash/dither-hover.mp4)
- [Resize card](https://www.tomjohn.design/videos/basedash/resize-card.mp4)
- [A proximity menu](https://www.tomjohn.design/videos/basedash/proximity-menu.mp4): I’m calling this a “proximity menu”. The best click is no click.
- [Dither gradient](https://www.tomjohn.design/videos/basedash/dither-gradient.mp4)
- [A Basedash dashboard](https://www.tomjohn.design/images/content/basedash/dashboard-2024-05.webp): Dashboard. Things are starting to get very real.
- [Card stack, scrolling](https://www.tomjohn.design/videos/basedash/card-stack-scroll.mp4): Card stack. Scroll to navigate.
- [Dither loader box](https://www.tomjohn.design/videos/basedash/dither-loader-box.mp4)
- [Dither loaders](https://www.tomjohn.design/videos/basedash/dither-loaders.mp4): dither loaders
- [Complex filters](https://www.tomjohn.design/videos/basedash/complex-filters.mp4)
- [Progressive chart data density](https://www.tomjohn.design/videos/basedash/chart-data-density.mp4)
- [A code editor](https://www.tomjohn.design/videos/basedash/code-editor.mp4): You haven’t really lived until you’ve designed a code editor.
- [Tooltips and hovers](https://www.tomjohn.design/videos/basedash/tooltips.mp4)
- [A stacked bar chart of website visitors by country and browser](https://www.tomjohn.design/videos/basedash/stacked-bar-chart.mp4): Stacked Bar chart. Website visitors broken down by country, broken down by browser. Made in 2 minutes with AI + Basedash charts.
- [Connect database](https://www.tomjohn.design/videos/basedash/connect-database.mp4)
- [A retention chart](https://www.tomjohn.design/images/content/basedash/retention-chart.webp): Retention chart
- [Organization](https://www.tomjohn.design/videos/basedash/organization.mp4)
- [Generating](https://www.tomjohn.design/videos/basedash/generating.mp4)
- [Generation](https://www.tomjohn.design/videos/basedash/generation.mp4)
- [A Basedash dashboard](https://www.tomjohn.design/images/content/basedash/dashboard-2024-11.webp): Dashboard
- [Dashboard card stack](https://www.tomjohn.design/videos/basedash/dashboard-card-stack.mp4)
- [Utility sidebar](https://www.tomjohn.design/videos/basedash/utility-sidebar.mp4)
- [A fly-over of dark Basedash dashboards](https://www.tomjohn.design/videos/basedash/soon.mp4): Soon
- [Generating v2](https://www.tomjohn.design/videos/basedash/generating-v2.mp4)
- [Loading](https://www.tomjohn.design/videos/basedash/loading.mp4)
- [Funnel chart](https://www.tomjohn.design/videos/basedash/funnel-chart.mp4)
- [Segmented funnel chart](https://www.tomjohn.design/videos/basedash/segmented-funnel-chart.mp4)
- [Reports empty state](https://www.tomjohn.design/videos/basedash/reports-empty-state.mp4): Reports - empty state
- [Chat in. Chart out.](https://www.tomjohn.design/videos/basedash/chat-in-chart-out.mp4)
- [Chat in, chart out, in a new look](https://www.tomjohn.design/videos/basedash/new-look.mp4): I think I’m digging this look
- [A shimmer while Basedash thinks](https://www.tomjohn.design/videos/basedash/shimmer.mp4): Shimmer -- deep thought in Basedash
- [Syncing](https://www.tomjohn.design/videos/basedash/syncing.mp4): syncing...
- [Ask and edit](https://www.tomjohn.design/videos/basedash/ask-edit.mp4): ask | edit
- [Empty state](https://www.tomjohn.design/videos/basedash/empty-state.mp4): empty state
- [A 404 page](https://www.tomjohn.design/videos/basedash/404.mp4): 404. It’s amazing what you can build with Framer, Cursor, and Claude
- [The gold Basedash mark in light mode](https://www.tomjohn.design/videos/basedash/light-mode-upgrade.mp4): light mode upgrade
- [A sneak peek of the website’s hero, made in Framer](https://www.tomjohn.design/videos/basedash/website-hero.mp4): Sneak peek... Too much? Made in Framer
- [The website’s Basedash agent section, made in Framer](https://www.tomjohn.design/videos/basedash/website-agent.mp4): Had fun with this one in Framer
- [A little Unicorn Studio in the website’s stats section](https://www.tomjohn.design/videos/basedash/website-stats.mp4): added a lil 🦄 juice to the Basedash stats section. couldn’t resist.
- [A small team, five years — image 1.1](https://www.tomjohn.design/images/content/basedash/001-01.webp)
- [A small team, five years — image 2.1](https://www.tomjohn.design/images/content/basedash/002-01.webp)
- [The first hire and the first admin panel — image 3.1](https://www.tomjohn.design/images/content/basedash/003-01.webp)
- [The first hire and the first admin panel — image 3.2](https://www.tomjohn.design/images/content/basedash/003-02.webp)
- [Finding the first brand — video 4.1](https://www.tomjohn.design/images/content/basedash/004-01.mp4)
- [Internal tools that build themselves — image 5.1](https://www.tomjohn.design/images/content/basedash/005-01.webp)
- [Internal tools that build themselves — image 5.2](https://www.tomjohn.design/images/content/basedash/005-02.webp)
- [Navigation, hierarchy, and the cost of hiding complexity — image 6.1](https://www.tomjohn.design/images/content/basedash/006-01.webp)
- [Navigation, hierarchy, and the cost of hiding complexity — image 6.2](https://www.tomjohn.design/images/content/basedash/006-02.webp)
- [Navigation, hierarchy, and the cost of hiding complexity — image 8.1](https://www.tomjohn.design/images/content/basedash/008-01.webp)
- [Data settings and the first onboarding concepts — image 9.1](https://www.tomjohn.design/images/content/basedash/009-01.webp)
- [Data settings and the first onboarding concepts — video 9.2](https://www.tomjohn.design/images/content/basedash/009-02.mp4)
- [Data settings and the first onboarding concepts — image 10.1](https://www.tomjohn.design/images/content/basedash/010-01.webp)
- [Data settings and the first onboarding concepts — image 10.2](https://www.tomjohn.design/images/content/basedash/010-02.webp)
- [Early dashboards, homepages, and teamspaces — image 11.1](https://www.tomjohn.design/images/content/basedash/011-01.webp)
- [Early dashboards, homepages, and teamspaces — image 12.1](https://www.tomjohn.design/images/content/basedash/012-01.webp)
- [Early dashboards, homepages, and teamspaces — image 13.1](https://www.tomjohn.design/images/content/basedash/013-01.webp)
- [Early dashboards, homepages, and teamspaces — image 14.1](https://www.tomjohn.design/images/content/basedash/014-01.webp)
- [Loading states, an early assistant, and filters — video 15.1](https://www.tomjohn.design/images/content/basedash/015-01.mp4)
- [Loading states, an early assistant, and filters — video 15.2](https://www.tomjohn.design/images/content/basedash/015-02.mp4)
- [Loading states, an early assistant, and filters — image 16.1](https://www.tomjohn.design/images/content/basedash/016-01.webp)
- [Loading states, an early assistant, and filters — image 17.1](https://www.tomjohn.design/images/content/basedash/017-01.webp)
- [Related records, maps, and chart exploration — image 18.1](https://www.tomjohn.design/images/content/basedash/018-01.webp)
- [Related records, maps, and chart exploration — image 19.1](https://www.tomjohn.design/images/content/basedash/019-01.webp)
- [Related records, maps, and chart exploration — image 20.1](https://www.tomjohn.design/images/content/basedash/020-01.webp)
- [Powerful actions, difficult setup — image 21.1](https://www.tomjohn.design/images/content/basedash/021-01.webp)
- [Powerful actions, difficult setup — image 22.1](https://www.tomjohn.design/images/content/basedash/022-01.webp)
- [Powerful actions, difficult setup — image 22.2](https://www.tomjohn.design/images/content/basedash/022-02.webp)
- [Onboarding and the limits of prototypes — image 23.1](https://www.tomjohn.design/images/content/basedash/023-01.webp)
- [Onboarding and the limits of prototypes — image 23.2](https://www.tomjohn.design/images/content/basedash/023-02.webp)
- [Onboarding and the limits of prototypes — image 23.3](https://www.tomjohn.design/images/content/basedash/023-03.webp)
- [Onboarding and the limits of prototypes — image 23.4](https://www.tomjohn.design/images/content/basedash/023-04.webp)
- [Onboarding and the limits of prototypes — image 24.1](https://www.tomjohn.design/images/content/basedash/024-01.webp)
- [Onboarding and the limits of prototypes — image 24.2](https://www.tomjohn.design/images/content/basedash/024-02.webp)
- [APIs, content, and other possible directions — image 25.1](https://www.tomjohn.design/images/content/basedash/025-01.webp)
- [APIs, content, and other possible directions — image 26.1](https://www.tomjohn.design/images/content/basedash/026-01.webp)
- [APIs, content, and other possible directions — image 27.1](https://www.tomjohn.design/images/content/basedash/027-01.webp)
- [APIs, content, and other possible directions — image 28.1](https://www.tomjohn.design/images/content/basedash/028-01.webp)
- [Bulk editing and the first AI visualizations — image 29.1](https://www.tomjohn.design/images/content/basedash/029-01.webp)
- [Bulk editing and the first AI visualizations — image 29.2](https://www.tomjohn.design/images/content/basedash/029-02.webp)
- [Bulk editing and the first AI visualizations — image 30.1](https://www.tomjohn.design/images/content/basedash/030-01.webp)
- [Bulk editing and the first AI visualizations — image 31.1](https://www.tomjohn.design/images/content/basedash/031-01.webp)
- [When AI looked like a special effect — video 32.1](https://www.tomjohn.design/images/content/basedash/032-01.mp4)
- [When AI looked like a special effect — video 33.1](https://www.tomjohn.design/images/content/basedash/033-01.mp4)
- [When AI looked like a special effect — image 34.1](https://www.tomjohn.design/images/content/basedash/034-01.webp)
- [When AI looked like a special effect — video 35.1](https://www.tomjohn.design/images/content/basedash/035-01.mp4)
- [Sidebars, a near-CRM, and shareable snapshots — image 36.1](https://www.tomjohn.design/images/content/basedash/036-01.webp)
- [Sidebars, a near-CRM, and shareable snapshots — image 37.1](https://www.tomjohn.design/images/content/basedash/037-01.webp)
- [Sidebars, a near-CRM, and shareable snapshots — image 37.2](https://www.tomjohn.design/images/content/basedash/037-02.webp)
- [Sidebars, a near-CRM, and shareable snapshots — image 38.1](https://www.tomjohn.design/images/content/basedash/038-01.webp)
- [Sidebars, a near-CRM, and shareable snapshots — image 39.1](https://www.tomjohn.design/images/content/basedash/039-01.webp)
- [Sidebars, a near-CRM, and shareable snapshots — image 39.2](https://www.tomjohn.design/images/content/basedash/039-02.webp)
- [Update banners, page editors, and more experiments — video 40.1](https://www.tomjohn.design/images/content/basedash/040-01.mp4)
- [Update banners, page editors, and more experiments — video 41.1](https://www.tomjohn.design/images/content/basedash/041-01.mp4)
- [Update banners, page editors, and more experiments — image 41.2](https://www.tomjohn.design/images/content/basedash/041-02.webp)
- [Update banners, page editors, and more experiments — image 42.1](https://www.tomjohn.design/images/content/basedash/042-01.webp)
- [Update banners, page editors, and more experiments — image 42.2](https://www.tomjohn.design/images/content/basedash/042-02.webp)
- [Update banners, page editors, and more experiments — image 42.3](https://www.tomjohn.design/images/content/basedash/042-03.webp)
- [Update banners, page editors, and more experiments — image 43.1](https://www.tomjohn.design/images/content/basedash/043-01.webp)
- [Update banners, page editors, and more experiments — image 44.1](https://www.tomjohn.design/images/content/basedash/044-01.webp)
- [Update banners, page editors, and more experiments — image 45.1](https://www.tomjohn.design/images/content/basedash/045-01.webp)
- [Update banners, page editors, and more experiments — image 46.1](https://www.tomjohn.design/images/content/basedash/046-01.webp)
- [Update banners, page editors, and more experiments — image 46.2](https://www.tomjohn.design/images/content/basedash/046-02.webp)
- [Update banners, page editors, and more experiments — image 46.3](https://www.tomjohn.design/images/content/basedash/046-03.webp)
- [Update banners, page editors, and more experiments — image 46.4](https://www.tomjohn.design/images/content/basedash/046-04.webp)
- [Update banners, page editors, and more experiments — image 47.1](https://www.tomjohn.design/images/content/basedash/047-01.webp)
- [Update banners, page editors, and more experiments — image 47.2](https://www.tomjohn.design/images/content/basedash/047-02.webp)
- [Update banners, page editors, and more experiments — image 48.1](https://www.tomjohn.design/images/content/basedash/048-01.webp)
- [Searching for product-market fit — image 49.1](https://www.tomjohn.design/images/content/basedash/049-01.webp)
- [Searching for product-market fit — image 49.2](https://www.tomjohn.design/images/content/basedash/049-02.webp)
- [Searching for product-market fit — image 49.3](https://www.tomjohn.design/images/content/basedash/049-03.webp)
- [The 2024 onboarding experiments — image 51.1](https://www.tomjohn.design/images/content/basedash/051-01.webp)
- [The 2024 onboarding experiments — image 52.1](https://www.tomjohn.design/images/content/basedash/052-01.webp)
- [The 2024 onboarding experiments — video 53.1](https://www.tomjohn.design/images/content/basedash/053-01.mp4)
- [The 2024 onboarding experiments — video 54.1](https://www.tomjohn.design/images/content/basedash/054-01.mp4)
- [The 2024 onboarding experiments — video 54.2](https://www.tomjohn.design/images/content/basedash/054-02.mp4)
- [Making raw data feel human — image 55.1](https://www.tomjohn.design/images/content/basedash/055-01.webp)
- [What if we did charts really well? — image 56.1](https://www.tomjohn.design/images/content/basedash/056-01.webp)
- [What if we did charts really well? — image 57.1](https://www.tomjohn.design/images/content/basedash/057-01.webp)
- [What if we did charts really well? — image 57.2](https://www.tomjohn.design/images/content/basedash/057-02.webp)
- [What if we did charts really well? — image 57.3](https://www.tomjohn.design/images/content/basedash/057-03.webp)
- [What if we did charts really well? — image 57.4](https://www.tomjohn.design/images/content/basedash/057-04.webp)
- [What if we did charts really well? — image 58.1](https://www.tomjohn.design/images/content/basedash/058-01.webp)
- [What if we did charts really well? — image 58.2](https://www.tomjohn.design/images/content/basedash/058-02.webp)
- [A dashboard that grows like a city — image 59.1](https://www.tomjohn.design/images/content/basedash/059-01.webp)
- [A dashboard that grows like a city — image 59.2](https://www.tomjohn.design/images/content/basedash/059-02.webp)
- [Why we moved from admin panels to charts — image 62.1](https://www.tomjohn.design/images/content/basedash/062-01.webp)
- [From a Framer prototype to AI-native charts — video 63.1](https://www.tomjohn.design/images/content/basedash/063-01.mp4)
- [From a Framer prototype to AI-native charts — image 64.1](https://www.tomjohn.design/images/content/basedash/064-01.webp)
- [From a Framer prototype to AI-native charts — image 64.2](https://www.tomjohn.design/images/content/basedash/064-02.webp)
- [From a Framer prototype to AI-native charts — image 64.3](https://www.tomjohn.design/images/content/basedash/064-03.webp)
- [From a Framer prototype to AI-native charts — image 64.4](https://www.tomjohn.design/images/content/basedash/064-04.webp)
- [From a Framer prototype to AI-native charts — image 65.1](https://www.tomjohn.design/images/content/basedash/065-01.webp)
- [From a Framer prototype to AI-native charts — image 65.2](https://www.tomjohn.design/images/content/basedash/065-02.webp)
- [From a Framer prototype to AI-native charts — image 65.3](https://www.tomjohn.design/images/content/basedash/065-03.webp)
- [The SQL editor and the return of the sidebar — image 66.1](https://www.tomjohn.design/images/content/basedash/066-01.webp)
- [The SQL editor and the return of the sidebar — image 66.2](https://www.tomjohn.design/images/content/basedash/066-02.webp)
- [The SQL editor and the return of the sidebar — image 66.3](https://www.tomjohn.design/images/content/basedash/066-03.webp)
- [The SQL editor and the return of the sidebar — image 66.4](https://www.tomjohn.design/images/content/basedash/066-04.webp)
- [The SQL editor and the return of the sidebar — image 67.1](https://www.tomjohn.design/images/content/basedash/067-01.webp)
- [The SQL editor and the return of the sidebar — image 67.2](https://www.tomjohn.design/images/content/basedash/067-02.webp)
- [The SQL editor and the return of the sidebar — image 67.3](https://www.tomjohn.design/images/content/basedash/067-03.webp)
- [The SQL editor and the return of the sidebar — image 68.1](https://www.tomjohn.design/images/content/basedash/068-01.webp)
- [The SQL editor and the return of the sidebar — image 68.2](https://www.tomjohn.design/images/content/basedash/068-02.webp)
- [The SQL editor and the return of the sidebar — image 68.3](https://www.tomjohn.design/images/content/basedash/068-03.webp)
- [The SQL editor and the return of the sidebar — image 68.4](https://www.tomjohn.design/images/content/basedash/068-04.webp)
- [The SQL editor and the return of the sidebar — image 69.1](https://www.tomjohn.design/images/content/basedash/069-01.webp)
- [Launch invitations and full chart pages — image 70.1](https://www.tomjohn.design/images/content/basedash/070-01.webp)
- [Launch invitations and full chart pages — image 70.2](https://www.tomjohn.design/images/content/basedash/070-02.webp)
- [Launch invitations and full chart pages — image 71.1](https://www.tomjohn.design/images/content/basedash/071-01.webp)
- [Launch invitations and full chart pages — image 72.1](https://www.tomjohn.design/images/content/basedash/072-01.webp)
- [Marketing, identity, and the rebrand playground — image 73.1](https://www.tomjohn.design/images/content/basedash/073-01.webp)
- [Marketing, identity, and the rebrand playground — image 73.2](https://www.tomjohn.design/images/content/basedash/073-02.webp)
- [Marketing, identity, and the rebrand playground — image 73.3](https://www.tomjohn.design/images/content/basedash/073-03.webp)
- [Marketing, identity, and the rebrand playground — image 74.1](https://www.tomjohn.design/images/content/basedash/074-01.webp)
- [Marketing, identity, and the rebrand playground — image 74.2](https://www.tomjohn.design/images/content/basedash/074-02.webp)
- [Marketing, identity, and the rebrand playground — image 74.3](https://www.tomjohn.design/images/content/basedash/074-03.webp)
- [Marketing, identity, and the rebrand playground — image 74.4](https://www.tomjohn.design/images/content/basedash/074-04.webp)
- [Marketing, identity, and the rebrand playground — image 75.1](https://www.tomjohn.design/images/content/basedash/075-01.webp)
- [Marketing, identity, and the rebrand playground — image 75.2](https://www.tomjohn.design/images/content/basedash/075-02.webp)
- [Marketing, identity, and the rebrand playground — image 75.3](https://www.tomjohn.design/images/content/basedash/075-03.webp)
- [Marketing, identity, and the rebrand playground — image 75.4](https://www.tomjohn.design/images/content/basedash/075-04.webp)
- [Marketing, identity, and the rebrand playground — image 76.1](https://www.tomjohn.design/images/content/basedash/076-01.webp)
- [Marketing, identity, and the rebrand playground — image 76.2](https://www.tomjohn.design/images/content/basedash/076-02.webp)
- [Marketing, identity, and the rebrand playground — image 76.3](https://www.tomjohn.design/images/content/basedash/076-03.webp)
- [Marketing, identity, and the rebrand playground — image 76.4](https://www.tomjohn.design/images/content/basedash/076-04.webp)
- [A logo made of bits — image 77.1](https://www.tomjohn.design/images/content/basedash/077-01.webp)
- [A logo made of bits — image 78.1](https://www.tomjohn.design/images/content/basedash/078-01.webp)
- [A logo made of bits — image 78.2](https://www.tomjohn.design/images/content/basedash/078-02.webp)
- [A logo made of bits — video 78.3](https://www.tomjohn.design/images/content/basedash/078-03.mp4)
- [A logo made of bits — image 78.4](https://www.tomjohn.design/images/content/basedash/078-04.webp)
- [A logo made of bits — image 79.1](https://www.tomjohn.design/images/content/basedash/079-01.webp)
- [A logo made of bits — image 80.1](https://www.tomjohn.design/images/content/basedash/080-01.webp)
- [Funnels, connections, gauges, and generated dashboards — image 81.1](https://www.tomjohn.design/images/content/basedash/081-01.webp)
- [Funnels, connections, gauges, and generated dashboards — image 81.2](https://www.tomjohn.design/images/content/basedash/081-02.webp)
- [Funnels, connections, gauges, and generated dashboards — image 81.3](https://www.tomjohn.design/images/content/basedash/081-03.webp)
- [Funnels, connections, gauges, and generated dashboards — image 82.1](https://www.tomjohn.design/images/content/basedash/082-01.webp)
- [Funnels, connections, gauges, and generated dashboards — image 82.2](https://www.tomjohn.design/images/content/basedash/082-02.webp)
- [Funnels, connections, gauges, and generated dashboards — image 83.1](https://www.tomjohn.design/images/content/basedash/083-01.webp)
- [Funnels, connections, gauges, and generated dashboards — image 83.2](https://www.tomjohn.design/images/content/basedash/083-02.webp)
- [Funnels, connections, gauges, and generated dashboards — image 83.3](https://www.tomjohn.design/images/content/basedash/083-03.webp)
- [Funnels, connections, gauges, and generated dashboards — video 84.1](https://www.tomjohn.design/images/content/basedash/084-01.mp4)
- [Creating charts and asking questions of the data — video 85.1](https://www.tomjohn.design/images/content/basedash/085-01.mp4)
- [Creating charts and asking questions of the data — image 86.1](https://www.tomjohn.design/images/content/basedash/086-01.webp)
- [Ditherface and a different kind of research incentive — image 87.1](https://www.tomjohn.design/images/content/basedash/087-01.webp)
- [Ditherface and a different kind of research incentive — video 88.1](https://www.tomjohn.design/images/content/basedash/088-01.mp4)
- [State of databases — image 89.1](https://www.tomjohn.design/images/content/basedash/089-01.webp)
- [State of databases — image 89.2](https://www.tomjohn.design/images/content/basedash/089-02.webp)
- [State of databases — image 89.3](https://www.tomjohn.design/images/content/basedash/089-03.webp)
- [State of databases — image 89.4](https://www.tomjohn.design/images/content/basedash/089-04.webp)
- [What five years taught me — image 102.1](https://www.tomjohn.design/images/content/basedash/102-01.webp)
- [More bar charts](https://www.tomjohn.design/videos/vid-03-tM2Xeci8nRYGTQD57ioinnbZ0bQ.mp4): More bar charts - Segment events and Postgres DB data broken down. Made in Basedash
- [Corner loader](https://www.tomjohn.design/videos/vid-11-QGaw6mmxj5IBl35UcTXtAdpHA.mp4): Dithered corner brackets folding in and out as a loader.
- [Signups this week](https://www.tomjohn.design/images/work/img-01-qhFpy1UEEypCSdWYWuW0B2om78.webp): A bar chart of signups this week, with its date range controls.
- [The Basedash mark, rendered as light](https://www.tomjohn.design/videos/vid-09-77XZ6Aev8bNVkQK7W35XAYbiKTk.mp4): The Basedash mark, glowing gold and orange.
- [Reasoning](https://www.tomjohn.design/videos/vid-10-q5qWFjRxbS2dCDrszCB8DL1ayk.mp4): Basedash reasoning through a question about Slack installs, then creating a time-series chart.
- [Card rearrange](https://www.tomjohn.design/videos/vid-06-oBzrajP17jMV0BRMNIfPlVDUhyY.mp4)
- [Dither loader](https://www.tomjohn.design/videos/vid-05-H3yuMdmMzW70iA49OAVuv3ZZhX0.mp4): A dithered loader turning between a star and a wheel.
- [Dithered mark](https://www.tomjohn.design/videos/vid-07-2RCqyx0u4WDcPWC3nvpc1He1YVE.mp4): The Basedash mark in dithered squares, fading in and out.
- [Macindash preview](https://www.tomjohn.design/videos/vid-08-O1JhrMn8X3WygdKy9PHiHeTYM.mp4): Animation by Reijo Palmiste (@reijowrites).
- [Users table in 3D](https://www.tomjohn.design/videos/vid-01-qKEnxw8osKWInaEOCAtjxulPRUM.mp4): A dark Basedash users table, tilted in 3D and gliding past.
- [Glowing edge](https://www.tomjohn.design/videos/vid-02-wz4sRZ2Dn4TA8Dqee9jslLI6Nk.mp4): A purple glow running along the edge of a dark Basedash panel.
- [Gradient orb](https://www.tomjohn.design/videos/vid-04-tAna7LAj2vmkuJjaaLKd5CdY8Y.mp4): A soft gradient orb shifting through blue, purple and red.

## [Macindash](https://www.tomjohn.design/content/macindash)

- [Macindash: a dashboard for your desk — image 92.1](https://www.tomjohn.design/images/content/basedash/092-01.webp)
- [Macindash: a dashboard for your desk — image 93.1](https://www.tomjohn.design/images/content/basedash/093-01.webp)
- [Macindash: a dashboard for your desk — image 93.2](https://www.tomjohn.design/images/content/basedash/093-02.webp)
- [Macindash: a dashboard for your desk — image 93.3](https://www.tomjohn.design/images/content/basedash/093-03.webp)
- [A walkthrough of Macindash case designs and their separate parts](https://www.tomjohn.design/images/content/macindash/versions.mp4)
- [Macindash preview with the dashboard appearing on the monitor](https://www.tomjohn.design/images/content/macindash/preview.mp4)
- [A close-up of a 3D-printed Macindash case](https://www.tomjohn.design/images/content/macindash/first-print.mp4): 🤫
- [Screens, prints, and custom floppy disks — image 94.1](https://www.tomjohn.design/images/content/basedash/094-01.webp)
- [Screens, prints, and custom floppy disks — image 94.2](https://www.tomjohn.design/images/content/basedash/094-02.webp)
- [Screens, prints, and custom floppy disks — image 94.3](https://www.tomjohn.design/images/content/basedash/094-03.webp)
- [Screens, prints, and custom floppy disks — image 94.4](https://www.tomjohn.design/images/content/basedash/094-04.webp)
- [Screens, prints, and custom floppy disks — image 95.1](https://www.tomjohn.design/images/content/basedash/095-01.webp)
- [Screens, prints, and custom floppy disks — image 95.2](https://www.tomjohn.design/images/content/basedash/095-02.webp)
- [Screens, prints, and custom floppy disks — video 95.3](https://www.tomjohn.design/images/content/basedash/095-03.mp4)
- [Screens, prints, and custom floppy disks — image 96.1](https://www.tomjohn.design/images/content/basedash/096-01.webp)
- [Screens, prints, and custom floppy disks — image 96.2](https://www.tomjohn.design/images/content/basedash/096-02.webp)
- [Screens, prints, and custom floppy disks — image 97.1](https://www.tomjohn.design/images/content/basedash/097-01.webp)
- [Screens, prints, and custom floppy disks — image 97.2](https://www.tomjohn.design/images/content/basedash/097-02.webp)
- [Assembly and packaging — image 98.1](https://www.tomjohn.design/images/content/basedash/098-01.webp)
- [Assembly and packaging — video 98.2](https://www.tomjohn.design/images/content/basedash/098-02.mp4)
- [Assembly and packaging — video 98.3](https://www.tomjohn.design/images/content/basedash/098-03.mp4)
- [Assembly and packaging — video 98.4](https://www.tomjohn.design/images/content/basedash/098-04.mp4)
- [Assembly and packaging — image 99.1](https://www.tomjohn.design/images/content/basedash/099-01.webp)
- [Assembly and packaging — image 99.2](https://www.tomjohn.design/images/content/basedash/099-02.webp)
- [Assembly and packaging — video 99.3](https://www.tomjohn.design/images/content/basedash/099-03.mp4)
- [Assembling a Macindash](https://www.tomjohn.design/images/content/macindash/assembly.mp4): Assembly
- [What happened after shipping — image 100.1](https://www.tomjohn.design/images/content/basedash/100-01.webp)
- [What happened after shipping — video 101.1](https://www.tomjohn.design/images/content/basedash/101-01.mp4)
- [Macindash, its floppy disk and a signed letter from the Basedash team; photo by T. Costa](https://www.tomjohn.design/images/content/macindash/fey-1.jpg)
- [Macindash with its custom floppy disk in the front slot; photo by T. Costa](https://www.tomjohn.design/images/content/macindash/fey-2.jpg)

## [Ditherface](https://www.tomjohn.design/content/ditherface)

- [Ditherface pixel portraits](https://www.tomjohn.design/images/content/ditherface/cover.png)
- [Vector outlines of a Ditherface with glasses and curly hair](https://www.tomjohn.design/images/content/ditherface/outlines-1.png)
- [Vector outlines of a smiling Ditherface with glasses and a beard](https://www.tomjohn.design/images/content/ditherface/outlines-2.png)
- [Vector outlines of a forward-facing Ditherface](https://www.tomjohn.design/images/content/ditherface/outlines-3.png)
- [Vector outlines of a Ditherface in profile](https://www.tomjohn.design/images/content/ditherface/outlines-4.png)
- [Drawing a Ditherface in Figma](https://www.tomjohn.design/videos/ditherface/timelapse.mp4): Timelapse of a dither portrait created in Figma
- [Drawing Jonathan Simcoe’s Ditherface in Figma](https://www.tomjohn.design/videos/ditherface/jonathan-simcoe.mp4): Another day, another dither portrait made in Figma. This time I got a chance to meet and chat with Jonathan Simcoe, designer at Mercury.
- [Drawing Jonathan Minori’s Ditherface in Figma](https://www.tomjohn.design/videos/ditherface/jonathan-minori.mp4): Timelapse of another dither portrait made in Figma. This time I talked to Jonathan Minori, designer and founder of Ableworks. Thanks again for taking the time to chat! Super helpful.
- [Drawing Cole Deroshay’s Ditherface in Figma](https://www.tomjohn.design/videos/ditherface/cole-deroshay.mp4): Had a great chat with Cole Deroshay last week, he gave some more feedback about the app we’re making. I gave the dithered portrait made in Figma. This one was actually super tricky because of the lighting and angle. When dealing with a black or white texture, just a single pixel in a different spot can totally change the facial expression.
- [Drawing Tommy Geoco’s Ditherface in Figma](https://www.tomjohn.design/videos/ditherface/tommy-geoco.mp4)
- [Drawing Thomas Chen’s Ditherface in Figma](https://www.tomjohn.design/videos/ditherface/thomas-chen.mp4)
- [Ditherface of Nathan Baschez](https://www.tomjohn.design/images/content/ditherface/portraits/nathan-baschez.webp)
- [Ditherface of Stephen Haney](https://www.tomjohn.design/images/content/ditherface/portraits/stephen-haney.webp)
- [Ditherface of Micah Headdings](https://www.tomjohn.design/images/content/ditherface/portraits/micah-headdings.webp)
- [Ditherface of Alan Kay](https://www.tomjohn.design/images/content/ditherface/portraits/alan-kay.webp)
- [Ditherface of Krysti Pryde](https://www.tomjohn.design/images/content/ditherface/portraits/krysti-pryde.webp)
- [Ditherface of Marc Card](https://www.tomjohn.design/images/content/ditherface/portraits/marc-card.webp)
- [Ditherface of Stuart Bowness](https://www.tomjohn.design/images/content/ditherface/portraits/stuart-bowness.webp)
- [Ditherface of Damien Tanner](https://www.tomjohn.design/images/content/ditherface/portraits/damien-tanner.webp)
- [Ditherface of Aidan Hornsby](https://www.tomjohn.design/images/content/ditherface/portraits/aidan-hornsby.webp)
- [Ditherface of Joy Lynn](https://www.tomjohn.design/images/content/ditherface/portraits/joy-lynn.webp)
- [Ditherface of Gino](https://www.tomjohn.design/images/content/ditherface/portraits/gino.webp)
- [Ditherface of Griko Nibras](https://www.tomjohn.design/images/content/ditherface/portraits/griko-nibras.webp)
- [Ditherface of Tommy Geoco](https://www.tomjohn.design/images/content/ditherface/portraits/tommy-geoco.webp)
- [Ditherface of Reijo Palmiste](https://www.tomjohn.design/images/content/ditherface/portraits/reijo-palmiste.webp)
- [Ditherface of Cody Keisler](https://www.tomjohn.design/images/content/ditherface/portraits/cody-keisler.webp)
- [Ditherface of Tommy Geoco](https://www.tomjohn.design/images/content/ditherface/portraits/tommy-geoco-2.webp)
- [Ditherface of Hüseyin](https://www.tomjohn.design/images/content/ditherface/portraits/huseyin.webp)
- [Ditherface of Will King](https://www.tomjohn.design/images/content/ditherface/portraits/will-king.webp)
- [Ditherface of Thomas Chen](https://www.tomjohn.design/images/content/ditherface/portraits/thomas-chen.webp)
- [Ditherface of Danny JP. Williams](https://www.tomjohn.design/images/content/ditherface/portraits/danny-jp-williams.webp)
- [Ditherface of Cole Deroshay](https://www.tomjohn.design/images/content/ditherface/portraits/cole-deroshay.webp)
- [Ditherface of Ridd](https://www.tomjohn.design/images/content/ditherface/portraits/ridd.webp)
- [Ditherface of Tommy Geoco](https://www.tomjohn.design/images/content/ditherface/portraits/tommy-geoco-3.webp)
- [Ditherface of Jonathan Minori](https://www.tomjohn.design/images/content/ditherface/portraits/jonathan-minori.webp)
- [Ditherface of Jonathan Simcoe](https://www.tomjohn.design/images/content/ditherface/portraits/jonathan-simcoe.webp)
- [Ditherface of Sam Linville](https://www.tomjohn.design/images/content/ditherface/portraits/sam-linville.webp)
- [Ditherface of Wesley Hill](https://www.tomjohn.design/images/content/ditherface/portraits/wesley-hill.webp)
- [Ditherface of Conner Luzier](https://www.tomjohn.design/images/content/ditherface/portraits/conner-luzier.webp)
- [Ditherface of Derek Kolstad](https://www.tomjohn.design/images/content/ditherface/portraits/derek-kolstad.webp)
- [Ditherface of Ivan Garcia](https://www.tomjohn.design/images/content/ditherface/portraits/ivan-garcia.webp)
- [Ditherface of Joz](https://www.tomjohn.design/images/content/ditherface/portraits/joz.webp)
- [Ditherface of Alex](https://www.tomjohn.design/images/content/ditherface/portraits/alex.webp)
- [Ditherface of MX](https://www.tomjohn.design/images/content/ditherface/portraits/mx.webp)
- [Ditherface of Julian Moncada](https://www.tomjohn.design/images/content/ditherface/portraits/julian-moncada.webp)
- [Ditherface of John Phamous](https://www.tomjohn.design/images/content/ditherface/portraits/john-phamous.webp)
- [Ditherface of Kris Lachance](https://www.tomjohn.design/images/content/ditherface/portraits/kris-lachance.png)
- [Ditherface of Robert Cooper](https://www.tomjohn.design/images/content/ditherface/portraits/robert-cooper.webp)
- [Ditherface of Max Musing](https://www.tomjohn.design/images/content/ditherface/portraits/max-musing.webp)
- [Ditherface of Bryan Hunter](https://www.tomjohn.design/images/content/ditherface/portraits/bryan-hunter.webp)
- [Ditherface of Derek Reynolds](https://www.tomjohn.design/images/content/ditherface/portraits/derek-reynolds.webp)
- [Ditherface of Tom Johnson](https://www.tomjohn.design/images/content/ditherface/portraits/tom-johnson.webp)

## [Turbo Speedo Video](https://www.tomjohn.design/content/turbo-speedo-video)

- [The Adjust Video Speed form in Raycast: a selected video, 2× speed, 30 fps, Keep Audio and an output path.](https://www.tomjohn.design/images/content/turbo-speedo-video/adjust-video-speed.webp)

## [Asurion](https://www.tomjohn.design/content/asurion)

- [The first Same Unit Repair app for contractors: a day's route of stops around Chicago with miles, hours and payout, a screen repair's details, a chat with a customer, a nearby job to claim, and an inventory pickup of replacement screens](https://www.tomjohn.design/images/content/asurion/same-unit-repair-app.webp)
- [Announcement of the Verizon replacement-phone delivery and setup service](https://www.tomjohn.design/images/content/asurion/1144606561601499137-1.jpg)
- [A recording of the Asurion Experts field app I built in Webflow](https://www.tomjohn.design/videos/asurion/1199027657473712128-1.mp4)
- [The part scanner, lining up the QR code on a Galaxy S9 screen's label above a pick-up list of parts](https://www.tomjohn.design/images/content/asurion/part-scanner.webp)
- [The part scanner checking a box's label, then its shipping label](https://www.tomjohn.design/images/content/asurion/pretty-box-scanner.webp)
- [A pickup from a forward stocking location shown as a job, with a note that the scanner, not a map of a place the expert visits every day, should come first](https://www.tomjohn.design/images/content/asurion/fsl-pickup.webp)
- [The parts hand-off across the store employee, the expert and the system: log in, verify the expert, grab stock, make kits by scanning each part and box, then hand them off and certify the expert's completion](https://www.tomjohn.design/images/content/asurion/part-flow.webp)
- [A My ecosystem page for a Verizon customer: 16 devices, 3 members and $3,345 of protected tech, with the home's internet, phone and smart home providers](https://www.tomjohn.design/images/content/asurion/my-ecosystem.webp)
- [A living room's eight devices, each with the services it runs](https://www.tomjohn.design/images/content/asurion/living-room.webp)
- [A concept for a device page: expert suggestions, what's covered and what it costs, claims, and account details](https://www.tomjohn.design/images/content/asurion/hub-device-page.webp)
- [A device page for AirPods Pro with its manufacturer warranty status](https://www.tomjohn.design/images/content/asurion/device-warranty.webp)
- [Adding devices by what you watch Netflix on, then picking which TV it is](https://www.tomjohn.design/images/content/asurion/verify-device-netflix.webp)
- [Adding a TV by brand, room and size, as a perk of Total Mobile Protection](https://www.tomjohn.design/images/content/asurion/verify-device.webp)
- [Service pages for AT&T, Sprint and Verizon plans, unbranded Asurion Home+, and a security advisor](https://www.tomjohn.design/images/content/asurion/service-pages.webp)
- [The field app in purple: a queue of Verizon, Sam's Club and AT&T jobs on a map of Nashville, a job's details, and its customer](https://www.tomjohn.design/images/content/asurion/field-app-jobs.webp)
- [A board of the field app's components: footers, rows, task rows, carrier shortcuts, map pins, and tasks like checklists, photo uploads, barcode scans and signatures](https://www.tomjohn.design/images/content/asurion/field-app-design-system.webp)
- [The whole field app mapped out, from the job queue through navigating, barcode scans, signatures, drop-off checklists and setup help](https://www.tomjohn.design/images/content/asurion/field-app-flows.webp)
- [Asurion's global design summit in June 2019](https://www.tomjohn.design/images/content/asurion/1144606570870956033-1.jpg)
- [The design summit where we introduced our pattern library alpha](https://www.tomjohn.design/images/content/asurion/1144606570870956033-2.jpg)

## [Tomjohn Design](https://www.tomjohn.design/content/tomjohn-design)

- [A 3D draft of my office layout](https://www.tomjohn.design/videos/tomjohn-design/office-layout.mp4): Drafting a new layout for my office. Dark mode is life.
- [A glass octahedron in swirling rainbow light](https://www.tomjohn.design/videos/tomjohn-design/prism.mp4): Prism
- [Dithered clouds](https://www.tomjohn.design/videos/tomjohn-design/clouds.mp4): Clouds
- [Dark, dithered storm clouds](https://www.tomjohn.design/videos/tomjohn-design/storm.mp4): Storm
- [A red sphere in the clouds](https://www.tomjohn.design/videos/tomjohn-design/serenity.mp4): Inspired by Serenity, by Rik Oostenbroek.
- [The word ALPHA glitching in lines](https://www.tomjohn.design/videos/tomjohn-design/alpha.mp4): alpha

## [Vercel](https://www.tomjohn.design/content/vercel)

- [A v0 prototype that sends one prompt to every AI model at the same time](https://www.tomjohn.design/videos/vercel/every-model.mp4): To get myself more familiar with v0 and the AI SDK I made this crazy prototype (well... a few) in v0 that allows me to send the same prompt to EVERY AI MODEL AT THE SAME TIME and render the output as text, or in a sandbox so that I can actually interact with it. It also tells me how long each took, how many tokens, and how much each of the calls cost.
- [The Vercel triangle in rainbow light](https://www.tomjohn.design/videos/vercel/triangle.mp4): triangle
- [Design tools built into a prototype to tune interactions, timings and densities](https://www.tomjohn.design/videos/vercel/prototype-tools.mp4): I’ve started adding my own design tools to my prototypes to better tune interactions, timings, densities, add more properties... things that have always held me back before. the future of design is going to be wild
- [Zombie UI in v0: the old settings show where they’ve moved, then disappear](https://www.tomjohn.design/videos/vercel/zombie-ui.mp4): Created what I’m calling “zombie UI”. v0 moved a lot of the settings from the sidebar into a new settings modal. … but we didn’t tell anybody. After more than a few confused users, I whipped this up yesterday. It’s a pattern that we can reuse I think, if/when UI changes around. Basically, there’s a fake version of the old UI, when you click on it, it shows where it now lives, and then when you do the new action (open the modal) it deletes the zombie UI. I’m personally very opposed to full screen modals and videos showing what’s new, as they intercept logged in users and usually just get dismissed. This seems like a good middle ground. It’s live now.
- [Flipping through a printed Welcome to Vercel book](https://www.tomjohn.design/videos/vercel/welcome-book.mp4): Vercel
- [A small triangle of dots, thinking](https://www.tomjohn.design/videos/vercel/thinking.mp4): thinking