Console-grade user interfaces for PS5 homebrew, drawn with OpenGL.
A small rendering, motion and sound kit, a themeable widget set, and one native app that holds a gallery of complete, working UI designs. Press L1 / R1 to switch between them.
21 designs · 30 themes · 99 reusable components
· 67 sound effects in two sets · one OpenGL 4.6 shader behind all of it
Designs · Themes · Components · The craft · Kit reference · Build a design · For AI agents
Most homebrew looks like a tool: a list, a cursor, default fonts. It does not have to. The difference between that and something that feels like the console's own software is a few dozen small decisions about motion, sound, depth and focus, made the same way everywhere.
This repository writes those decisions down, gives you code that implements them, and proves the point with finished screens you can run, read and take apart. It is meant as a reference for people and for coding agents: enough documentation to learn the craft, enough working code to copy from.
| A renderer | One instanced signed-distance-field shader draws every shape, glyph and image, anti-aliased at any size, at 4K in a handful of draw calls. Procedural animated backdrops. Real frosted glass. |
| Motion | Springs for everything that moves, easing curves, staggered entrances, a focus highlight that glides. Frame-rate independent, interruptible. |
| Sound | A 32-voice mixer on its own thread, a vocabulary of 42 cues, two complete sets of recorded effects, stereo placement, pitch that carries meaning, music with ducking, controller rumble. |
| Type and glyphs | Six baked distance-field fonts, sharp at any size. Every DualSense button drawn from shapes, in any colour scheme. |
| Widgets and themes | Buttons, switches, sliders, tabs, fields, chips, lists and dialogs in thirty design languages, from frosted glass to neo-brutalism to 8-bit. |
| Components | A library of reusable pieces that own their focus, motion and sound: lists, grids, carousels, tabs, menus, dialogs, sheets, toasts, forms, progress, badges, counters and more. Each is restyled by any theme, tuned through a style struct and extended through slots. |
| Designs | Complete screens, each in one file: a home screen, a library, a storefront, a HUD with a pause menu, a radial menu, an on-screen keyboard, a settings screen that really works, and more. |
| A tour | The app can drive itself. The same scripted run renders every picture in these docs on a PC, runs the unit tests, and validates a build on the console. |
| A PS5 build | Reproducible native build and packaging, from ps5-native-app-boilerplate, rendering through ps5-opengl. |
Each one is a different answer to "what should this screen feel like?", with its own layout, palette, motion and interaction pattern. Click a picture for its clip, its techniques and its source.
 01 · Aurora Shelf A console home screen: hero panel, cover shelves, frosted details |
 02 · Paper Library A game shelf of paper cards that travel when sorted, filtered or picked up |
 03 · Neon Arcade A synthwave racer's main menu: neon sign, gliding tube, live previews |
 04 · Editorial A magazine's weekly selection: big type on paper, and an article behind every row |
 05 · Cover Wheel A carousel with weight: scrub it, let it coast, open a cover |
 06 · Radial Dial An in-game item wheel: aim with the stick, equip with one press |
 07 · Field HUD An in-game HUD over a moving world, and the pause menu behind Options |
 08 · Pulse Dashboard A bento grid of live data tiles that expand into detail views |
 09 · Now Playing A music player: breathing artwork, a visualizer, a scrubber and a glass queue |
 10 · First Run A setup wizard: avatar, a name typed on a controller keyboard, a warm welcome |
 11 · Constellation A skill tree as a star map: free 2D focus, a gliding camera, progression |
 12 · Phosphor A monochrome CRT terminal: character grid, glow, typed text |
 13 · Storefront A shop window: featured banner, product pages, a cart and a checkout |
 14 · Trophy Room An achievements cabinet: metal medals, counting numbers, an unlock with ceremony |
 15 · File Browser A file manager: aligned columns, folders that keep your place, visible results |
 16 · Satchel An inventory you handle: lift, carry, swap, stack and equip, with a comparing tooltip |
 17 · Launch Sequence Before the menu: studio splash, title, profiles and an honest loading screen |
 18 · Control Room A settings screen with real controls: sliders, switches, steppers, a dialog |
 19 · Theme Lab One screen in thirty design languages: L2 and R2 restyle every widget |
 20 · Component Library Reusable lists, grids, dialogs, forms and indicators, restyled by thirty themes |
 21 · Toolbox The kit on one screen: shapes, type, motion, glyphs and every sound |
The same working screen in thirty design languages. Ten are styles in their own right; twenty are modelled on well-known web frameworks, with colours, radii, borders and shadows measured from their own component pages. In the app, open Theme Lab and press L2 / R2.
 01 · Acrylic Frosted glass |
 02 · Brutal Neo-brutalism |
 03 · Clay Neumorphism |
 04 · Tiles Flat |
 05 · Gloss Skeuomorphic |
 06 · Classic Bevelled desktop |
 07 · Blueprint Wireframe |
 08 · Hazard Sci-fi console |
 09 · Candy Playful pastel |
 10 · Contrast High contrast |
 11 · Pixel 8-bit pixel art · after NES.css |
 12 · Soft Modern soft · after Mantine |
 13 · Daisy Clean and customisable · after daisyUI |
 14 · Pico Minimal and classless · after Pico.css |
 15 · Enterprise Structured enterprise · after Ant Design |
 16 · Chakra Modern and accessible · after Chakra UI |
 17 · Fresh Modern flat · after Nuxt UI |
 18 · Neutral Neutral modern · after Shoelace |
 19 · Material Material Design · after Propeller |
 20 · Humane Clean and readable · after Semantic UI |
 21 · Standard General purpose · after Bootstrap 5 |
 22 · Pill High-contrast dashboard · after Preline UI |
 23 · Admin Dark admin · after Flowbite |
 24 · Friendly Friendly and soft · after Bulma |
 25 · Crisp Minimal and square · after UIkit |
 26 · Layers Material Design · after Materialize |
 27 · Utility Utilitarian · after Foundation |
 28 · Sketch Hand-drawn paper · after PaperCSS |
 29 · Featherweight Ultra-light · after Milligram |
 30 · Code Developer tools · after Primer |
You need Linux or WSL with clang-18, ninja, make and python3. The
build fetches and verifies everything else.
make deps # one-time: toolchain pieces and the OpenGL SDK, pinned and verified
make # build the PS5 app folder in dist/
make host-snapshots # run every design on this PC and write PNGs to build/snapshots
make test # unit tests (sanitizers on) and tooling testsTo see it on a console, copy dist/<TITLE_ID> to /data/homebrew/ (or
make deploy PS5_HOST=<address>) and start Homebrew UI Lab.
| Button | Does |
|---|---|
| L1 / R1 | Previous / next design |
| Touchpad | Info panel: what the design demonstrates and where its code is |
| Everything else | Belongs to the design on screen; its hint row says what |
- Learn the craft. docs/CRAFT.md is the short version of everything here: the rules, the numbers, and a checklist.
- Build a screen. docs/BUILDING_A_DESIGN.md takes you from an empty file to a design with pictures and tests in an afternoon. You iterate on a PC; a full render takes seconds.
- Assemble from components. docs/COMPONENTS.md: a list, a grid, a form or a dialog is a member variable, three calls per frame and a style struct.
- Style standard widgets. docs/THEMES.md: pick one of thirty themes or define your own as data.
- Take the kit. docs/ADOPTING.md: which directories to copy, and the twenty-line program that draws with them.
| Guide | Covers |
|---|---|
| CRAFT.md | What makes a console UI feel finished: the ten-foot rules, motion, sound, edges, depth, type, and the checklist |
| DESIGNS.md | Every design: clip, pictures, techniques, source |
| THEMES.md | The widget set, the theme tokens, all thirty themes, adding your own |
| COMPONENTS.md | The component library: the five rules, customising, every component with its knobs, slots, events and cues |
| COMPONENT_INDEX.md | One table of every component: class, header, what it is for |
| KIT.md | API reference: shapes, text, backdrops, glass, motion, input, feedback |
| BUILDING_A_DESIGN.md | Step by step, with a complete skeleton, the tour, tests and pitfalls |
| SOUND.md | The cue vocabulary, the two sound sets, levels, adding recordings |
| BACKDROPS.md | The procedural backgrounds and post overlays |
| ARCHITECTURE.md | The layers, one frame, where every file lives |
| ADOPTING.md | Using the kit in your own app |
| PERFORMANCE.md | What keeps a UI at 60 frames per second on the console, and what was measured |
| CONSOLE_VALIDATION.md | The self-driving tour run and the rules for console work |
| docs/platform/ | Building, packaging, deploying, the runtime shim, troubleshooting |
| AGENTS.md | For AI coding agents: where to look for what, the rules, how to add things, console facts, pitfalls (CLAUDE.md points to it) |
Every frame, the active design computes rectangles in a 1920 x 1080 virtual canvas and records shapes into a draw list: rounded and cut-corner rectangles, arcs, lines, shadows, glows, glyphs, images. Clip, transform and opacity are applied as it records. The renderer uploads the frame's instances once and draws each run with one instanced call; a fragment shader evaluates a signed distance function per shape, which is why everything is sharp at 4K without multisampling. A second full-screen shader paints the animated backdrop. When a design wants frosted glass, the frame so far is replayed into a small target and blurred. There is no widget tree, no layout engine and no second renderer: everything you see is OpenGL. ARCHITECTURE.md has the diagrams.
Validated on a PS5 on 2026-10-02 (build 044d909): the app's self-driving
tour ran all 21 designs, the 30 themes and every Component Library page at
3840 x 2160. Every design held 60 frames per second (16.68 ms average, no
frame over 21.0 ms), a sample of the 266 pictures taken on the console matches
the PC renders, and the app closed itself cleanly. Numbers per design are in
docs/PERFORMANCE.md.
Not verified by a person yet: how the sounds and the rumble feel, and navigation with a controller in hand (the tour injects its input).
src/concepts/ the designs, one file each
src/ui/ fonts, glyphs, motion helpers, themes, widgets
src/ui/components the component library
src/gfx/ draw list, GL batch, backdrops, renderer
src/audio/ mixer, cues, sound bank, music
src/core/ input, springs and easing, settings, save files
src/app/ the shell (L1/R1 switcher), the tour, the design interface
src/platform/ PS5 display, controller, audio output, system services
host/ PC renderer for pictures, clips and tests
assets/ baked fonts, sound effects, music
tests/ unit tests (no console or GPU needed)
tools/ build, snapshots, media, docs, console validation
docs/ the guides; docs/media is generated by the app itself
Built with the PS5 Payload SDK by John Törnblom (ps5-payload-dev). Third-party components, authors and licenses are listed in THIRD_PARTY_NOTICES.md.
Copyright © 2026 BlackBearReloaded. Licensed under GPL-3.0-or-later; see LICENSE. Third-party components keep their own licenses.
-
No affiliation. This is an independent homebrew project. It is not affiliated with, endorsed by, or sponsored by Sony Interactive Entertainment. "PlayStation", "PS5" and related marks are trademarks of Sony Interactive Entertainment Inc. The web frameworks named in the theme gallery belong to their authors, who do not endorse this project.
-
No proprietary material. No Sony SDK, firmware, encryption keys or decrypted system modules are included.
-
No warranty. This project is provided "as is", without warranty of any kind, to the extent permitted by law. See sections 15 and 16 of the GPL.
-
Use at your own risk. Running homebrew requires a modified console, which may void its warranty, breach the platform's terms of service, or cause data loss.
-
Legal use only. Use it only with hardware, accounts and content you own. This project does not support or enable piracy.
This project was developed with AI assistance from OpenAI and/or Anthropic tools.