@dofy/native-emoji-motion 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.6.0 — 2026-11-14
+
+- Add motion families for vegetables, land animals, clothing, tools, books, hand gestures, boats and sweet treats.
+- Support the official skin tone variants for the new hand gestures.
+- Add gentle ticking, falling and settling motions for clocks, rain and containers.
+
+## 0.5.1 — 2026-11-13
+
+- Fix the npm package page to show the English README by default.
+
 ## 0.5.0 — 2026-11-13
 
 - Add reviewed motion families for fruit, animal faces, clouds, celestial bodies and writing tools.

package/README.md

@@ -2,7 +2,7 @@
 
 <h1 align="center">Emoji Motion</h1>
 
-<p align="center"><a href="./README.md">English</a> · <a href="./README.zh-CN.md">简体中文</a> · <a href="./README.zh-TW.md">繁體中文</a> · <a href="./README.ja.md">日本語</a></p>
+<p align="center"><a href="https://github.com/dofy/emoji-motion/blob/main/README.md">English</a> · <a href="https://github.com/dofy/emoji-motion/blob/main/docs/readme/README.zh-CN.md">简体中文</a> · <a href="https://github.com/dofy/emoji-motion/blob/main/docs/readme/README.zh-TW.md">繁體中文</a> · <a href="https://github.com/dofy/emoji-motion/blob/main/docs/readme/README.ja.md">日本語</a></p>
 
 <p align="center">
   <strong>Give your emoji a little more feeling. ✨</strong><br />
@@ -24,13 +24,13 @@ Bring 👋, ❤️, 📡 and more to life in React, Vue, Svelte or plain HTML. E
 
 ## 📊 Collection at a glance
 
-| In version 0.5.0 | Count | What it covers |
+| In version 0.6.0 | Count | What it covers |
 | --- | ---: | --- |
 | Handcrafted presets | 177 | Individually configured base emoji |
-| Reviewed motion families | 16 | 123 additional base emoji sharing reviewed motions |
+| Reviewed motion families | 27 | 200 additional base emoji sharing reviewed motions |
 | Categories | 10 | Groups used to organize the collection |
-| Reusable motions | 42 | Motions shared by presets and families |
-| Emoji with optional SVG effects | 67 | Base emoji with decorative effects |
+| Reusable motions | 53 | Motions shared by presets and families |
+| Emoji with optional SVG effects | 73 | Base emoji with decorative effects |
 | Recognized Unicode sequences | 5,235 | Unicode Emoji 18.0 sequences, including skin tones and other variants |
 
 Skin tones and other variants count as additional Unicode sequences. Similar emoji may share a motion. Recognized emoji without a preset or reviewed family receive a category-based fallback.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dofy/native-emoji-motion",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Expressive, extensible animations for native emoji with optional SVG effects",
   "type": "module",
   "exports": {
@@ -62,9 +62,6 @@
     "src",
     "assets/logo.svg",
     "README.md",
-    "README.zh-CN.md",
-    "README.zh-TW.md",
-    "README.ja.md",
     "LICENSE",
     "UNICODE-LICENSE.txt",
     "CHANGELOG.md"

package/src/presets.js

@@ -61,6 +61,17 @@ export const motions = {
   cloudDrift: { keyframes: [{ transform: 'translate(0, 0)' }, { transform: 'translate(-5%, -4%)', offset: .35 }, { transform: 'translate(5%, -4%)', offset: .7 }, { transform: 'translate(0, 0)' }], options: { duration: 1400, easing: curve } },
   orbitFloat: { keyframes: [{ transform: 'translateY(0) scale(1)' }, { transform: 'translateY(-9%) scale(1.04)', offset: .45 }, { transform: 'translateY(0) scale(1)' }], options: { duration: 1200, easing: curve } },
   writingTilt: { keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(-5deg)', offset: .3 }, { transform: 'rotate(5deg)', offset: .65 }, { transform: 'rotate(0deg)' }], options: { duration: 1000, easing: curve }, origin: '50% 65%' },
+  gardenBounce: { keyframes: [{ transform: 'translateY(0) rotate(0deg)' }, { transform: 'translateY(-6%) rotate(-3deg)', offset: .32 }, { transform: 'translateY(-3%) rotate(3deg)', offset: .65 }, { transform: 'translateY(0) rotate(0deg)' }], options: { duration: 1050, easing: curve }, origin: '50% 85%' },
+  animalHop: { keyframes: [{ transform: 'translateY(0) scale(1)' }, { transform: 'translateY(-11%) scale(1.02,.98)', offset: .35 }, { transform: 'translateY(0) scale(1.04,.96)', offset: .68 }, { transform: 'translateY(0) scale(1)' }], options: { duration: 950, easing: curve }, origin: '50% 90%' },
+  fabricSway: createSwayMotion({ angle: 6, duration: 1250, origin: '50% 15%' }),
+  toolWiggle: createSwayMotion({ angle: 7, duration: 900, origin: '50% 70%' }),
+  bookPeek: { keyframes: [{ transform: 'perspective(500px) rotateY(0deg) translateY(0)' }, { transform: 'perspective(500px) rotateY(-20deg) translateY(-3%)', offset: .32 }, { transform: 'perspective(500px) rotateY(20deg) translateY(-3%)', offset: .68 }, { transform: 'perspective(500px) rotateY(0deg) translateY(0)' }], options: { duration: 1050, easing: curve } },
+  handEmphasis: { keyframes: [{ transform: 'translateY(0) scale(1)' }, { transform: 'translateY(-5%) scale(1.08)', offset: .35 }, { transform: 'translateY(0) scale(.98)', offset: .7 }, { transform: 'translateY(0) scale(1)' }], options: { duration: 800, easing: curve }, origin: '50% 80%' },
+  vesselRock: { keyframes: [{ transform: 'translateY(0) rotate(0deg)' }, { transform: 'translateY(-4%) rotate(-4deg)', offset: .3 }, { transform: 'translateY(2%) rotate(4deg)', offset: .68 }, { transform: 'translateY(0) rotate(0deg)' }], options: { duration: 1300, easing: curve }, origin: '50% 80%' },
+  treatPop: { keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(.96)', offset: .22 }, { transform: 'scale(1.08)', offset: .5 }, { transform: 'scale(1)' }], options: { duration: 850, easing: curve } },
+  clockTick: { keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(-3deg)', offset: .25 }, { transform: 'rotate(3deg)', offset: .5 }, { transform: 'rotate(-2deg)', offset: .75 }, { transform: 'rotate(0deg)' }], options: { duration: 1200, easing: curve }, origin: '50% 50%' },
+  gentleFall: { keyframes: [{ transform: 'translateY(0) scale(1)' }, { transform: 'translateY(7%) scale(.98,1.02)', offset: .45 }, { transform: 'translateY(0) scale(1)' }], options: { duration: 1100, easing: curve } },
+  softSettle: { keyframes: [{ transform: 'translateY(0) scale(1)' }, { transform: 'translateY(-5%) scale(1)', offset: .35 }, { transform: 'translateY(0) scale(1.03,.97)', offset: .7 }, { transform: 'translateY(0) scale(1)' }], options: { duration: 950, easing: curve }, origin: '50% 90%' },
   steps: { keyframes: [{ transform: 'translateY(0)' }, { transform: 'translateY(-7%)', offset: .25 }, { transform: 'translateY(0)', offset: .5 }, { transform: 'translateY(-5%)', offset: .75 }, { transform: 'translateY(0)' }], options: { duration: 1000, easing: curve }, origin: '50% 90%' }
 };
 
@@ -97,6 +108,17 @@ const walkerAliases = Object.fromEntries(walkerMembers.flatMap(glyph => {
 }));
 // Members are reviewed explicitly; no entire Unicode subgroup is assumed to move alike.
 export const families = {
+  clocks: { label: 'Clocks', group: 'objects', motion: 'clockTick', members: ['⌚', '🕰️', '⏲️', '🕛', '🕧'], aliases: { '🕰': '🕰️', '⏲': '⏲️' } },
+  rain: { label: 'Rain and water', group: 'nature', motion: 'gentleFall', members: ['💧', '💦', '🌨️', '☔'], aliases: { '🌨': '🌨️' } },
+  containers: { label: 'Containers', group: 'objects', motion: 'softSettle', members: ['🧳', '🧰', '🧺', '🗃️', '🗄️', '🗳️', '🗑️'], aliases: { '🗃': '🗃️', '🗄': '🗄️', '🗳': '🗳️', '🗑': '🗑️' } },
+  vegetables: { label: 'Vegetables', group: 'food', motion: 'gardenBounce', members: ['🥕', '🥦', '🥬', '🥒', '🌽', '🫑', '🍆', '🧅', '🧄', '🥔'] },
+  landAnimals: { label: 'Land animals', group: 'nature', motion: 'animalHop', members: ['🐕', '🐈', '🐖', '🐑', '🐐', '🐄', '🐎', '🦌', '🐘', '🦒'] },
+  clothing: { label: 'Clothing', group: 'objects', motion: 'fabricSway', members: ['👕', '👖', '🧥', '👗', '🩳', '👚', '👔'] },
+  handTools: { label: 'Hand tools', group: 'objects', motion: 'toolWiggle', members: ['🔨', '🪓', '🪚', '🪛', '🔧', '🪠', '🔩'] },
+  books: { label: 'Books', group: 'objects', motion: 'bookPeek', members: ['📕', '📗', '📘', '📙', '📔', '📓', '📒'] },
+  handGestures: { label: 'Hand gestures', group: 'gestures', motion: 'handEmphasis', members: ['🤏', '🫳', '🫴', '🫲', '🫱', '🫷', '🫸', '🤌', '🫵'], aliases: familyToneAliases(['🤏', '🫳', '🫴', '🫲', '🫱', '🫷', '🫸', '🤌', '🫵']) },
+  vessels: { label: 'Boats', group: 'travel', motion: 'vesselRock', members: ['🚤', '🛥️', '🛳️', '⛴️', '🛶'], aliases: { '🛥': '🛥️', '🛳': '🛳️', '⛴': '⛴️' } },
+  treats: { label: 'Sweet treats', group: 'food', motion: 'treatPop', members: ['🍬', '🍭', '🍫', '🍮', '🧁', '🍨'], decoration: 'sparkle' },
   fruit: { label: 'Fruit', group: 'food', motion: 'fruitBounce', members: ['🍊', '🍋', '🍐', '🍑', '🍇', '🫐', '🍒', '🥝', '🍍', '🥭'], decoration: 'sparkle' },
   animalFaces: { label: 'Animal faces', group: 'nature', motion: 'curiousTilt', members: ['🐶', '🦊', '🐹', '🦝', '🐨', '🐯', '🐭', '🐻‍❄️'] },
   clouds: { label: 'Clouds', group: 'nature', motion: 'cloudDrift', members: ['🌤️', '⛅', '🌥️', '🌦️', '🌫️'], aliases: { '🌤': '🌤️', '🌥': '🌥️', '🌦': '🌦️', '🌫': '🌫️' } },

package/README.ja.md

@@ -1,44 +0,0 @@
-<h1 align="center">👋</h1>
-
-<h1 align="center">Emoji Motion</h1>
-
-<p align="center"><a href="./README.md">English</a> · <a href="./README.zh-CN.md">简体中文</a> · <a href="./README.zh-TW.md">繁體中文</a> · <a href="./README.ja.md">日本語</a></p>
-
-<p align="center"><strong>いつもの絵文字に、もう少し気持ちを。 ✨</strong></p>
-
-<p align="center"><a href="https://www.npmjs.com/package/@dofy/native-emoji-motion"><img src="https://img.shields.io/npm/v/%40dofy%2Fnative-emoji-motion?label=npm" alt="npm version" /></a> <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT license" /></a> <a href="https://www.npmjs.com/package/@dofy/native-emoji-motion"><img src="https://img.shields.io/node/v/%40dofy%2Fnative-emoji-motion" alt="Node.js version" /></a></p>
-
-端末のネイティブ絵文字に小さく表情豊かなアニメーションを追加します。React、Vue、Svelte、Web Component に対応し、肌の色、任意の SVG エフェクト、カスタムモーション、Unicode による自動分類を利用できます。[ライブデモ](https://emoji-motion.phpz.org/)でお試しください。
-
-## 📊 コレクションの概要
-
-| バージョン 0.5.0 | 数 | 内容 |
-| --- | ---: | --- |
-| 個別のプリセット | 177 | 個別に設定された基本絵文字 |
-| 確認済みモーションファミリー | 16 | さらに 123 種類の基本絵文字に対応 |
-| カテゴリ | 10 | コレクションの分類 |
-| 再利用可能なモーション | 42 | プリセットとファミリーで共有 |
-| SVG エフェクト付き絵文字 | 67 | 基本絵文字の数 |
-| 認識できる Unicode シーケンス | 5,235 | 肌の色などのバリエーションを含む Unicode Emoji 18.0 |
-
-肌の色などのバリエーションは追加の Unicode シーケンスとして数えます。プリセットや確認済みファミリーに一致しない絵文字には、分類に基づくフォールバックを適用します。
-
-## 📦 はじめに
-
-```sh
-npm install @dofy/native-emoji-motion
-```
-
-```jsx
-import { EmojiMotion } from '@dofy/native-emoji-motion/react';
-
-<p>Hello <EmojiMotion emoji="👋" skinTone="medium" /></p>
-```
-
-React、Vue、Svelte コンポーネントまたは Web Component を使用できます。`enhance()` で既存のテキストにもモーションを追加できます。設定、パラメーター、肌の色、カスタマイズの詳細は[ドキュメント](https://emoji-motion.phpz.org/docs/)をご覧ください。
-
-> 0.3.0 からアップグレードする場合：0.4.0 では `display` プロパティを削除しました。ブロック要素または CSS でレイアウトを調整してください。
-
-## 📄 ライセンス
-
-[MIT](./LICENSE)。Unicode データには [Unicode License](./UNICODE-LICENSE.txt) が適用されます。

package/README.zh-CN.md

@@ -1,44 +0,0 @@
-<h1 align="center">👋</h1>
-
-<h1 align="center">Emoji Motion</h1>
-
-<p align="center"><a href="./README.md">English</a> · <a href="./README.zh-CN.md">简体中文</a> · <a href="./README.zh-TW.md">繁體中文</a> · <a href="./README.ja.md">日本語</a></p>
-
-<p align="center"><strong>让你的 emoji 多一点情绪。 ✨</strong></p>
-
-<p align="center"><a href="https://www.npmjs.com/package/@dofy/native-emoji-motion"><img src="https://img.shields.io/npm/v/%40dofy%2Fnative-emoji-motion?label=npm" alt="npm version" /></a> <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT license" /></a> <a href="https://www.npmjs.com/package/@dofy/native-emoji-motion"><img src="https://img.shields.io/node/v/%40dofy%2Fnative-emoji-motion" alt="Node.js version" /></a></p>
-
-为设备上的原生 emoji 添加小巧、富有表现力的动画，支持 React、Vue、Svelte 和 Web Component。支持肤色、可选 SVG 装饰、自定义动作与 Unicode 自动分类。前往 [在线演示](https://emoji-motion.phpz.org/) 体验。
-
-## 📊 项目概览
-
-| 0.5.0 版本 | 数量 | 说明 |
-| --- | ---: | --- |
-| 单独定制预设 | 177 | 逐个配置的基础 emoji |
-| 已审核动作家族 | 16 | 另外覆盖 123 个基础 emoji |
-| 类别 | 10 | 用于组织内容的分组 |
-| 可复用动作 | 42 | 预设和家族共享 |
-| 带可选 SVG 效果的 emoji | 67 | 基础 emoji 数量 |
-| 可识别 Unicode 序列 | 5,235 | Unicode Emoji 18.0，包含肤色等变体 |
-
-肤色及其他变体按额外 Unicode 序列计数；没有预设或已审核家族匹配的已识别 emoji 使用分类兜底动作。
-
-## 📦 快速开始
-
-```sh
-npm install @dofy/native-emoji-motion
-```
-
-```jsx
-import { EmojiMotion } from '@dofy/native-emoji-motion/react';
-
-<p>Hello <EmojiMotion emoji="👋" skinTone="medium" /></p>
-```
-
-可使用 React、Vue、Svelte 组件或 Web Component，也可通过 `enhance()` 为现有文本添加动效。完整接入、参数、肤色与自定义说明请参阅[帮助文档](https://emoji-motion.phpz.org/docs/)。
-
-> 从 0.3.0 升级？0.4.0 移除了 `display` 参数，请使用块级容器或 CSS 控制布局。
-
-## 📄 许可证
-
-[MIT](./LICENSE)。Unicode 数据适用 [Unicode License](./UNICODE-LICENSE.txt)。

package/README.zh-TW.md

@@ -1,44 +0,0 @@
-<h1 align="center">👋</h1>
-
-<h1 align="center">Emoji Motion</h1>
-
-<p align="center"><a href="./README.md">English</a> · <a href="./README.zh-CN.md">简体中文</a> · <a href="./README.zh-TW.md">繁體中文</a> · <a href="./README.ja.md">日本語</a></p>
-
-<p align="center"><strong>讓你的 emoji 多一點情緒。 ✨</strong></p>
-
-<p align="center"><a href="https://www.npmjs.com/package/@dofy/native-emoji-motion"><img src="https://img.shields.io/npm/v/%40dofy%2Fnative-emoji-motion?label=npm" alt="npm version" /></a> <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT license" /></a> <a href="https://www.npmjs.com/package/@dofy/native-emoji-motion"><img src="https://img.shields.io/node/v/%40dofy%2Fnative-emoji-motion" alt="Node.js version" /></a></p>
-
-為裝置上的原生 emoji 加入小巧、富有表現力的動畫，支援 React、Vue、Svelte 和 Web Component。支援膚色、可選 SVG 裝飾、自訂動作與 Unicode 自動分類。前往[線上展示](https://emoji-motion.phpz.org/)體驗。
-
-## 📊 專案概覽
-
-| 0.5.0 版本 | 數量 | 說明 |
-| --- | ---: | --- |
-| 個別訂製預設 | 177 | 逐一設定的基礎 emoji |
-| 已審核動作家族 | 16 | 另外涵蓋 123 個基礎 emoji |
-| 類別 | 10 | 用來組織內容的分組 |
-| 可重複使用動作 | 42 | 預設和家族共用 |
-| 帶可選 SVG 效果的 emoji | 67 | 基礎 emoji 數量 |
-| 可辨識 Unicode 序列 | 5,235 | Unicode Emoji 18.0，包含膚色等變體 |
-
-膚色和其他變體按額外 Unicode 序列計數；沒有預設或已審核家族匹配的已辨識 emoji 使用分類備援動作。
-
-## 📦 快速開始
-
-```sh
-npm install @dofy/native-emoji-motion
-```
-
-```jsx
-import { EmojiMotion } from '@dofy/native-emoji-motion/react';
-
-<p>Hello <EmojiMotion emoji="👋" skinTone="medium" /></p>
-```
-
-可使用 React、Vue、Svelte 元件或 Web Component，也可透過 `enhance()` 為現有文字加入動效。完整接入、參數、膚色與自訂說明請參閱[說明文件](https://emoji-motion.phpz.org/docs/)。
-
-> 從 0.3.0 升級？0.4.0 移除了 `display` 參數，請使用區塊容器或 CSS 控制版面配置。
-
-## 📄 授權
-
-[MIT](./LICENSE)。Unicode 資料適用 [Unicode License](./UNICODE-LICENSE.txt)。