{
 "version": 2,
 "generated": "2026-11-07T06:04:58.498Z",
 "count": 18,
 "dealt": 13,
 "kinds": {
  "transition": 4,
  "text": 4,
  "hover": 1,
  "scroll": 7,
  "liquid": 2
 },
 "pages": [
  "tech",
  "gaming",
  "software",
  "place",
  "product",
  "service"
 ],
 "budget": 4,
 "moments": [
  {
   "id": "closing-lift",
   "name": "Closing lift",
   "kind": "transition",
   "fits": [
    "closing"
   ],
   "trigger": "scroll",
   "cost": "low",
   "webgl": 0,
   "pages": [],
   "retired": "Not dealt: it needs a closing section of its own (a picture under a sheet, then the page) where the page ends in footer.closing, the close and the footer in one screen (layout-v4.md), and its words stand on a gradient over the photograph (system.md). Rebuild it on footer.closing with a flat band before it is dealt again.",
   "look": "The last content section scrolls away like a sheet and uncovers the closing photograph held under it; the photograph settles from a close crop and the closing line with the one action fades up on it.",
   "reduced": "A plain closing section with the photograph, the line and the action.",
   "phone": "A plain closing section with the photograph, the line and the action after the sheet.",
   "maxPerPage": 1,
   "weight": 0,
   "needs": {
    "photo": true,
    "words": "a closing line of 3 to 7 words, one line and one action"
   },
   "avoidWith": [
    "pinned-chapters",
    "line-carries-colour"
   ],
   "states": {
    "start": {
     "p": 0.08,
     "wait": 300
    },
    "middle": {
     "p": 0.55,
     "wait": 300
    },
    "end": {
     "p": 1,
     "wait": 300
    }
   }
  },
  {
   "id": "counter-rolls",
   "name": "Counter rolls",
   "kind": "text",
   "fits": [
    "statement"
   ],
   "trigger": "enter",
   "cost": "low",
   "webgl": 0,
   "pages": [
    "tech",
    "gaming",
    "software"
   ],
   "look": "The digits of two to four proof figures roll once like an odometer when the row comes on screen, the right-most digit turning most; the strips rest on the real figures before and after, so the row never reads as zeros.",
   "reduced": "The figures stand.",
   "phone": "The figures stand.",
   "maxPerPage": 1,
   "weight": 1,
   "needs": {
    "words": "2 to 4 figures the brief gives (a price, a count, a time), each with a short caption; never an invented outcome"
   },
   "avoidWith": [],
   "states": {
    "start": {
     "see": true,
     "wait": 120
    },
    "middle": {
     "see": true,
     "wait": 700
    },
    "end": {
     "see": true,
     "wait": 2400
    }
   }
  },
  {
   "id": "cursor-spotlight",
   "name": "Cursor spotlight",
   "kind": "hover",
   "fits": [
    "hero"
   ],
   "trigger": "pointer",
   "cost": "low",
   "webgl": 0,
   "pages": [
    "tech",
    "gaming",
    "software"
   ],
   "look": "A soft light on the hero's ground follows the pointer with a short lag and shows a fine dot grid around it; it drifts back to its resting spot when the pointer leaves.",
   "reduced": "The light rests at its spot; also on touch screens.",
   "phone": "The light rests at its spot; there is no pointer.",
   "maxPerPage": 1,
   "weight": 1,
   "needs": {
    "words": "a hero frame on a lit ground holding the product"
   },
   "avoidWith": [
    "liquid-hover"
   ],
   "states": {
    "start": {
     "see": true,
     "wait": 300
    },
    "middle": {
     "see": true,
     "pointer": {
      "from": [
       0.72,
       0.28
      ],
      "to": [
       0.3,
       0.6
      ],
      "moves": 10,
      "step": 16
     },
     "wait": 160
    },
    "end": {
     "see": true,
     "pointer": {
      "from": [
       0.72,
       0.28
      ],
      "to": [
       0.3,
       0.6
      ],
      "moves": 10,
      "step": 16
     },
     "wait": 900
    }
   }
  },
  {
   "id": "giant-type-pass",
   "name": "Giant type, picture passing",
   "kind": "scroll",
   "fits": [
    "statement"
   ],
   "trigger": "scroll",
   "cost": "low",
   "webgl": 0,
   "pages": [
    "tech",
    "gaming",
    "software"
   ],
   "look": "Two to four words set at 12vw with a photograph showing through the letters under a 35% ink tint; the photograph passes upward through the type as the section crosses the screen.",
   "reduced": "The photograph stands still inside the letters.",
   "phone": "The photograph stands still in the letters, the type smaller (19vw).",
   "maxPerPage": 1,
   "weight": 1,
   "needs": {
    "photo": true,
    "picture": "mid to dark tones with detail, no pale sky; the lower half of the picture is what shows",
    "words": "a statement of 2 to 4 words and one line under it"
   },
   "avoidWith": [
    "word-highlight"
   ],
   "states": {
    "start": {
     "view": 0.25,
     "wait": 350
    },
    "middle": {
     "view": 0.5,
     "wait": 350
    },
    "end": {
     "view": 0.75,
     "wait": 350
    }
   }
  },
  {
   "id": "headline-arrives",
   "name": "Headline arrives",
   "kind": "text",
   "fits": [
    "hero"
   ],
   "trigger": "load",
   "cost": "low",
   "webgl": 0,
   "pages": [],
   "retired": "Not dealt: every hero now enters on load through the motion layer (references/motion.md, The hero's entrance: data-enter on the hero), with its text visible without script, under reduced motion and after a 700ms safety mark. A moment that also moves the headline would be a second entrance.",
   "look": "The hero headline's words rise once out of their masks, 38 ms apart, and settle; the sub-line and the buttons fade up behind them.",
   "reduced": "The headline stands as written; nothing moves.",
   "phone": "The headline or button stands as written.",
   "maxPerPage": 1,
   "weight": 0,
   "needs": {
    "words": "a headline of 3 to 9 words"
   },
   "avoidWith": [
    "lines-rise"
   ],
   "states": {
    "start": {
     "see": true,
     "wait": 60
    },
    "middle": {
     "see": true,
     "wait": 420
    },
    "end": {
     "see": true,
     "wait": 2200
    }
   }
  },
  {
   "id": "iris-opens",
   "name": "Iris opens",
   "kind": "transition",
   "fits": [
    "section"
   ],
   "trigger": "scroll",
   "cost": "low",
   "webgl": 0,
   "pages": [
    "tech",
    "gaming",
    "software"
   ],
   "look": "A section that sits on a new ground keeps that ground edge to edge; inside it an inset panel in the old ground (even gutter, card corners, never touching the section's edges) opens a disc in the middle of what is visible, widening with a hairline accent ring at its edge. Each heading, paragraph, button and picture stays hidden until the disc holds all of it, then fades in whole, so no word is ever cut.",
   "reduced": "The section stands on its own ground, no panel, no ring.",
   "phone": "The section stands on its own ground, no panel, no ring.",
   "maxPerPage": 1,
   "weight": 1,
   "needs": {
    "grounds": "the section sits on another ground than the one before it (ground-inverse, ground-surface)",
    "words": "a section of one or two screens with its h2 first"
   },
   "avoidWith": [
    "pinned-chapters",
    "closing-lift",
    "line-carries-colour"
   ],
   "states": {
    "start": {
     "view": 0.15,
     "wait": 300
    },
    "middle": {
     "view": 0.22,
     "wait": 300
    },
    "end": {
     "view": 0.5,
     "wait": 300
    }
   }
  },
  {
   "id": "letters-assemble",
   "name": "Letters assemble",
   "kind": "scroll",
   "fits": [
    "statement"
   ],
   "trigger": "scroll",
   "cost": "low",
   "webgl": 0,
   "pages": [
    "tech",
    "gaming",
    "software"
   ],
   "look": "A statement of two to five words, set very large: its letters start scattered, shifted and turned, and fly into the line one after the other as the statement rises through the screen, whole before it reaches the middle.",
   "reduced": "The statement stands as written.",
   "phone": "The statement stands as written, in a smaller size.",
   "maxPerPage": 1,
   "weight": 1,
   "needs": {
    "words": "a statement of 2 to 5 words (up to about 28 letters) and one or two lines under it"
   },
   "avoidWith": [
    "giant-type-pass",
    "word-highlight",
    "lines-rise",
    "counter-rolls"
   ],
   "states": {
    "start": {
     "view": 0.12,
     "wait": 300
    },
    "middle": {
     "view": 0.2,
     "wait": 300
    },
    "end": {
     "view": 0.5,
     "wait": 300
    }
   }
  },
  {
   "id": "line-carries-colour",
   "name": "Line carries the colour",
   "kind": "transition",
   "fits": [
    "section"
   ],
   "trigger": "scroll",
   "cost": "low",
   "webgl": 0,
   "pages": [
    "tech",
    "gaming",
    "software"
   ],
   "look": "A section that sits on a new ground keeps that ground edge to edge; inside it an inset panel in the old ground (even gutter, card corners, never touching the section's edges) is cleared by a one-pixel accent line that climbs through it from its foot to its top: below the line the section's own ground and words, above it the old ground. Each heading, paragraph, button and picture stays hidden until the line has passed above all of it, then fades in whole, so no word is ever cut.",
   "reduced": "The section stands on its own ground, no panel, no line.",
   "phone": "The section stands on its own ground, no panel, no line.",
   "maxPerPage": 1,
   "weight": 1,
   "needs": {
    "grounds": "the section sits on another ground than the one before it (ground-inverse, ground-surface)",
    "words": "a section of one or two screens with its h2 first"
   },
   "avoidWith": [
    "pinned-chapters",
    "closing-lift",
    "iris-opens"
   ],
   "states": {
    "start": {
     "view": 0.3,
     "wait": 300
    },
    "middle": {
     "view": 0.34,
     "wait": 300
    },
    "end": {
     "view": 0.5,
     "wait": 300
    }
   }
  },
  {
   "id": "lines-rise",
   "name": "Lines rise",
   "kind": "text",
   "fits": [
    "section",
    "statement"
   ],
   "trigger": "enter",
   "cost": "low",
   "webgl": 0,
   "pages": [],
   "retired": "Not dealt: every hero now rises line by line on load (references/motion.md, The hero's entrance), so a section heading that rises the same way repeats the entrance.",
   "look": "One section's heading rises line by line out of masks the first time it comes on screen, 90 ms between lines; its lead, link and visual fade up behind it. Once.",
   "reduced": "The section stands as written.",
   "phone": "The heading and the lines after it stand as written.",
   "maxPerPage": 1,
   "weight": 0,
   "needs": {
    "words": "a heading of 2 to 3 lines"
   },
   "avoidWith": [
    "headline-arrives"
   ],
   "states": {
    "start": {
     "see": true,
     "wait": 80
    },
    "middle": {
     "see": true,
     "wait": 380
    },
    "end": {
     "see": true,
     "wait": 2200
    }
   }
  },
  {
   "id": "liquid-hover",
   "name": "Liquid hover",
   "kind": "liquid",
   "fits": [
    "hero",
    "section"
   ],
   "trigger": "hover",
   "cost": "mid",
   "webgl": 1,
   "pages": [
    "tech",
    "gaming",
    "software"
   ],
   "look": "The pointer pushes a photograph like the surface of water: the picture bends along the pointer's path with a wet shine and a hair of colour split, and the ripple diffuses away in a second or two, back to the plain picture.",
   "reduced": "The photograph stands; also on touch screens and without WebGL.",
   "phone": "The plain photograph, no canvas, no WebGL context.",
   "maxPerPage": 1,
   "weight": 1,
   "needs": {
    "photo": true,
    "picture": "hard edges and detail (a coast, a building, a street); a flat sea or sky shows no ripple"
   },
   "avoidWith": [
    "picture-develops",
    "cursor-spotlight",
    "window-parallax"
   ],
   "states": {
    "start": {
     "see": true,
     "wait": 500
    },
    "middle": {
     "see": true,
     "pointer": {
      "from": [
       0.22,
       0.3
      ],
      "to": [
       0.64,
       0.62
      ],
      "moves": 18,
      "step": 20
     },
     "wait": 120
    },
    "end": {
     "see": true,
     "pointer": {
      "from": [
       0.22,
       0.3
      ],
      "to": [
       0.64,
       0.62
      ],
      "moves": 18,
      "step": 20
     },
     "wait": 6000
    }
   }
  },
  {
   "id": "liquid-type",
   "name": "Liquid type",
   "kind": "liquid",
   "fits": [
    "hero",
    "statement"
   ],
   "trigger": "pointer",
   "cost": "low",
   "webgl": 0,
   "pages": [
    "tech",
    "gaming",
    "software"
   ],
   "look": "A very large headline ripples and stretches like type seen through water wherever the pointer crosses it, and settles back to crisp type within about a second; one SVG filter, only while it moves.",
   "reduced": "The headline stands as written; also on touch screens.",
   "phone": "The headline stands as written; there is no pointer.",
   "maxPerPage": 1,
   "weight": 1,
   "needs": {
    "words": "a headline of 2 to 6 words, set large"
   },
   "avoidWith": [
    "liquid-hover",
    "cursor-spotlight"
   ],
   "states": {
    "start": {
     "see": true,
     "wait": 400
    },
    "middle": {
     "see": true,
     "pointer": {
      "target": ".mo-lt__type",
      "from": [
       0.1,
       0.5
      ],
      "to": [
       0.55,
       0.5
      ],
      "moves": 14,
      "step": 16
     },
     "wait": 40
    },
    "end": {
     "see": true,
     "pointer": {
      "target": ".mo-lt__type",
      "from": [
       0.1,
       0.5
      ],
      "to": [
       0.55,
       0.5
      ],
      "moves": 14,
      "step": 16
     },
     "wait": 2400
    }
   }
  },
  {
   "id": "marquee-row",
   "name": "Marquee row",
   "kind": "scroll",
   "fits": [
    "section"
   ],
   "trigger": "loop",
   "cost": "low",
   "webgl": 0,
   "pages": [
    "tech",
    "gaming",
    "software"
   ],
   "look": "One row of client words, trades, cities or formats moves slowly sideways in a loop, fading at both edges; it pauses under the pointer and has a pause button.",
   "reduced": "The words stand in a wrapped row.",
   "phone": "The words stand in a wrapped row; nothing runs.",
   "maxPerPage": 1,
   "weight": 0.8,
   "needs": {
    "words": "6 to 14 real words (trades, cities, formats), never logos and never invented clients"
   },
   "avoidWith": [],
   "states": {
    "start": {
     "see": true,
     "wait": 200
    },
    "middle": {
     "see": true,
     "wait": 2600
    },
    "end": {
     "see": true,
     "wait": 5200
    }
   }
  },
  {
   "id": "photo-chapters",
   "name": "Photo chapters",
   "kind": "scroll",
   "fits": [
    "section"
   ],
   "trigger": "scroll",
   "cost": "low",
   "webgl": 0,
   "pages": [
    "place",
    "product",
    "service"
   ],
   "look": "A short story in three to five photographs, one large frame at a time: the section holds on screen while, under its h2, one photograph the width of the page is uncovered by the next from its foot upward, settling from a slight zoom, and a panel in the page's ground on the photograph's lower left changes to that chapter (its number, a title and two lines). Each chapter has about two thirds of a screen of scroll: the wipe takes under half of it and the photograph holds for the rest. Live at every width on a screen 600px or taller, phones included.",
   "reduced": "Nothing is pinned: the chapters stand side by side, each photograph over its title and lines, and the section is as tall as they are.",
   "phone": "It runs on a phone held upright (one photograph at a time, the panel across its foot); a phone turned sideways, under 600px tall, gets the chapters stacked, each photograph over its words.",
   "maxPerPage": 1,
   "weight": 1,
   "needs": {
    "photo": true,
    "words": "3 to 5 chapters, a title and two lines each, under one h2 and a short lead",
    "pictures": "one photograph per chapter, all of one place, product or job, none used elsewhere on the page"
   },
   "avoidWith": [
    "pinned-chapters"
   ],
   "states": {
    "start": {
     "p": 0.06,
     "wait": 500
    },
    "middle": {
     "p": 0.5,
     "wait": 500
    },
    "end": {
     "p": 0.96,
     "wait": 500
    }
   },
   "phoneRuns": true,
   "height": "(hold + 1) screens live: hold 2 for three chapters, 3 for four or five; at rest as tall as its chapters. No --h on the section."
  },
  {
   "id": "picture-develops",
   "name": "Picture develops",
   "kind": "transition",
   "fits": [
    "section",
    "hero"
   ],
   "trigger": "enter",
   "cost": "low",
   "webgl": 0,
   "pages": [
    "place",
    "product",
    "service"
   ],
   "look": "One large photograph develops once as it comes on screen. On a place, product or service page (look \"film\") it comes up out of the paper like a print in the developer tray: a faint grey print at first, its darks arriving before its light tones, then its colour, while it settles from a slight zoom, about 1.6 s. The halftone look (\"print\", a two-tone dot print in the page's ground and ink giving way to the photograph) is not dealt: tech leaves this moment out, so it is kept only as opts look \"print\".",
   "reduced": "The photograph stands.",
   "phone": "The film look runs on a phone too (one picture, a filter and a transform, once); the print look shows the photograph.",
   "maxPerPage": 1,
   "weight": 1,
   "needs": {
    "photo": true,
    "picture": "one photograph with a clear subject, half the container wide or more: the section's subject, not a thumbnail"
   },
   "avoidWith": [
    "liquid-hover",
    "window-parallax"
   ],
   "states": {
    "start": {
     "see": true,
     "wait": 260
    },
    "middle": {
     "see": true,
     "wait": 900
    },
    "end": {
     "see": true,
     "wait": 2600
    }
   },
   "phoneRuns": true
  },
  {
   "id": "pinned-chapters",
   "name": "Pinned chapters",
   "kind": "scroll",
   "fits": [
    "section"
   ],
   "trigger": "scroll",
   "cost": "low",
   "webgl": 0,
   "pages": [
    "tech",
    "gaming",
    "software",
    "product",
    "service"
   ],
   "look": "A feature section holds on screen for two screens of scroll while its three steps open one at a time at the left and one frame at the right changes to each step's picture with a short crossfade.",
   "reduced": "Nothing is pinned: from 640px each step is a static row, its text at the left and its visual at the right (at most 30svh tall); on a phone each step stands with its 16:9 visual under it. Two to four steps fit two screens at 1440x900, 1024x768, 820x1180 and 390x844.",
   "phone": "Nothing is pinned: each step stands with its title, two lines and its visual under it.",
   "maxPerPage": 1,
   "weight": 1,
   "needs": {
    "words": "2 to 4 steps, a title and two lines each",
    "pictures": "one picture or screen per step"
   },
   "avoidWith": [
    "closing-lift",
    "line-carries-colour",
    "photo-chapters"
   ],
   "states": {
    "start": {
     "p": 0.08,
     "wait": 900
    },
    "middle": {
     "p": 0.5,
     "wait": 900
    },
    "end": {
     "p": 0.92,
     "wait": 900
    }
   }
  },
  {
   "id": "window-parallax",
   "name": "Window parallax",
   "kind": "scroll",
   "fits": [
    "section"
   ],
   "trigger": "scroll",
   "cost": "low",
   "webgl": 0,
   "pages": [],
   "retired": "Not dealt: it moves a photograph against the scroll, a parallax that reads as a template trick on every kind; a wide photograph stands still in its frame.",
   "look": "One wide photograph seen through a frame moves a little slower than the page, so the frame reads as a window onto a larger picture.",
   "reduced": "The photograph stands.",
   "phone": "The photograph stands in its frame.",
   "maxPerPage": 1,
   "weight": 0,
   "needs": {
    "photo": true
   },
   "avoidWith": [
    "picture-develops",
    "liquid-hover"
   ],
   "states": {
    "start": {
     "view": 0.2,
     "wait": 300
    },
    "middle": {
     "view": 0.5,
     "wait": 300
    },
    "end": {
     "view": 0.8,
     "wait": 300
    }
   }
  },
  {
   "id": "word-highlight",
   "name": "Statement lights up",
   "kind": "scroll",
   "fits": [
    "statement"
   ],
   "trigger": "scroll",
   "cost": "low",
   "webgl": 0,
   "pages": [
    "tech",
    "gaming",
    "software",
    "place",
    "product",
    "service"
   ],
   "look": "One large statement rests at half ink (readable, about 4 to 1) and turns to ink word by word as it crosses the middle of the screen, a strong word to the accent; it runs back on the way up.",
   "reduced": "The statement in ink.",
   "phone": "It runs on a phone as on a desktop (one paragraph's colours); under reduced motion the whole statement is in ink, the accent word in the accent.",
   "maxPerPage": 1,
   "weight": 1,
   "needs": {
    "words": "one statement of 12 to 40 words"
   },
   "avoidWith": [
    "giant-type-pass"
   ],
   "states": {
    "start": {
     "view": 0.22,
     "wait": 350
    },
    "middle": {
     "view": 0.5,
     "wait": 350
    },
    "end": {
     "view": 0.72,
     "wait": 350
    }
   },
   "phoneRuns": true
  },
  {
   "id": "word-rotate",
   "name": "Word rotates",
   "kind": "text",
   "fits": [
    "hero"
   ],
   "trigger": "loop",
   "cost": "low",
   "webgl": 0,
   "pages": [],
   "retired": "Not dealt: the word hero carries its own live word (layout-v4.md), and a second rotating word in a headline repeats it.",
   "look": "One word of the headline changes every two seconds, sliding up out of its mask as the next rises in, underlined in the accent; three rounds, then it rests.",
   "reduced": "The written word stands.",
   "phone": "The written word stands; the other words are not shown.",
   "maxPerPage": 1,
   "weight": 0,
   "needs": {
    "words": "a headline with one word that can take 2 to 4 alternatives (what the product is for)"
   },
   "avoidWith": [],
   "states": {
    "start": {
     "see": true,
     "wait": 200
    },
    "middle": {
     "see": true,
     "wait": 2550
    },
    "end": {
     "see": true,
     "wait": 4800
    }
   }
  }
 ]
}