Ir para o conteúdo

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

Notas sobre frontend, mobile e as coisas que quebram no caminho.

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.

10 de novembro de 202610 min de leituraReact NativeExpoAmbiente

V1.0 REV.A

iniciando erika.lopes

idioma pt-BR

montando interface

pronto