Skip to content

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

Blog

Notes on frontend, mobile and the things that break along the way.

Como configurar o ambiente para React Native no Windows, Linux e macOS

Um guia passo a passo pelos dois caminhos oficiais, Expo e React Native CLI, com os comandos e as versões exatas que a documentação pede hoje em cada sistema operacional.

portuguêsNovember 10, 202610 min readReact NativeExpoAmbiente

V1.0 REV.A

booting erika.lopes

locale en

mounting interface

ready