Animated unicode characters in rich text fields

CSS Developer Experience

Plain text animation is fun and a simple way to introduce some joy to a static design. Here's a simple way to animate any character from a rich text field.

In your entry, wrap any character in a set of special characters as markers (e.g. " ⁕"). Then in your twig, replace that set of special characters:

{{ block.richText|replace('###', include('components/spinner'))|raw }}

In this example, I'm including an inline component for some decorative punctuation.

<span>
    &hairsp;
    <span 
        class="absolute motion-safe:animate-spin" 
        style="animation-duration:8s"
    >⁕</span>
</span>

With the finished effect blending seamlessly within a block of rich text, as seen here: ⁕