Bringing Text and Math to Life

Static content is boring. Let’s add some motion to our words and equations!

In this post, we’ll explore two new components: <TypingText /> and <StyledMath />.

1. Typing Animations

Want to simulate a typewriter effect? Or maybe a terminal command being typed out?

You can control the speed and add a start delay.

By default, the animation starts when the element scrolls into view.

We already love KaTeX for rendering math, but let’s make it fit our design system better.

Perfect for that “back of the napkin” look.

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Highlight the beauty of math with colors.

e^{i\pi} + 1 = 0

For a modern, techy feel.

i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \hat H \Psi(\mathbf{r},t)

Let’s add some movement to the equations themselves.

E = mc^2

\heartsuit = \sin(x)^2 + \cos(x)^2

This equation will slide up when you scroll to it.

\sum_{n=1}^{\infty} \frac{1}{n^s} = \prod_{p} \frac{1}{1-p^{-s}}

A smooth reveal effect.

\zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s}

Just like our images, these components are auto-imported!

<TypingText text="Type me!" />

<StyledMath style="neon" animation="pulse">
  $$ E = mc^2 $$
</StyledMath>

Go ahead and make your content dynamic!