Dynamic text

Conditions

Use {{#if}} to show text only when a condition is true, with {{else}} and {{else if}} for alternatives. {{#unless}} shows text when a condition is false.

You can compare values with =, !=, >, >=, < and <=, combine conditions with and, or and not, and use parentheses to group them. See Conditions in the helpers reference for details.

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.

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.

Animation options

You can change how an animation runs by adding options after its name:

Option	Applies to	Description
`interval=n`	`typewriter`, `toast`	Milliseconds between each character (`typewriter`, default 100) or word (`toast`, default 200) appearing
`fadeDuration=n`	`typewriter`, `toast`	Milliseconds for each character or word to fade in (default 100)
`duration=n`	`fadeIn`	Milliseconds for the fade (default 500)
`start=n`	`typewriter`, `toast`, `fadeIn`	Milliseconds to wait before starting
`loop=true`	all except `continue`	Repeat the animation forever
`trigger="link"`	all except `continue`	Wait until a link inside the animated text is clicked, instead of running straight away

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.