Public pages

Showcase

A still life of the app for public pages: real components on fixed sample data, set on layers at different depths over the Backdrop glow.

Preview

Props

Guidelines

A still life of the app for public pages: real components on fixed sample data, set on layers at different depths over the Backdrop glow. It shows what Makado does instead of telling it. Never a screenshot.

Provide: label, one sentence that says what the picture shows, for screen readers. Then ShowcaseLayers:

• slot: 'back': the app window, usually a ShowcaseWindow (a glass rail with a SideNav beside one solid panel) with surface: 'none' and phone: false. It is cut at 600px; the board and the front card cover the cut.
• slot: 'float': a glass toolbar (surface: 'glass'), for example a SegmentedControl and a New project Button. It floats between the window and the board, so the glass blurs real content.
• slot: 'middle': a solid panel, for example the projects board.
• slot: 'front-start' and slot: 'front-end': small solid cards hanging off the corners, for example a project's Stepper and a WinsCard (surface: 'none', it brings its own surface).

Behavior:

• The whole picture is inert and hidden from screen readers apart from its label, so keyboard focus skips it and nothing in it can be clicked. Pass readOnly to the components anyway.
• Depth: front layers lift with bigger shadows. On load the layers settle in, back to front. On scroll the front layers drift up faster than the back ones (a CSS scroll timeline where the browser has one). With reduced motion nothing moves. No JavaScript is involved.
• Glass only on the navigation pieces (the rail and the float toolbar); content panels stay solid.
• Phones: one column, the back window left out, each layer tucked a little under the one before and offset left and right. No drift.
• Use fixed dates (today, month) so the server and the browser draw the same picture.