All projects
PrototypeIn testing

Orbit

An orbiting expertise graph, animated and keyboard-navigable, that stays legible on a phone.

Updated
Role
Design and development
Status
In testing

Roadmap

The hard part is not spinning nodes around a centre. It is doing so without losing the people who navigate by keyboard, those who have turned animation off, and those looking at a six-inch screen.

The stance is to redraw for mobile rather than amputate: a visual signature that disappears where half the visitors arrive is not a signature.

Key points

  • Drawn in SVG — centre node, spokes and ring — without a single bitmap image.
  • Auto-rotation, paused at the first interaction and resumed on request.
  • Motion suppressed entirely when the system asks for less animation.

Technologies

  • SVG
  • CSS
  • TypeScript

Milestones

2 / 4
  1. Done —SVG rendering: central node, rays, ring
  2. Done —Auto-rotation, suspended on interaction
  3. Upcoming —Keyboard navigation and active-node announcement
  4. Upcoming —Redrawn for mobile, never hidden

Other projects

PrototypeRoadmap

Assisted writing pipeline

Write an article in French, derive the English version and the metadata from it, without a model publishing anything on its own.

  • MDX
  • TypeScript
  • Claude
PrototypeArchived

Pencil mockups

A first design pass in a mockup editor, dropped in favour of HTML prototypes that can actually be tested.

  • Pencil
ProductIn testing

Yorro.dev

The studio's own site: showcase, journal and tutorials, built as a demonstration of the architecture it sells.

  • Astro
  • TypeScript
  • Tailwind CSS
  • Cloudflare Pages
  • +1

Act

Dark themePin the site's appearancesetTheme({theme:"dark"})
Light themePin the site's appearancesetTheme({theme:"light"})
System themeFollow the system preference againsetTheme({theme:"system"})
Switch the site to FrenchFrançaissetLocale({locale:"fr"})
Labs — ProductFilter Labs by typefilterLabs({type:"Produit"})
Labs — PrototypeFilter Labs by typefilterLabs({type:"Prototype"})
Labs — ResearchFilter Labs by typefilterLabs({type:"Recherche"})
Labs — Reset filtersClear every Labs filterfilterLabs({reset:true})
Journal — EngineeringFilter the Journal by categoryfilterJournal({category:"Ingénierie"})
Journal — SecurityFilter the Journal by categoryfilterJournal({category:"Sécurité"})
Journal — Agent-NativeFilter the Journal by categoryfilterJournal({category:"Agent-Native"})
Journal — StudioFilter the Journal by categoryfilterJournal({category:"Studio"})
Journal — Reset filtersClear every Journal filterfilterJournal({reset:true})
Tutorials — BeginnerFilter tutorials by levelfilterTutorials({level:"Débutant"})
Tutorials — IntermediateFilter tutorials by levelfilterTutorials({level:"Intermédiaire"})
Tutorials — AdvancedFilter tutorials by levelfilterTutorials({level:"Avancé"})
Tutorials — Reset filtersClear every tutorials filterfilterTutorials({reset:true})

Services

DiscoveryFrame the product before the first line of code, so the budget builds instead of correcting.openService({service:"discovery"})
Product designAn interface that holds together, carried by a design system your developers can keep alive without us.openService({service:"design"})
Web developmentA fast web application that holds up over time, with the tests and delivery chain to match.openService({service:"web"})
Mobile developmentAn iOS and Android app from a single codebase, published on both stores.openService({service:"mobile"})
Infrastructure & securityInfrastructure described as code, and Zero Trust access that does not rest on a text message.openService({service:"infrastructure"})
Maintenance & evolutionA product kept current, watched and fixed, with someone who answers when it breaks.openService({service:"maintenance"})
Agent-Native Architecture AdvisoryMake an existing product agent-operable without rewriting it — and without opening more than it should.openService({service:"agent-native"})

Go to

YorroProduct engineering studio in Abidjan and Paris. We design, we build, we ship.navigate({page:"home"})
ServicesBuild a product end to end, or advise a team on its agent-native architecture.navigate({page:"services"})
LabsWhat the studio has built: products, prototypes and research, with where each one actually stands.navigate({page:"labs"})
TutorialsStep-by-step guides drawn from real projects, grouped into tracks by topic.navigate({page:"tutorials"})
JournalThe studio's notes and positions.navigate({page:"journal"})
ContactDescribe your project; you get a framing back, not a boilerplate quote.navigate({page:"contact"})
AboutWho runs the studio, how it works, and what it turns down.navigate({page:"about"})
↑↓ move↵ runesc closeOne Actions layer