AnimatedTitle

AnimatedTitle.tsx

import React from 'react';
import { Reveal } from 'styles/reveal';
import * as T from 'styles/shared-components/text';

//styles
import * as S from './styles';
import * as A from 'styles/shared-components';
import * as L from 'layout-styled-components';

const AnimatedTitle: React.FC<{ size?: number }> = ({ children='', size = 50 }) => {
  return (
    <S.AnimatedTitle>
      <L.Horizontal wrap center spaceAll={8}>
        {(children as string).split(' ').map((word, index) => (
          <Reveal delay={index * 100}>
            <S.Text bold size={size}>
              {word}
            </S.Text>
          </Reveal>
        ))}
      </L.Horizontal>
    </S.AnimatedTitle>
  );
};

export default AnimatedTitle;