Animated Cursor

A.Animated Cursor.md

Animated Cursor with Styled Components

index.tsx

const fadeIn = (length: number): Keyframes => keyframes`
  from {
    width: 0
  }
  to {
    width: ${length}ch;    
  }
`;

const blink = keyframes`
  50% {
    border-color: transparent
  }
`;

const DynamicParagraph = styled.p<DynamicParagraphProps>`
  width: ${({ length }) => length + 'ch'};
  white-space: nowrap;
  overflow: hidden;
  box-sizing: revert;
  border-right: ${({ showCursor }) => (showCursor ? '3px solid' : 'none')};
  animation: ${(props) =>
    props.length
      ? css`
          ${fadeIn(
            props.length,
          )} 2s steps(${props.length}) 800ms both, ${blink} .5s step-end infinite alternate
        `
      : ''};
  color: ${({ theme }) => theme.main.fontColor.outputColor};
`;
DynamicParagraph.displayName = 'DynamicParagraph';