Making a text-shadow wave animation design tool in only 30 lines of pure HTML web component code + 1 extra file (no node or JS!)

In my previous tutorials, I showed how to use the single-file Modulo.js to make a gradient picker component in 13 lines, quickly embed APIs, or even how to build a full CMS-powered site with Modulo. Today, we'll go with a fun and flashy example: A animated "Word Art" tool for making a "shadow wave" animation effect in text.

The final result

Today, we'll learn how to create a text shadow "ripple" animation where each character gets its own animation delay, causing the "wave" effect you see captured below:

Try it out now, in less than 30 seconds: 🚀🚀🚀 Want to skip ahead? Scroll to the end and copy the ~30 lines of HTML code into any local HTML file, and then open it in your browser. Modulo has no dependencies and even runs embedded in local HTML files, so it's really that easy!

Template, State, and Style CParts

Let's start with an H1 tag, an input bound to text, and a Style CPart to style it with a (non-waving) animation:

<Template>
    <label>Text  <input [state.bind] name="text" /> </label>
    <h1 style="animation: 3000ms ShadowAnimation 1000ms infinite alternate;">
        {{ state.text }}
    </h1>
</Template>
<State
    text="Fun with Modulo.js!"
></State>
<Style>
    h1 {
        color: #1A5FB4;
        font-size: 40px;
        text-shadow: -3px -3px 1px #99C1F188, 3px 3px 1px #1A5FB488;
    }
    @keyframes ShadowAnimation {
        from { text-shadow: -3px -3px 1px #99C1F188, 3px 3px 1px #1A5FB488; }
        to { text-shadow: -7px -10px 5px #99C1F188, 7px 10px 5px #1A5FB488; }
    }
</Style>

In this example, we create a <input> element that's bound to state using [state.bind]. This means the "text" variable in state will be reflected on the page, and can be edited within the input. We also use a <Style> CPart to give the H1 some styling: We give the h1 a colorful text shadow, and define ShadowAnimation keyframes that slides the text shadows up and down. In the <h1> element, we use style= to activate the ShadowAnimation, hard-coding 3000ms (3 seconds) as the delay time between repeating.

Make sense? If not, and state and binding is confusing you, consider warming up with this tutorial on creating a font design tool, or the Modulo JS - Ramping Up Part 2: State. If @keyframes are confusing you, check out MDN's documentation. Or, simply continue on to see if things clear up as we bind more inputs!

Making animation speed adjustable

The first tweak we'll do is add a slider to make the animation timing adjustable. To do so, we add a new state variable called speed. The syntax we will use is: speed:=30 -- note the := syntax, since we are dealing with numbers.

<State
    speed:=30
    text="Fun with Modulo.js!"
></State>

Then, we add an input with name="speed" and [state.bind]="input" --- the "input" event type tweak is explained in this tutorial),

<label>Speed <input [state.bind]="input" name="speed" type="range" min="1" max="30" /></label>

Finally, we use templating to insert it into the style= attribute on the H1 tag:

<h1 style="animation: {{ state.speed }}00ms ShadowAnimation 1000ms infinite alternate;">

Separating the letters into spans to style individually

The animation currently is applied to the entire H1 tag at once. To achieve a "ripple" or "wave" effect, we need to animate letters individually. To "split up" the text into letters, we can use the {% for %} template tag:

<h1 style="...">
    {% for i, letter in state.text %}
        <span> {{ letter }} </span>
    {% endfor %}
</h1>

This is saying that we want each character (letter) and it's index (i) in the h1 tag to get it's own span tag. The for loop will duplicate code between the open the for and the endfor.

Next, we need to now move the style= animation to the span tag (deleting it from the h1 tag). Then, we need to use that i index number (the letter's index) to stagger the animations, so the delay is increasing for each
character. We do this by substituting 1000ms (hardcoded) with {{ i }}00ms (templated). This is the result:

{% for i, letter in state.text %}
    <span style="animation: {{ state.speed }}00ms ShadowAnimation {{ i }}00ms infinite alternate;">
{% endfor %}

One last tweak: Our Style tag needs to now target h1 > span instead of just h1.

<x-FloatingShadowTool> - Embeddable results

Adding in that last tweak and combining everything gives this result. Keep in mind this is a pretty intense style effect, from both a visual and page-speed perspective, so use sparingly! Hope you enjoy this tutorial -- follow for more like this!

<!DOCTYPE html>
<template Modulo>
  <Component name="FloatingShadowTool">
    <Template>
        <label>Text  <input [state.bind] name="text" /> </label>
        <label>Speed <input [state.bind]="input" name="speed" type="range" min="1" max="30" /></label>
        <h1>
            {% for i, letter in state.text %}
                <span style="animation: {{ state.speed }}00ms ShadowAnimation {{ i }}00ms infinite alternate;">
                    {{ letter }}
                </span>
            {% endfor %}
        </h1>
    </Template>
    <State
        speed:=30
        text="Fun with Modulo.js!"
    ></State>
    <Style>
        h1 > span {
            margin: -4px;
            color: #1A5FB4;
            display: inline-block;
            font-size: 40px;
            text-shadow: -3px -3px 1px #99C1F188, 3px 3px 1px #1A5FB488;
        }
        @keyframes ShadowAnimation {
            from { text-shadow: -3px -3px 1px #99C1F188, 3px 3px 1px #1A5FB488; }
            to { text-shadow: -7px -10px 5px #99C1F188, 7px 10px 5px #1A5FB488; }
        }
    </Style>
  </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-FloatingShadowTool></x-FloatingShadowTool>