neontext

Give your text a touch of neon.

Usage no npm install needed!

<script type="module">
  import neontext from 'https://cdn.skypack.dev/neontext';
</script>

README

neonified text

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:
rainbowified text

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.