Fluent 絵文字が、動きだす。

ホバーすると、手を振り返します。

npm install animated-fluent-emojis

絵文字のアートワークは Microsoft のものです。Microsoft とは提携しておらず、承認も受けていません。

絵文字を見る

試してみる

サイズ

肌の色

再生

気持ちよく使えるように

生きている
手を振り返してくれます。ホバーして確かめてください。
軽い
読み込み中もページがずれません。
思いやり
端末で動きを減らす設定にしていれば、絵文字は静止したままです。
誰のものか、はっきり
絵文字のアートワークは Microsoft のものです。コードはオープンソースです。

タグ一つで、どのサイトにも

フレームワークを選んでコードをコピーすれば、絵文字がページに現れます。

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>