@arraypress/covers 0.0.0-stage → 1.1.0

package/recipes/contour.json

@@ -0,0 +1,109 @@
+{
+  "$schema": "../schema/recipe.schema.json",
+  "name": "contour",
+  "description": "Topographic isolines of seeded noise on a flat field: thin even lines, an index contour every fifth line, one line in the accent.",
+  "params": {
+    "levels": null
+  },
+  "vars": {
+    "field": {
+      "mix": [
+        "@bg",
+        "@accent",
+        {
+          "if": {
+            "mode": "dark"
+          },
+          "then": 0.08,
+          "else": 0.05
+        }
+      ]
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "solid",
+      "color": "$field"
+    },
+    {
+      "id": "contour",
+      "type": "contour",
+      "levels": {
+        "if": "levels",
+        "then": "{levels}",
+        "else": {
+          "pick": [
+            14,
+            18,
+            22,
+            26,
+            30
+          ]
+        }
+      },
+      "color": "@text",
+      "opacity": 0.42,
+      "index": 5,
+      "scale": {
+        "range": [
+          1.8,
+          3.2
+        ]
+      }
+    },
+    {
+      "id": "grain",
+      "type": "grain",
+      "amount": 0.035
+    },
+    {
+      "id": "title",
+      "type": "text",
+      "when": "title",
+      "content": "{title}",
+      "anchor": "bottom-left",
+      "weight": 500,
+      "size": {
+        "mul": [
+          "@u",
+          0.062
+        ]
+      },
+      "minSize": {
+        "mul": [
+          "@u",
+          0.046
+        ]
+      },
+      "lineHeight": 1.08,
+      "letterSpacing": -0.025,
+      "maxLines": 3,
+      "label": {
+        "if": "label",
+        "then": {
+          "color": "@text",
+          "content": "{label}"
+        }
+      },
+      "background": {
+        "color": "$field",
+        "radius": 0,
+        "padding": [
+          {
+            "mul": [
+              "@u",
+              0.03
+            ]
+          },
+          {
+            "mul": [
+              "@u",
+              0.035
+            ]
+          }
+        ]
+      }
+    }
+  ]
+}

package/recipes/cutout.json

@@ -0,0 +1,191 @@
+{
+  "$schema": "../schema/recipe.schema.json",
+  "name": "cutout",
+  "description": "A flat matte field (or a hand-cut panel on the page colour) with cut-paper shapes and a hand-drawn icon or node graph.",
+  "params": {
+    "panel": false,
+    "shapes": null,
+    "graph": false,
+    "stroke": null
+  },
+  "vars": {
+    "field": {
+      "tone": [
+        "@accent",
+        {
+          "l": [
+            0.52,
+            0.64
+          ],
+          "c": [
+            0.05,
+            0.11
+          ]
+        }
+      ]
+    },
+    "count": {
+      "if": {
+        "shapes": null
+      },
+      "then": {
+        "if": "panel",
+        "then": 0,
+        "else": 3
+      },
+      "else": "{shapes}"
+    },
+    "ink": {
+      "if": {
+        "stroke": "light"
+      },
+      "then": "#faf9f5",
+      "else": {
+        "if": {
+          "stroke": "dark"
+        },
+        "then": "#141413",
+        "else": {
+          "if": "panel",
+          "then": "#faf9f5",
+          "else": {
+            "if": "graph",
+            "then": "#141413",
+            "else": {
+              "if": {
+                "shapes": 0
+              },
+              "then": "#faf9f5",
+              "else": "#141413"
+            }
+          }
+        }
+      }
+    },
+    "type": {
+      "readable": [
+        {
+          "if": "panel",
+          "then": "@bg",
+          "else": "$field"
+        },
+        4.5,
+        "white"
+      ]
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "solid",
+      "color": {
+        "if": "panel",
+        "then": "@bg",
+        "else": "$field"
+      }
+    },
+    {
+      "id": "panel",
+      "type": "paper",
+      "when": "panel",
+      "items": [
+        {
+          "kind": "rect",
+          "x": 0.5,
+          "y": 0.5,
+          "width": {
+            "mul": [
+              "@width",
+              0.64
+            ]
+          },
+          "height": {
+            "mul": [
+              "@height",
+              0.6
+            ]
+          }
+        }
+      ],
+      "region": {
+        "x": 0,
+        "y": 0,
+        "width": 1,
+        "height": 1
+      },
+      "color": "$field",
+      "wobble": 0.3
+    },
+    {
+      "id": "shapes",
+      "type": "paper",
+      "count": "$count",
+      "region": {
+        "x": 0.24,
+        "y": 0.22,
+        "width": 0.52,
+        "height": 0.56
+      }
+    },
+    {
+      "id": "icon",
+      "type": "scribble",
+      "when": {
+        "not": "graph"
+      },
+      "icon": "{icon}",
+      "color": "$ink",
+      "size": {
+        "if": "panel",
+        "then": "34vmin",
+        "else": "44vmin"
+      },
+      "stroke": "1.6vmin"
+    },
+    {
+      "id": "graph",
+      "type": "scribble",
+      "when": "graph",
+      "graph": true,
+      "color": "$ink",
+      "size": "52vmin",
+      "stroke": "1.7vmin"
+    },
+    {
+      "id": "grain",
+      "type": "grain",
+      "amount": 0.035
+    },
+    {
+      "id": "title",
+      "type": "text",
+      "when": "title",
+      "content": "{title}",
+      "anchor": "bottom-left",
+      "weight": 500,
+      "size": {
+        "mul": [
+          "@u",
+          0.066
+        ]
+      },
+      "minSize": {
+        "mul": [
+          "@u",
+          0.048
+        ]
+      },
+      "lineHeight": 1.08,
+      "letterSpacing": -0.025,
+      "maxLines": 3,
+      "label": {
+        "if": "label",
+        "then": {
+          "color": "$type",
+          "content": "{label}"
+        }
+      },
+      "color": "$type"
+    }
+  ]
+}

package/recipes/diagram.json

@@ -0,0 +1,92 @@
+{
+  "$schema": "../schema/recipe.schema.json",
+  "name": "diagram",
+  "description": "White line-art over the gradient field: one icon, or nodes in outlined tiles joined by arrows, with a dotted grid that breaks around them (the engineering-blog look).",
+  "params": {
+    "nodes": null,
+    "layout": null,
+    "arrows": null
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "solid"
+    },
+    {
+      "id": "mesh",
+      "type": "mesh",
+      "count": 4,
+      "blur": "11vmax",
+      "size": [
+        0.45,
+        0.8
+      ],
+      "streak": 1.8,
+      "tone": {
+        "l": [
+          0.4,
+          0.6
+        ],
+        "c": [
+          0.14,
+          0.24
+        ]
+      },
+      "fold": {
+        "pick": [
+          false,
+          false,
+          {
+            "sheen": 0
+          }
+        ]
+      },
+      "hueSpan": 60
+    },
+    {
+      "id": "diagram",
+      "type": "diagram",
+      "icon": "{icon}",
+      "nodes": "{nodes}",
+      "layout": "{layout}",
+      "arrows": "{arrows}",
+      "grid": true
+    },
+    {
+      "id": "grain",
+      "type": "grain",
+      "amount": 0.07
+    },
+    {
+      "id": "title",
+      "type": "text",
+      "when": "title",
+      "content": "{title}",
+      "anchor": "bottom-left",
+      "weight": 500,
+      "size": {
+        "mul": [
+          "@u",
+          0.066
+        ]
+      },
+      "minSize": {
+        "mul": [
+          "@u",
+          0.048
+        ]
+      },
+      "lineHeight": 1.08,
+      "letterSpacing": -0.025,
+      "maxLines": 3,
+      "label": {
+        "if": "label",
+        "then": {
+          "color": "#ffffff",
+          "content": "{label}"
+        }
+      },
+      "color": "#ffffff"
+    }
+  ]
+}

package/recipes/dither.json

@@ -0,0 +1,170 @@
+{
+  "$schema": "../schema/recipe.schema.json",
+  "name": "dither",
+  "description": "A soft field (noise, a gradient, or a lit sphere / arch / circle) rendered 1-bit at a visible pixel size: Bayer 4\u00d74 / 8\u00d78 or blue-ish noise, in two colours or three.",
+  "params": {
+    "matrix": "bayer4",
+    "cell": "0.9vmin",
+    "source": null,
+    "shape": null,
+    "three": false
+  },
+  "vars": {
+    "ink": {
+      "tone": [
+        "@accent",
+        {
+          "if": {
+            "mode": "dark"
+          },
+          "then": {
+            "l": [
+              0.62,
+              0.85
+            ],
+            "c": [
+              0.1,
+              0.22
+            ]
+          },
+          "else": {
+            "l": [
+              0.3,
+              0.55
+            ],
+            "c": [
+              0.1,
+              0.24
+            ]
+          }
+        }
+      ]
+    },
+    "colors": {
+      "if": "three",
+      "then": [
+        "@bg",
+        {
+          "tone": [
+            "@colors.1",
+            {
+              "l": [
+                0.55,
+                0.75
+              ],
+              "c": [
+                0.1,
+                0.2
+              ]
+            }
+          ]
+        },
+        "$ink"
+      ],
+      "else": [
+        "@bg",
+        "$ink"
+      ]
+    }
+  },
+  "output": {
+    "lossless": true
+  },
+  "layers": [
+    {
+      "id": "dither",
+      "type": "dither",
+      "colors": "$colors",
+      "source": {
+        "if": "source",
+        "then": "{source}",
+        "else": {
+          "pick": [
+            "field",
+            "linear",
+            "radial"
+          ]
+        }
+      },
+      "shape": {
+        "if": "shape",
+        "then": "{shape}",
+        "else": {
+          "pick": [
+            "sphere",
+            "none",
+            "circle",
+            "arch",
+            "sphere"
+          ]
+        }
+      },
+      "matrix": "{matrix}",
+      "cell": "{cell}",
+      "center": {
+        "x": {
+          "range": [
+            0.4,
+            0.6
+          ]
+        },
+        "y": {
+          "range": [
+            0.38,
+            0.55
+          ]
+        }
+      },
+      "size": "28vmin"
+    },
+    {
+      "id": "title",
+      "type": "text",
+      "when": "title",
+      "content": "{title}",
+      "anchor": "bottom-left",
+      "weight": 500,
+      "size": {
+        "mul": [
+          "@u",
+          0.062
+        ]
+      },
+      "minSize": {
+        "mul": [
+          "@u",
+          0.046
+        ]
+      },
+      "lineHeight": 1.08,
+      "letterSpacing": -0.025,
+      "maxLines": 3,
+      "label": {
+        "if": "label",
+        "then": {
+          "color": "@text",
+          "content": "{label}"
+        }
+      },
+      "color": "@text",
+      "background": {
+        "color": "@bg",
+        "radius": 0,
+        "padding": [
+          {
+            "mul": [
+              "@u",
+              0.03
+            ]
+          },
+          {
+            "mul": [
+              "@u",
+              0.035
+            ]
+          }
+        ]
+      }
+    }
+  ]
+}

package/recipes/duotone.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "../schema/recipe.schema.json",
+  "name": "duotone",
+  "description": "A photo mapped to the palette's shadow and highlight colours, with grain, and a title over a scrim when given.",
+  "requires": [
+    "image"
+  ],
+  "vars": {
+    "shadow": {
+      "if": {
+        "mode": "dark"
+      },
+      "then": "@bg",
+      "else": "@text"
+    }
+  },
+  "layers": [
+    {
+      "id": "image",
+      "type": "image",
+      "src": "{image}",
+      "duotone": true
+    },
+    {
+      "id": "scrim",
+      "type": "linear",
+      "when": "title",
+      "angle": 180,
+      "colors": [
+        "$shadow",
+        "$shadow"
+      ],
+      "opacities": [
+        0,
+        0.62
+      ]
+    },
+    {
+      "id": "grain",
+      "type": "grain",
+      "amount": 0.07
+    },
+    {
+      "id": "title",
+      "type": "text",
+      "when": "title",
+      "content": "{title}",
+      "anchor": "bottom-left",
+      "weight": 500,
+      "size": {
+        "mul": [
+          "@u",
+          0.066
+        ]
+      },
+      "minSize": {
+        "mul": [
+          "@u",
+          0.048
+        ]
+      },
+      "lineHeight": 1.08,
+      "letterSpacing": -0.025,
+      "maxLines": 3,
+      "label": {
+        "if": "label",
+        "then": {
+          "color": "#e9e9e9",
+          "content": "{label}"
+        }
+      },
+      "color": "#ffffff"
+    }
+  ]
+}