18 figures· all made with the skill

Diorama SVG

Every example in the skill, live. Each is the format a new figure is written in: one file, a scene and its motion. Hover what moves, switch the theme, pause for the still frame, open the source.

Heroes

the top of a landing page or a README
Fig 1 · Alder Springshero · toyHover a house, the tower, a car or the tram.rest
Alder SpringsSix blocks of houses, shops, a park and a tower; cars, a bus and a tram keep the streets busy and the crane turns.herotoy131 lines ↗
Fig 2 · Pier Ninehero · toyHover the ship, the crane, the tractor or the tug; tap the crane to start a lift now.rest
Pier NineA crane lifts containers off the ship one by one, a tractor carries them round the quay, a tug circles the basin.herotoy121 lines ↗
Fig 3 · Powderhero · toyHover a chalet, the hotel, the lift station, the ski school or the shuttle.rest
PowderChairs climb the slope, two skiers ride up and carve back down, a ski class snakes the nursery and the shuttle waits at the lift.herotoy180 lines ↗
Fig 4 · Gull Rockhero · toyHover the boat, the lighthouse or the house.rest
Gull RockA boat circles the island and ties up at the pier, the lamp turns, gulls cross, the waves breathe.herotoy101 lines ↗
Fig 5 · Hollow Farmhero · toyHover the tractor, the barn, the silo or the windmill.rest
Hollow FarmA tractor laps the fields and stops at the barn, the windmill turns, sheep graze, the farmer walks the lane.herotoy73 lines ↗
Fig 6 · Northgate DChero · toyHover the truck, the forklift or the building.rest
Northgate DCA truck circles the yard and docks, a forklift carries pallets to the racks, and the yard keeps its own time.herotoy149 lines ↗

Cards

beside text in docs or a post
Fig 7 · Corner coffeecard · softHover the cart, the table or the cat.rest
Corner coffeeA barista pulls shots, a customer comes for a cup and goes, a cat minds the chair.cardsoft78 lines ↗
Fig 8 · Breakfastcard · toyHover the fridge to open it; tap the toaster and the toast pops now.rest
BreakfastThe kettle steams and the toaster pops now and then; a cat minds the stool.cardtoy84 lines ↗
Fig 9 · Launchpadcard · nightHover the rocket to see its stages; tap the control room to launch now.rest
LaunchpadA rocket waits on its pad under floodlights; the arm swings away and it launches, on the clock or on your call.cardnight80 lines ↗
Fig 10 · Server roomcard · monoHover a rack and all its lights turn on.rest
Server roomThree racks blink in their own rhythms, the fan turns, a technician walks the aisle with a laptop.cardmono52 lines ↗
Fig 11 · Build queuecard · monoHover a box and it lifts; tap the gate to hold the belt, tap again to run.rest
Build queueJobs ride the belt one at a time through the scanner and under the stamp; the belt holds when you ask.cardmono70 lines ↗
Fig 12 · Pallet rackcard · monoHover a level and the forks go to it.rest
Pallet rackA three-level rack with nothing on it and a forklift waiting. Hover a level and the forks go to it.cardmono66 lines ↗

Minis

a small spot in an app or a page: an empty state, a feature, a 404
Fig 13 · Mailboxmini · toyrest
MailboxAn open letterbox with nothing inside. The flag lifts now and then to check, and settles again.minitoy46 lines ↗
Fig 14 · Pot and canmini · linerest
Pot and canA pot of soil with nothing growing and a watering can that lifts and waters it now and then.miniline50 lines ↗
Fig 15 · Observatorymini · linerest
ObservatoryAn observatory whose dome turns; now and then the telescope lifts, finds nothing yet, and settles.miniline43 lines ↗
Fig 16 · Deskmini · linerest
DeskA desk with a lamp, an empty tray and a mug; the chair swivels now and then and the mug steams.miniline37 lines ↗
Fig 17 · Turntablemini · linerest
TurntableA record player with nothing on it and an empty crate; now and then the arm swings over, finds no record and goes back.miniline70 lines ↗
Fig 18 · Nothing in stockmini · printrest
Nothing in stockA vending machine with every coil bare; now and then a coil turns and nothing drops into the tray.miniprint70 lines ↗

Want to add one? Each example is a file in examples/; write it with the skill and open a pull request.