Same shared card
The padding is not a diagram. It is the component's computed padding.
Start with color
Theme
One palette, every component.
Closed and disabled stay monochrome.
Fine tune theme
Treatment and palette are independent. Product finishes stay host-owned.
Individual colors
Edits preview in this browser only.
Pixelarticons
1,036 free icons on a 24 × 24 grid. Browse, choose a style, and copy an individual import or SVG. Icons follow your theme.
Pixelarticons by Gerrit Halfmann. MIT license · Official source ↗
Foundations / Spacing
Space with a purpose
These controls override real semantic aliases. Switch palettes or treatments: spacing stays independent. Pixel artwork and 44px touch targets keep their calibration.
Controls / Navigation
Choose a section.
A native card button, shared dithered frost and a separate label fade. The host owns which details are shown.
Material selected. This example changes only its own details.
Controls / Native Factories
Real controls, shared ownership.
Buttons, fields, choices and ranges are created by the package. The host receives ordinary native events and keeps the application state. Silent updates never imitate a user gesture.
0 native input/change events.
Controls / Interactions
Keyboard behavior belongs here.
The shared library owns tab navigation, menus and modal focus. Host callbacks choose what the application does.
Clean selected.
Use Arrow keys, Home/End and Escape.
Materials / Frost
Frosted surface
A quiet, ordered-dither material on a square 3px lattice. No inset lens, no blur, and no text or product state. Add a fade only where you need one.
Uses the global palette and optional tint. Paused by default.
Effects / Gradient Fade
Let the title breathe.
A separate fade protects content while letting the material show through. It works over frost, an image, or a plain surface. The text itself never fades.
Material + EffectAstral clean
This example measures its own title. Applications supply their own stop positions and retain layout ownership.
02 / Navigation
Tone tabs
The selected pixel-underline default. Palette-colored dither rises from the line without covering the labels. Arrow keys, Home and End switch views.
AMP / Vectorman Glass
03 / Surfaces
Preset card
The same glass, type and accent work at device and desktop widths.
Astral CleanReady
Wide, luminous clean with a trail of chorus and space.
04 / Input
Text field
Readable on the opaque plate and easy to identify on touch screens.
05 / Switching
Effect toggle
Native checked state with a physical pixel switch face.
06 / Level
Parameter dial
Native range control supports arrow keys. The display follows the value.
07 / Material Studies
Classic knob controls
Seven source-backed moving indicators. The original angled image has a baked marker and remains a reference.
08 / Level
Pixel faders
Horizontal and vertical range controls use the original cast or steel thumb. Arrow, Home and End keys work natively.
09 / Selection
Previous / next rocker
A shared cast plate with separate 44px native buttons.
2 / 5
Use the buttons or keyboard to change the selection.
11 / Bypass
Pedal footswitch
Original pedal art with a native button over its switch and an equivalent status readout.
12 / Pedal Finishes
Pedal family
One original sprite, 37 source finish assignments. Only enamel pixels change; each card keeps its print, Edit control, footswitch and LED.
Distortion on
13 / Directory
Module entries
Retained Tonewedge/Pi catalog, with routed and unavailable entries shown honestly. The host owns navigation.
Choose a module
14 / Picker
Effect picker
Source-style sprite cards distinguish available, already added and separate-model states.
Select an available effect
15 / Library
Guitar list
Selected card, description and revision remain readable; list data and recall stay host-owned.
Astral Clean selected
16 / Foundation
Asset and capture card
A reusable shell with status and action slots. File references remain the host's responsibility.
Ready
17 / Choice
Image and palette tiles
Native radio groups for physical part and finish choices. Selection stays visible without relying on color alone.
18 / Display
Glass readout and meter
Readable measured level, native meter semantics and a host-controlled test value.
Output level42%42%
19 / Action
Dialog, menu and carousel
Native disclosure and modal behaviors with a compact item selector.
More actions
01 / 03 · Astral Clean
20 / Motion
Dither visualizer
Six theme-matched pixel scenes. The selected section shares your scene at a quieter pace. Pause here or turn off Subtle motion above. This demo never requests microphone access.
Dither Flow · 30% simulated energy
Glass pixel field
Shape the light with real controls. Motion is paused until you play it.
Fig. 01 / Dither FlowSpectral / Ordered 4 × 4
A softer light.
A sharper edge.
Optical MixLight, In Discrete Steps
Static FrameOne Field / One Pixel Grid24 FPS Max
Adjust material
Paused by default. No audio connection.
Build with Bildpunkt
Use the library
Framework-free controls and materials. Pin a reviewed version of @audiohays/tonewedge-ui or vendor the generated files. Load tokens.css and components.css, then the control and material styles you use. Load treatments.css after the base styles, and section-cards.css last.
import { createAppearance } from '@audiohays/tonewedge-ui/appearance';Applications receive explicit upgrades. Product and audio state stay with the host.
Explore the API
Glass Pixel 0.3.0-dev.13 · Development build. The existing read-only MCP catalog remains available.