ps5-homebrew-ui

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

Why this exists

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.

What is in the box

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.

The designs

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 themes

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

Quick start

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 tests

To 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

Use it

• 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.

Documentation

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)

How it works, in one paragraph

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 hardware

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).

Repository layout

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

Credits

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.

License

Copyright © 2026 BlackBearReloaded. Licensed under GPL-3.0-or-later; see LICENSE. Third-party components keep their own licenses.

Disclaimer

• 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.

AI assistance

This project was developed with AI assistance from OpenAI and/or Anthropic tools.