@rizom/site-rizom-ai 0.2.0-alpha.263 → 0.2.0-alpha.264

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rizom/site-rizom-ai",
-  "version": "0.2.0-alpha.263",
+  "version": "0.2.0-alpha.264",
   "description": "Consolidated Rizom brand site, runtime, layouts, and chrome",
   "type": "module",
   "exports": {

package/src/opening.tsx

@@ -12,7 +12,6 @@ import {
   ASK_DRAWING_ATTRIBUTE,
   ASK_LEADS_ATTRIBUTE,
   ASK_MARK_ATTRIBUTE,
-  ASK_ROOM_ATTRIBUTE,
 } from "@brains/contracts";
 import { createTemplate, type Template } from "@brains/templates";
 import { z } from "@rizom/site";
@@ -169,59 +168,15 @@ export function Opening(data: OpeningData): JSX.Element {
   const headingLead = data.headingLead ?? DEFAULT_COPY.headingLead;
   const lede = data.lede ?? DEFAULT_COPY.lede;
   return (
-    // With the box, the opening is an Ask room (@brains/contracts ask-box):
-    // the words are its column, which scrolls within the screen beside the
-    // drawing on a wide screen; the drawing is lent to a phone's open
-    // conversation; the room draws leads from an answer's sources to the dots.
-    <section
-      id="hero"
-      className="chapter chapter--opening"
-      data-title="Top"
-      {...(data.askBox ? { [ASK_ROOM_ATTRIBUTE]: "" } : {})}
-    >
-      <div
-        className="opening__words"
-        {...(data.askBox ? { [ASK_COLUMN_ATTRIBUTE]: "" } : {})}
-      >
-        {data.kicker && <p className="eyebrow">{data.kicker}</p>}
-        <h1>
-          {headingLead}
-          {data.headingAccent && (
-            <>
-              {" "}
-              <em>{data.headingAccent}</em>
-            </>
-          )}
-        </h1>
-        <p className="lede">{lede}</p>
-        {data.askBox ? (
-          <div className="ask">
-            <AskBoxHost
-              prefix="opening"
-              placeholder={data.prompt ?? undefined}
-            />
-            {data.topics.length > 0 && (
-              <ul className="ask__topics" aria-label="Suggested questions">
-                {data.topics.map((topic) => (
-                  <li key={topic}>
-                    <button type="button" data-atlas-fill={topic}>
-                      {topic}
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            )}
-            <script src={ASK_BOX_SCRIPT_PATH} defer />
-          </div>
-        ) : (
-          data.ctaHref &&
-          data.ctaLabel && (
-            <a className="opening__door" href={data.ctaHref}>
-              {data.ctaLabel}
-            </a>
-          )
-        )}
-      </div>
+    // The drawing and the lead layer stand before the opening's words in the
+    // chapters column: on a wide screen the drawing holds the figure's place
+    // down the story, leaving only through its centre point once the reading
+    // has moved the figure on. With the box, the story is an Ask room
+    // (@brains/contracts ask-box): the words are its column, which scrolls
+    // within the screen beside the drawing; the drawing is lent to a phone's
+    // open conversation; the room draws leads from an answer's sources to
+    // the dots.
+    <>
       <NetworkLayer {...placeNetwork(data)} lendable={data.askBox} />
       {data.askBox && (
         <svg
@@ -230,7 +185,52 @@ export function Opening(data: OpeningData): JSX.Element {
           aria-hidden="true"
         />
       )}
-    </section>
+      <section id="hero" className="chapter chapter--opening" data-title="Top">
+        <div
+          className="opening__words"
+          {...(data.askBox ? { [ASK_COLUMN_ATTRIBUTE]: "" } : {})}
+        >
+          {data.kicker && <p className="eyebrow">{data.kicker}</p>}
+          <h1>
+            {headingLead}
+            {data.headingAccent && (
+              <>
+                {" "}
+                <em>{data.headingAccent}</em>
+              </>
+            )}
+          </h1>
+          <p className="lede">{lede}</p>
+          {data.askBox ? (
+            <div className="ask">
+              <AskBoxHost
+                prefix="opening"
+                placeholder={data.prompt ?? undefined}
+              />
+              {data.topics.length > 0 && (
+                <ul className="ask__topics" aria-label="Suggested questions">
+                  {data.topics.map((topic) => (
+                    <li key={topic}>
+                      <button type="button" data-atlas-fill={topic}>
+                        {topic}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+              <script src={ASK_BOX_SCRIPT_PATH} defer />
+            </div>
+          ) : (
+            data.ctaHref &&
+            data.ctaLabel && (
+              <a className="opening__door" href={data.ctaHref}>
+                {data.ctaLabel}
+              </a>
+            )
+          )}
+        </div>
+      </section>
+    </>
   );
 }
 

package/src/story/living-organism.tsx

@@ -84,8 +84,14 @@ export const livingOrganism: Organism = organism({
     ),
   },
   stages: [
-    // The opening draws the live network itself.
-    {},
+    // The opening draws the live network itself; the first team waits at the
+    // centre point, where that network draws in, so the science opens out of
+    // it (and closes back into it when the reading returns).
+    {
+      T1: [C, 300, 0, 0],
+      T2: [C, 300, 0, 0],
+      T3: [C, 300, 0, 0],
+    },
     // The science: a team, its shared memory glowing at the centre.
     {
       L: [C, 300, 8, 1],

package/src/story/story-page.tsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource react */
 import type { JSX, ReactNode } from "react";
+import { ASK_ROOM_ATTRIBUTE } from "@brains/contracts";
 import type { Organism } from "./organism";
 
 /**
@@ -56,7 +57,7 @@ export function StoryPage({
     <>
       <link rel="stylesheet" href="/styles/story.css" precedence="page" />
       <ReadingThread />
-      <div className="story">
+      <div className="story" {...{ [ASK_ROOM_ATTRIBUTE]: "" }}>
         <div className="chapters">{children}</div>
         <figure
           className={`figure ${figure.className}`}

package/src/story.css

@@ -784,11 +784,13 @@
   width: min(100%, calc(100svh - var(--bar-height, 4.6rem) - 2rem));
   aspect-ratio: 1;
 }
-/* On a wide screen the opening's drawing keeps its place beside the words
-   while the opening is read, an answer included, and leaves with the opening;
-   it fades once the reading has moved the figure on, as on a phone. In flow
-   with no height, so the words do not move; its width is the room right of
-   the words, as the absolute layer's was. */
+/* On a wide screen the opening's drawing holds the figure's place: it stands
+   before the opening in the chapters column and sticks at the figure's centre
+   line down the whole story (the story is a size container, so nothing in it
+   can be fixed to the screen). It stays while the opening is read, an answer
+   included, and the words scroll past it. Once the reading has moved the
+   figure on, it draws into its centre point and the figure's first drawing
+   opens out of that same point; back up the page, the other way round. */
 @media not all and (max-width: 60rem) {
   /* The words are the room's column (the kit scrolls it within the screen);
      the bar and the opening's 4rem of padding above and below stay clear, so
@@ -796,29 +798,37 @@
   .chapter--opening .opening__words {
     --ask-column-clear: calc(8rem + var(--bar-height, 4.6rem));
   }
-  :where(.chapter--opening) > .net-layer {
+  :where(.chapters) > .net-layer {
     position: sticky;
-    order: -1;
     top: calc(
       var(--bar-height, 4.6rem) + (100svh - var(--bar-height, 4.6rem)) / 2
     );
+    left: auto;
+    right: auto;
     height: 0;
     margin-left: calc(var(--words) + var(--words-gap));
     width: calc(
       100cqi - max(0px, (100cqi - 80rem) / 2) - clamp(1rem, 5vw, 5rem) -
         var(--words) - var(--words-gap) - clamp(1rem, 6vw, 7rem)
     );
-    transition: opacity 0.6s ease;
+    /* Back from the point, lit at once. */
+    transition: opacity 0.3s ease;
   }
-  :where(.chapter--opening) > .net-layer > * {
+  :where(.chapters) > .net-layer > * {
     translate: 0 -50%;
+    transition: scale 1.2s cubic-bezier(0.3, 0.7, 0.2, 1);
+  }
+  .story:has(.figure:not([data-stage="0"])) :where(.chapters) > .net-layer > * {
+    scale: 0;
   }
-  .story:has(.figure:not([data-stage="0"]))
-    :where(.chapter--opening)
-    > .net-layer,
+  .story:has(.figure:not([data-stage="0"])) :where(.chapters) > .net-layer,
   .story:has(.figure:not([data-stage="0"])) .net-leads {
     opacity: 0;
   }
+  /* Lit while it draws in; out at the point. */
+  .story:has(.figure:not([data-stage="0"])) :where(.chapters) > .net-layer {
+    transition: opacity 0.6s ease 0.6s;
+  }
   .net-leads {
     transition: opacity 0.6s ease;
   }
@@ -1460,11 +1470,9 @@
    viewport is their frame. On a phone the opening's drawing joins the open
    conversation as the first item of its scroll, a slot holding its place. */
 .net-leads {
-  position: fixed;
+  position: absolute;
   inset: 0;
   z-index: 2;
-  width: 100vw;
-  height: 100vh;
   overflow: visible;
   pointer-events: none;
 }