https://framer.com/m/Animation-Planet-VSs98M.js
Io / Enhancements / SolarIso
SolarIso
SolarIso draws a subject as an isometric exploded assembly — hairline contours, hidden-line discipline, indexed repetition, and leader lines out to the frame edge. The whole drawing comes from one JSON payload: turned parts stacked on one axis, or, since engine v2, parts placed at any position and angle with hidden lines removed. A new subject is a new schema rather than new artwork.
Examples
Two payloads, one per engine. The schema printed under each drawing is the whole specimen.
Schema
Four payload shapes. A payload of parts (engine v2) places each part anywhere, at any angle, as a lathe profile, an extruded polygon, a ball or a tube along a route; hidden lines are removed, so parts may overlap. A payload of modules (v1) stacks turned parts on one axis, and every v1 payload renders exactly as before. Both draw the whole assembly and ignore the Scene enum. A scenes book follows whichever Scene is selected, and a title and labels pair rewords the current scene only. The specimen below is a v1 payload.
A layered model as turned parts: breadth as radius, discrete units as teeth, pluggable interfaces as bolts, rule sets as panels, the constraint as a waist, and the single open cone as the output.
{
"title": "Design Language",
"modules": [
{"id":"tokens","z":0,"height":14,"radius":58,"drift":0,"teeth":{"count":68,"depth":5},"knurl":{"count":52},"rings":[0.12,0.5,0.88]},
{"id":"primitives","z":14,"height":52,"radius":46,"drift":74,"teeth":{"count":25,"depth":4},"bolts":{"count":12,"ring":34,"size":2.4},"rings":[0.15,0.85]},
{"id":"patterns","z":66,"height":20,"radius":36,"drift":175,"teeth":{"count":40,"depth":3},"panels":{"count":5,"span":26},"rings":[0.4]},
{"id":"constraints","z":86,"height":16,"radius":13,"drift":228,"knurl":{"count":30},"rings":[0.5]},
{"id":"product","z":102,"height":44,"radius":12,"taper":2.6,"drift":265,"rings":[0.3,0.68]}
],
"labels": [
{"target":-1,"text":"product"},
{"target":-2,"text":"constraints"},
{"target":3,"text":"patterns"},
{"target":2,"text":"primitives"},
{"target":1,"text":"tokens"},
{"target":1,"text":"color · type"}
]
}
Engine v2: parts
A parts payload builds a real object rather than a stack. Every part is a frame times a sweep (lathe, prism, ball or tube), placed with refs at any angle, and nearer parts hide farther ones line by line. Faces carry their own detail: seams, panels, vents, holes and engraved text. Every parts drawing is interactive: hover or tap a part to highlight it and read its note, drag a knob marked turn, and with Take apart on, a click or Space opens the drift part by part and closes it again.
The solariso-schema skill’s espresso example: 14 parts with seams, a panel, vents, engraved text, a pressure gauge, eight notes and a knob to turn. Take apart is set to Click / Space.
{
"title": "Espresso machine",
"parts": [
{"id": "foot-a", "at": [-50, -38, 0], "lathe": [[0, 6], [4, 6], [4, 4.5], [8, 4.5]]},
{"id": "foot-b", "at": [50, -38, 0], "lathe": [[0, 6], [4, 6], [4, 4.5], [8, 4.5]]},
{"id": "foot-c", "at": [-50, 38, 0], "lathe": [[0, 6], [4, 6], [4, 4.5], [8, 4.5]]},
{"id": "foot-d", "at": [50, 38, 0], "lathe": [[0, 6], [4, 6], [4, 4.5], [8, 4.5]]},
{"id": "housing", "at": [0, 0, 8], "note": "boiler, pump and heat exchanger live in here", "prism": {"poly": [[-60, -46], [60, -46], [60, 46], [-60, 46]], "s": [0, 128]}, "details": {"seams": [16, 112], "panels": [{"face": 1, "rect": [10, 24, 82, 104], "r": 4}], "slots": [{"face": 2, "at": [18, 30], "count": 9, "pitch": 9, "length": 30, "width": 3.2}], "text": [{"face": 1, "at": [46, 120], "value": "LEVA 1", "size": 6.5}]}},
{"id": "cup-rail", "at": [0, 0, 136], "drift": [0, 0, 40], "note": "warms the cups with boiler heat", "prism": {"poly": [[-56, -42], [56, -42], [56, 42], [-56, 42]], "s": [0, 3]}, "details": {"slots": [{"face": "top", "at": [-44, 0], "count": 9, "pitch": 11, "length": 64, "width": 3}]}},
{"id": "drip-tray", "at": [60, 0, 8], "drift": [36, 0, 0], "note": "catches overflow under the group", "prism": {"poly": [[0, -38], [26, -38], [26, 38], [0, 38]], "s": [0, 7]}, "details": {"slots": [{"face": "top", "at": [6, 0], "count": 4, "pitch": 5, "length": 64, "width": 2}]}},
{"id": "group-head", "at": [72, 0, 100], "axis": [0, 0, -1], "note": "9 bar at 93 \u00b0C through the puck", "lathe": [[0, 15], [6, 15], [6, 12], [14, 12]], "details": {"bolts": {"s": 6, "ring": 13.5, "count": 6, "size": 0.9}}},
{"id": "portafilter", "at": [72, 0, 86], "axis": [0, 0, -1], "drift": [0, 0, -26], "note": "18 g of coffee, tamped", "lathe": [[0, 12.5], [8, 12], [11, 9, 1], [14, 5]]},
{"id": "handle", "at": {"part": "portafilter", "s": 5, "offset": [8, 0, 0]}, "toward": [118, 0, 74], "drift": [0, 0, -26], "lathe": [[0, 3], [8, 3.4], [36, 4.2, 1], [40, 3]]},
{"id": "gauge", "at": [60, 24, 112], "axis": [1, 0, 0], "note": "boiler pressure, 1.2 bar at rest", "lathe": [[0, 11], [3, 11], [3, 9.6], [5, 9.6]], "details": {"rings": [1.5], "text": [{"face": "end", "at": [0, 4.5], "value": "BAR", "size": 3}, {"face": "end", "at": [-5.5, -1.5], "value": "0", "size": 3}, {"face": "end", "at": [5.5, -1.5], "value": "2", "size": 3}]}},
{"id": "steam-knob", "at": [24, 46, 112], "axis": [0, 1, 0], "turn": true, "note": "turn to open the steam valve", "lathe": [[0, 4], [3, 4], [3, 9], [9, 9]], "details": {"ribs": {"count": 24, "s0": 3.6, "s1": 8.4}}},
{"id": "wand-joint", "at": [46, 50, 104], "ball": 3.5},
{"id": "steam-wand", "tube": {"path": [{"part": "wand-joint"}, [56, 58, 92], [60, 62, 70], [60, 62, 40]], "r": 1.6}, "note": "dry steam at 1.2 bar"}
],
"labels": [
{"target": "gauge", "side": "R", "text": "pressure"},
{"target": "group-head", "side": "R", "text": "group head"},
{"target": "handle", "side": "R", "text": "portafilter"},
{"target": "steam-knob", "side": "L", "text": "steam valve"},
{"target": "housing", "side": "L", "text": "boiler body"},
{"target": "drip-tray", "side": "L", "text": "drip tray"}
]
}
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for SolarIso
A layered model should read as one ordered stack.
A celestial body should be one globe, not a bolted shell.
The wording on an existing scene needs to change.
A diagram must stay in the system’s line-art vocabulary.
Parts sit at angles, such as arms, frames or pipes, and must hide one another correctly.
Readers should explore the object: hover a part to read what it does, or take it apart.
Reach for something else
The relation is abstract, a flow or a matrix that reads better as a diagram than as machined parts.
The subject is one of the built-in orbital scenes, which are hard-coded.
The page needs photography or a screenshot rather than a line drawing.
Io — Enhancements
The schemas above are the whole specimens. Colour, type and radius resolve from the project theme tokens.