@origingame/create-game 0.2.0 → 0.3.0

package/template-2d/src/main.ts

@@ -11,11 +11,20 @@
 // Everything the starter shows is in og-game §8 (sprites, flipbooks,
 // tilemaps), §13 (the controller) and og-feel §12 (its tunables).
 //
+// Beside the spawn a lamp keeper stands on a ramp: a 2D skeletal rig
+// (assets/rigs/keeper.ogt, og.Skeleton2D) whose cape is a weighted mesh the
+// idle clip deforms, whose feet two-bone IK planted on the slope
+// (og.IkTarget2D, the Plant system), and whose lantern lights the sprite
+// layers through og.Lighting2D (og-game §8; og-anim's 2D skeletons). Sent
+// along the ramp (`keeper:<x>`), it plays its walk clip there, each foot
+// planted while it carries the keeper and lifted while it swings, and
+// breathes again when it arrives (the Walk and Plant systems).
+//
 // The frame's look is data: GameDesc.look names a file under assets/looks/
 // that extends a preset of the style catalogue, applied before start runs.
 
 import { og, defineComponent, defineResource, defineSystem, bool, f32, u32, SHAPE_BOX } from "@origingame/engine";
-import type { FlipbookInfo, Result, TileObject } from "@origingame/engine";
+import type { FlipbookInfo, Result, Rig2DInfo, TileObject, World } from "@origingame/engine";
 
 /** The courier's clips, in the sheet's file order (og-game §8): `start` checks them. */
 const CLIP = { idle: 0, run: 1, jump: 2, fall: 3 } as const;
@@ -28,6 +37,16 @@ const BOX = { w: 0.9, h: 1.9 } as const;
 /** Below this the courier fell into the pit. */
 const FALL_Y = -3;
 const LIVES = 3;
+/** The keeper's ramp: a plank from (x0, y0) on the roof rising at `slope` (tan 12°) to x1. */
+const RAMP = { x0: 4.5, y0: 2, x1: 7.6, slope: 0.21256, sinHalf: 0.104528, cosHalf: 0.994522 } as const;
+/** The ramp's top at x. */
+const rampY = (x: number): number => RAMP.y0 + RAMP.slope * (x - RAMP.x0);
+/** The keeper's ankles and its root above the ramp (its legs reach 1.1 from a hip 1.1 up: a slight bend), the lantern from its feet, in world units. */
+const ANKLE = 0.12;
+const LIFT = 0.08;
+const LANTERN = { x: 0.25, y: 1.0 } as const;
+/** The keeper's gait: the walk clip's 0.8 s cycle carries it a stride of 0.4 m (a step per foot), each foot lifted at most `lift` mid-swing. */
+const WALK = { speed: 0.5, stride: 0.4, lift: 0.08 } as const;
 
 /** The courier. */
 export const Hero = defineComponent("Hero", { spawnX: f32(0, { unit: "m" }), spawnY: f32(0, { unit: "m" }) });
@@ -35,6 +54,9 @@ export const Hero = defineComponent("Hero", { spawnX: f32(0, { unit: "m" }), spa
 /** A coin of the map's `coin` objects; taken once. */
 export const Coin = defineComponent("Coin", { taken: bool() });
 
+/** One of the keeper's feet: its IK target stays on the ramp `dx` ahead of the keeper (behind when negative), `lag` of a gait cycle after the front foot. */
+export const Plant = defineComponent("Plant", { dx: f32(0, { unit: "m" }), lag: f32(0, { min: 0, max: 1 }) });
+
 /** A voice: the sound bit (Sound) it plays when Game.sfx asks for it. */
 export const Voice = defineComponent("Voice", { bit: u32() });
 
@@ -58,6 +80,21 @@ export const Game = defineResource("Game", {
   /** The HUD's touch controls this tick (a phone): the run and the held jump. */
   touchX: f32(0, { min: -1, max: 1 }),
   touchJump: bool(),
+  /** The keeper's breaths: og.Skeleton2DEvent "inhale" (the idle clip's event at 0). */
+  inhales: u32(),
+  /** The keeper's footfalls: og.Skeleton2DEvent "step" (the walk clip's, one per foot). */
+  steps: u32(),
+});
+
+/** Where the keeper walks (`keeper:<x>`), how far it has walked since it set off (its gait's phase), and its clips. */
+export const KeeperWalk = defineResource("KeeperWalk", {
+  goal: f32(6, { unit: "m" }),
+  walked: f32(0, { unit: "m" }),
+  walking: bool(),
+  /** -1 facing left (towards the spawn), 1 right. */
+  facing: f32(-1),
+  idle: u32(),
+  walk: u32(),
 });
 
 function must<T>(r: Result<T>): T {
@@ -161,6 +198,80 @@ export const Animate = defineSystem("Animate", { reads: [Hero, og.PlatformerCont
   }
 });
 
+/**
+ * Walks the keeper towards KeeperWalk.goal along the ramp at the gait's
+ * speed (by scaled time, as the clip plays: paused, both hold), facing the
+ * way it goes, with the walk clip; on arrival it faces the spawn again with
+ * the idle clip (which starts over, breathing in).
+ */
+export const Walk = defineSystem("Walk", { writes: [KeeperWalk, og.Skeleton2D, og.Transform], after: ["Control"] }, (_q, time, world) => {
+  const keeper = world.find("keeper");
+  if (keeper === null) return;
+  const w = must(world.resource(KeeperWalk));
+  const x = must(world.get(keeper, og.Transform)).position.x;
+  const left = w.goal - x;
+  if (left === 0 && !w.walking) return;
+  const step = WALK.speed * time.scaledDt;
+  const arrived = Math.abs(left) <= step;
+  const nx = arrived ? w.goal : x + Math.sign(left) * step;
+  w.walked = arrived ? 0 : (w.walking ? w.walked : 0) + Math.abs(nx - x);
+  w.walking = !arrived;
+  w.facing = arrived ? -1 : Math.sign(left);
+  must(world.set(keeper, og.Transform, { position: { x: nx, y: rampY(nx) + LIFT, z: 0 } }));
+  const s = must(world.get(keeper, og.Skeleton2D));
+  const clip = arrived ? w.idle : w.walk;
+  const flipX = w.facing < 0;
+  // Only what changed: a new clip starts at 0 (the idle clip's breath, the walk's first step).
+  if (s.clip !== clip || s.flipX !== flipX) must(world.set(keeper, og.Skeleton2D, { clip, flipX }));
+});
+
+/**
+ * Puts the keeper's feet on the ramp (og.IkTarget2D: the legs' two-bone IK
+ * reaches each target, the knees bend as the hip bobs). Standing, each foot
+ * is `dx` from the keeper; walking, the front foot's gait phase is the
+ * distance walked over the stride and the back foot's half a cycle later:
+ * for half a cycle a foot stays where it is on the plank while the keeper
+ * passes over it, for the other half it swings a stride forward, lifted on
+ * a parabola. Keeps the lantern's light at its hand, and counts the
+ * clips' breaths and footfalls.
+ */
+export const Plant2D = defineSystem("Plant", { reads: [Plant, KeeperWalk, og.Skeleton2DEvent], writes: [Game, og.IkTarget2D, og.Transform], after: ["Walk"] }, (q, _time, world) => {
+  const keeper = world.find("keeper");
+  if (keeper === null) return;
+  const at = must(world.get(keeper, og.Transform)).position;
+  const w = must(world.resource(KeeperWalk));
+  for (const a of q.archetypes()) {
+    const plant = a.column(Plant);
+    const target = a.column(og.IkTarget2D).target;
+    for (let i = 0; i < a.count; i++) {
+      let ahead = plant.dx[i]!;
+      let lift = 0;
+      if (w.walking) {
+        const phase = w.walked / WALK.stride + plant.lag[i]!;
+        const p = phase - Math.floor(phase);
+        if (p < 0.5) {
+          // Planted: it slides back under the keeper as fast as the keeper walks.
+          ahead += WALK.stride * (0.25 - p);
+        } else {
+          const s = (p - 0.5) * 2;
+          ahead += WALK.stride * (s - 0.5) * 0.5;
+          lift = WALK.lift * 4 * s * (1 - s);
+        }
+      }
+      const x = at.x + w.facing * ahead;
+      target[i * 2] = x;
+      target[i * 2 + 1] = rampY(x) + ANKLE + lift;
+    }
+  }
+  const lantern = world.find("lantern");
+  if (lantern !== null) must(world.set(lantern, og.Transform, { position: { x: at.x - w.facing * LANTERN.x, y: at.y + LANTERN.y, z: 0 } }));
+  const g = must(world.resource(Game));
+  for (const e of world.events(og.Skeleton2DEvent)) {
+    if (e.name === "inhale") g.inhales += 1;
+    else if (e.name === "step") g.steps += 1;
+  }
+});
+
 /** Plays each sound asked for once: a voice still playing is stopped this tick and played again the next. */
 export const Voices = defineSystem("Voices", { reads: [Voice], writes: [Game, og.AudioSource], after: ["Pickups"] }, (q, _time, world) => {
   const g = must(world.resource(Game));
@@ -212,6 +323,42 @@ export const Hud = defineSystem("Hud", { writes: [Game] }, (_q, _time, world) =>
   }
 });
 
+/**
+ * The lamp keeper: a plank ramp, the rig on it facing the spawn, a foot
+ * target per leg, and its lantern's light; og.Lighting2D lights layers 1
+ * and 2 (the keeper, the courier, the coins), the city stays as drawn.
+ */
+function spawnKeeper(world: World, rig: Rig2DInfo): void {
+  const idle = og.anim.clip(rig, "idle");
+  const walk = og.anim.clip(rig, "walk");
+  if (idle < 0 || walk < 0) throw new Error("rigs/keeper.ogt needs clips idle and walk");
+  const mid = (RAMP.x0 + RAMP.x1) / 2;
+  const plank = must(world.spawn({ name: "ramp", position: { x: mid, y: rampY(mid) - 0.2, z: 0 }, quaternion: { x: 0, y: 0, z: RAMP.sinHalf, w: RAMP.cosHalf } }));
+  // The plank is a region of the keeper's texture (pixels 24..64 x 32..40 of 64 x 64).
+  must(world.insert(plank, og.Sprite, { texture: rig.texture, width: RAMP.x1 - RAMP.x0, height: 0.4, uvMin: { x: 0.375, y: 0.5 }, uvMax: { x: 1, y: 0.625 }, layer: 1 }));
+  const x = 6;
+  const keeper = must(world.spawn({ name: "keeper", position: { x, y: rampY(x) + LIFT, z: 0 } }));
+  must(world.insert(keeper, og.Skeleton2D, { rig: rig.rig, clip: idle, flipX: true, layer: 1 }));
+  const w = must(world.resource(KeeperWalk));
+  Object.assign(w, { goal: x, walked: 0, walking: false, facing: -1, idle, walk });
+  // Facing left, the front foot is the left one; the back foot steps half a cycle later.
+  for (const [name, ahead, lag] of [["leg-f", 0.15, 0], ["leg-b", -0.15, 0.5]] as const) {
+    const constraint = rig.constraints.indexOf(name);
+    if (constraint < 0) throw new Error(`rigs/keeper.ogt has no ik ${name}`);
+    const fx = x - ahead;
+    const foot = must(world.spawn({ name: `keeper-${name}` }));
+    must(world.insert(foot, og.IkTarget2D, { skeleton: keeper, constraint, target: { x: fx, y: rampY(fx) + ANKLE }, tolerance: 0.02 }));
+    must(world.insert(foot, Plant, { dx: ahead, lag }));
+  }
+  const light = must(world.spawn({ name: "lantern", position: { x: x + LANTERN.x, y: rampY(x) + LIFT + LANTERN.y, z: 0 } }));
+  must(world.insert(light, og.Light2D, { color: { r: 1, g: 0.72, b: 0.35 }, intensity: 1.6, radius: 4, castShadows: false }));
+  const lighting = must(world.resource(og.Lighting2D));
+  lighting.enabled = true;
+  lighting.ambient = { r: 0.62, g: 0.64, b: 0.78 };
+  lighting.minLayer = 1;
+  lighting.maxLayer = 2;
+}
+
 function checkClips(info: FlipbookInfo): void {
   for (const [name, index] of Object.entries(CLIP)) {
     const at = og.anim.clip(info, name);
@@ -229,13 +376,14 @@ export default og.game({
   look: "looks/origin-game-2d.ogt",
   tick: 60,
   seed: 1,
-  resources: [Game],
-  systems: [Hud, Control, Pickups, Animate, Voices],
+  resources: [Game, KeeperWalk],
+  systems: [Hud, Control, Pickups, Animate, Walk, Plant2D, Voices],
   start(world) {
     const map = must(og.load.tilemap(world, "maps/level.ogt"));
     const courier = must(og.load.flipbook(world, "sprites/courier.ogt"));
     checkClips(courier);
     const coin = must(og.load.flipbook(world, "sprites/coin.ogt"));
+    spawnKeeper(world, must(og.load.rig2d(world, "rigs/keeper.ogt")));
     const height = map.height * map.tileHeight;
 
     const camera = must(world.resource(og.Camera));
@@ -293,13 +441,20 @@ export default og.game({
       if (hero === null || !Number.isFinite(x) || !Number.isFinite(y)) throw new Error("write warp:<x>:<y>");
       must(world.set(hero, og.Transform, { position: { x, y, z: 0 } }));
     },
+    /** `keeper:<x>`: send the keeper walking along the ramp to x (the Walk system moves it; its feet step on the plank). */
+    keeper: (world, args) => {
+      const x = Math.max(RAMP.x0 + 0.4, Math.min(RAMP.x1 - 0.4, Number(args[0])));
+      if (world.find("keeper") === null || !Number.isFinite(x)) throw new Error("write keeper:<x>");
+      must(world.resource(KeeperWalk)).goal = x;
+    },
   },
   commandHelp: {
     warp: { usage: "<x>:<y>", doc: "Put the courier's feet at a world point." },
+    keeper: { usage: "<x>", doc: "Send the lamp keeper walking along its ramp to x." },
   },
   facts: (world) => {
     const g = world.resource(Game);
     if (!g.ok) return {};
-    return { coins: g.value.coins, total: g.value.total, lives: g.value.lives, won: g.value.won, x: g.value.heroX, y: g.value.heroY };
+    return { coins: g.value.coins, total: g.value.total, lives: g.value.lives, won: g.value.won, inhales: g.value.inhales, steps: g.value.steps, x: g.value.heroX, y: g.value.heroY };
   },
 });

package/template-2d/tests/keeper.og.ts

@@ -0,0 +1,93 @@
+// The lamp keeper's playtest (og-game §8, 2D skeletons): the rig plays its
+// idle clip (its event counted as breaths) with both legs' IK targets on
+// the ramp and reached; `keeper:7` sends it walking up the ramp with its
+// walk clip, facing the way it goes, one foot planted on the plank while
+// the other swings above it; it arrives, faces the spawn and breathes again
+// with both feet planted, higher.
+import { playtest } from "@origingame/engine/playtest";
+
+interface Got<T> {
+  value: T;
+}
+
+type Fields = Record<string, number | boolean | string | number[]>;
+
+interface EntityDump {
+  components: Record<string, Fields>;
+}
+
+/** The ramp's top at x (src/main.ts's RAMP), plus the ankle's height. */
+const ankleY = (x: number): number => 2 + 0.21256 * (x - 4.5) + 0.12;
+/** The plank's ends and the highest a swinging foot lifts (src/main.ts's RAMP and WALK). */
+const PLANK = { x0: 4.5, x1: 7.6 } as const;
+const LIFT = 0.08;
+/** The rig's clips, in file order. */
+const IDLE = 0;
+const WALK = 1;
+
+export default playtest({
+  name: "The lamp keeper breathes on its ramp with both feet planted, walks up the slope stepping on the plank, and stands planted again",
+  commands:
+    "1.0:screenshot:keeper.png;1.01:dump_entity:keeper:keeper.json;1.02:dump_entity:keeper-leg-f:front.json;1.03:dump_entity:keeper-leg-b:back.json;" +
+    "2.1:get:Game:game.json;2.2:keeper:7;" +
+    "2.6:screenshot:walk.png;2.61:dump_entity:keeper:walk.json;2.62:dump_entity:keeper-leg-f:walk-front.json;2.63:dump_entity:keeper-leg-b:walk-back.json;" +
+    "2.9:dump_entity:keeper:walk-later.json;2.91:dump_entity:keeper-leg-f:walk-front-later.json;2.92:dump_entity:keeper-leg-b:walk-back-later.json;" +
+    "4.6:dump_entity:keeper:keeper-up.json;4.61:dump_entity:keeper-leg-f:front-up.json;4.62:dump_entity:keeper-leg-b:back-up.json;4.7:get:Game:game-end.json;4.8:quit",
+  check(run, t) {
+    t.ok(run.quit, "the script reached quit");
+    for (const png of ["keeper.png", "walk.png"]) {
+      t.frame(png, () => {
+        const frame = run.png(png);
+        t.ok(frame.width > 0 && frame.height > 0, `a ${frame.width}x${frame.height} frame was captured`);
+      });
+    }
+    const skeleton = (file: string) => run.json<EntityDump>(file).components["og.Skeleton2D"]!;
+    const at = (file: string) => (run.json<EntityDump>(file).components["og.Transform"]!["position"] as number[])[0]!;
+    const foot = (file: string) => run.json<EntityDump>(file).components["og.IkTarget2D"]!;
+
+    // Standing: the idle clip, both feet on the ramp under the keeper.
+    const idle = skeleton("keeper.json");
+    t.ok(idle["clip"] === IDLE && (idle["time"] as number) > 0.9 && (idle["time"] as number) < 1.1, `the idle clip plays (clip ${idle["clip"]}, time ${idle["time"]})`);
+    for (const [file, label, dx, x0] of [["front.json", "front", -0.15, 6], ["back.json", "back", 0.15, 6], ["front-up.json", "front after the walk", -0.15, 7], ["back-up.json", "back after the walk", 0.15, 7]] as const) {
+      const ik = foot(file);
+      const target = ik["target"] as number[];
+      const x = x0 + dx;
+      t.ok(Math.abs(target[0]! - x) < 1e-4 && Math.abs(target[1]! - ankleY(x)) < 1e-4, `the ${label} foot's target is on the ramp (${target.join(", ")})`);
+      t.ok(ik["reached"] === true, `the ${label} foot reached it (error ${ik["error"]})`);
+    }
+
+    // Walking: the walk clip, facing up the ramp, the keeper between where it was and where it goes.
+    let planted = 0;
+    for (const [keeper, front, back] of [["walk.json", "walk-front.json", "walk-back.json"], ["walk-later.json", "walk-front-later.json", "walk-back-later.json"]] as const) {
+      const s = skeleton(keeper);
+      const x = at(keeper);
+      t.ok(s["clip"] === WALK && s["flipX"] === false, `walking, the keeper plays its walk clip facing right (clip ${s["clip"]}, flipX ${s["flipX"]})`);
+      t.ok(x > 6 && x < 7, `walking, it is part of the way along the ramp (x ${x})`);
+      for (const [file, label] of [[front, "front"], [back, "back"]] as const) {
+        const ik = foot(file);
+        const [fx, fy] = ik["target"] as [number, number];
+        const lift = fy - ankleY(fx);
+        t.ok(fx > PLANK.x0 && fx < PLANK.x1 && lift > -1e-4 && lift <= LIFT + 1e-4, `walking, the ${label} foot is on the plank or above it (x ${fx}, ${lift.toFixed(4)} up)`);
+        t.ok(ik["reached"] === true, `walking, the ${label} foot reached its target (error ${ik["error"]})`);
+        if (Math.abs(lift) < 1e-4) planted += 1;
+      }
+    }
+    t.ok(planted >= 2, `while it walks a foot stays planted on the plank (${planted} of 4 targets on it)`);
+    // The back foot carried the keeper from 2.6 s to 2.9 s: it did not move.
+    const before = foot("walk-back.json")["target"] as number[];
+    const later = foot("walk-back-later.json")["target"] as number[];
+    t.ok(Math.abs(before[0]! - later[0]!) < 1e-4 && Math.abs(before[1]! - later[1]!) < 1e-4, `the planted foot stays put while the keeper passes over it (${before.join(", ")} then ${later.join(", ")})`);
+
+    // Arrived: idle again, facing the spawn, at x 7.
+    const up = skeleton("keeper-up.json");
+    t.ok(up["clip"] === IDLE && up["flipX"] === true && Math.abs(at("keeper-up.json") - 7) < 1e-4, `it arrived at 7 and breathes facing the spawn (clip ${up["clip"]}, x ${at("keeper-up.json")})`);
+
+    // A loop of 2 s from tick 0 to 2.1 s passed its event at 0 and at 2; the walk
+    // (2 s at 0.5 m/s, a step every 0.4 s) stepped 5 times, and the idle clip
+    // started over on arrival with a breath.
+    const game = run.json<Got<{ inhales: number }>>("game.json").value;
+    t.ok(game.inhales === 2, `og.Skeleton2DEvent counted two breaths before the walk (${game.inhales})`);
+    const end = run.json<Got<{ inhales: number; steps: number }>>("game-end.json").value;
+    t.ok(end.steps === 5 && end.inhales === 3, `the walk clip's events counted 5 steps, then a third breath (${end.steps}, ${end.inhales})`);
+  },
+});

package/archetypes/tower-defense/assets/skins/pathguard/skin.ogt

@@ -1,111 +0,0 @@
-type skin
-version 1
----
-# Path Guard's skin: the engine's cartoon style pack (templates/ui-kit/tools/make-skins.py; CC0 art, OFL fonts;
-# LICENSES.md) in a night-garden palette: cream panels on the dark lawn, the lantern's orange as the one accent.
-name "pathguard"
-base light
-atlas "skins/pathguard/atlas.png" 384 256
-scale 1
-palette {
-  bg "#10231a"
-  bgSubtle "#15301f"
-  surface "#fff4dc"
-  surfaceRaised "#fff4dc"
-  surfaceHover "#ffe9bd"
-  materialThick "#fff4dcf5"
-  materialRegular "#fff4dcee"
-  materialThin "#fff4dce0"
-  fg "#0f1a14"
-  fgMuted "#3a483f"
-  fgSubtle "#45534a"
-  fgInverse "#fff4dc"
-  fill "#ffe08a"
-  fillStrong "#ffd466"
-  border "#20302a"
-  borderStrong "#20302a"
-  accent "#b44c0d"
-  accentHover "#ab480c"
-  accentActive "#a0430b"
-  accentFg "#fff4dc"
-  accentInk "#a8400a"
-  accentSoft "#ff8c3a40"
-  focus "#5cb6e8"
-  thumb "#ffffff"
-  scrim "#07120ccc"
-  success "#06681b"
-  warn "#7b5102"
-  danger "#700b1c"
-  info "#2256af"
-  shadow "#0b1a1299"
-}
-radius {
-  control 12
-  field 14
-  block 14
-  card 18
-  panel 28
-  sheet 28
-  button 9999
-}
-ramp {
-  body 15 20
-  meta 13 18
-  caption 13 18
-  lg 19 26
-  xl 22 28
-  xl2 26 30
-  xl3 30 34
-  displaySm 32 36
-  displayMd 40 44
-  displayLg 52 56
-}
-durations {
-  instant 110
-  fast 160
-  base 280
-  slow 420
-}
-fonts {
-  body "skins/pathguard/Fredoka-SemiBold.ttf"
-  display "skins/pathguard/LilitaOne-Regular.ttf"
-  numeric "skins/pathguard/LilitaOne-Regular.ttf"
-  fallback "fonts/NotoSansSC-subset.ttf"
-}
-icons "skins/pathguard/icons.png" 8 4 {
-  names "heart" "star" "coin" "lock" "pause" "gear" "sword" "shield" "potion" "gem" "key" "map" "bolt" "clock" "trophy" "home" "plus" "close" "check" "play" "back" "bag" "bomb" "crown" "flag" "apple" "leaf" "fire" "drop" "skull" "music" "person"
-}
-slice panel 4 4 96 96 30 tint
-slice card 104 4 64 64 20 tint
-slice button 172 4 48 48 20 tint
-slice buttonHover 224 4 48 48 20 tint
-slice buttonPressed 276 4 48 48 20 tint
-slice buttonDisabled 328 4 48 48 20 tint
-slice field 4 104 48 48 16 tint
-slice slot 56 104 48 48 16 tint
-slice tooltip 108 104 32 32 13 tint
-slice capsule 144 104 32 32 15 tint
-slice track 180 104 32 16 7 tint
-slice fill 216 104 32 16 7 tint
-soft 252 104 64 64 24
-divider 4 172 128 24 48 16 accent
-flourish 136 172 64 24 22 10 accent 2
-shadow panel 0 8 0 0 "#0b1a12cc"
-shadow card 0 5 0 0 "#0b1a1299"
-shadow button 0 5 0 0 "#0b1a12cc"
-shadow capsule 0 4 0 0 "#0b1a1299"
-shadow slot 0 3 0 0 "#0b1a1266"
-textShadow display 0 4 0 "#0b1a12"
-# Body text gets a hairline of its own ink to the right: the Chinese fallback
-# (Noto Sans SC Regular) reads at the weight of the Latin face.
-textShadow body 1 0 0 "#20302a"
-press 1.08 0.88 3
-hover -3 1.04
-motion {
-  enter pop
-  stagger 50
-  toast pop
-  progress 360
-  shake 8
-  pop 0.22
-}