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?

Basic Usage

|

Custom Speed & Delay

You can control the speed and add a start delay.

|

Scroll Trigger

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

2. Styled Math Equations

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

Hand-Drawn Style

Perfect for that “back of the napkin” look.

Colorful

Highlight the beauty of math with colors.

Neon / Cyberpunk

For a modern, techy feel.

3. Animated Equations

Let’s add some movement to the equations themselves.

Float

Pulse

Slide Up (On Scroll)

This equation will slide up when you scroll to it.

Reveal

A smooth reveal effect.

Usage

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!