@vectoriox/iox-ui 5.77.0 → 5.79.0

package/src/generation-core/site-spec.generated.ts

@@ -12,7 +12,11 @@ export const SPEC_SITE_PLAN_SHAPE = {
     "contentTypes": "contentType[]",
     "dataSources": "(cmsDataSource | relativeDataSource)[] — merged by alias into the org library",
     "pages": "page[]",
-    "globals": "globals"
+    "globals": "globals",
+    "film?": "film — the owner's film as pictures (SC6b), set by the build and placed by placeFilm; never a model's"
+  },
+  "film": {
+    "sequence": "object — a media-core FrameSequence: where the numbered pictures live, how many, their size"
   },
   "sourceTemplate": {
     "kind": "'template'",
@@ -417,6 +421,719 @@ export const SPEC_SITE_ARCHETYPES = {
 } as const;
 
 export const SPEC_SITE_PATTERNS = {
+  "hero.scene-depth": {
+    "family": "hero",
+    "scene": true,
+    "label": "Hero — a picture that opens as you scroll",
+    "intent": "One strong picture of the work that opens and settles while the page holds still — a first screen that moves, for a studio with a picture worth it.",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "scheme": "inverse",
+      "role": "scene",
+      "lay": {
+        "position": "relative",
+        "display": "block",
+        "width": "100%",
+        "height": "300vh",
+        "padding": "0px"
+      },
+      "c": [
+        {
+          "t": "Container",
+          "role": "scene.stage",
+          "lay": {
+            "position": "sticky",
+            "top": "0px",
+            "display": "block",
+            "width": "100%",
+            "height": "100svh",
+            "overflow": "hidden",
+            "padding": "0px"
+          },
+          "c": [
+            {
+              "t": "Image",
+              "es": "media",
+              "ph": "image",
+              "lay": {
+                "position": "absolute",
+                "top": "0px",
+                "left": "0px",
+                "width": "100%",
+                "height": "100%",
+                "aspectRatio": "auto",
+                "borderRadius": "0px",
+                "objectFit": "cover"
+              },
+              "tracks": [
+                {
+                  "prop": "scale",
+                  "keys": [
+                    [
+                      0,
+                      1.3
+                    ],
+                    [
+                      1,
+                      1
+                    ]
+                  ]
+                },
+                {
+                  "prop": "clip",
+                  "from": "bottom",
+                  "keys": [
+                    [
+                      0,
+                      38
+                    ],
+                    [
+                      0.42,
+                      100
+                    ]
+                  ]
+                }
+              ]
+            },
+            {
+              "t": "Container",
+              "es": "media-scrim",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "14px",
+                "position": "absolute",
+                "left": "0px",
+                "bottom": "0px",
+                "width": "100%",
+                "padding": "48px 32px 56px 32px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "display",
+                  "level": "h1",
+                  "slot": "headline",
+                  "max": 56,
+                  "fromBusiness": "name",
+                  "tracks": [
+                    {
+                      "prop": "y",
+                      "keys": [
+                        [
+                          0,
+                          0
+                        ],
+                        [
+                          1,
+                          -6
+                        ]
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "t": "Text",
+                  "es": "lead",
+                  "slot": "lead",
+                  "max": 180,
+                  "fromBusiness": "tagline",
+                  "ph": "copy",
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0.45,
+                          0
+                        ],
+                        [
+                          0.6,
+                          1
+                        ]
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "t": "ButtonBlock",
+                  "es": "button-primary",
+                  "href": "/contact",
+                  "slot": "cta",
+                  "max": 24,
+                  "text": "Get in touch",
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0.5,
+                          0
+                        ],
+                        [
+                          0.65,
+                          1
+                        ]
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "hero.scene-object": {
+    "family": "hero",
+    "scene": true,
+    "film": true,
+    "label": "Hero — your film plays as you scroll",
+    "intent": "The studio's own film plays forward and back with the scroll behind the headline while the page holds still.",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "scheme": "inverse",
+      "role": "scene",
+      "lay": {
+        "position": "relative",
+        "display": "block",
+        "width": "100%",
+        "height": "300vh",
+        "padding": "0px"
+      },
+      "c": [
+        {
+          "t": "Container",
+          "role": "scene.stage",
+          "lay": {
+            "position": "sticky",
+            "top": "0px",
+            "display": "block",
+            "width": "100%",
+            "height": "100svh",
+            "overflow": "hidden",
+            "padding": "0px"
+          },
+          "c": [
+            {
+              "t": "Video",
+              "es": "media",
+              "film": true,
+              "lay": {
+                "position": "absolute",
+                "top": "0px",
+                "left": "0px",
+                "width": "100%",
+                "height": "100%",
+                "aspectRatio": "auto",
+                "borderRadius": "0px"
+              },
+              "tracks": [
+                {
+                  "prop": "play",
+                  "keys": [
+                    [
+                      0,
+                      0
+                    ],
+                    [
+                      1,
+                      100
+                    ]
+                  ]
+                }
+              ]
+            },
+            {
+              "t": "Container",
+              "es": "media-scrim",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "14px",
+                "position": "absolute",
+                "left": "0px",
+                "bottom": "0px",
+                "width": "100%",
+                "padding": "48px 32px 56px 32px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "display",
+                  "level": "h1",
+                  "slot": "headline",
+                  "max": 56,
+                  "fromBusiness": "name",
+                  "tracks": [
+                    {
+                      "prop": "y",
+                      "keys": [
+                        [
+                          0,
+                          0
+                        ],
+                        [
+                          1,
+                          -6
+                        ]
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "t": "Text",
+                  "es": "lead",
+                  "slot": "lead",
+                  "max": 180,
+                  "fromBusiness": "tagline",
+                  "ph": "copy",
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0.3,
+                          0
+                        ],
+                        [
+                          0.45,
+                          1
+                        ]
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "t": "ButtonBlock",
+                  "es": "button-primary",
+                  "href": "/contact",
+                  "slot": "cta",
+                  "max": 24,
+                  "text": "Get in touch",
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0.35,
+                          0
+                        ],
+                        [
+                          0.5,
+                          1
+                        ]
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "story.scene-chapters": {
+    "family": "story",
+    "scene": true,
+    "label": "Story — three chapters on one held stage",
+    "intent": "How you work in three short chapters that take turns over one picture while the page holds still — a process worth slowing down for.",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "scheme": "inverse",
+      "role": "scene",
+      "lay": {
+        "position": "relative",
+        "display": "block",
+        "width": "100%",
+        "height": "400vh",
+        "padding": "0px"
+      },
+      "c": [
+        {
+          "t": "Container",
+          "role": "scene.stage",
+          "lay": {
+            "position": "sticky",
+            "top": "0px",
+            "display": "block",
+            "width": "100%",
+            "height": "100svh",
+            "overflow": "hidden",
+            "padding": "0px"
+          },
+          "c": [
+            {
+              "t": "Image",
+              "es": "media",
+              "ph": "image",
+              "lay": {
+                "position": "absolute",
+                "top": "0px",
+                "left": "0px",
+                "width": "100%",
+                "height": "100%",
+                "aspectRatio": "auto",
+                "borderRadius": "0px",
+                "objectFit": "cover"
+              },
+              "tracks": [
+                {
+                  "prop": "scale",
+                  "keys": [
+                    [
+                      0,
+                      1.12
+                    ],
+                    [
+                      1,
+                      1
+                    ]
+                  ]
+                }
+              ]
+            },
+            {
+              "t": "Container",
+              "es": "media-scrim",
+              "lay": {
+                "position": "absolute",
+                "left": "0px",
+                "bottom": "0px",
+                "width": "100%",
+                "height": "62%",
+                "padding": "0px"
+              },
+              "c": [
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "lay": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "12px",
+                    "position": "absolute",
+                    "left": "32px",
+                    "right": "32px",
+                    "bottom": "56px",
+                    "maxWidth": "640px"
+                  },
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0,
+                          1
+                        ],
+                        [
+                          0.26,
+                          1
+                        ],
+                        [
+                          0.33,
+                          0
+                        ]
+                      ]
+                    },
+                    {
+                      "prop": "y",
+                      "keys": [
+                        [
+                          0.26,
+                          0
+                        ],
+                        [
+                          0.33,
+                          -6
+                        ]
+                      ]
+                    }
+                  ],
+                  "c": [
+                    {
+                      "t": "Text",
+                      "es": "eyebrow",
+                      "slot": "eyebrow",
+                      "max": 32,
+                      "ph": "copy",
+                      "text": "How we work"
+                    },
+                    {
+                      "t": "Heading",
+                      "es": "h2",
+                      "level": "h2",
+                      "slot": "title",
+                      "max": 52,
+                      "ph": "copy",
+                      "text": "It starts with a conversation"
+                    },
+                    {
+                      "t": "Text",
+                      "es": "lead",
+                      "slot": "text",
+                      "max": 180,
+                      "ph": "copy",
+                      "text": "What the first step is, in a sentence or two."
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "lay": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "12px",
+                    "position": "absolute",
+                    "left": "32px",
+                    "right": "32px",
+                    "bottom": "56px",
+                    "maxWidth": "640px"
+                  },
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0.33,
+                          0
+                        ],
+                        [
+                          0.4,
+                          1
+                        ],
+                        [
+                          0.6,
+                          1
+                        ],
+                        [
+                          0.67,
+                          0
+                        ]
+                      ]
+                    },
+                    {
+                      "prop": "y",
+                      "keys": [
+                        [
+                          0.33,
+                          6
+                        ],
+                        [
+                          0.4,
+                          0
+                        ],
+                        [
+                          0.6,
+                          0
+                        ],
+                        [
+                          0.67,
+                          -6
+                        ]
+                      ]
+                    }
+                  ],
+                  "c": [
+                    {
+                      "t": "Heading",
+                      "es": "h2",
+                      "level": "h2",
+                      "slot": "title2",
+                      "max": 52,
+                      "ph": "copy",
+                      "text": "Then we make it"
+                    },
+                    {
+                      "t": "Text",
+                      "es": "lead",
+                      "slot": "text2",
+                      "max": 180,
+                      "ph": "copy",
+                      "text": "What the middle of the work is, in a sentence or two."
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "lay": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "12px",
+                    "position": "absolute",
+                    "left": "32px",
+                    "right": "32px",
+                    "bottom": "56px",
+                    "maxWidth": "640px"
+                  },
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0.67,
+                          0
+                        ],
+                        [
+                          0.74,
+                          1
+                        ],
+                        [
+                          1,
+                          1
+                        ]
+                      ]
+                    },
+                    {
+                      "prop": "y",
+                      "keys": [
+                        [
+                          0.67,
+                          6
+                        ],
+                        [
+                          0.74,
+                          0
+                        ]
+                      ]
+                    }
+                  ],
+                  "c": [
+                    {
+                      "t": "Heading",
+                      "es": "h2",
+                      "level": "h2",
+                      "slot": "title3",
+                      "max": 52,
+                      "ph": "copy",
+                      "text": "And it is yours"
+                    },
+                    {
+                      "t": "Text",
+                      "es": "lead",
+                      "slot": "text3",
+                      "max": 180,
+                      "ph": "copy",
+                      "text": "What the client leaves with, in a sentence or two."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "proof.scene-words": {
+    "family": "proof",
+    "scene": true,
+    "label": "A testimonial that lights word by word",
+    "intent": "One client's words, lit one word at a time while the page holds still — only once the studio has a real quote worth slowing down for.",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "role": "scene",
+      "lay": {
+        "position": "relative",
+        "display": "block",
+        "width": "100%",
+        "height": "250vh",
+        "padding": "0px"
+      },
+      "c": [
+        {
+          "t": "Container",
+          "role": "scene.stage",
+          "lay": {
+            "position": "sticky",
+            "top": "0px",
+            "display": "flex",
+            "width": "100%",
+            "height": "100svh",
+            "overflow": "hidden",
+            "padding": "32px 32px 32px 32px",
+            "alignItems": "center",
+            "justifyContent": "center"
+          },
+          "c": [
+            {
+              "t": "Container",
+              "es": "box",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "20px",
+                "maxWidth": "900px",
+                "width": "100%",
+                "margin": "0px auto 0px auto"
+              },
+              "c": [
+                {
+                  "t": "Text",
+                  "es": "eyebrow",
+                  "slot": "eyebrow",
+                  "max": 32,
+                  "ph": "copy",
+                  "text": "What clients say"
+                },
+                {
+                  "t": "Heading",
+                  "es": "h2",
+                  "level": "h2",
+                  "ph": "copy",
+                  "text": "A sentence a client actually said, in their own words.",
+                  "tracks": [
+                    {
+                      "prop": "words",
+                      "keys": [
+                        [
+                          0.08,
+                          0
+                        ],
+                        [
+                          0.7,
+                          100
+                        ]
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "t": "Text",
+                  "es": "small",
+                  "ph": "copy",
+                  "text": "[Client name] · [Project, city]",
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0.7,
+                          0
+                        ],
+                        [
+                          0.82,
+                          1
+                        ]
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
   "nav.inline-cta": {
     "family": "nav",
     "label": "Navigation bar",
@@ -4924,6 +5641,16 @@ export const SPEC_SITE_LIBRARY = [
     "family": "hero",
     "composed": true
   },
+  {
+    "id": "hero.scene-depth",
+    "family": "hero",
+    "composed": true
+  },
+  {
+    "id": "hero.scene-object",
+    "family": "hero",
+    "composed": true
+  },
   {
     "id": "proof.logo-strip",
     "family": "proof",
@@ -4944,6 +5671,11 @@ export const SPEC_SITE_LIBRARY = [
     "family": "proof",
     "composed": true
   },
+  {
+    "id": "proof.scene-words",
+    "family": "proof",
+    "composed": true
+  },
   {
     "id": "feature.triad",
     "family": "feature",
@@ -4999,6 +5731,11 @@ export const SPEC_SITE_LIBRARY = [
     "family": "story",
     "composed": true
   },
+  {
+    "id": "story.scene-chapters",
+    "family": "story",
+    "composed": true
+  },
   {
     "id": "cta.banner",
     "family": "cta",