Fluent emojis, but they move.

Hover it. It waves back.

npm install animated-fluent-emojis

The emoji artwork is Microsoft's. Not affiliated with or endorsed by Microsoft.

Browse the emojis

Try one

Size

Skin tone

Plays

Made to be easy to live with

Alive
They wave back. Hover one and see.
Light
They never push your page around while they load.
Considerate
If someone asks their device for less motion, the emoji stays still.
Clear about what is whose
The emoji artwork is Microsoft's. The code is open source.

One tag, any site

Pick your framework, copy the code, and the emoji is on the page.

import { Emoji } from 'animated-fluent-emojis/react'

import 'animated-fluent-emojis/style.css'

<Emoji id="1f44b_wavinghand" size={64} />

<script setup lang="ts">
import { Emoji } from 'animated-fluent-emojis/vue'

import 'animated-fluent-emojis/style.css'
</script>

<template>
  <Emoji id="1f44b_wavinghand" :size="64" />
</template>

<script lang="ts">
  import { Emoji } from 'animated-fluent-emojis/svelte'

  import 'animated-fluent-emojis/style.css'
</script>

<Emoji id="1f44b_wavinghand" size={64} />

---
import Emoji from 'animated-fluent-emojis/astro'
---

<Emoji id="1f44b_wavinghand" size={64}>
  <span slot="fallback">👋</span>
</Emoji>

<script type="module">
  import 'animated-fluent-emojis/element'
</script>

<fluent-emoji id="1f44b_wavinghand" size="64">
  <span slot="fallback">👋</span>
</fluent-emoji>