// Fundo: o chão limpo do tutorial. Cinza-azulado claro com luz no meio, uma grade de pontos de 32 px
// a 7% e uma deriva lenta da grade (nada fica parado).
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {COR} from '../base';

export const Fundo: React.FC = () => {
  const f = useCurrentFrame();
  return <AbsoluteFill style={{background: `radial-gradient(90% 60% at 50% 42%, ${COR.chao} 0%, ${COR.chaoFundo} 100%)`}}>
    <AbsoluteFill style={{backgroundImage: 'radial-gradient(rgba(20,22,26,.07) 2px, transparent 2px)', backgroundSize: '32px 32px', backgroundPosition: `${f * 0.4}px ${f * 0.25}px`}} />
  </AbsoluteFill>;
};