randomCSSVariables([
  {
    variable: 'position',
    count: window.children,
    target: document.querySelector('#app'),
    range: { min: 0, max: 50, round: true },
    unit: '%',
  },
  {
    variable: 'blend-mode',
    count: window.children,
    target: document.querySelector('#app'),
    range: { min: 0, max: 1, round: true },
    values: blendmode,
  },
  {
    variable: 'direction',
    unit: 'deg',
    count: window.children,
    target: document.querySelector('#app'),
    range: { min: 0, max: 360, round: true },
  },
  {
    variable: 'border',
    count: window.children,
    target: document.querySelector('#app'),
    range: { min: 1, max: 50, round: true },
    unit: 'px',
  },
  {
    variable: 'offset',
    count: window.children,
    target: document.querySelector('#app'),
    range: { min: -50, max: -10, round: true },
    unit: 'px',
  },
]).load();

const r = Array.from({ length: window.children }).map((_, index) => ({
  variable: `rgb-r-${index}`,
  count: window.children,
  target: document.querySelector('#app'),
  range: { min: 1, max: 255, round: true },
}));
const g = Array.from({ length: window.children }).map((_, index) => ({
  variable: `rgb-g-${index}`,
  count: window.children,
  target: document.querySelector('#app'),
  range: { min: 1, max: 255, round: true },
}));
const b = Array.from({ length: window.children }).map((_, index) => ({
  variable: `rgb-b-${index}`,
  count: window.children,
  target: document.querySelector('#app'),
  range: { min: 1, max: 255, round: true },
}));

window.randomCSSVariables([...r, ...g, ...b]).load();