random-text-bg/README.md

Add randomly scattered, selectable text in the background of your web page.

# 📚 Random Text Background (random-text-bg)

Add randomly scattered and selectable text across your webpage as a subtle, dynamic background layer. Great for watermarks, testing overlays, or playful visual effects.

---


## ✨ Features

- 📌 Random positioning of each word on screen
- 🔄 Optional random rotation of words
- 🖋️ Fully selectable background text (appears in text selection)
- 🎨 Customizable font, color, and word count
- 🚫 Non-intrusive — doesn't block page content
- ⚡ Lightweight and framework-agnostic (pure JavaScript)

---


## 🚀 Installation

### Using CDN (via jsDelivr)

```html
<script src="https://cdn.jsdelivr.net/npm/random-text-bg@1.0.2/dist/random-text-bg.min.js"></script>
```

## ⚙️ Configuration Options

You can pass an `options` object to the `RandomTextBg()` function to customize how the background text is rendered.

### Options
`text (string, default: '')`
The input string of words to scatter. Words are split by spaces.

`color (string, default: 'rgba(0, 0, 0, 0.05)')`
The color of each word. Use RGBA for transparency.

`fontSize (string, default: '2rem')`
Font size for each word (e.g., '1.5rem', '20px').

`fontFamily (string, default: 'monospace')`
Font family used for rendering the text.

`zIndex (number, default: 0)`
CSS z-index of the background container. Use -1 to push it behind all content.

`randomizeRotation (boolean, default: true)`
Randomly rotate each word. Set to false for no rotation.

`maxWords (number, default: 1000)`
Maximum number of words to display from the input string.

`textSelectable (boolean, default: false)`
Determines whether the scattered text is selectable. Set to true to allow users to highlight and copy the text.

`target (HTMLElement, default: document.body)`
Specifies the DOM element where the randomized background text should be rendered.

## Example

```
RandomTextBg({
    text: 'random text that we want to laod in the background',
    color: 'rgba(150, 150, 150, 0.5)',
    fontSize: '1.5rem',
    maxWords: 1000,
    textSelectable: true,
    target: document.querySelector('some_dom_element'),
    zIndex: 1
});
```