React component for Bank Nue Font text

What: A fun little component to showcase the Bank Nue Font, which has been designed as a multi-colour display font, especially for bigger sizes. The component displays a given text as in the picture above, by superposing two styles.

The Bank Nue Font page says: This font comes in two styles, which can be combined and layered to create a dynamic and striking appearance.

Using: React, typescript, and styled-components.

In your React app, create (or add to) the files as follows:

STEP 1. From the Bank Nue Font page given above, download the following files into "src/fonts" folder:

• banknue-lined-webfont.woff
• banknue-lined-webfont.woff2
• banknue-sectioned-webfont.woff
• banknue-sectioned-webfont.woff2

STEP 2. Add to "src/index.css":

@font-face {
  font-family: 'banknuelined';
  src: url('./fonts/banknue-lined-webfont.woff2') format('woff2'),
       url('./fonts/banknue-lined-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'banknuesectioned';
  src: url('./fonts/banknue-sectioned-webfont.woff2') format('woff2'),
       url('./fonts/banknue-sectioned-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

STEP 3. Our new component "src/components/BankNueFontText.tsx":

import styled from "styled-components";

type StyleProps = {
  size: 1 | 2 | 3 | 4 | 5 | 6;
};

const Container = styled.div<StyleProps>`
  position: relative;
  font-size: ${({ size }) => size * 30}px;
`;

const Stripes = styled.div`
  font-family: banknuelined;
`;

const Shadow = styled.div`
  position: absolute;
  font-family: banknuesectioned;
  mix-blend-mode: multiply;
  /* mix-blend-mode: luminosity; */
`;

const ShadowBlue = styled(Shadow)<StyleProps>`
  color: #00cef1;
  top: ${({ size }) => size}px;
`;

const ShadowRed = styled(Shadow)<StyleProps>`
  color: #fa0007;
  top: ${({ size }) => size * 2}px;
  left: -${({ size }) => size}px;
`;

type Props = {
  size?: 1 | 2 | 3 | 4 | 5 | 6;
  text: string;
};

// See: https://dafontfile.com/bank-nue-font/
const BankNueFontText = ({ size = 3, text }: Props) => {
  return (
    <Container size={size}>
      <Stripes>{text}</Stripes>
      <ShadowBlue size={size}>{text}</ShadowBlue>
      <ShadowRed size={size}>{text}</ShadowRed>
    </Container>
  );
};

export default BankNueFontText;

STEP 4. In any of your components or pages, add:

const text = "bank";
...
return (
...
  <BankNueFontText size={4} text={text} />
...);

Suggestions/questions are welcome.