@motionscript/grids 0.1.0-alpha.8 → 0.1.0-alpha.9

package/registry.json

@@ -1,32 +1,32 @@
-{
-  "kit": {
-    "barrel": "src/engine.ts",
-    "specifier": "@motionscript/grids/kit"
-  },
-  "items": [
-    {
-      "name": "rectangular-grid",
-      "description": "Children in rows and columns, with brick offsets and cells that fit, fix or fill.",
-      "root": "src/rectangular-grid",
-      "files": ["index.ts", "rectangular-grid.ts"]
-    },
-    {
-      "name": "radial-grid",
-      "description": "Children round a circle or along an arc, turned to face out if you like.",
-      "root": "src/radial-grid",
-      "files": ["index.ts", "radial-grid.ts"]
-    },
-    {
-      "name": "path-grid",
-      "description": "Children spaced along a template, a path of their own, or a Path node in the scene.",
-      "root": "src/path-grid",
-      "files": ["index.ts", "path-grid.ts"]
-    },
-    {
-      "name": "sphere-grid",
-      "description": "Children spread evenly over a sphere, seen through a camera of its own.",
-      "root": "src/sphere-grid",
-      "files": ["index.ts", "sphere-grid.ts"]
-    }
-  ]
-}
+{
+  "kit": {
+    "barrel": "src/engine.ts",
+    "specifier": "@motionscript/grids/kit"
+  },
+  "items": [
+    {
+      "name": "rectangular-grid",
+      "description": "Children in rows and columns, with brick offsets and cells that fit, fix or fill.",
+      "root": "src/rectangular-grid",
+      "files": ["index.ts", "rectangular-grid.ts"]
+    },
+    {
+      "name": "radial-grid",
+      "description": "Children round a circle or along an arc, turned to face out if you like.",
+      "root": "src/radial-grid",
+      "files": ["index.ts", "radial-grid.ts"]
+    },
+    {
+      "name": "path-grid",
+      "description": "Children spaced along a template, a path of their own, or a Path node in the scene.",
+      "root": "src/path-grid",
+      "files": ["index.ts", "path-grid.ts"]
+    },
+    {
+      "name": "sphere-grid",
+      "description": "Children spread evenly over a sphere, seen through a camera of its own.",
+      "root": "src/sphere-grid",
+      "files": ["index.ts", "sphere-grid.ts"]
+    }
+  ]
+}

package/src/engine.ts

@@ -1,12 +1,12 @@
-/**
- * The item grid **kit**: what the four grids share, and what a copied one does
- * not copy.
- *
- * `ms add` writes a grid's own files into your project and rewrites its reach for
- * these to `@motionscript/grids`, so the shared parts stay a real
- * dependency. That is not a size decision. `ItemGrid` keeps the register of
- * grids a morph looks another grid's arrangement up in, so a second copy of it
- * would be a second register, and a morph from one grid to another would only
- * find the grids its own copy was told of.
- */
-export * from "./kit"
+/**
+ * The item grid **kit**: what the four grids share, and what a copied one does
+ * not copy.
+ *
+ * A copy takes a grid's own files into your project and rewrites its reach for
+ * these to `@motionscript/grids`, so the shared parts stay a real
+ * dependency. That is not a size decision. `ItemGrid` keeps the register of
+ * grids a morph looks another grid's arrangement up in, so a second copy of it
+ * would be a second register, and a morph from one grid to another would only
+ * find the grids its own copy was told of.
+ */
+export * from "./kit"

package/src/index.ts

@@ -1,6 +1,6 @@
-export * from "./rectangular-grid"
-export * from "./radial-grid"
-export * from "./path-grid"
-export * from "./sphere-grid"
-export * from "./engine"
-export { NODES } from "./nodes"
+export * from "./rectangular-grid"
+export * from "./radial-grid"
+export * from "./path-grid"
+export * from "./sphere-grid"
+export * from "./engine"
+export { NODES } from "./nodes"

package/src/kit/index.ts

@@ -1,18 +1,18 @@
-export * from "./slots"
-export * from "./stagger"
-export * from "./item-effects"
-export * from "./order"
-export * from "./random"
-export * as ItemGrid from "./item-grid"
-export {
-  contentBoxOf,
-  ITEM_GRID_TYPES,
-  staggerArgs,
-  TRANSITION_STAGGER,
-  type GridSnapshot,
-  type GridTransition,
-  type StaggerArgs,
-} from "./item-grid"
-
-// Once this kit's own; kept on its barrel for whoever imports them from it.
-export { findNode2D, frameIn } from "@motionscript/sdk"
+export * from "./slots"
+export * from "./stagger"
+export * from "./item-effects"
+export * from "./order"
+export * from "./random"
+export * as ItemGrid from "./item-grid"
+export {
+  contentBoxOf,
+  ITEM_GRID_TYPES,
+  staggerArgs,
+  TRANSITION_STAGGER,
+  type GridSnapshot,
+  type GridTransition,
+  type StaggerArgs,
+} from "./item-grid"
+
+// Once this kit's own; kept on its barrel for whoever imports them from it.
+export { findNode2D, frameIn } from "@motionscript/sdk"

package/src/kit/item-effects.ts

@@ -1,114 +1,114 @@
-import type { Size2D } from "@motionscript/sdk"
-
-import type { Slot } from "./slots"
-
-/**
- * What an item does on its way in (or out): grow from nothing, fade, fly out of
- * the grid's centre, rise into place, flip up, or spin in.
- */
-export const REVEAL_STYLES = ["scale", "fade", "center", "rise", "flip", "spin"] as const
-export type RevealStyle = (typeof REVEAL_STYLES)[number]
-
-/** What a wave does to each item as it passes. */
-export const WAVE_STYLES = ["scale", "lift", "fade", "spin"] as const
-export type WaveStyle = (typeof WAVE_STYLES)[number]
-
-/**
- * How far into view each item is, `1` shown and `0` gone — past `1` on the
- * way to it under an overshooting ease. Absent means every item is shown.
- */
-export interface RevealState {
-  style: RevealStyle
-  values: readonly number[]
-}
-
-/** Each item's share of the wave passing through it, `0` at rest and `1` at the crest. */
-export interface WaveState {
-  style: WaveStyle
-  /** How big the crest is — a share of the item's size, opacity or a turn, by style. */
-  amount: number
-  values: readonly number[]
-}
-
-/** Each item's emphasis: `1` the focus, `-1` pushed back, `0` untouched. */
-export interface FocusState {
-  /** How far the others fade, `0..1`. */
-  dim: number
-  /** How much the focus grows, as a share of its size; the others shrink by half that. */
-  grow: number
-  values: readonly number[]
-}
-
-/** Layer item `i`'s reveal, wave and focus onto its slot, in place. */
-export function applyItemEffects(
-  s: Slot,
-  i: number,
-  size: Size2D,
-  reveal: RevealState | null | undefined,
-  wave: WaveState | null | undefined,
-  focus: FocusState | null | undefined,
-): void {
-  if (reveal) applyReveal(s, reveal.style, reveal.values[i] ?? 1, size)
-  if (wave) applyWave(s, wave, wave.values[i] ?? 0, size)
-  if (focus) applyFocus(s, focus, focus.values[i] ?? 0)
-}
-
-function applyReveal(s: Slot, style: RevealStyle, v: number, size: Size2D): void {
-  if (v === 1) return
-  const shown = clamp01(v)
-  switch (style) {
-    case "fade":
-      s.opacity *= shown
-      break
-    case "center":
-      s.x *= v
-      s.y *= v
-      s.depth *= v
-      s.opacity *= clamp01(v * 4)
-      break
-    case "rise":
-      s.y -= (1 - v) * Math.max(40, size.height)
-      s.opacity *= shown
-      break
-    case "flip":
-      s.rotationX += (1 - v) * 90
-      break
-    case "spin":
-      s.rotation -= (1 - v) * 180
-      s.scale *= Math.max(0, v)
-      break
-    default:
-      s.scale *= Math.max(0, v)
-  }
-}
-
-function applyWave(s: Slot, wave: WaveState, w: number, size: Size2D): void {
-  if (w === 0) return
-  switch (wave.style) {
-    case "lift":
-      s.y += wave.amount * w * Math.max(40, size.height)
-      break
-    case "fade":
-      s.opacity *= clamp01(1 - wave.amount * w)
-      break
-    case "spin":
-      s.rotation += wave.amount * w * 360
-      break
-    default:
-      s.scale *= 1 + wave.amount * w
-  }
-}
-
-function applyFocus(s: Slot, focus: FocusState, f: number): void {
-  if (f === 0) return
-  if (f > 0) {
-    s.scale *= 1 + focus.grow * f
-    return
-  }
-  s.opacity *= clamp01(1 - focus.dim * -f)
-  s.scale *= Math.max(0, 1 + focus.grow * 0.5 * f)
-}
-
-function clamp01(v: number): number {
-  return v < 0 ? 0 : v > 1 ? 1 : v
-}
+import type { Size2D } from "@motionscript/sdk"
+
+import type { Slot } from "./slots"
+
+/**
+ * What an item does on its way in (or out): grow from nothing, fade, fly out of
+ * the grid's centre, rise into place, flip up, or spin in.
+ */
+export const REVEAL_STYLES = ["scale", "fade", "center", "rise", "flip", "spin"] as const
+export type RevealStyle = (typeof REVEAL_STYLES)[number]
+
+/** What a wave does to each item as it passes. */
+export const WAVE_STYLES = ["scale", "lift", "fade", "spin"] as const
+export type WaveStyle = (typeof WAVE_STYLES)[number]
+
+/**
+ * How far into view each item is, `1` shown and `0` gone — past `1` on the
+ * way to it under an overshooting ease. Absent means every item is shown.
+ */
+export interface RevealState {
+  style: RevealStyle
+  values: readonly number[]
+}
+
+/** Each item's share of the wave passing through it, `0` at rest and `1` at the crest. */
+export interface WaveState {
+  style: WaveStyle
+  /** How big the crest is — a share of the item's size, opacity or a turn, by style. */
+  amount: number
+  values: readonly number[]
+}
+
+/** Each item's emphasis: `1` the focus, `-1` pushed back, `0` untouched. */
+export interface FocusState {
+  /** How far the others fade, `0..1`. */
+  dim: number
+  /** How much the focus grows, as a share of its size; the others shrink by half that. */
+  grow: number
+  values: readonly number[]
+}
+
+/** Layer item `i`'s reveal, wave and focus onto its slot, in place. */
+export function applyItemEffects(
+  s: Slot,
+  i: number,
+  size: Size2D,
+  reveal: RevealState | null | undefined,
+  wave: WaveState | null | undefined,
+  focus: FocusState | null | undefined,
+): void {
+  if (reveal) applyReveal(s, reveal.style, reveal.values[i] ?? 1, size)
+  if (wave) applyWave(s, wave, wave.values[i] ?? 0, size)
+  if (focus) applyFocus(s, focus, focus.values[i] ?? 0)
+}
+
+function applyReveal(s: Slot, style: RevealStyle, v: number, size: Size2D): void {
+  if (v === 1) return
+  const shown = clamp01(v)
+  switch (style) {
+    case "fade":
+      s.opacity *= shown
+      break
+    case "center":
+      s.x *= v
+      s.y *= v
+      s.depth *= v
+      s.opacity *= clamp01(v * 4)
+      break
+    case "rise":
+      s.y -= (1 - v) * Math.max(40, size.height)
+      s.opacity *= shown
+      break
+    case "flip":
+      s.rotationX += (1 - v) * 90
+      break
+    case "spin":
+      s.rotation -= (1 - v) * 180
+      s.scale *= Math.max(0, v)
+      break
+    default:
+      s.scale *= Math.max(0, v)
+  }
+}
+
+function applyWave(s: Slot, wave: WaveState, w: number, size: Size2D): void {
+  if (w === 0) return
+  switch (wave.style) {
+    case "lift":
+      s.y += wave.amount * w * Math.max(40, size.height)
+      break
+    case "fade":
+      s.opacity *= clamp01(1 - wave.amount * w)
+      break
+    case "spin":
+      s.rotation += wave.amount * w * 360
+      break
+    default:
+      s.scale *= 1 + wave.amount * w
+  }
+}
+
+function applyFocus(s: Slot, focus: FocusState, f: number): void {
+  if (f === 0) return
+  if (f > 0) {
+    s.scale *= 1 + focus.grow * f
+    return
+  }
+  s.opacity *= clamp01(1 - focus.dim * -f)
+  s.scale *= Math.max(0, 1 + focus.grow * 0.5 * f)
+}
+
+function clamp01(v: number): number {
+  return v < 0 ? 0 : v > 1 ? 1 : v
+}