Transform Text And Images Into Dynamic ASCII Art – Lettercrap

Preview:

Description:

Lettercrap is a JavaScript library that allows developers to create dynamic ASCII art from images or text.

It can be useful for creating unique and eye-catching headers, titles, logos, and product images on your website.

How to use it:

1. Download and install the Lettercrap with NPM.

$ npm install
$ npm build

2. Import the required JavaScript and CSS files.

<link rel="stylesheet" href="/dist/lettercrap.min.css" />

<script type="module">
  import * as Lettercrap from './dist/lettercrap.min.js';
</script>

3. Create an empty DIV container and use the data-lettercrap attributes to the image or text you want to convert to ASCII art.

<!-- From Image -->
<div data-lettercrap="/path/to/logo.png"></div>
<!-- From Text -->
<div data-lettercrap-text="CSSSCRIPT.COM"></div>

4. Initialize the Lettercrap.

Lettercrap.init();

5. Config the generated ASCII art with the following data attributes:

• data-lettercrap-letters: Characters used for the ASCII art
• data-lettercrap-words: Words used for the ASCII art
• data-lettercrap-interval: Time interval in ms
• data-lettercrap-font-family: Font family
• data-lettercrap-font-weight: Font weight

<!-- From Image -->
<div data-lettercrap="/path/to/logo.png"
     data-lettercrap-letters="XYZ"
     data-lettercrap-interval="500"></div>
<!-- From Text -->
<div data-lettercrap-text="CSSSCRIPT.COM"
     data-lettercrap-font-family="Inter"
     data-lettercrap-font-weight="bold"></div>

6. Reset the ASCII art.

// reset all
Lettercrap.reset();
// reset specific elements
Lettercrap.resetElements(elements);

7. Refresh the ASCII art.

Lettercrap.refresh();

Changelog:

v1.1.0 (07/20/2024)

• Update