fix: typing animation displaying emojis

[colin-woon]

Reason:
The root cause is in the [TypingAnimation.tsx] component, specifically within the useEffect hook responsible for the typing logic. It iterates through the string using children.length and builds the displayed text using children.substring(0, i + 1). These JavaScript string methods operate on UTF-16 code units, not grapheme clusters. Emojis often consist of multiple code units, causing them to be split incorrectly.

Fix:
Split the input string into an array of grapheme clusters using const graphemes = Array.from(children);.
Iterate based on graphemes.length.
Reconstruct the displayed text using setDisplayedText(graphemes.slice(0, i + 1).join(""));.
This ensures that each "visible character," including emojis, is treated as a single unit.

typing_animation_bug.mp4

typing_animation_fix.mp4

[vercel]

@colin-woon is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.