Modus Underline

Features

What makes it special

9 Unique Styles

Randomly selected underline styles for visual variety and interest.

Zero Dependencies

Pure vanilla JavaScript. No jQuery, no GSAP, no heavy frameworks.

Multiple Triggers

Hover, scroll, click, focus, and load triggers. Mix and match as needed.

Smooth Animations

CSS-powered draw-in animations with customizable timing and easing.

Accessible

Full keyboard navigation support with focus triggers for better accessibility.

Auto Setup

No manual HTML setup required. Just add the attribute and it works.

Hover Trigger

Simple hover interaction

Move your mouse over the highlighted words to see the underlines appear.

Simply hover your mouse over any highlighted word to see the animated underline appear. The underlines persist after you move your mouse away, creating a beautiful cumulative effect that enhances readability and visual interest.

Scroll Trigger

Reveal on scroll

Words animate as they enter the viewport, creating engaging scroll experiences.

These words will animate as you scroll them into view. Try scrolling to see magical underlines appear on beautiful words like creative, elegant, smooth, and dynamic.

Click Trigger

Interactive clicks

Click on words to trigger unique underline animations.

Click on these interactive words to trigger the underline animation. Each click creates a unique underline style. Try clicking multiple words to see the variety! The animations are smooth and engaging.

Focus Trigger

Keyboard accessible

Use Tab key to navigate and see underlines appear on focusable elements.

Use the Tab key to navigate and see underlines appear on focusable elements. This makes the library accessible for keyboard users and follows WCAG accessibility guidelines.

Multiple Triggers

Combine triggers

Mix and match different trigger types for flexible interactions.

This word responds to hover, click, and scroll triggers. Try any interaction method! You can combine multiple triggers to create flexible user experiences.

Advanced Options

Scroll customization

Fine-tune scroll behavior with advanced options.

This word appears instantly without animation when scrolled into view. This one clears when you scroll it out of view, creating a dynamic reveal effect.

Installation

Get the library

Choose your preferred installation method.

npm

npm install modus-underline-js

yarn

yarn add modus-underline-js

pnpm

pnpm add modus-underline-js

CDN (No Build Step)

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/modus-underline-js@latest/dist/underline.css">

<!-- JavaScript -->
<script src="https://unpkg.com/modus-underline-js@latest/dist/underline.js"></script>

ES Modules

import { initRandomUnderlines } from 'modus-underline-js';
import 'modus-underline-js/dist/underline.css';

initRandomUnderlines();

Code Examples

Get started

Copy and paste these examples to get started quickly.

1. Basic Setup

<!-- Include CSS and JS -->
<link rel="stylesheet" href="modus-underline-js/dist/underline.css">
<script src="modus-underline-js/dist/underline.js"></script>

<!-- That's it! SVG container is auto-generated -->

2. Basic Usage (Hover)

Live Example:

True creativity thrives when expression guides the vision.

<h1>
  True <b data-draw-line>creativity</b> thrives when
  <b data-draw-line>expression</b> guides the vision.
</h1>

3. Load Animation with Staggered Delays

Live Example (refresh to see animation):

First appears immediately, second after 300ms, third after 600ms.

<h1>
  <b data-draw-line data-triggers="load,hover" data-load-delay="0">First</b> appears immediately,
  <b data-draw-line data-triggers="load,hover" data-load-delay="300">second</b> after 300ms,
  <b data-draw-line data-triggers="load,hover" data-load-delay="600">third</b> after 600ms.
</h1>

4. Scroll Trigger with Delays

Live Example (scroll to see):

These words animate on scroll: first, second, third.

<p>
  These words animate on scroll: <b data-draw-line data-triggers="scroll" data-scroll-delay="0">first</b>,
  <b data-draw-line data-triggers="scroll" data-scroll-delay="150">second</b>,
  <b data-draw-line data-triggers="scroll" data-scroll-delay="300">third</b>.
</p>

5. Multiple Triggers

Live Example (try hover, click, or scroll):

Responds to hover, click, and scroll

<b data-draw-line data-triggers="hover,click,scroll">
  Responds to hover, click, and scroll
</b>

6. Advanced Scroll Options

Live Example (scroll to see):

Instant appearance (no animation), clears when you scroll out.

<!-- Instant appearance (no animation) -->
<b data-draw-line data-triggers="scroll" data-scroll-animate="false">instant</b>

<!-- Clear when leaving viewport -->
<b data-draw-line data-triggers="scroll" data-scroll-clear="true">clears on scroll out</b>

7. Manual Trigger (JavaScript API)

Live Example:

This word will be underlined when you click the button above.

<button id="trigger-btn">Trigger Underline</button>
<p>This word will be <b data-draw-line id="target-word">underlined</b> when clicked.</p>

<script>
  document.getElementById('trigger-btn').addEventListener('click', () => {
    ModusUnderline.triggerUnderline('#target-word');
  });
</script>

8. JavaScript API (Optional)

<script type="module">
  import { initRandomUnderlines } from 'modus-underline-js';

  // Custom configuration
  initRandomUnderlines({
    svgPath: '/custom/underlines.svg', // Optional: use custom SVG
    containerSelector: '.my-container' // Optional: custom container
  });
</script>

9. CSS Customization

:root {
  --underline-speed: 0.24s; /* Animation speed */
  --underline-offset: 12px; /* Distance from text */
}

/* Custom underline color */
.underline-svg path {
  stroke: #ff6b6b; /* Custom color */
  stroke-width: 8; /* Thinner line */
}