@gitlab/ui 137.3.1 → 138.0.0

package/dist/utils/confetti/confetti.js

@@ -0,0 +1,189 @@
+import { COVERAGE_RAMP } from './palette';
+import { createPieces, advancePiece } from './particles';
+import { createField } from './field';
+import { CANVAS_Z_INDEX, DEFAULT_DURATION, FADE_OUT_DURATION, MAX_FRAME_DELTA } from './constants';
+
+const noop = () => {};
+const RUNNING_ATTRIBUTE = 'data-confetti';
+const measureStage = boundary => {
+  const rect = boundary instanceof Element ? boundary.getBoundingClientRect() : {
+    left: 0,
+    top: 0,
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+  return {
+    x: rect.left,
+    y: rect.top,
+    width: rect.width,
+    height: rect.height
+  };
+};
+const stagePoint = (element, stage) => {
+  if (!(element instanceof Element)) {
+    return null;
+  }
+  const rect = element.getBoundingClientRect();
+  return {
+    x: rect.left + rect.width / 2 - stage.x,
+    y: rect.top + rect.height / 2 - stage.y
+  };
+};
+const createCanvas = () => {
+  const canvas = document.createElement('canvas');
+  canvas.setAttribute('aria-hidden', 'true');
+  canvas.setAttribute(RUNNING_ATTRIBUTE, '');
+  Object.assign(canvas.style, {
+    position: 'fixed',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    zIndex: String(CANVAS_Z_INDEX)
+  });
+  return canvas;
+};
+
+/**
+ * Bursts a dithered field of pixel blocks, lets it fall, then cleans up after itself.
+ *
+ * Every option has a default, so `confetti()` on its own fires from the bottom corners of the
+ * viewport. The blocks shrink as they fall and as they fade, and the ones furthest back start
+ * smaller, which is what gives the field its depth.
+ *
+ * Only one burst runs at a time: a call made while another is still on screen does nothing and
+ * returns a no-op, so a double click cannot stack two canvases.
+ *
+ * Does nothing when the user prefers reduced motion, or outside a browser.
+ *
+ * The canvas is `aria-hidden`, so nobody using a screen reader will know it fired. When the
+ * confetti is the only sign that something worked, the caller has to convey that success in the
+ * accessibility tree as well.
+ *
+ * @param {Object} [options]
+ * @param {Number} [options.count] Number of pieces. Defaults to a count scaled to the area it
+ * plays in, so a small `boundary` gets proportionally fewer.
+ * @param {Number} [options.duration=3000] How long the animation runs, in milliseconds.
+ * @param {String[]} [options.colors] CSS colors for the coverage ramp, sparse to dense: the first
+ * paints the thinnest edge of a cluster and the last its densest center. Any length works, and the
+ * first four double as the chromatic fringe colors. Defaults to the brand purple, red and orange
+ * color tokens.
+ * @param {Element} [options.origin] Element to burst from. Defaults to the bottom corners.
+ * @param {Element} [options.boundary] Element to confine the confetti to. Defaults to the viewport.
+ * @example
+ * const stop = confetti({ origin: button, colors: ['#7759c2', '#a989f5', '#fca326'] });
+ * @returns {Function} Stops the animation and removes the canvas early.
+ */
+const confetti = function () {
+  var _window$matchMedia, _window;
+  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    count = _ref.count,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? DEFAULT_DURATION : _ref$duration,
+    colors = _ref.colors,
+    origin = _ref.origin,
+    boundary = _ref.boundary;
+  if (typeof window === 'undefined' || (_window$matchMedia = (_window = window).matchMedia) !== null && _window$matchMedia !== void 0 && _window$matchMedia.call(_window, '(prefers-reduced-motion: reduce)').matches || document.querySelector(`[${RUNNING_ATTRIBUTE}]`)) {
+    return noop;
+  }
+  const canvas = createCanvas();
+  const context = canvas.getContext('2d');
+  if (!context) {
+    return noop;
+  }
+  const stage = measureStage(boundary);
+  const resize = () => {
+    const ratio = window.devicePixelRatio || 1;
+    canvas.width = window.innerWidth * ratio;
+    canvas.height = window.innerHeight * ratio;
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+  };
+  const fadeOutDuration = Math.min(FADE_OUT_DURATION, duration);
+  const field = createField({
+    ramp: colors !== null && colors !== void 0 && colors.length ? colors : COVERAGE_RAMP,
+    duration
+  });
+  const cleared = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  };
+  let lastColor = null;
+  const drawBlock = _ref2 => {
+    let x = _ref2.x,
+      y = _ref2.y,
+      size = _ref2.size,
+      color = _ref2.color;
+    if (color !== lastColor) {
+      lastColor = color;
+      context.fillStyle = color;
+    }
+    context.fillRect(x, y, size, size);
+  };
+  const clearStage = () => {
+    const moved = stage.x !== cleared.x || stage.y !== cleared.y || stage.width !== cleared.width || stage.height !== cleared.height;
+    if (moved) {
+      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+      Object.assign(cleared, stage);
+    } else {
+      context.clearRect(stage.x, stage.y, stage.width, stage.height);
+    }
+  };
+  let pieces = createPieces({
+    stage,
+    origin: stagePoint(origin, stage),
+    count
+  });
+  let frame = null;
+  let startedAt = null;
+  let previousAt = null;
+  const stop = () => {
+    if (frame !== null) {
+      window.cancelAnimationFrame(frame);
+      frame = null;
+    }
+    window.removeEventListener('resize', resize);
+    canvas.remove();
+  };
+  const render = now => {
+    var _startedAt, _previousAt;
+    (_startedAt = startedAt) !== null && _startedAt !== void 0 ? _startedAt : startedAt = now;
+    const elapsed = now - startedAt;
+    const delta = Math.min(now - ((_previousAt = previousAt) !== null && _previousAt !== void 0 ? _previousAt : now), MAX_FRAME_DELTA);
+    previousAt = now;
+    if (elapsed >= duration) {
+      stop();
+      return;
+    }
+    Object.assign(stage, measureStage(boundary));
+    clearStage();
+    lastColor = null;
+    context.globalAlpha = Math.min(1, (duration - elapsed) / fadeOutDuration);
+    context.save();
+    context.beginPath();
+    context.rect(stage.x, stage.y, stage.width, stage.height);
+    context.clip();
+    context.translate(stage.x, stage.y);
+    pieces = pieces.map(piece => advancePiece(piece, {
+      elapsed,
+      delta
+    }));
+    field.resize(stage);
+    pieces.forEach(piece => {
+      if (elapsed >= piece.delay) {
+        field.stamp(piece, elapsed);
+      }
+    });
+    field.paint(drawBlock);
+    context.restore();
+    frame = window.requestAnimationFrame(render);
+  };
+  resize();
+  window.addEventListener('resize', resize);
+  document.body.append(canvas);
+  frame = window.requestAnimationFrame(render);
+  return stop;
+};
+
+export { confetti };

package/dist/utils/confetti/constants.js

@@ -0,0 +1,36 @@
+const DEFAULT_COUNT = 168;
+const MIN_AUTO_COUNT = 36;
+const AREA_EXPONENT = 0.4;
+const DEFAULT_DURATION = 3000;
+const FADE_OUT_DURATION = 600;
+const CANVAS_Z_INDEX = 9999;
+const MAX_FRAME_DELTA = 50;
+const EDGE_ANGLE = 54 * Math.PI / 180;
+const POINT_ANGLE = Math.PI / 2;
+const POINT_POWER = 0.8;
+const MIN_REACH = 0.04;
+const REACH_HEADROOM = 1.3;
+const BAYER = [[0, 8, 2, 10], [12, 4, 14, 6], [3, 11, 1, 9], [15, 7, 13, 5]];
+const CONFIG = {
+  burstWindow: 220,
+  edgeSpread: 46,
+  pointSpread: 75,
+  aimJitter: 5,
+  drag: 0.0022,
+  gravity: 0.0005,
+  cell: 10,
+  fringeCells: 2,
+  blobCells: 1.4,
+  blobCellRange: 2,
+  stretch: 1.6,
+  stretchRange: 1.4,
+  peak: 0.55,
+  peakRange: 0.45,
+  falloff: 1.3,
+  decayMin: 0.45,
+  pixelFloor: 0.5,
+  pixelFade: 0.6,
+  pixelMin: 2
+};
+
+export { AREA_EXPONENT, BAYER, CANVAS_Z_INDEX, CONFIG, DEFAULT_COUNT, DEFAULT_DURATION, EDGE_ANGLE, FADE_OUT_DURATION, MAX_FRAME_DELTA, MIN_AUTO_COUNT, MIN_REACH, POINT_ANGLE, POINT_POWER, REACH_HEADROOM };

package/dist/utils/confetti/field.js

@@ -0,0 +1,114 @@
+import { BAYER, CONFIG } from './constants';
+import { FRINGE_KEYS } from './palette';
+
+const SPAN = BAYER.length;
+const LEVELS = SPAN * SPAN;
+const createField = _ref => {
+  let ramp = _ref.ramp,
+    duration = _ref.duration;
+  const last = ramp.length - 1;
+  let columns = 0;
+  let rows = 0;
+  let coverage = new Float32Array(0);
+  let sizes = new Float32Array(0);
+  let fromColumn = 0;
+  let toColumn = -1;
+  let fromRow = 0;
+  let toRow = -1;
+  const valueAt = (column, row) => column < 0 || column >= columns ? 0 : coverage[row * columns + column];
+  const thresholdAt = (column, row) => BAYER[row % SPAN][column % SPAN] / LEVELS;
+  const fringeKey = (column, row, threshold) => (valueAt(column - CONFIG.fringeCells, row) > threshold ? 1 : 0) + (valueAt(column, row) > threshold ? 2 : 0) + (valueAt(column + CONFIG.fringeCells, row) > threshold ? 4 : 0);
+  const fringeColor = (column, row, threshold) => {
+    const index = FRINGE_KEYS[fringeKey(column, row, threshold)];
+    return index === null ? null : ramp[Math.min(last, index)];
+  };
+  const coverageColor = value => ramp[Math.min(last, Math.floor(value * ramp.length))];
+  const pixelSize = index => Math.max(CONFIG.pixelMin, Math.round(CONFIG.cell * sizes[index]));
+  const resize = stage => {
+    const nextColumns = Math.ceil(stage.width / CONFIG.cell) + 1;
+    const nextRows = Math.ceil(stage.height / CONFIG.cell) + 1;
+    if (nextColumns !== columns || nextRows !== rows) {
+      columns = nextColumns;
+      rows = nextRows;
+      coverage = new Float32Array(columns * rows);
+      sizes = new Float32Array(columns * rows);
+    } else {
+      coverage.fill(0);
+    }
+    fromColumn = columns;
+    toColumn = -1;
+    fromRow = rows;
+    toRow = -1;
+  };
+  const stamp = (piece, elapsed) => {
+    const age = (elapsed - piece.delay) / (duration * piece.decayFrom);
+    const strength = piece.peak * Math.max(0, 1 - age);
+    if (strength <= 0) {
+      return;
+    }
+    const fade = 1 - CONFIG.pixelFade * age;
+    const near = CONFIG.pixelFloor + piece.depth * (1 - CONFIG.pixelFloor);
+    const size = near * fade;
+    const radius = piece.radius * fade;
+    const stretch = piece.stretch;
+    const centerX = piece.x / CONFIG.cell;
+    const centerY = piece.y / CONFIG.cell;
+    const speed = Math.hypot(piece.velocityX, piece.velocityY) || 1;
+    const alongX = piece.velocityX / speed;
+    const alongY = piece.velocityY / speed;
+    const reach = radius * stretch;
+    const fromX = Math.max(0, Math.ceil(centerX - reach));
+    const toX = Math.min(columns - 1, Math.floor(centerX + reach));
+    const fromY = Math.max(0, Math.ceil(centerY - reach));
+    const toY = Math.min(rows - 1, Math.floor(centerY + reach));
+    fromColumn = Math.min(fromColumn, fromX);
+    toColumn = Math.max(toColumn, toX);
+    fromRow = Math.min(fromRow, fromY);
+    toRow = Math.max(toRow, toY);
+    for (let row = fromY; row <= toY; row += 1) {
+      const deltaY = row - centerY;
+      for (let column = fromX; column <= toX; column += 1) {
+        const deltaX = column - centerX;
+        const along = (deltaX * alongX + deltaY * alongY) / stretch;
+        const across = deltaX * alongY - deltaY * alongX;
+        const distance = Math.hypot(along, across) / radius;
+        if (distance < 1) {
+          const index = row * columns + column;
+          const value = strength * (1 - distance) ** CONFIG.falloff;
+          if (value > coverage[index]) {
+            coverage[index] = value;
+            sizes[index] = size;
+          }
+        }
+      }
+    }
+  };
+  const paint = drawBlock => {
+    for (let row = fromRow; row <= toRow; row += 1) {
+      for (let column = fromColumn; column <= toColumn; column += 1) {
+        var _fringeColor;
+        const index = row * columns + column;
+        const threshold = thresholdAt(column, row);
+        const value = coverage[index];
+        if (value <= threshold) {
+          continue;
+        }
+        const size = pixelSize(index);
+        const inset = Math.round((CONFIG.cell - size) / 2);
+        drawBlock({
+          x: column * CONFIG.cell + inset,
+          y: row * CONFIG.cell + inset,
+          size,
+          color: (_fringeColor = fringeColor(column, row, threshold)) !== null && _fringeColor !== void 0 ? _fringeColor : coverageColor(value)
+        });
+      }
+    }
+  };
+  return {
+    resize,
+    stamp,
+    paint
+  };
+};
+
+export { createField };

package/dist/utils/confetti/palette.js

@@ -0,0 +1,6 @@
+import { GL_COLOR_BRAND_PURPLE_02P, GL_COLOR_RED_500, GL_COLOR_BRAND_ORANGE_02P, GL_COLOR_BRAND_ORANGE_01P } from '../../tokens/build/js/tokens';
+
+const COVERAGE_RAMP = [GL_COLOR_BRAND_PURPLE_02P, GL_COLOR_RED_500, GL_COLOR_BRAND_ORANGE_02P, GL_COLOR_BRAND_ORANGE_01P];
+const FRINGE_KEYS = [null, null, 0, 1, null, 2, 3, null];
+
+export { COVERAGE_RAMP, FRINGE_KEYS };

package/dist/utils/confetti/particles.js

@@ -0,0 +1,92 @@
+import { REACH_HEADROOM, CONFIG, MIN_AUTO_COUNT, DEFAULT_COUNT, AREA_EXPONENT, EDGE_ANGLE, POINT_ANGLE, POINT_POWER, MIN_REACH } from './constants';
+
+const randomBetween = (min, max) => min + Math.random() * (max - min);
+const degrees = value => value * Math.PI / 180;
+const aimJitter = () => randomBetween(-degrees(CONFIG.aimJitter), degrees(CONFIG.aimJitter));
+const countFor = stage => {
+  const share = stage.width * stage.height / (window.innerWidth * window.innerHeight);
+  return Math.round(Math.max(MIN_AUTO_COUNT, DEFAULT_COUNT * share ** AREA_EXPONENT));
+};
+const launchFromEdges = (stage, index) => {
+  const fromLeft = index % 2 === 0;
+  return {
+    x: fromLeft ? -10 : stage.width + 10,
+    y: stage.height + 10,
+    aim: Math.max(EDGE_ANGLE, Math.atan2(stage.height, stage.width)),
+    spread: degrees(CONFIG.edgeSpread),
+    direction: fromLeft ? 1 : -1,
+    power: 1
+  };
+};
+const launchFromPoint = origin => ({
+  x: origin.x,
+  y: origin.y,
+  aim: POINT_ANGLE,
+  spread: degrees(CONFIG.pointSpread),
+  direction: 1,
+  power: POINT_POWER
+});
+const createPiece = _ref => {
+  let stage = _ref.stage,
+    origin = _ref.origin,
+    index = _ref.index,
+    jitter = _ref.jitter,
+    maxSpeed = _ref.maxSpeed;
+  const launch = origin ? launchFromPoint(origin) : launchFromEdges(stage, index);
+  const depth = Math.random();
+  const reach = Math.sqrt(randomBetween(MIN_REACH, 1));
+  const speed = maxSpeed * launch.power * reach * (0.85 + depth * 0.2);
+  const angle = launch.aim + jitter + randomBetween(-launch.spread, launch.spread);
+  return {
+    depth,
+    x: launch.x,
+    y: launch.y,
+    delay: randomBetween(0, CONFIG.burstWindow),
+    radius: CONFIG.blobCells + depth * CONFIG.blobCellRange,
+    stretch: CONFIG.stretch + Math.random() * CONFIG.stretchRange,
+    peak: CONFIG.peak + depth * CONFIG.peakRange,
+    decayFrom: randomBetween(CONFIG.decayMin, 1),
+    velocityX: Math.cos(angle) * speed * launch.direction,
+    velocityY: -Math.sin(angle) * speed,
+    swayAmplitude: randomBetween(0.02, 0.08) * (1.3 - depth * 0.5),
+    swayFrequency: randomBetween(0.001, 0.003),
+    swayPhase: Math.random() * Math.PI * 2
+  };
+};
+const createPieces = _ref2 => {
+  let stage = _ref2.stage,
+    origin = _ref2.origin,
+    count = _ref2.count;
+  const travel = Math.max(Math.hypot(stage.width, stage.height), stage.height * REACH_HEADROOM);
+  const maxSpeed = travel * CONFIG.drag;
+  const jitter = aimJitter();
+  return Array.from({
+    length: count !== null && count !== void 0 ? count : countFor(stage)
+  }, (value, index) => createPiece({
+    stage,
+    origin,
+    index,
+    jitter,
+    maxSpeed
+  }));
+};
+const advancePiece = (piece, _ref3) => {
+  let elapsed = _ref3.elapsed,
+    delta = _ref3.delta;
+  if (elapsed < piece.delay) {
+    return piece;
+  }
+  const drag = Math.exp(-CONFIG.drag * delta);
+  const velocityX = piece.velocityX * drag;
+  const velocityY = (piece.velocityY + CONFIG.gravity * delta) * drag;
+  const sway = Math.sin(piece.swayPhase + elapsed * piece.swayFrequency) * piece.swayAmplitude;
+  return {
+    ...piece,
+    velocityX,
+    velocityY,
+    x: piece.x + (velocityX + sway) * delta,
+    y: piece.y + velocityY * delta
+  };
+};
+
+export { advancePiece, createPieces };

package/dist/utils/matrix/columns.js

@@ -0,0 +1,54 @@
+import { CONFIG, GLYPHS } from './constants';
+
+const randomBetween = (min, max) => min + Math.random() * (max - min);
+const sample = values => values[Math.floor(Math.random() * values.length)];
+const glyph = () => sample(GLYPHS);
+const measureGrid = _ref => {
+  let width = _ref.width,
+    height = _ref.height;
+  return {
+    across: Math.ceil(width / CONFIG.cell),
+    rows: Math.ceil(height / CONFIG.cell)
+  };
+};
+const createColumns = (stage, colors) => {
+  const _measureGrid = measureGrid(stage),
+    across = _measureGrid.across,
+    rows = _measureGrid.rows;
+  return Array.from({
+    length: across
+  }, (value, column) => ({
+    column,
+    rows,
+    row: -randomBetween(0, CONFIG.startSpread),
+    speed: randomBetween(CONFIG.minSpeed, CONFIG.maxSpeed),
+    color: sample(colors),
+    head: null,
+    steps: []
+  })).filter(() => Math.random() < CONFIG.columnShare);
+};
+const advanceColumn = (column, delta) => {
+  if (column.row > column.rows + CONFIG.restartAfter) {
+    return {
+      ...column,
+      row: -randomBetween(0, CONFIG.restartSpread),
+      head: null,
+      steps: []
+    };
+  }
+  const row = column.row + column.speed * delta;
+  const from = Math.max(0, Math.ceil(column.row));
+  const to = Math.min(column.rows, Math.floor(row));
+  const steps = [];
+  for (let step = from; step <= to; step += 1) {
+    steps.push(step);
+  }
+  return {
+    ...column,
+    row,
+    head: steps.length ? steps.at(-1) : column.head,
+    steps
+  };
+};
+
+export { advanceColumn, createColumns, glyph, measureGrid };

package/dist/utils/matrix/constants.js

@@ -0,0 +1,19 @@
+const GLYPHS = ['G', 'L'];
+const FONT = 'ui-monospace, SFMono-Regular, Menlo, monospace';
+const DEFAULT_DURATION = 6000;
+const FADE_OUT_DURATION = 900;
+const CANVAS_Z_INDEX = 9999;
+const MAX_FRAME_DELTA = 50;
+const RUNNING_ATTRIBUTE = 'data-matrix';
+const CONFIG = {
+  cell: 16,
+  trail: 0.0016,
+  minSpeed: 0.004,
+  maxSpeed: 0.014,
+  columnShare: 0.72,
+  startSpread: 30,
+  restartSpread: 10,
+  restartAfter: 3
+};
+
+export { CANVAS_Z_INDEX, CONFIG, DEFAULT_DURATION, FADE_OUT_DURATION, FONT, GLYPHS, MAX_FRAME_DELTA, RUNNING_ATTRIBUTE };

package/dist/utils/matrix/matrix.js

@@ -0,0 +1,157 @@
+import { resolveColors } from './palette';
+import { createColumns, measureGrid, advanceColumn, glyph } from './columns';
+import { RUNNING_ATTRIBUTE, CANVAS_Z_INDEX, FADE_OUT_DURATION, CONFIG, FONT, DEFAULT_DURATION, MAX_FRAME_DELTA } from './constants';
+
+const noop = () => {};
+const measureStage = boundary => {
+  const rect = boundary instanceof Element ? boundary.getBoundingClientRect() : {
+    left: 0,
+    top: 0,
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+  return {
+    x: rect.left,
+    y: rect.top,
+    width: rect.width,
+    height: rect.height
+  };
+};
+const createCanvas = () => {
+  const canvas = document.createElement('canvas');
+  canvas.setAttribute('aria-hidden', 'true');
+  canvas.setAttribute(RUNNING_ATTRIBUTE, '');
+  Object.assign(canvas.style, {
+    position: 'fixed',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    zIndex: String(CANVAS_Z_INDEX)
+  });
+  return canvas;
+};
+
+/**
+ * Rains `G` and `L` glyphs down the screen, then cleans up after itself.
+ *
+ * Every option has a default, so `matrix()` on its own rains over the whole viewport. Pass
+ * `boundary` to keep the rain inside an element. Each column falls at its own speed in one color
+ * from the brand ramp, with a head glyph in the default text color and a trail that fades behind it.
+ *
+ * Only one run happens at a time: a call made while another is still on screen does nothing and
+ * returns a no-op.
+ *
+ * Does nothing when the user prefers reduced motion, or outside a browser.
+ *
+ * The canvas is `aria-hidden`, so nobody using a screen reader will know it ran. When the rain is
+ * the only sign that something happened, the caller has to convey that in the accessibility tree
+ * as well.
+ *
+ * @param {Object} [options]
+ * @param {Number} [options.duration=6000] How long the rain runs, in milliseconds.
+ * @param {String[]} [options.colors] CSS colors for the columns, picked at random one per column.
+ * Defaults to the brand orange and purple and the red color tokens. The head glyph's text color
+ * resolves against `boundary` when given, so a `.gl-dark-scope` ancestor is honored.
+ * @param {Element} [options.boundary] Element to confine the rain to. Defaults to the viewport.
+ * @example
+ * const stop = matrix({ boundary: terminal, duration: 4000 });
+ * @returns {Function} Stops the rain and removes the canvas early.
+ */
+const matrix = function () {
+  var _window$matchMedia, _window;
+  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? DEFAULT_DURATION : _ref$duration,
+    colors = _ref.colors,
+    boundary = _ref.boundary;
+  if (typeof window === 'undefined' || (_window$matchMedia = (_window = window).matchMedia) !== null && _window$matchMedia !== void 0 && _window$matchMedia.call(_window, '(prefers-reduced-motion: reduce)').matches || document.querySelector(`[${RUNNING_ATTRIBUTE}]`)) {
+    return noop;
+  }
+  const canvas = createCanvas();
+  const context = canvas.getContext('2d');
+  if (!context) {
+    return noop;
+  }
+  const stage = measureStage(boundary);
+  const resize = () => {
+    const ratio = window.devicePixelRatio || 1;
+    canvas.width = window.innerWidth * ratio;
+    canvas.height = window.innerHeight * ratio;
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+  };
+  const _resolveColors = resolveColors(colors, boundary instanceof Element ? boundary : document.documentElement),
+    head = _resolveColors.head,
+    rain = _resolveColors.rain;
+  let columns = createColumns(stage, rain);
+  const erase = delta => {
+    context.globalCompositeOperation = 'destination-out';
+    context.fillStyle = `rgba(0, 0, 0, ${1 - Math.exp(-CONFIG.trail * delta)})`;
+    context.fillRect(0, 0, stage.width, stage.height);
+    context.globalCompositeOperation = 'source-over';
+  };
+  const paintColumn = (column, previousHead) => {
+    const x = column.column * CONFIG.cell;
+    if (previousHead !== null) {
+      context.fillStyle = column.color;
+      context.fillText(glyph(), x, previousHead * CONFIG.cell);
+    }
+    column.steps.forEach((row, index) => {
+      context.fillStyle = index === column.steps.length - 1 ? head : column.color;
+      context.fillText(glyph(), x, row * CONFIG.cell);
+    });
+  };
+  let frame = null;
+  let startedAt = null;
+  let previousAt = null;
+  const stop = () => {
+    if (frame !== null) {
+      window.cancelAnimationFrame(frame);
+      frame = null;
+    }
+    window.removeEventListener('resize', resize);
+    canvas.remove();
+  };
+  const render = now => {
+    var _startedAt, _previousAt;
+    (_startedAt = startedAt) !== null && _startedAt !== void 0 ? _startedAt : startedAt = now;
+    const elapsed = now - startedAt;
+    const delta = Math.min(now - ((_previousAt = previousAt) !== null && _previousAt !== void 0 ? _previousAt : now), MAX_FRAME_DELTA);
+    previousAt = now;
+    if (elapsed >= duration) {
+      stop();
+      return;
+    }
+    const grid = measureGrid(stage);
+    Object.assign(stage, measureStage(boundary));
+    const nextGrid = measureGrid(stage);
+    if (nextGrid.across !== grid.across || nextGrid.rows !== grid.rows) {
+      columns = createColumns(stage, rain);
+    }
+    canvas.style.opacity = String(Math.min(1, (duration - elapsed) / FADE_OUT_DURATION));
+    context.save();
+    context.beginPath();
+    context.rect(stage.x, stage.y, stage.width, stage.height);
+    context.clip();
+    context.translate(stage.x, stage.y);
+    erase(delta);
+    context.font = `${CONFIG.cell}px ${FONT}`;
+    context.textBaseline = 'top';
+    columns = columns.map(column => {
+      const next = advanceColumn(column, delta);
+      if (next.steps.length) {
+        paintColumn(next, column.head);
+      }
+      return next;
+    });
+    context.restore();
+    frame = window.requestAnimationFrame(render);
+  };
+  resize();
+  window.addEventListener('resize', resize);
+  document.body.append(canvas);
+  frame = window.requestAnimationFrame(render);
+  return stop;
+};
+
+export { matrix };

package/dist/utils/matrix/palette.js

@@ -0,0 +1,9 @@
+import { GL_COLOR_BRAND_ORANGE_02P, GL_COLOR_BRAND_ORANGE_01P, GL_COLOR_RED_500, GL_COLOR_BRAND_PURPLE_01P } from '../../tokens/build/js/tokens';
+
+const MATRIX_COLORS = [GL_COLOR_BRAND_ORANGE_02P, GL_COLOR_BRAND_ORANGE_01P, GL_COLOR_RED_500, GL_COLOR_BRAND_PURPLE_01P];
+const resolveColors = (colors, element) => ({
+  head: window.getComputedStyle(element).getPropertyValue('--gl-text-color-default').trim(),
+  rain: colors !== null && colors !== void 0 && colors.length ? colors : MATRIX_COLORS
+});
+
+export { resolveColors };

package/dist/utils.js

@@ -3,3 +3,5 @@ import * as validators from './components/base/form/form_fields/validators';
 export { validators as formValidators };
 import * as mappers from './components/base/form/form_fields/mappers';
 export { mappers as formMappers };
+export { matrix } from './utils/matrix/matrix';
+export { confetti } from './utils/confetti/confetti';