import PixelTransition from '@/components/bynanaui/pixel-transition';

export default function Demo() {
  return (
    <PixelTransition
      firstContent={
        <img
          src="https://picsum.photos/400/400?grayscale"
          alt="First state"
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        />
      }
      secondContent={
        <div style={{
          width: '100%',
          height: '100%',
          display: 'grid',
          placeItems: 'center',
          backgroundColor: '#000'
        }}>
          <p style={{ fontWeight: 900, fontSize: '3rem', color: '#fff' }}>
            Revealed!
          </p>
        </div>
      }
      gridSize={12}
      pixelColor="#000000"
      animationStepDuration={0.4}
    />
  );
}