Architecture

Surface

<ax-surface> is the box every visual effect draws on. It owns the shape, the tilt and one frame scheduler for the whole page, and it draws its content with layers. Every layer of a surface paints on the same outline, in the same frame. The shape comes from Shape, and its properties are read through Typed OM.

Surfaces only work while they are visible, read their styles only after something changed, and lower the frame rate of far and small surfaces when the page starts dropping frames.

Layers

A layer is an object that draws one thing. It is registered under a name, and a surface picks its layers with the layers attribute:

<ax-surface layers="elevation fill reveal">

Layers are drawn in the order you list them, and your content is always on top. fill and focus come with Surface; Elevation, Acrylic and Reveal Highlight add their own, and you can register one yourself. Pressure's tilt is the one Surface already owns.

Components

Tile, Tile Group, Navigation and Scrollbar depend on Surface and are styled the way Surface is: with CSS custom properties (--ax-radius, --ax-fill-color, --tile-rows, --ax-scrollbar-thickness), and, for the pieces inside a component, with ::part(). The Scrollbar names every piece of its bars as a part: thumb, thumb-hover, scrollbar-vertical and the others. Scroll depends on no other package.

Kits

The Scrollbar takes its parts by dependency injection. Each kind of part (thumb, button, track, track piece, corner, marker, card) has a contract class that draws nothing, and a default class with the Windows 8 look. defineScrollbarKit() registers your classes under a name, and kit="name" on an <ax-scroll-view> builds the bars with them. The Windows XP scrollbar ships as such a kit.

Components

What an app uses directly.

• Tile: Tiles with one action each, and the press felt before the action runs. Depends on Surface.
• Tile Group: Windows 8 tile groups: layout, dragging and reordering of tiles. Depends on Surface, Shape, Typed OM.
• Navigation: Horizontal or vertical navigation with a moving indicator. Depends on Surface, Shape, Typed OM.
• Scroll: The horizontal scroller: the wheel scrolls sideways, with a glide. Depends on nothing.
• Scrollbar: Scroll views and page scrollbars, every part styled with ::part() or replaced by a kit. Depends on Elevation, Scroll, Surface, Shape, Typed OM.

Effects

What a Surface draws on its shape: shadow, glass, light and tilt.

• Elevation: A shadow that follows the shape. Depends on Surface, Shape, Typed OM.
• Acrylic: The acrylic texture: blur, tint and noise on the shape. Depends on Surface, Shape, Typed OM.
• Reveal Highlight: The reveal light that follows the pointer along the border and over the surface. Depends on Surface, Shape, Typed OM.
• Pressure: The tilt effect: the element leans away from the point you press and sinks a little. Depends on Surface, Shape, Typed OM.

Surface

One shape, one tilt and one frame scheduler, with a registry of layers.

• Surface: The Surface element: one shape, one tilt and one frame scheduler for every visual layer, with a layer registry. Depends on Shape, Typed OM.

Properties & geometry

Typed custom properties, and the shapes everything is drawn on.

• Typed OM: Typed reads and change detection for CSS custom properties. Depends on nothing.
• Shape: Rectangle-plus-decoration shapes, drawn the same way on SVG and Canvas. Depends on nothing.