mosaic-headless 1.7.0 → 1.9.0

package/sites/_moksa.py

@@ -334,6 +334,15 @@ BOOT_LOG = [
 ]
 RULER_TICKS = 13
 
+# FIGURE 01's rows. Up here with the other tables rather than beside the section
+# that draws it, because motion_css() reads it to build the arrow stagger and is
+# defined long before the figure is.
+FLOW = [
+    ("網站表單", "FORM", "n8n 節點", "WORKFLOW", "ERP 建單", "ERP"),
+    ("電商訂單", "ORDER", "Claude 判讀", "REASONING", "通知／報表", "NOTIFY"),
+    ("客服訊息", "INBOX", "分類與派工", "TRIAGE", "CRM 紀錄", "CRM"),
+]
+
 CLAUSES = [
     ("01", "SERVICES", "#services", "--mk-s1"),
     ("02", "PROCESS", "#process", "--mk-s2"),
@@ -396,6 +405,13 @@ def motion_css():
                           for i, (_g, items) in enumerate(STACK)
                           for j in range(len(items)))
     marks = ",".join("#mk-mark-%d" % i for i in range(4))
+    idx_words = ",".join("#mk-idx-w-%d" % i for i in range(len(CLAUSES)))
+    # the diagram's arrows, and the delay that makes the pulse travel down it
+    flow_arrows = ",".join("#mk-ar-%s-%d>*" % (c, i)
+                           for i in range(len(FLOW)) for c in ("a", "b"))
+    flow_stagger = "\n".join(
+        "  #mk-ar-%s-%d>*{animation-delay:%dms}" % (c, i, i * 260 + j * 130)
+        for i in range(len(FLOW)) for j, c in enumerate(("a", "b")))
     # the boot sequence, phase by phase: the clauses report in, the log writes
     # itself out a line at a time, and the ruler ticks up the left margin
     boot_stagger = "\n".join(
@@ -461,6 +477,17 @@ def motion_css():
         "@keyframes mk-idxon{from,to{color:rgb(255,90,54);"
         "letter-spacing:.2em}}",
         "@keyframes mk-dotin{from{transform:scale(0)}to{transform:scale(1)}}",
+        # the accent band pans sideways while it crosses the viewport
+        "@keyframes mk-pan{from{transform:translateX(2%)}"
+        "to{transform:translateX(-34%)}}",
+        "@keyframes mk-panloop{from{transform:translateX(0)}"
+        "to{transform:translateX(-50%)}}",
+        # a headline that fills with ink as it is read past
+        "@keyframes mk-fillscrub{from{background-position:100% 0}"
+        "to{background-position:0 0}}",
+        # a pulse travelling down the diagram's arrows
+        "@keyframes mk-flow{0%{transform:translateX(-7px);opacity:.2}"
+        "45%{opacity:1}100%{transform:translateX(7px);opacity:.2}}",
 
         # ── the document frame ───────────────────────────────────────────────
         # A spec sheet has margins. These two fixed rules are what say the content
@@ -500,6 +527,44 @@ def motion_css():
         # belongs to a page set in a terminal face
         "#mk-caret{width:13px;height:19px;background:rgb(255,90,54)}",
         "#mk-plate-dash{width:34px;height:1px;background:rgb(191,68,40)}",
+
+        # ── the clock ────────────────────────────────────────────────────────
+        # Two registered integers, stepped rather than eased, so each one lands on a
+        # whole number and reads as a tick instead of a blur. `decimal-leading-zero`
+        # is what keeps it two digits without any padding logic.
+        "@property --mk-s{syntax:'<integer>';initial-value:0;inherits:true}",
+        "@property --mk-m{syntax:'<integer>';initial-value:0;inherits:true}",
+        "@keyframes mk-secs{to{--mk-s:60}}",
+        "@keyframes mk-mins{to{--mk-m:60}}",
+        "@keyframes mk-livedot{0%,55%{opacity:1}56%,100%{opacity:.15}}",
+        "#mk-clock{display:flex;align-items:baseline;column-gap:5px;"
+        "margin-left:18px;padding-left:18px;"
+        "border-left:1px solid " + RULE + "}",
+        "#mk-clock-dot{width:5px;height:5px;background:rgb(255,90,54);"
+        "align-self:center;margin-right:3px}",
+        "#mk-clock-m,#mk-clock-s{font-family:" + MONO + ";font-size:11px;"
+        "color:rgb(22,24,28);font-variant-numeric:tabular-nums;"
+        "letter-spacing:0.02em}",
+        "#mk-clock-s::after{counter-reset:s var(--mk-s);"
+        "content:counter(s,decimal-leading-zero)}",
+        "#mk-clock-m::after{counter-reset:m var(--mk-m);"
+        "content:counter(m,decimal-leading-zero)}",
+        "@media (max-width:1023px){#mk-clock{display:none}}",
+
+        # ── an ambient sweep ─────────────────────────────────────────────────
+        # One hairline crossing the viewport, forever, at an opacity that is almost
+        # an excuse. It is the difference between a page that is still and a page
+        # that is idling.
+        "@keyframes mk-sweepdown{from{transform:translateY(-10vh)}"
+        "to{transform:translateY(110vh)}}",
+        '#mk-sweep{content:"";position:fixed;left:0;right:0;top:0;height:1px;'
+        "z-index:2;pointer-events:none;background:linear-gradient(90deg,"
+        "rgba(255,90,54,0),rgba(255,90,54,.30) 22%,rgba(255,90,54,.30) 78%,"
+        "rgba(255,90,54,0))}",
+
+        # ── the margin rules carry a travelling segment ──────────────────────
+        "@keyframes mk-railrun{from{background-position:0 -40vh}"
+        "to{background-position:0 140vh}}",
         "#mk-mast-rule,#mk-spec-rule{height:1px;background:" + RULE + ";"
         "transform:scaleX(0);transform-origin:0 50%}",
         digits + "{display:block;transform:translateY(105%)}",
@@ -528,8 +593,23 @@ def motion_css():
 
         # the clause index. It needs room outside the document margin, so it only
         # appears once the viewport is wide enough to have that room.
-        "#mk-index{position:fixed;left:14px;top:50%;transform:translateY(-50%);"
-        "z-index:3;display:grid;row-gap:11px;pointer-events:auto}",
+        # The index is FIXED, so it does not sit on the ground it was declared
+        # against - it sits on whatever has scrolled underneath. Over the accent
+        # band its faint grey became unreadable. Giving it its own paper ground
+        # means it carries its background with it instead of borrowing one.
+        # The index lives in the margin, so where it can show its words is a
+        # function of how much margin there is: the container is 1240px centred, so
+        # the left margin is (W-1240)/2, and the full panel measures 178px. First
+        # attempt put the threshold at 1560 and 1600px still overlapped by 6px -
+        # measured, not estimated. 1680 leaves 34px of air; below it the panel keeps
+        # the clause numbers only, which fit the gutter at any width.
+        "#mk-index{position:fixed;left:8px;top:50%;transform:translateY(-50%);"
+        "z-index:3;display:grid;row-gap:11px;pointer-events:auto;"
+        "background:rgb(250,250,247);padding:14px 10px;"
+        "border:1px solid " + RULE + "}",
+        "#mk-index>*{display:flex;column-gap:8px;align-items:baseline}",
+        "@media (max-width:1679px){" + idx_words + "{display:none}"
+        "#mk-index{padding:12px 7px;left:4px}}",
         "@media (max-width:1439px){#mk-index{display:none}}",
 
         # process: the sequence marker on each step, and the line it sits on
@@ -698,6 +778,19 @@ def motion_css():
         "  #mk-mast-meta{animation-delay:3.06s}",
         "  #mk-mast-lede{animation-delay:3.54s}",
         "  #mk-mast-cta{animation-delay:3.66s}",
+        "  " + flow_arrows + "{animation:mk-flow 1.9s ease-in-out infinite}",
+        "  #mk-clock-s{animation:mk-secs 60s steps(60,end) infinite}",
+        "  #mk-clock-m{animation:mk-mins 3600s steps(60,end) infinite}",
+        "  #mk-clock-dot{animation:mk-livedot 2s steps(1,end) infinite}",
+        "  #mk-sweep{animation:mk-sweepdown 11s linear infinite}",
+        "  #mk-pan-loop{animation:mk-panloop 26s linear infinite}",
+        # the two fixed document rules get a lit segment sliding down them forever
+        "  #mk-doc::before,#mk-doc::after{"
+        "background-image:linear-gradient(180deg,rgba(255,90,54,0),"
+        "rgba(255,90,54,.55) 45%,rgba(255,90,54,.55) 55%,rgba(255,90,54,0));"
+        "background-size:1px 34vh;background-repeat:no-repeat;"
+        "animation:mk-railrun 9s linear infinite}",
+        flow_stagger,
         "  #mk-caret{animation:mk-caret 1.15s steps(1,end) infinite;"
         "animation-delay:3.84s}",
         "  #mk-mast-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;"
@@ -731,6 +824,28 @@ def motion_css():
         # the sequence markers pop as each step arrives
         "    " + proc_dots + "{animation:mk-dotin .01s linear both;"
         "animation-timeline:view();animation-range:entry 14% cover 26%}",
+        # the band pans across the whole time it is on screen
+        "    #mk-pan-track{animation:mk-pan linear both;"
+        "animation-timeline:view();animation-range:cover 0% cover 100%}",
+        # The statement fills with ink as it passes. The gradient is built so the
+        # UNANIMATED state shows the faint half - `color:transparent` plus
+        # `background-clip:text` is one of the few ways to make text that is
+        # genuinely invisible if its animation never runs, and the page must never
+        # depend on that. At `from` the visible half is the faint colour, so the
+        # worst case is a paler headline, not a missing one.
+        "    #mk-plate-t h2{background-image:linear-gradient(90deg,"
+        # The unfilled half is `--mk-faint`, not a decorative pale grey. At
+        # rgb(168,170,176) the tail of the line measured 2.3:1 against the panel
+        # while the scrub had not reached it - readable only once you had scrolled
+        # far enough, which is not a thing to ask of a sentence. This value clears
+        # 4.66:1 on its own, so the effect is a change in weight rather than a
+        # change between legible and not.
+        "rgb(22,24,28) 0 50%,rgb(107,109,113) 50% 100%);"
+        "background-size:220% 100%;background-position:100% 0;"
+        "-webkit-background-clip:text;background-clip:text;"
+        "color:rgba(0,0,0,0);"
+        "animation:mk-fillscrub linear both;animation-timeline:view();"
+        "animation-range:entry 24% cover 58%}",
         "  }",
         "  @supports (timeline-scope:--x){",
         # the index entry lights while its own section is on screen. No fill mode, so
@@ -789,6 +904,20 @@ HEADER = box("mk-shell-top", {}, [
                        T("p", "/ STUDIO", color={"token": "--mk-faint"},
                          fontSize="11px", letterSpacing="0.06em", fontFamily=MONO,
                          _m={"display": "none"})]},
+                 # A running session clock. It counts from the moment the document
+                 # loaded, which is why it says T+ rather than pretending to be the
+                 # time of day - a page cannot know that without JavaScript, and
+                 # labelling a page-load counter "14:32" would be a small lie told
+                 # in the most trustworthy typeface on the site.
+                 box("mk-clock", {}, [
+                     box("mk-clock-dot", {}, []),
+                     T("p", "T+", color={"token": "--mk-faint"}, fontSize="10px",
+                       fontFamily=MONO, letterSpacing="0.18em"),
+                     box("mk-clock-m", {}, []),
+                     T("p", ":", color={"token": "--mk-faint"}, fontSize="11px",
+                       fontFamily=MONO),
+                     box("mk-clock-s", {}, []),
+                 ]),
                  {"type": "menu", "data": {"attrID": "mk-nav"},
                   "style": bp({"display": "flex", "columnGap": "30px",
                                "alignItems": "center"},
@@ -1343,6 +1472,49 @@ CONTACT = section("contact", [wrap("mk-contact-in", [
         ]),
 ])])
 
+# ── the pan strip ─────────────────────────────────────────────────────────────
+# The page has no field of colour anywhere - the accent has only ever been a rule, a
+# mark or a small block. A band of it, with the whole line panning sideways as you
+# scroll down, is the one moment here that is purely about being looked at. Ink on
+# the accent measures 5.73:1, which is why the type is dark rather than light.
+PAN_WORDS = ["WEB", "COMMERCE", "AUTOMATION", "AI", "ERP", "SEO", "SOFTWARE"]
+
+PAN = box("mk-pan",
+          {"backgroundColor": {"token": "--mk-accent"},
+           "paddingTop": "34px", "paddingBottom": "34px",
+           "customStyles": "overflow:hidden;"},
+          _m={"paddingTop": "22px", "paddingBottom": "22px"},
+          children=[
+              # Two nested motions, because one transform cannot do both jobs.
+              # The outer track is scrubbed by the scroll; the inner loop runs on
+              # its own clock so the band is still moving when nobody is scrolling.
+              # The word list is emitted TWICE and the loop travels exactly half its
+              # own width, which is what makes the wrap invisible.
+              box("mk-pan-track", {"customStyles": "width:max-content;"}, [
+                  box("mk-pan-loop",
+                      {"display": "flex", "columnGap": "56px",
+                       "alignItems": "baseline",
+                       "customStyles": "white-space:nowrap;width:max-content;"},
+                      _m={"columnGap": "30px"},
+                      children=[
+                          node for c in range(2)
+                          for i, w in enumerate(PAN_WORDS) for node in (
+                              box("mk-pan-n-%d-%d" % (c, i), {},
+                                  [mono("%02d" % (i + 1), size="11px",
+                                        color="rgb(22,24,28)", track="0.18em")]),
+                              box("mk-pan-w-%d-%d" % (c, i), {},
+                                  [T("p", w, color={"token": "--mk-ink"},
+                                     fontSize="58px", fontWeight="600",
+                                     fontFamily=DISPLAY, letterSpacing="-0.02em",
+                                     lineHeight="1",
+                                     _t={"fontSize": "44px"},
+                                     _m={"fontSize": "31px"})]),
+                          )
+                      ]),
+              ]),
+          ])
+
+
 # ── the capability matrix ─────────────────────────────────────────────────────
 # The page could tell you what the studio does; a specification SHOWS you, in a form
 # you can read across. Filled, half and hollow marks carry the whole answer without
@@ -1426,11 +1598,6 @@ MATRIX_SEC = section("matrix", [wrap("mk-mx-in", [
 # austere for eleven screens. A diagram is the one element that says something no
 # sentence here can, and drawn in hairline boxes it belongs to the same document
 # rather than arriving from a different one.
-FLOW = [
-    ("網站表單", "FORM", "n8n 節點", "WORKFLOW", "ERP 建單", "ERP"),
-    ("電商訂單", "ORDER", "Claude 判讀", "REASONING", "通知／報表", "NOTIFY"),
-    ("客服訊息", "INBOX", "分類與派工", "TRIAGE", "CRM 紀錄", "CRM"),
-]
 
 
 def flow_cell(attr, zh, en):
@@ -1646,7 +1813,10 @@ INDEX = box("mk-index", {}, [
                            "transitionAll": "220ms ease"}},
                "hover": {"_": {"color": {"token": "--mk-ink"}}},
                "focus-visible": {"_": FOCUS_RING}},
-     "text": "§" + num + "  " + name}
+     "children": [
+         box("mk-idx-n-%d" % i, {}, [T("p", "§" + num)]),
+         box("mk-idx-w-%d" % i, {}, [T("p", name)]),
+     ]}
     for i, (num, name, href, _tl) in enumerate(CLAUSES)
 ])
 
@@ -1657,11 +1827,11 @@ CUE = box("mk-cue", {}, [
 
 HOME_TREE = {"type": "div", "data": {"attrID": "mk-home"},
              "children": [BOOT, box("mk-doc", {}, [
-                 MARKS, INDEX, CUE,
+                 MARKS, INDEX, CUE, box("mk-sweep", {}, []),
                  # paper, panel, paper, ink, paper, ink, paper - the page
                  # changes ground five times so it reads as chapters
                  MASTHEAD, TICKER_BAND, PLATE, SERVICE_SEC, MATRIX_SEC,
-                 PROCESS_SEC, FIGURE_SEC, WORK_SEC, SPECIMEN, STACK_SEC,
+                 PROCESS_SEC, FIGURE_SEC, WORK_SEC, PAN, SPECIMEN, STACK_SEC,
                  PRODUCT_SEC, VOICE_SEC, CONTACT,
              ])]}