Product designer · free from January
I design interfaces you want to play with
Three products, shipped and still in use
- Ledger · invoicing for studios
- Tidepool · swim coaching app
- Kumo · weather for small-plane pilots
Talks, juries and one very proud mother
Spoke at four design meetups in Douala, Lagos and Abidjan. Jury member for a student design award, two years running.
What clients say
“Noa turned a forty-page spec into a prototype we could play with in a week.”Ama K., product lead at Tidepool
Short answers before you book
Freelance from January, two clients at a time. I work from Douala on WAT (UTC+1) and overlap with Europe all day. Projects start at four weeks.
Gamepad
A game controller is the navigation: its D-pad and buttons open the sections of the page, from the mouse, the keyboard or a real gamepad.
Use when: Portfolios, studios, games and playful products: a first screen people remember because they touched it.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/gamepadFirst time? Add the @sharingan registry to your project: getting started.
Add ?motion=final to the address for the repeatable still frame, or ?motion=off for the reduced-motion version.
Props
content what the hero says, real text in the DOM
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string (≤ 48 chars) | — | A short kicker above the headline. |
| headline * | string (8–70 chars) | — | The promise in one line, 4–9 words. |
| subheadline | string (≤ 180 chars) | — | One or two sentences under the headline. |
| primaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| secondaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| sections * | object[] (1–4) | — | Up to four screens, on the Y, X, B and A buttons in that order (the D-pad reaches them too). |
| label * | string (2–24 chars) | — | The section's name on its button and in the legend, 1–2 words. |
| title * | string (8–70 chars) | — | What the section shows, one line. |
| body | string (≤ 260 chars) | — | A short paragraph. |
| items | string[] (≤ 5) | — | Short chips, e.g. projects or skills. |
| quote | object | — | A testimonial. |
| text * | string (10–180 chars) | — | |
| cite * | string (2–60 chars) | — | |
| wordmark | object | {"title":"SG·PAD","tagline":"MADE FOR CLICKING"} | Printed on the controller. Your own name, never a console maker's. |
| title * | string (2–12 chars) | — | |
| tagline | string (≤ 24 chars) | — | |
| collaborators | string[] (≤ 2) | — | Names on the live cursors floating around the controller. |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] (4–4) | ["#2f9d5c","#2f4bc4","#e5b41d","#d23538"] | The Y, X, B and A buttons, in that order. |
| shell | "auto" | "clay" | "graphite" | "translucent" | "auto" | The controller's plastic. `auto` picks clay on light pages and graphite on dark ones. |
| tilt | boolean | true | The controller leans toward the mouse. |
| keyboard | boolean | true | Arrows, A B X Y and Esc drive it (arrows only once focus is inside). |
| gamepad | boolean | true | A real controller plugged into the computer drives it. |
| easterEgg | boolean | true | The Konami code swaps in a translucent shell. |
The same hero as a Web Component
Web Component · no framework
<sg-gamepad>
The same engine, driven by attributes. Each section below is plain HTML in the page; the controller only shows one at a time.
Sections are your own HTML
One data-sg-slide="home", then up to four data-sg-slide elements with a data-label. They land on Y, X, B and A.
Configured with attributes
- colors
- shell
- tilt
- keyboard
- gamepad
Runs in every browser
HTML, SVG and CSS 3D transforms only. No canvas, no WebGPU: phones get the same hero as desktops.