The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.

Props

miasiminameenumSpecifies which emoji to display.

Overview

The <mds-emoji> web component renders one of the Magma Design System’s animated mascot illustrations (mia or simi) as an interactive SVG. It is a decorative, expressive element with no native HTML equivalent: its personality is driven entirely through imperative animation methods rather than markup or props. The illustrations are drawn in the Magma Emoji Figma file.

Semantic Behavior

Mouse following: When started, the emoji tracks the pointer with a 3D head rotation and parallax on each facial part; it is off by default and only reacts after startFollowMouse() is called. When the user prefers reduced motion, neither the pointer tracking nor the blinking moves the face.Single-animation lock: Only one expression plays at a time - agree, smile, disagree, and startThinking take the face over: each stops whatever is playing (a thinking pose included) and starts from the neutral face, so a later call cuts an earlier one short. startThinking is a no-op only while the emoji is already thinking.Promise-based methods: Every expressive action returns a Promise<void> that resolves when its animation finishes, letting callers await one expression before chaining the next.State restoration: When an animation completes, mouse-following is restarted if startFollowMouse() was ever called, even after a later stopFollowMouse().Idle blinking: startBlinking() runs a random blink loop on the eyes; blinks are suppressed while the emoji is busy with another animation.

Properties & Visual Configurations

The only public prop is name, which selects the mascot identity. It accepts 'mia' (the default) or 'simi'; changing it at runtime swaps the mascot.

Other behavioral props

There are no variant, tone, or size props. The expression is configured imperatively through method calls (agree, smile, disagree, startThinking / stopThinking, startBlinking / stopBlinking, startFollowMouse / stopFollowMouse), and the timing and reach of those animations are tuned through CSS custom properties - --mds-emoji-expression-max-rotation, the --mds-emoji-expression-follow-mouse-*-duration pair, the per-part --mds-emoji-offset-* values, and the per-mascot color tokens - rather than through attributes.