Dynamic text

Random

Use the {{random}} helper to insert random text. You can provide a list of options using the array function. To store the result in an attribute, use the set option.

Note that if you need to refer to the stored value in the same passage or section, you need to use {{get}} rather than just the attribute name. This is because the values that helpers can read by name are only set once, before rendering. So below, we need to use {{get "weather"}} in the same section where we set it, but in the subsequent section we can just use {{weather}}.

Animation

Squiffy includes Anime.js, and you can define your own custom animations by setting them up in a @ui section. See the example on GitHub.

Click to continue

Animations are queued and play sequentially. Sometimes you want to pause the queue and let the reader control when to continue. The continue animation displays text as a clickable link that resumes the animation queue when clicked.

The continue animation supports different visual styles via the style parameter:

pulse (default) - the text fades in and out
glow - a pulsing blue glow effect
bounce - subtle vertical bouncing
wave - opacity ripples through each character

Replace

By creating labels, you can replace existing output when a link is clicked or when a passage or section is displayed. In the example below, we create a label called “1” using {{#label}}, and in the next passage we replace the text inside that label:

The replacement text can include links to other passages or sections:

Rotate

For a text link that replaces itself each time it is clicked:

You can store the result in an attribute:

You might want the link to display the next option, rather than the current one. Use the show="next" option for this:

Sequence

If you don’t want a rotating list, use a sequence instead. The final option won’t be a link.

As a variation on this, you can use a section link as the final option in a sequence.

Live

Using {{live}}, you can change text that is already on-screen when an attribute value changes.

In this example, notice how the static {{count}} does not change, but the live {{live "count"}} does as the count attribute is incremented.

Here we combine {{live}} with {{rotate}} to create a button that cycles through options. Instead of simply displaying the attribute value, we use the section parameter to display text which can itself contain further helpers.