Create Curved Text Effects with ArchText.js

Preview:

Description:

ArchText is a lightweight JavaScript library that creates curved text effects by arranging text along an arch path.

It can be used to create stylized text for headers, logos, or other decorative text elements without the need for SVG or more complex libraries.

Features:

• Sets text on a curve with a configurable pixel radius.
• Flips the arch direction (normal or upside down).
• Rotates each letter individually to follow the curve.
• Reverses the entire text string with a 180° rotation.
• Works with a CSS selector string or a direct HTMLElement.

How to use it:

1. Install ArchText and import it into your project.

# NPM
$ npm install arch-text

import ArchText from "arch-text";

2. For projects without a build step, you can use the browser version directly.

<script type="module">
  import ArchText from './dist/arch-text.min.js'
</script>

3. Set up your HTML structure with the target element:

<div id="curved-text">CSSScript.Com</div>

4. Initialize ArchText in your JavaScript:

new ArchText("#curved-text", {
  // options here
});

5. Available configuration options.

• radius: A number that sets the arch’s radius in pixels. The default is 0. Larger values produce a flatter curve. If you set this to -1, the text will be arranged in a straight line.
• dir: A number that controls the arch’s direction. The default is 1 for a normal arch (like a hill). Use -1 to create an upside-down arch.
• rotate: A boolean that determines if individual letters should rotate along the curve. It defaults to true. When set to false, all letters remain upright.
• reverse: A boolean that rotates the entire text block by 180 degrees when set to true. The default is false.

new ArchText("#curved-text", {
  radius: number;
  dir: number;
  rotate: boolean;
  reverse: boolean;
});