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}}.

It's another {{random (array "Monday" "Tuesday" "Wednesday" "Thursday" "Friday" "Saturday" "Sunday")}} in the city.

The weather is {{random (array "sunny" "cloudy" "rainy" "windy" "snowy") set="weather"}}.

It feels like it's always {{get "weather"}} here.

+++Continue...

The weather is still {{weather}}.

It's another Wednesday in the city.

The weather is sunny.

It feels like it's always sunny here.

Continue...

Animation

You can animate text like this:

{{#animate "typewriter"}}This is animated text using a typewriter effect.{{/animate}}

+++Continue...

There are other effects you can use too:

{{#animate "toast"}}This is animated text using a toast effect.{{/animate}}

Be careful not to overuse them though!

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.

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:

I walked to the shops and I bought {{#label "1"}}a pint of milk{{/label}}.

Or maybe I bought [something different]?

[something different]:

{{#replace "1"}}a loaf of bread{{/replace}}

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

I walked to the shops and I {{#label "1"}}bought a pint of milk{{/label}}.

But I was [thinking]...

[thinking]:

{{#replace "1"}}suddenly thought, hang on, I could [[go to the funfair]] or [[join the circus]] instead.{{/replace}}

[[go to the funfair]]:

Off I went to the funfair...

[[join the circus]]:

Off I went to the circus...

Rotate

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

You can store the result in an attribute:

Please choose: {{rotate (array "small" "medium" "large") set="size"}}

+++Then continue...

You chose {{size}}.

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

Current size: {{live "size"}}.

Change size: {{rotate (array "small" "medium" "large") set="size" show="next"}}

+++Or pick this one...

You chose {{size}}.

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.

{{sequence (array "Click me" "Click me again" (section "next" text="And once more"))}}

[[next]]:

Done!

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.

@set count = 0

This is static: {{count}}.

This is live: {{live "count"}}.

+++Continue

@inc count

Now count is {{count}}.

+++Continue

@inc count

Now count is {{count}}.

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.

Choose a colour: {{rotate (array "red" "green" "blue") set="colour"}}

[[colourDescription]]:

The colour of fire and blood.

The colour of nature and life.

The colour of the sky and the sea.