# Examples

> Whole screens built with pixi-silk: five design sheets rebuilt 1:1, gallery scenes and charts.

Source: https://pixi-silk.schmooky.dev/docs/examples/

Complete scenes that combine the features. They are site code, not library code, so copy what you need.

## 01. Showcase

Five design sheets rebuilt pixel for pixel, three dashboard scenes and four light scenes, all drawn with pixi-silk. Open any of them in Studio.

Guide: https://pixi-silk.schmooky.dev/docs/showcase/

Experiments:

- [Health cards (sheet 1)](https://pixi-silk.schmooky.dev/lab/30-sheet-health/): Ten Health cards over the first reference sheet. Drag the compare slider to check them against it.
- [Complications (sheet 2)](https://pixi-silk.schmooky.dev/lab/31-sheet-complications/): Twenty watch complications from the second reference sheet, laid out at its exact pixels.
- [Fitness & home (sheet 3)](https://pixi-silk.schmooky.dev/lab/32-sheet-fitness/): Twenty more widgets: calendar week, hike map, sound levels, elevation, water, wind and a boarding pass.
- [Live Activities (sheet 4)](https://pixi-silk.schmooky.dev/lab/33-sheet-live-activities/): Black cards with continuous corners and measured soft shadows on a light sheet, cropped like the reference.
- [Watch widgets (sheet 5)](https://pixi-silk.schmooky.dev/lab/34-sheet-watch/): Cycling, 2FA, now playing, crosshair, garage, AirPods compass, barometer and moon phase widgets.
- [Widget viewer](https://pixi-silk.schmooky.dev/lab/35-widget-viewer/): Pick any of the 81 widgets to see it large next to its crop of the reference, or laid over it.
- [Pills & waveforms](https://pixi-silk.schmooky.dev/lab/17-pills-waves/): Heart-rate pills and a live pressure waveform that share one gradient.
- [Health cards](https://pixi-silk.schmooky.dev/lab/19-health-cards/): Ten Apple Health style cards with area, bar, candle and range charts.
- [Sleep](https://pixi-silk.schmooky.dev/lab/22-sleep/): Sleep stage blocks with transitions, a night strip and a marching dotted arc.
- [Timers](https://pixi-silk.schmooky.dev/lab/23-timers/): Espresso ticks with analytic motion blur, run cadence bars and their controls.
- [Journeys](https://pixi-silk.schmooky.dev/lab/24-journeys/): Flight progress, train stations, a delivery route, a ride pickup and a race track.
- [Sky](https://pixi-silk.schmooky.dev/lab/25-sky/): Sunset pills with a glowing sun and stars, a golden-hour curve and a daylight bar.
- [Dashboard](https://pixi-silk.schmooky.dev/lab/26-dashboard/): Thirty live widgets in a masonry layout. Scroll to see the frame-rate independent smoothing.

## 02. Charts

Build area and line charts with monotone smoothing that never overshoots, fading gradient fills, dashed guides, bars and dots in SilkGraphics.

Guide: https://pixi-silk.schmooky.dev/docs/charts/

Experiments:

- [Area chart](https://pixi-silk.schmooky.dev/lab/15-area-chart/): A smoothed series with a gradient fill, dotted guides, a dashed forecast and a NOW marker. Values ease on update.
- [Bar charts](https://pixi-silk.schmooky.dev/lab/16-bar-charts/): Slim bars split into past and future, and chunky stepped bars that grow in.
- [Ranges & levels](https://pixi-silk.schmooky.dev/lab/18-ranges/): Progress bars with markers, range segments and signal bars, at several sizes and pixel ratios.
- [Gauges](https://pixi-silk.schmooky.dev/lab/20-gauges/): An ISS flyover, a car battery, a heading dial with ticks, a barometer, a UV week and a dimmer.
- [Sparklines](https://pixi-silk.schmooky.dev/lab/21-sparklines/): Strokes coloured by value, gradient markers and threshold stops. Move the pointer over a line for the crosshair.