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. The greatest interest, however, has been in Modulo's ease at making design tools and similar useful components. Let's revisit the "Word Art" design tool topic today!

The final result

Today, we'll learn how to create a "duo-tone" text-shadow word art aesthetic generator, with customizable symmetric colorful shadows. Look below for an example of what we'll be building:

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!

Starting with an H1 tag and some State variables

Let's start with an H1 tag with lots of CSS text styling:

Note how most of the rules are hard-coded (color, font-size, transform, etc), except for the colors of the two text-shadow drop shadows, which are replaced with the two State variables (shadow1 and shadow2 respectively). This lets us "move" our colors into our State so we can control them using bound inputs. If you want to make the other hard-coded aspects customizable follow the previous tutorial in the series.

Controlling shadow color state variables with inputs

Next we will learn how to let users modify these variables, so they can preview different color schemes:

Tricky? Learn more on color pickers here or get more State practice in Part two of the interactive Modulo tutorial.

Adding a "shadow throw distance" and "shadow blur amount" sliders

Next, let's make both the "shadow distance" and "blur amount" adjustable with two new state variables:

Note the := syntax: We use this since we are dealing with numbers instead of strings. We then add these new variables into the style= attribute in the Template:

Finally, we add an input with name="size" and [state.bind], so that it binds to the state variable just like the name="text" textarea was bound:

Important to note: The type="range", along with min="..." and max="..." lets you create a slider-type input such that the user can "drag" a knob between those two values.

Tweak: Smooth rerendering with sliders

Examine the following GIF:

A slight tweak was applied: [state.bind]="input". This tells State to rerender during drag (input event), not just during release (change event, the default).

<x-TextArt> - Embeddable results

Adding in that last tweak and combining everything gives this result. Hope you enjoy this tutorial -- follow for more!