NeonText

Give your text a touch of neon.

A colorful neon text generator, that splits the innerText of your element into seperate spans and colorizes their text-shadow and color properties individualy.

Features

• :rocket: zero dependencies, tiny library
• :boom: available in multiple formats umd, esm and cjs
• :zap: written in typescript

Installation

via npm

npm install neontext

Afterwards import the library.

import { neonify } from 'neontext'

via <script>

Add the following line to your HTML file and adjust the path.

<script src="path/to/neontext.umd.js"></script>
<script>
    neontext.neonify({options})
</script>

Usage

Given the following HTML markup.

<div id="container">
    Servus,<br>Howdy folks!
</div>

Simply call the neonify() function and pass your options within an object.

neonify({ 
    elem: "container", // mandatory
    shadowBlurRadius: 5,
    colors: ["red", "green", "purple"],
    random: true,
    colorizeText: false,
    shadowOffsetX: 0,
    shadowOffsetY: 0,
})

The colors will be randomly applied, which will result in:

Configuration

The options have to be passed in an object adhering to the following interface:

interface options {
    elem: string,
    colors?: Array<string>,
    shadowBlurRadius?: number,
    random?: boolean,
    colorizeText?: boolean,
    shadowOffsetX?: number,
    shadowOffsetY?: number,
}

elem

Type: String
Default: none
Mandatory: true

The id of the element containing your text.

colors

Type: Array<String>
Default: ["#ff00ff", "#00ffff", "#ffff00"]
Mandatory: false

An array containing the CSS color strings, which will be used for coloring the text-shadow.

shadowBlurRadius

Type: Number
Default: 5
Mandatory: false

The blur radius for the text-shadow.

colorizeText

Type: boolean
Default: false
Mandatory: false

Sets wether the text color will be colorized aswell.

random

Type: boolean
Default: false
Mandatory: false

Should the colors get randomly applied to spans.

shadowOffsetX

Type: number
Default: 0
Mandatory: false

The text-shadow x offset.

shadowOffsetY

Type: number
Default: 0
Mandatory: false

The text-shadow y offset.

Licensing

The code in this project is licensed under MIT license.