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, so a new subject is a new schema rather than new artwork.
Examples
One payload, one drawing. The schema below is the specimen.
Schema
Three payload shapes. A payload of modules, labels and title draws the whole assembly and ignores the Scene enum. A scenes book follows whichever Scene is selected. A title and labels pair rewords the current scene only. Part ids are scene-specific, so wording written for one assembly matches nothing on another — target also takes a position, which is portable.
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”}]}
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.
Reach for something else
The model is a cycle, a branch or a matrix — this grammar is one axis only.
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 schema above is the whole specimen. Colour, type and radius resolve from the project theme tokens.