ASCII Text Component

Ever wanted to recreate the retro feel of the late 90s and early 2000s or are you looking for a little something to spice up that boring page?
If so you have come to the right place, this 'simple' react component combines the figlet package together with a text fader script from patorjk to achieve impressive looking result in a slim and easy to use package.

Note: This project is still being worked on and is not yet feature complete

Setup

Adding to an existing project

1. Add the folder with the ASCII-Text component to your project.
2. Depending on how your project is structured you might need to modify the import path for the fonts in the ASCII-Text.jsx at line 20. The image below show the structure the component expects.
   
3. Run npm i figlet to install the figlet package, this is used to convered plain text input to ASCII text.

Running the preview project

1. Run npm i to install necessary dependencies.
2. Run npm run dev and got to the link shown in the terminal.
3. Explore play around and see what is do able.

How to use

You would use it the same as any other react component, the magic happens once we pass some props to the component.

  <ASCIIText
  message={"replace me!"}
  font={"Standard"}
  fadeType={"vertical"}
  colors={["#fb6630", "#ff748d", "#c554f3", "#6f6ff4"]}
/>

• message : The text you want to convert to ASCII text as string.
• font : The name of the font you want to use, check node_modules/figlet/fonts or checkout patorjks converter.
  (note: AOL Marco Fonts are not yet supported)
• fadeType : The type of color fade you want to use, to see the available options checkout patorjks color fader.
• colors : Takes a array of Hex color values to use as the colors for the fade, presets can be found in the presets.js. If you want to use a single color simply pass in a array with with the same color twice e.g: ["#FFFFFF", "#FFFFFF"]

Planned features

• Imporve the way colors get used to make it easier to use presets and single colors.
• Build a web app to make it easy to build the look you want by previewing the component and outputing it with the props already set so you can simply copy past it into your code.