@dofy/native-emoji-motion 0.6.4 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.7.0 — 2026-11-14
+
+- **Behavior change:** emoji that use the bounce, hop or spring motions, including most animals and faces, now move with the new rhythm. The game die, alarm clock, cartwheeling person and turtle use new motions, and the hammer leaves the hand tools family.
+- Give springs, bounces, hops and pop a gravity-aware rhythm with anticipation, per-segment easing and squash on landing.
+- Add toss, somersault, alarmRing, peek and slam motions for dice, cartwheels, alarm clocks and telephones, peeking faces and the hammer.
+- Burst sparkles one after another, and add a scan effect for screens and documents.
+- Let decoration layers paint behind the glyph, and read built-in effect colors from CSS custom properties.
+- `bind()` ignores touch hover, mouse focus and repeats within its new `cooldown` (260 ms by default).
+
 ## 0.6.4 — 2026-11-14
 
 - Add ripple, splash and wake effects for water.

package/README.md

@@ -24,13 +24,13 @@ Bring 👋, ❤️, 📡 and more to life in React, Vue, Svelte or plain HTML. E
 
 ## 📊 Collection at a glance
 
-| In version 0.6.4 | Count | What it covers |
+| In version 0.7.0 | Count | What it covers |
 | --- | ---: | --- |
-| Handcrafted presets | 177 | Individually configured base emoji |
-| Reviewed motion families | 31 | 212 additional base emoji sharing reviewed motions |
+| Handcrafted presets | 182 | Individually configured base emoji |
+| Reviewed motion families | 34 | 223 additional base emoji sharing reviewed motions |
 | Categories | 10 | Groups used to organize the collection |
-| Reusable motions | 53 | Motions shared by presets and families |
-| Emoji with optional SVG effects | 96 | Base emoji with decorative effects |
+| Reusable motions | 58 | Motions shared by presets and families |
+| Emoji with optional SVG effects | 106 | 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.6.4",
+  "version": "0.7.0",
   "description": "Expressive, extensible animations for native emoji with optional SVG effects",
   "type": "module",
   "exports": {

package/src/EmojiMotion.svelte

@@ -14,7 +14,7 @@
 
 <span bind:this={wrapper} data-emoji-motion="component" role="img" aria-label={label ?? resolved?.name ?? emoji}
   tabindex={trigger ? -1 : 0}>
-  <span style="display: inline-block; position: relative">
+  <span style="display: inline-block; position: relative; isolation: isolate">
     <span aria-hidden="true" style="display: inline-block"
       use:animateEmoji={{ emoji, skinTone, registry, trigger: trigger ?? wrapper, decoration, events }}>{resolved?.glyph ?? emoji}</span>
   </span>

package/src/EmojiMotionLite.svelte

@@ -14,7 +14,7 @@
 
 <span bind:this={wrapper} data-emoji-motion="component" role="img" aria-label={label ?? resolved?.name ?? emoji}
   tabindex={trigger ? -1 : 0}>
-  <span style="display: inline-block; position: relative">
+  <span style="display: inline-block; position: relative; isolation: isolate">
     <span aria-hidden="true" style="display: inline-block"
       use:animateEmoji={{ emoji, skinTone, registry, trigger: trigger ?? wrapper, decoration, events }}>{resolved?.glyph ?? emoji}</span>
   </span>

package/src/element-core.js

@@ -19,7 +19,7 @@ export function createEmojiMotionElement(emojiMotion) {
     this.setAttribute('aria-label', this.getAttribute('label') ?? result?.name ?? emoji);
     if (!this.hasAttribute('tabindex')) this.tabIndex = 0;
     const visual = this.ownerDocument.createElement('span');
-    Object.assign(visual.style, { display: 'inline-block', position: 'relative' });
+    Object.assign(visual.style, { display: 'inline-block', position: 'relative', isolation: 'isolate' });
     const glyph = this.ownerDocument.createElement('span');
     Object.assign(glyph.style, { display: 'inline-block' });
     glyph.setAttribute('aria-hidden', 'true'); glyph.textContent = result?.glyph ?? emoji;

package/src/enhance.js

@@ -36,7 +36,7 @@ export function enhance(registry, options = {}) {
       if (index > cursor) fragment.append(node.ownerDocument.createTextNode(text.slice(cursor, index)));
       const wrapper = node.ownerDocument.createElement('span');
       wrapper.setAttribute('data-emoji-motion', 'enhanced');
-      Object.assign(wrapper.style, { display: 'inline-block', position: 'relative' });
+      Object.assign(wrapper.style, { display: 'inline-block', position: 'relative', isolation: 'isolate' });
       const inner = node.ownerDocument.createElement('span');
       inner.style.display = 'inline-block';
       inner.textContent = glyph;

package/src/index.d.ts

@@ -2,7 +2,7 @@ export interface Motion { keyframes: Keyframe[]; options?: KeyframeAnimationOpti
 export interface Group { label: string; description?: string; motion: string }
 export interface Anchor { x: string; y: string }
 export interface SvgShape { tag: 'path' | 'circle' | 'ellipse' | 'rect' | 'line' | 'polyline' | 'polygon'; attrs: Record<string, string> }
-export interface DecorationLayer { style: Partial<CSSStyleDeclaration>; keyframes: Keyframe[]; options?: KeyframeAnimationOptions; svg?: { viewBox: string; elements: SvgShape[] } }
+export interface DecorationLayer { /** Paint behind the glyph; the container must create a stacking context, for example with isolation: isolate. */ behind?: boolean; style: Partial<CSSStyleDeclaration>; keyframes: Keyframe[]; options?: KeyframeAnimationOptions; svg?: { viewBox: string; elements: SvgShape[] } }
 export interface Decoration { anchor: Anchor; layers: DecorationLayer[] }
 export type SkinTone = 'default' | 'light' | 'medium-light' | 'medium' | 'medium-dark' | 'dark';
 export interface EmojiEntry { group: string; name: string; motion?: string; decoration?: string; variants?: string[]; skinTones?: Partial<Record<Exclude<SkinTone, 'default'>, string>> }
@@ -10,7 +10,7 @@ export interface ClassificationRule { group: string; motion?: string }
 export interface MotionFamily { label: string; group: string; motion: string; members: string[]; aliases?: Record<string, string>; decoration?: string; decorations?: string[]; animation?: KeyframeAnimationOptions }
 export interface Config { defaults?: boolean; autoDetect?: boolean; classifications?: { groups?: Record<string, ClassificationRule>; subgroups?: Record<string, ClassificationRule>; fallback?: ClassificationRule }; defaultSkinTone?: SkinTone; motions?: Record<string, Motion>; decorations?: Record<string, Decoration>; groups?: Record<string, Group>; emoji?: Record<string, EmojiEntry>; families?: Record<string, MotionFamily> }
 export interface PlayOptions { ignoreReducedMotion?: boolean; skinTone?: SkinTone; animation?: KeyframeAnimationOptions; decoration?: { container: HTMLElement; anchor?: Anchor; flipX?: boolean; rotate?: number } }
-export interface BindOptions extends PlayOptions { trigger?: EventTarget; events?: string[] }
+export interface BindOptions extends PlayOptions { trigger?: EventTarget; events?: string[]; /** Milliseconds during which repeated triggers are ignored. Defaults to 260. */ cooldown?: number }
 export interface Resolution extends Omit<EmojiEntry, 'group' | 'motion'> { glyph: string; canonical: string; skinTone: SkinTone; groupId: string; group: Group; motionId: string; motion: Motion; decorationPreset?: Decoration; decorationPresets: Decoration[]; familyId?: string; animation?: KeyframeAnimationOptions; source: 'user' | 'user-classification' | 'preset' | 'family' | 'unicode' | 'fallback'; unicodeGroup?: string; unicodeSubgroup?: string }
 export interface EnhanceOptions { root?: string | Element | Document | DocumentFragment; exclude?: string; enabled?: boolean; observe?: boolean; decoration?: boolean; events?: string[] }
 export interface EmojiEnhancer { enable(): void; disable(): void; cleanup(): void }

package/src/presets.js

@@ -3,15 +3,27 @@ function boundedNumber(name, value, min, max) {
   if (typeof value !== 'number' || !Number.isFinite(value) || value < min || value > max) throw new RangeError(`${name} must be between ${min} and ${max}`);
   return value;
 }
+// Gravity easings: rising slows towards the top, falling speeds up into the landing.
+const rise = 'cubic-bezier(.2,.7,.35,1)';
+const fall = 'cubic-bezier(.6,0,.85,.45)';
+const crouch = 'cubic-bezier(.3,0,.6,1)';
+const settle = 'ease-out';
 /** Build a direction-neutral bounce; height is a percentage of glyph height. */
 export function createSpringMotion({ height = 24, rebounds = 1, duration = 900 } = {}) {
   boundedNumber('height', height, 0, 60); boundedNumber('duration', duration, 1, 10000);
   if (!Number.isInteger(rebounds) || rebounds < 0 || rebounds > 2) throw new RangeError('rebounds must be 0, 1, or 2');
-  const frames = [{ transform: 'translateY(0) scale(1)', offset: 0 }, { transform: `translateY(-${height}%) scale(.97,1.03)`, offset: .3 }, { transform: 'translateY(0) scale(1.09,.91)', offset: .6 }];
-  if (rebounds >= 1) frames.push({ transform: `translateY(-${height * .3}%) scale(1)`, offset: .78 });
-  if (rebounds === 2) frames.push({ transform: 'translateY(0) scale(1)', offset: .88 }, { transform: `translateY(-${height * .12}%) scale(1)`, offset: .94 });
+  // Crouch before take-off, stretch while rising, squash on landing.
+  const frames = [
+    { transform: 'translateY(0) scale(1)', offset: 0, easing: crouch },
+    { transform: 'translateY(0) scale(1.08,.92)', offset: .12, easing: rise },
+    { transform: `translateY(-${height}%) scale(.96,1.05)`, offset: .4, easing: fall },
+    { transform: 'translateY(0) scale(1.12,.88)', offset: .6, easing: rebounds ? rise : settle }
+  ];
+  if (rebounds >= 1) frames.push({ transform: `translateY(-${height * .28}%) scale(.98,1.02)`, offset: .74, easing: fall }, { transform: 'translateY(0) scale(1.04,.96)', offset: .85, easing: rebounds === 2 ? rise : settle });
+  if (rebounds === 2) frames.push({ transform: `translateY(-${height * .1}%) scale(1)`, offset: .92, easing: fall }, { transform: 'translateY(0) scale(1.01,.99)', offset: .97, easing: settle });
+  if (!rebounds) frames.push({ transform: 'translateY(0) scale(.98,1.02)', offset: .8, easing: settle });
   frames.push({ transform: 'translateY(0) scale(1)', offset: 1 });
-  return { keyframes: frames, options: { duration, easing: curve }, origin: '50% 90%' };
+  return { keyframes: frames, options: { duration, easing: 'linear' }, origin: '50% 90%' };
 }
 /** Build a balanced sway; no assumption about the native glyph's direction. */
 export function createSwayMotion({ angle = 8, duration = 1200, origin = '50% 90%' } = {}) {
@@ -23,7 +35,7 @@ export const motions = {
   glide: { keyframes: [{ transform: 'translate(0, 0) rotate(0deg)' }, { transform: 'translate(-12%, 8%) rotate(-9deg)', offset: .25 }, { transform: 'translate(12%, -22%) rotate(9deg)', offset: .6 }, { transform: 'translate(0, 0) rotate(0deg)' }], options: { duration: 1050, easing: 'cubic-bezier(.22,1,.36,1)' } },
   ride: { keyframes: [{ transform: 'translateY(0) rotate(0deg)' }, { transform: 'translateY(-15%) rotate(-6deg)', offset: .24 }, { transform: 'translateY(0) rotate(4deg)', offset: .48 }, { transform: 'translateY(-9%) rotate(-4deg)', offset: .68 }, { transform: 'translateY(0) rotate(0deg)' }], options: { duration: 950, easing: 'cubic-bezier(.22,1,.36,1)' }, origin: '50% 80%' },
   wave: { keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(18deg)' }, { transform: 'rotate(-12deg)' }, { transform: 'rotate(16deg)' }, { transform: 'rotate(-7deg)' }, { transform: 'rotate(0deg)' }], options: { duration: 850, easing: 'cubic-bezier(.22,1,.36,1)' }, origin: '70% 75%' },
-  bounce: { keyframes: [{ transform: 'translateY(0) scale(1)' }, { transform: 'translateY(-22%) scale(1.07,.94)', offset: .38 }, { transform: 'translateY(0) scale(.93,1.07)', offset: .72 }, { transform: 'translateY(0) scale(1)' }], options: { duration: 650, easing: 'cubic-bezier(.22,1,.36,1)' }, origin: '50% 85%' },
+  bounce: { ...createSpringMotion({ height: 22, rebounds: 0, duration: 700 }), origin: '50% 85%' },
   pulse: { keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(1.25)', offset: .28 }, { transform: 'scale(.96)', offset: .5 }, { transform: 'scale(1.16)', offset: .68 }, { transform: 'scale(1)' }], options: { duration: 750, easing: 'cubic-bezier(.22,1,.36,1)' } },
   wobble: { keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(-13deg)' }, { transform: 'rotate(10deg)' }, { transform: 'rotate(-6deg)' }, { transform: 'rotate(3deg)' }, { transform: 'rotate(0deg)' }], options: { duration: 700, easing: 'cubic-bezier(.22,1,.36,1)' }, origin: '50% 80%' },
   spin: { keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }], options: { duration: 800, easing: 'cubic-bezier(.22,1,.36,1)' } },
@@ -32,14 +44,14 @@ export const motions = {
   swing: { keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(18deg)' }, { transform: 'rotate(-15deg)' }, { transform: 'rotate(9deg)' }, { transform: 'rotate(-4deg)' }, { transform: 'rotate(0deg)' }], options: { duration: 850, easing: 'cubic-bezier(.22,1,.36,1)' }, origin: '50% 10%' },
   float: { keyframes: [{ transform: 'translateY(0) rotate(0deg)' }, { transform: 'translateY(-18%) rotate(-8deg)', offset: .4 }, { transform: 'translateY(-10%) rotate(6deg)', offset: .7 }, { transform: 'translateY(0) rotate(0deg)' }], options: { duration: 1000, easing: 'cubic-bezier(.22,1,.36,1)' } },
   shake: { keyframes: [{ transform: 'translateX(0)' }, { transform: 'translateX(-10%) rotate(-8deg)' }, { transform: 'translateX(10%) rotate(8deg)' }, { transform: 'translateX(-6%) rotate(-5deg)' }, { transform: 'translateX(4%) rotate(3deg)' }, { transform: 'translateX(0)' }], options: { duration: 650, easing: 'cubic-bezier(.22,1,.36,1)' } },
-  hop: { keyframes: [{ transform: 'translateY(0) scale(1)' }, { transform: 'translateY(-28%) scale(1.04,.96)', offset: .32 }, { transform: 'translateY(0) scale(1.1,.9)', offset: .64 }, { transform: 'translateY(-9%) scale(1)', offset: .8 }, { transform: 'translateY(0) scale(1)' }], options: { duration: 850, easing: 'cubic-bezier(.22,1,.36,1)' }, origin: '50% 90%' },
+  hop: createSpringMotion({ height: 28, rebounds: 1, duration: 850 }),
   flutter: { keyframes: [{ transform: 'translateY(0) rotate(0deg)' }, { transform: 'translateY(-12%) rotate(-8deg)' }, { transform: 'translateY(-21%) rotate(8deg)' }, { transform: 'translateY(-10%) rotate(-5deg)' }, { transform: 'translateY(0) rotate(0deg)' }], options: { duration: 900, easing: 'cubic-bezier(.22,1,.36,1)' } },
   sway: { keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(-9deg)' }, { transform: 'rotate(8deg)' }, { transform: 'rotate(-5deg)' }, { transform: 'rotate(0deg)' }], options: { duration: 1100, easing: 'cubic-bezier(.22,1,.36,1)' }, origin: '50% 95%' },
   flip: { keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(185deg)', offset: .5 }, { transform: 'rotate(360deg)' }], options: { duration: 1000, easing: 'cubic-bezier(.22,1,.36,1)' } },
   sip: { keyframes: [{ transform: 'translateY(0) rotate(0deg)' }, { transform: 'translateY(-8%) rotate(-6deg)', offset: .35 }, { transform: 'translateY(-8%) rotate(6deg)', offset: .65 }, { transform: 'translateY(0) rotate(0deg)' }], options: { duration: 1000, easing: 'cubic-bezier(.22,1,.36,1)' }, origin: '50% 80%' },
   twirl: { keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(-10deg)' }, { transform: 'rotate(12deg)' }, { transform: 'rotate(-6deg)' }, { transform: 'rotate(0deg)' }], options: { duration: 950, easing: 'cubic-bezier(.22,1,.36,1)' }, origin: '50% 80%' },
   nod: { keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(8deg)', offset: .3 }, { transform: 'rotate(-4deg)', offset: .6 }, { transform: 'rotate(0deg)' }], options: { duration: 850, easing: 'cubic-bezier(.22,1,.36,1)' }, origin: '50% 85%' },
-  pop: { keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(.85)', offset: .2 }, { transform: 'scale(1.18)', offset: .48 }, { transform: 'scale(.97)', offset: .75 }, { transform: 'scale(1)' }], options: { duration: 750, easing: 'cubic-bezier(.22,1,.36,1)' } },
+  pop: { keyframes: [{ transform: 'scale(1)', easing: crouch }, { transform: 'scale(.84)', offset: .18, easing: rise }, { transform: 'scale(1.2)', offset: .45, easing: 'ease-in-out' }, { transform: 'scale(.95)', offset: .68, easing: settle }, { transform: 'scale(1.04)', offset: .84, easing: settle }, { transform: 'scale(1)' }], options: { duration: 750, easing: 'linear' } },
   bob: { keyframes: [{ transform: 'translateY(0) rotate(0deg)' }, { transform: 'translateY(-12%) rotate(-4deg)', offset: .3 }, { transform: 'translateY(4%) rotate(4deg)', offset: .65 }, { transform: 'translateY(0) rotate(0deg)' }], options: { duration: 1000, easing: 'cubic-bezier(.22,1,.36,1)' } },
   breathe: { keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(1.09,1.05)', offset: .48 }, { transform: 'scale(1)' }], options: { duration: 1200, easing: 'cubic-bezier(.22,1,.36,1)' } },
   spring: createSpringMotion(),
@@ -62,7 +74,7 @@ export const motions = {
   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%' },
+  animalHop: createSpringMotion({ height: 11, rebounds: 0, duration: 900 }),
   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 } },
@@ -72,6 +84,64 @@ export const motions = {
   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%' },
+  // Rhythm motions: a beat of anticipation, the move, a held pause, then a reversal into rest.
+  // Tumble up, hang near the top, drop flat, overshoot and settle back.
+  toss: { keyframes: [
+    { transform: 'translateY(0) rotate(0deg) scale(1)', easing: crouch },
+    { transform: 'translateY(4%) rotate(-10deg) scale(1.12,.88)', offset: .12, easing: 'cubic-bezier(.15,.75,.35,1)' },
+    { transform: 'translateY(-56%) rotate(190deg) scale(1.06)', offset: .44, easing: 'cubic-bezier(.45,.05,.55,.95)' },
+    { transform: 'translateY(-50%) rotate(255deg) scale(1.06)', offset: .56, easing: fall },
+    { transform: 'translateY(0) rotate(360deg) scale(1.14,.86)', offset: .76, easing: settle },
+    { transform: 'translateY(-4%) rotate(366deg) scale(.98,1.02)', offset: .86, easing: settle },
+    { transform: 'translateY(0) rotate(357deg) scale(1)', offset: .93, easing: settle },
+    { transform: 'translateY(0) rotate(360deg) scale(1)' }
+  ], options: { duration: 1000, easing: 'linear' }, origin: '50% 55%' },
+  // A full roll whose slowest part is the top, so the turn seems to hang before landing.
+  somersault: { keyframes: [
+    { transform: 'translateY(0) rotate(0deg) scale(1)', easing: crouch },
+    { transform: 'translateY(5%) rotate(0deg) scale(1.1,.9)', offset: .14, easing: rise },
+    { transform: 'translateY(-40%) rotate(-150deg) scale(1)', offset: .36, easing: 'linear' },
+    { transform: 'translateY(-44%) rotate(-215deg) scale(1)', offset: .5, easing: fall },
+    { transform: 'translateY(0) rotate(-360deg) scale(1.12,.88)', offset: .72, easing: settle },
+    { transform: 'translateY(-3%) rotate(-360deg) scale(.98,1.02)', offset: .86, easing: settle },
+    { transform: 'translateY(0) rotate(-360deg) scale(1)' }
+  ], options: { duration: 1100, easing: 'linear' }, origin: '50% 60%' },
+  // Two bursts of quick shaking separated by a held breath, like an alarm clock.
+  alarmRing: { keyframes: [
+    { transform: 'translateY(0) rotate(0deg)', easing: 'ease-out' },
+    { transform: 'translateY(-8%) rotate(-16deg)', offset: .06 },
+    { transform: 'translateY(-8%) rotate(16deg)', offset: .12 },
+    { transform: 'translateY(-8%) rotate(-15deg)', offset: .18 },
+    { transform: 'translateY(-8%) rotate(15deg)', offset: .24 },
+    { transform: 'translateY(-8%) rotate(-9deg)', offset: .3, easing: 'ease-out' },
+    { transform: 'translateY(-7%) rotate(0deg)', offset: .36 },
+    { transform: 'translateY(-6%) rotate(0deg)', offset: .5 },
+    { transform: 'translateY(-6%) rotate(-12deg)', offset: .56 },
+    { transform: 'translateY(-6%) rotate(12deg)', offset: .62 },
+    { transform: 'translateY(-6%) rotate(-8deg)', offset: .68 },
+    { transform: 'translateY(-5%) rotate(6deg)', offset: .74, easing: 'ease-out' },
+    { transform: 'translateY(0) rotate(-2deg)', offset: .86, easing: settle },
+    { transform: 'translateY(0) rotate(0deg)' }
+  ], options: { duration: 1100, easing: 'linear' }, origin: '50% 60%' },
+  // Duck out of sight, wait, then pop back with a look one way and the other.
+  peek: { keyframes: [
+    { transform: 'translateY(0) scale(1) rotate(0deg)', opacity: 1, easing: 'cubic-bezier(.5,0,.75,0)' },
+    { transform: 'translateY(8%) scale(.6) rotate(0deg)', opacity: .2, offset: .16, easing: 'linear' },
+    { transform: 'translateY(8%) scale(.6) rotate(0deg)', opacity: .2, offset: .4, easing: rise },
+    { transform: 'translateY(-6%) scale(1.08) rotate(10deg)', opacity: 1, offset: .58, easing: 'ease-in-out' },
+    { transform: 'translateY(-4%) scale(1.04) rotate(-7deg)', opacity: 1, offset: .74, easing: settle },
+    { transform: 'translateY(0) scale(1) rotate(2deg)', opacity: 1, offset: .88, easing: settle },
+    { transform: 'translateY(0) scale(1) rotate(0deg)', opacity: 1 }
+  ], options: { duration: 1100, easing: 'linear' } },
+  // Lift and hold at the top, then come down hard and squash on impact.
+  slam: { keyframes: [
+    { transform: 'translateY(0) rotate(0deg) scale(1)', easing: rise },
+    { transform: 'translateY(-30%) rotate(-10deg) scale(1.06)', offset: .34, easing: 'linear' },
+    { transform: 'translateY(-32%) rotate(-12deg) scale(1.06)', offset: .44, easing: fall },
+    { transform: 'translateY(3%) rotate(0deg) scale(1.18,.82)', offset: .56, easing: settle },
+    { transform: 'translateY(-4%) rotate(2deg) scale(.96,1.04)', offset: .72, easing: settle },
+    { transform: 'translateY(0) rotate(0deg) scale(1)' }
+  ], options: { duration: 900, easing: 'linear' }, 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%' }
 };
 
@@ -117,7 +187,7 @@ export const families = {
   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: ['🔨', '🪓', '🪚', '🪛', '🔧', '🪠', '🔩'] },
+  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: { '🛥': '🛥️', '🛳': '🛳️', '⛴': '⛴️' }, decoration: 'wake' },
@@ -134,6 +204,9 @@ export const families = {
   poses: { label: 'People in poses', group: 'people', motion: 'pose', members: ['🧎', '🧍', '🙇'], aliases: familyToneAliases(['🧎', '🧍', '🙇']) },
   professionals: { label: 'Professionals', group: 'people', motion: 'pose', members: roleMembers, aliases: roleAliases },
   walkers: { label: 'Walking and running', group: 'people', motion: 'steps', members: walkerMembers, aliases: walkerAliases },
+  ringers: { label: 'Ringing things', group: 'objects', motion: 'alarmRing', members: ['☎️', '📞', '🛎️'], aliases: { '☎': '☎️', '🛎': '🛎️' }, decoration: 'sound' },
+  peekers: { label: 'Peeking faces', group: 'faces', motion: 'peek', members: ['🫣', '🙈', '🙉', '🙊'] },
+  screens: { label: 'Screens and documents', group: 'objects', motion: 'steady', members: ['💻', '🖥️', '📠', '🧾', '📋'], aliases: { '🖥': '🖥️' }, decoration: 'scan' },
   swimmers: { label: 'Swimmers', group: 'people', motion: 'bob', members: gendered('🏊'), aliases: genderedToneAliases(gendered('🏊')), decoration: 'ripple' },
   surfers: { label: 'Surfers', group: 'people', motion: 'ride', members: gendered('🏄'), aliases: genderedToneAliases(gendered('🏄')), decoration: 'splash' },
   waterPolo: { label: 'Water polo', group: 'people', motion: 'bob', members: gendered('🤽'), aliases: genderedToneAliases(gendered('🤽')), decoration: 'splash' },
@@ -178,7 +251,7 @@ export const emoji = {
   '☕': { group: 'food', name: 'Hot beverage', motion: 'sip', decoration: 'steam' }, '🍵': { group: 'food', name: 'Teacup', motion: 'sip', decoration: 'steam' }, '🍕': { group: 'food', name: 'Pizza', motion: 'bounce' }, '🍦': { group: 'food', name: 'Soft ice cream', motion: 'sway' },
   '🏀': { group: 'activities', name: 'Basketball', motion: 'hop' }, '⚽': { group: 'activities', name: 'Soccer ball', motion: 'hop' }, '🎈': { group: 'activities', name: 'Balloon', motion: 'float' }, '🎉': { group: 'activities', name: 'Party popper', motion: 'bounce', decoration: 'sparkle' },
   '💃': { group: 'people', name: 'Woman dancing', motion: 'twirl', skinTones: skinTones('💃') }, '🕺': { group: 'people', name: 'Man dancing', motion: 'twirl', skinTones: skinTones('🕺') },
-  '⏳': { group: 'objects', name: 'Hourglass', motion: 'hourglassTurn' }, '⏰': { group: 'objects', name: 'Alarm clock', motion: 'shake' }, '🕯️': { group: 'objects', name: 'Candle', motion: 'steady', decoration: 'flicker', variants: ['🕯'] },
+  '⏳': { group: 'objects', name: 'Hourglass', motion: 'hourglassTurn' }, '⏰': { group: 'objects', name: 'Alarm clock', motion: 'alarmRing', decoration: 'sound' }, '🕯️': { group: 'objects', name: 'Candle', motion: 'steady', decoration: 'flicker', variants: ['🕯'] },
 
   // Additional handcrafted entries share motions where their physical action fits.
   '😀': { group: 'faces', name: 'Grinning face', motion: 'bounce' }, '🤣': { group: 'faces', name: 'Rolling on the floor laughing', motion: 'shake' },
@@ -191,7 +264,7 @@ export const emoji = {
   '🫰': { group: 'gestures', name: 'Hand with index finger and thumb crossed', motion: 'pop', skinTones: skinTones('🫰') },
   '🐱': { group: 'nature', name: 'Cat face', motion: 'nod' }, '🐻': { group: 'nature', name: 'Bear', motion: 'nod' }, '🐼': { group: 'nature', name: 'Panda', motion: 'sway' },
   '🐸': { group: 'nature', name: 'Frog', motion: 'hop' }, '🐧': { group: 'nature', name: 'Penguin', motion: 'sway' }, '🐥': { group: 'nature', name: 'Front facing baby chick', motion: 'hop' },
-  '🐢': { group: 'nature', name: 'Turtle', motion: 'bob' }, '🐟': { group: 'nature', name: 'Fish', motion: 'bob' }, '🐬': { group: 'nature', name: 'Dolphin', motion: 'hop', decoration: 'splash' },
+  '🐢': { group: 'nature', name: 'Turtle', motion: 'peek' }, '🐟': { group: 'nature', name: 'Fish', motion: 'bob' }, '🐬': { group: 'nature', name: 'Dolphin', motion: 'hop', decoration: 'splash' },
   '🐙': { group: 'nature', name: 'Octopus', motion: 'twirl' }, '🌵': { group: 'nature', name: 'Cactus', motion: 'sway' }, '🌲': { group: 'nature', name: 'Evergreen tree', motion: 'sway' },
   '🌼': { group: 'nature', name: 'Blossom flower', motion: 'sway', decoration: 'petals' }, '❄️': { group: 'nature', name: 'Snowflake', motion: 'float', variants: ['❄'] }, '☁️': { group: 'nature', name: 'Cloud', motion: 'float', variants: ['☁'] },
   '🍎': { group: 'food', name: 'Red apple', motion: 'nod' }, '🍉': { group: 'food', name: 'Watermelon', motion: 'wobble' }, '🍓': { group: 'food', name: 'Strawberry', motion: 'bounce' },
@@ -202,7 +275,7 @@ export const emoji = {
   '🎨': { group: 'activities', name: 'Artist palette', motion: 'twirl' }, '🎸': { group: 'activities', name: 'Guitar', motion: 'sway', decoration: 'sound' },
   '🥁': { group: 'activities', name: 'Drum', motion: 'shake', decoration: 'sound' }, '🎮': { group: 'activities', name: 'Game controller', motion: 'wobble' }, '🪁': { group: 'activities', name: 'Kite', motion: 'flutter' },
   '🙋': { group: 'people', name: 'Person raising hand', motion: 'wave', skinTones: skinTones('🙋') }, '🧘': { group: 'people', name: 'Person in lotus position', motion: 'breathe', skinTones: skinTones('🧘') },
-  '🏃': { group: 'people', name: 'Person running', motion: 'hop', skinTones: skinTones('🏃') }, '🤸': { group: 'people', name: 'Person cartwheeling', motion: 'twirl', skinTones: skinTones('🤸') },
+  '🏃': { group: 'people', name: 'Person running', motion: 'hop', skinTones: skinTones('🏃') }, '🤸': { group: 'people', name: 'Person cartwheeling', motion: 'somersault', skinTones: skinTones('🤸') },
   '🧑‍🍳': { group: 'people', name: 'Cook', motion: 'nod', skinTones: personSkinTones('🍳') }, '🧑‍🎨': { group: 'people', name: 'Artist', motion: 'twirl', skinTones: personSkinTones('🎨') },
   '🧑‍🚀': { group: 'people', name: 'Astronaut', motion: 'float', skinTones: personSkinTones('🚀') }, '🧑‍💻': { group: 'people', name: 'Technologist', motion: 'nod', skinTones: personSkinTones('💻') },
   '📱': { group: 'objects', name: 'Mobile phone', motion: 'shake' }, '📚': { group: 'objects', name: 'Books', motion: 'nod' }, '✉️': { group: 'objects', name: 'Envelope', motion: 'bob', variants: ['✉'] },
@@ -229,41 +302,63 @@ export const emoji = {
   '🤿': { group: 'activities', name: 'Diving mask', motion: 'underwater', decoration: 'bubbles' },
   '🛟': { group: 'travel', name: 'Ring buoy', motion: 'vesselRock', decoration: 'wake' },
   '🪙': { group: 'objects', name: 'Coin', motion: 'flipHorizontal' },
-  '🎲': { group: 'activities', name: 'Game die', motion: 'spin' }
+  '🔨': { group: 'objects', name: 'Hammer', motion: 'slam', decoration: 'impact' },
+  '🔢': { group: 'symbols', name: 'Input numbers', motion: 'toss' },
+  '🪃': { group: 'activities', name: 'Boomerang', motion: 'toss' },
+  '🥏': { group: 'activities', name: 'Flying disc', motion: 'toss' },
+  '📳': { group: 'symbols', name: 'Vibration mode', motion: 'alarmRing' },
+  '🎲': { group: 'activities', name: 'Game die', motion: 'toss' }
 };
 
-// Declarative SVG layers never alter the native glyph. Anchors are relative to
-// the consumer's glyph container and may be overridden for a particular font.
-const signalShape = { viewBox: '0 0 100 100', elements: [{ tag: 'circle', attrs: { cx: '50', cy: '50', r: '29', fill: 'none', stroke: '#7c8ee8', 'stroke-width': '2.5' } }] };
+// Declarative SVG layers never alter the native glyph. Colors read a CSS custom
+// property such as --emoji-motion-water and fall back to the listed value.
+// Anchors are relative to the consumer's glyph container and may be overridden
+// for a particular font.
+const signalShape = { viewBox: '0 0 100 100', elements: [{ tag: 'circle', attrs: { cx: '50', cy: '50', r: '29', fill: 'none', stroke: 'var(--emoji-motion-signal, #7c8ee8)', 'stroke-width': '2.5' } }] };
 const notesShape = { viewBox: '0 0 100 100', elements: [
-  { tag: 'path', attrs: { d: 'M24 37c-7 3-7 8-3 10s9-1 9-5V23l12-3v15c-7 3-7 8-3 10s9-1 9-5V12l-24 6z', fill: '#b780c8' } },
-  { tag: 'path', attrs: { d: 'M75 67c-5 2-5 6-2 7s7-1 7-4V54l8-2v12c-5 2-5 6-2 7s7-1 7-4V46l-18 5z', fill: '#dc8f72' } }
-] };
-const sparkleShape = { viewBox: '0 0 100 100', elements: [
-  { tag: 'path', attrs: { d: 'M18 9c1.5 9 3 10.5 12 12-9 1.5-10.5 3-12 12-1.5-9-3-10.5-12-12 9-1.5 10.5-3 12-12z', fill: '#e0a63e' } },
-  { tag: 'path', attrs: { d: 'M80 58c1 6 2 7 8 8-6 1-7 2-8 8-1-6-2-7-8-8 6-1 7-2 8-8z', fill: '#d787ad' } }
+  { tag: 'path', attrs: { d: 'M24 37c-7 3-7 8-3 10s9-1 9-5V23l12-3v15c-7 3-7 8-3 10s9-1 9-5V12l-24 6z', fill: 'var(--emoji-motion-note, #b780c8)' } },
+  { tag: 'path', attrs: { d: 'M75 67c-5 2-5 6-2 7s7-1 7-4V54l8-2v12c-5 2-5 6-2 7s7-1 7-4V46l-18 5z', fill: 'var(--emoji-motion-note-accent, #dc8f72)' } }
 ] };
 const centered = { width: '160%', height: '160%', overflow: 'visible' };
+// A four point star of radius r centered on (cx, cy) in viewBox units.
+const star = (cx, cy, r) => { const k = r / 12; const f = value => +(value * k).toFixed(2); return `M${cx} ${cy - r}c${f(1.5)} ${f(9)} ${f(3)} ${f(10.5)} ${f(12)} ${f(12)}-${f(9)} ${f(1.5)}-${f(10.5)} ${f(3)}-${f(12)} ${f(12)}-${f(1.5)}-${f(9)}-${f(3)}-${f(10.5)}-${f(12)}-${f(12)} ${f(9)}-${f(1.5)} ${f(10.5)}-${f(3)} ${f(12)}-${f(12)}z`; };
+// Sparkles burst one after another: a quick pop outwards, then a slower drift as they fade.
+const sparkleBurst = [[24, 24, 9, -7, -7, 'sparkle'], [78, 28, 6, 6, -6, 'sparkle-accent'], [82, 70, 7, 6, 5, 'sparkle'], [20, 66, 5, -6, 3, 'sparkle-accent']].map(([cx, cy, r, dx, dy, color], index) => ({
+  svg: { viewBox: '0 0 100 100', elements: [{ tag: 'path', attrs: { d: star(cx, cy, r), fill: `var(--emoji-motion-${color}, ${color === 'sparkle' ? '#e0a63e' : '#d787ad'})` } }] },
+  style: { ...centered, transformOrigin: `${cx}% ${cy}%` },
+  keyframes: [
+    { opacity: 0, transform: 'translate(-50%, -50%) scale(.3) rotate(0deg)', easing: 'cubic-bezier(.2,.8,.3,1)' },
+    { opacity: 1, transform: `translate(${-50 + dx * .4}%, ${-50 + dy * .4}%) scale(1.1) rotate(20deg)`, offset: .3, easing: 'ease-out' },
+    { opacity: 0, transform: `translate(${-50 + dx}%, ${-50 + dy}%) scale(.4) rotate(45deg)` }
+  ],
+  options: { duration: 700, delay: index * 60, easing: 'linear', fill: 'backwards' }
+}));
+// The scan line sweeps down, rests a beat at the bottom, then glides back and fades.
+const scanShape = { viewBox: '0 0 100 100', elements: [
+  { tag: 'line', attrs: { x1: '24', y1: '22', x2: '76', y2: '22', stroke: 'var(--emoji-motion-scan, #76b6a4)', 'stroke-width': '7', 'stroke-linecap': 'round', opacity: '.25' } },
+  { tag: 'line', attrs: { x1: '24', y1: '22', x2: '76', y2: '22', stroke: 'var(--emoji-motion-scan, #76b6a4)', 'stroke-width': '2.5', 'stroke-linecap': 'round' } }
+] };
 const steamShape = { viewBox: '0 0 100 100', elements: [
-  { tag: 'path', attrs: { d: 'M38 30c-5-5 5-8 0-14M50 27c-5-5 5-8 0-14M62 30c-5-5 5-8 0-14', fill: 'none', stroke: '#a29aa5', 'stroke-width': '2.5', 'stroke-linecap': 'round' } }
+  { tag: 'path', attrs: { d: 'M38 30c-5-5 5-8 0-14M50 27c-5-5 5-8 0-14M62 30c-5-5 5-8 0-14', fill: 'none', stroke: 'var(--emoji-motion-steam, #a29aa5)', 'stroke-width': '2.5', 'stroke-linecap': 'round' } }
 ] };
 // Water effects sit at the waterline below the glyph and spread symmetrically.
 // y is the waterline in viewBox units: at the body for swimmers, below the hull for boats.
-const rippleRings = y => [0, 320].map(delay => ({
-  svg: { viewBox: '0 0 100 100', elements: [{ tag: 'ellipse', attrs: { cx: '50', cy: String(y), rx: '30', ry: '6', fill: 'none', stroke: '#7cafd0', 'stroke-width': '2.5' } }] },
+const rippleRings = (y, behind = false) => [0, 320].map(delay => ({
+  behind,
+  svg: { viewBox: '0 0 100 100', elements: [{ tag: 'ellipse', attrs: { cx: '50', cy: String(y), rx: '30', ry: '6', fill: 'none', stroke: 'var(--emoji-motion-water, #7cafd0)', 'stroke-width': '2.5' } }] },
   style: { ...centered, transformOrigin: `50% ${y}%` },
   keyframes: [{ opacity: .8, transform: 'translate(-50%, -50%) scale(.5)' }, { opacity: 0, transform: 'translate(-50%, -50%) scale(1.25)' }],
   options: { duration: 1100, delay, easing: 'cubic-bezier(.25,.6,.4,1)', fill: 'backwards' }
 }));
 const splashShape = { viewBox: '0 0 100 100', elements: [
-  { tag: 'path', attrs: { d: 'M39 70l-9-8M45 67l-3-10M61 70l9-8M55 67l3-10', fill: 'none', stroke: '#7cafd0', 'stroke-width': '2.5', 'stroke-linecap': 'round' } },
-  { tag: 'circle', attrs: { cx: '25', cy: '56', r: '2.6', fill: '#7cafd0' } },
-  { tag: 'circle', attrs: { cx: '39', cy: '50', r: '2', fill: '#7cafd0' } },
-  { tag: 'circle', attrs: { cx: '75', cy: '56', r: '2.6', fill: '#7cafd0' } },
-  { tag: 'circle', attrs: { cx: '61', cy: '50', r: '2', fill: '#7cafd0' } }
+  { tag: 'path', attrs: { d: 'M39 70l-9-8M45 67l-3-10M61 70l9-8M55 67l3-10', fill: 'none', stroke: 'var(--emoji-motion-water, #7cafd0)', 'stroke-width': '2.5', 'stroke-linecap': 'round' } },
+  { tag: 'circle', attrs: { cx: '25', cy: '56', r: '2.6', fill: 'var(--emoji-motion-water, #7cafd0)' } },
+  { tag: 'circle', attrs: { cx: '39', cy: '50', r: '2', fill: 'var(--emoji-motion-water, #7cafd0)' } },
+  { tag: 'circle', attrs: { cx: '75', cy: '56', r: '2.6', fill: 'var(--emoji-motion-water, #7cafd0)' } },
+  { tag: 'circle', attrs: { cx: '61', cy: '50', r: '2', fill: 'var(--emoji-motion-water, #7cafd0)' } }
 ] };
 const rainShape = { viewBox: '0 0 100 100', elements: [
-  { tag: 'path', attrs: { d: 'M30 67v6M50 72v6M70 67v6', fill: 'none', stroke: '#7c9fca', 'stroke-width': '3', 'stroke-linecap': 'round' } }
+  { tag: 'path', attrs: { d: 'M30 67v6M50 72v6M70 67v6', fill: 'none', stroke: 'var(--emoji-motion-water, #7c9fca)', 'stroke-width': '3', 'stroke-linecap': 'round' } }
 ] };
 // Symmetric rays sit around the glyph rather than assuming a bulb, lens or flame position.
 const lightShape = color => ({ viewBox: '0 0 100 100', elements: [
@@ -271,30 +366,31 @@ const lightShape = color => ({ viewBox: '0 0 100 100', elements: [
 ] });
 export const decorations = {
   bubbles: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: { viewBox: '0 0 100 100', elements: [
-    { tag: 'circle', attrs: { cx: '21', cy: '46', r: '3', fill: 'none', stroke: '#7cafd0', 'stroke-width': '2' } },
-    { tag: 'circle', attrs: { cx: '76', cy: '38', r: '4', fill: 'none', stroke: '#7cafd0', 'stroke-width': '2' } },
-    { tag: 'circle', attrs: { cx: '80', cy: '60', r: '2', fill: 'none', stroke: '#7cafd0', 'stroke-width': '2' } }
+    { tag: 'circle', attrs: { cx: '21', cy: '46', r: '3', fill: 'none', stroke: 'var(--emoji-motion-water, #7cafd0)', 'stroke-width': '2' } },
+    { tag: 'circle', attrs: { cx: '76', cy: '38', r: '4', fill: 'none', stroke: 'var(--emoji-motion-water, #7cafd0)', 'stroke-width': '2' } },
+    { tag: 'circle', attrs: { cx: '80', cy: '60', r: '2', fill: 'none', stroke: 'var(--emoji-motion-water, #7cafd0)', 'stroke-width': '2' } }
   ] }, style: centered, keyframes: [{ opacity: 0, transform: 'translate(-50%, -43%)' }, { opacity: .85, transform: 'translate(-50%, -50%)', offset: .35 }, { opacity: 0, transform: 'translate(-50%, -64%)' }], options: { duration: 1100, easing: curve } }] },
-  alertLight: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: lightShape('#df625e'), style: centered,
+  alertLight: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: lightShape('var(--emoji-motion-alert, #df625e)'), style: centered,
     keyframes: [{ opacity: 0, transform: 'translate(-50%, -50%) scale(.85)' }, { opacity: .9, transform: 'translate(-50%, -50%) scale(1)', offset: .3 }, { opacity: 0, transform: 'translate(-50%, -50%) scale(1.12)' }],
     options: { duration: 900, easing: 'cubic-bezier(.22,1,.36,1)' }
   }] },
-  glow: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: lightShape('#e0a63e'), style: centered,
+  glow: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: lightShape('var(--emoji-motion-glow, #e0a63e)'), style: centered,
     keyframes: [{ opacity: 0, transform: 'translate(-50%, -50%) scale(.85)' }, { opacity: .9, transform: 'translate(-50%, -50%) scale(1)', offset: .35 }, { opacity: 0, transform: 'translate(-50%, -50%) scale(1.08)' }],
     options: { duration: 850, easing: 'cubic-bezier(.22,1,.36,1)' }
   }] },
-  flicker: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: lightShape('#df985c'), style: centered,
+  flicker: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: lightShape('var(--emoji-motion-flame, #df985c)'), style: centered,
     keyframes: [{ opacity: 0, transform: 'translate(-50%, -50%) scale(.9)' }, { opacity: .7, transform: 'translate(-50%, -50%) scale(1)', offset: .3 }, { opacity: .3, transform: 'translate(-50%, -50%) scale(.95)', offset: .5 }, { opacity: .75, transform: 'translate(-50%, -50%) scale(1.03)', offset: .7 }, { opacity: 0, transform: 'translate(-50%, -50%) scale(1)' }],
     options: { duration: 1100, easing: 'cubic-bezier(.22,1,.36,1)' }
   }] },
-  flash: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: lightShape('#a5b7df'), style: centered,
+  flash: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: lightShape('var(--emoji-motion-flash, #a5b7df)'), style: centered,
     keyframes: [{ opacity: 0, transform: 'translate(-50%, -50%) scale(.75)' }, { opacity: 1, transform: 'translate(-50%, -50%) scale(1)', offset: .18 }, { opacity: 0, transform: 'translate(-50%, -50%) scale(1.2)', offset: .52 }, { opacity: 0, transform: 'translate(-50%, -50%) scale(1.2)' }],
     options: { duration: 800, easing: 'cubic-bezier(.22,1,.36,1)' }
   }] },
-  impact: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: { viewBox: '0 0 100 100', elements: [{ tag: 'path', attrs: { d: 'M28 75l-5 4M72 75l5 4M50 79v6', fill: 'none', stroke: '#d49b70', 'stroke-width': '3', 'stroke-linecap': 'round' } }] }, style: centered,
-    keyframes: [{ opacity: 0, transform: 'translate(-50%, -50%) scale(.8)' }, { opacity: 0, transform: 'translate(-50%, -50%) scale(.8)', offset: .45 }, { opacity: .85, transform: 'translate(-50%, -50%) scale(1)', offset: .65 }, { opacity: 0, transform: 'translate(-50%, -50%) scale(1.1)' }], options: { duration: 900, easing: 'cubic-bezier(.22,1,.36,1)' }
+  impact: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: { viewBox: '0 0 100 100', elements: [{ tag: 'path', attrs: { d: 'M28 75l-5 4M72 75l5 4M50 79v6', fill: 'none', stroke: 'var(--emoji-motion-impact, #d49b70)', 'stroke-width': '3', 'stroke-linecap': 'round' } }] }, style: centered,
+    // A linear timeline keeps the burst on the landing frame instead of drifting early.
+    keyframes: [{ opacity: 0, transform: 'translate(-50%, -50%) scale(.8)' }, { opacity: 0, transform: 'translate(-50%, -50%) scale(.8)', offset: .54, easing: 'ease-out' }, { opacity: .9, transform: 'translate(-50%, -50%) scale(1)', offset: .62, easing: settle }, { opacity: 0, transform: 'translate(-50%, -50%) scale(1.12)' }], options: { duration: 900, easing: 'linear' }
   }] },
-  petals: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: { viewBox: '0 0 100 100', elements: [{ tag: 'ellipse', attrs: { cx: '24', cy: '33', rx: '3', ry: '5', fill: '#d89cb9' } }, { tag: 'ellipse', attrs: { cx: '76', cy: '38', rx: '3', ry: '5', fill: '#d89cb9' } }] }, style: centered,
+  petals: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: { viewBox: '0 0 100 100', elements: [{ tag: 'ellipse', attrs: { cx: '24', cy: '33', rx: '3', ry: '5', fill: 'var(--emoji-motion-petal, #d89cb9)' } }, { tag: 'ellipse', attrs: { cx: '76', cy: '38', rx: '3', ry: '5', fill: 'var(--emoji-motion-petal, #d89cb9)' } }] }, style: centered,
     keyframes: [{ opacity: 0, transform: 'translate(-50%, -58%) rotate(-8deg)' }, { opacity: .8, transform: 'translate(-50%, -50%) rotate(0deg)', offset: .35 }, { opacity: 0, transform: 'translate(-50%, -35%) rotate(8deg)' }], options: { duration: 1200, easing: 'cubic-bezier(.22,1,.36,1)' }
   }] },
   steam: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: steamShape, style: centered,
@@ -306,7 +402,8 @@ export const decorations = {
     options: { duration: 950, easing: 'cubic-bezier(.22,1,.36,1)' }
   }] },
   ripple: { anchor: { x: '50%', y: '50%' }, layers: rippleRings(66) },
-  wake: { anchor: { x: '50%', y: '50%' }, layers: rippleRings(75) },
+  // The hull hides the far side of its wake.
+  wake: { anchor: { x: '50%', y: '50%' }, layers: rippleRings(75, true) },
   splash: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: splashShape, style: { ...centered, transformOrigin: '50% 70%' },
     keyframes: [{ opacity: 0, transform: 'translate(-50%, -50%) scale(.55)' }, { opacity: .9, transform: 'translate(-50%, -50%) scale(1)', offset: .35 }, { opacity: 0, transform: 'translate(-50%, -54%) scale(1.15)' }],
     options: { duration: 850, easing: curve }
@@ -326,11 +423,15 @@ export const decorations = {
       options: { duration: 900, easing: 'cubic-bezier(.22,1,.36,1)' }
     }]
   },
-  sparkle: {
-    anchor: { x: '50%', y: '50%' },
-    layers: [{ svg: sparkleShape, style: centered,
-      keyframes: [{ opacity: 0, transform: 'translate(-50%, -50%) scale(.6) rotate(-15deg)' }, { opacity: 1, transform: 'translate(-50%, -50%) scale(1)', offset: .42 }, { opacity: 0, transform: 'translate(-50%, -50%) scale(1.2) rotate(10deg)' }],
-      options: { duration: 850, easing: 'cubic-bezier(.22,1,.36,1)' }
-    }]
-  }
+  sparkle: { anchor: { x: '50%', y: '50%' }, layers: sparkleBurst },
+  scan: { anchor: { x: '50%', y: '50%' }, layers: [{ svg: scanShape, style: centered,
+    keyframes: [
+      { opacity: 0, transform: 'translate(-50%, -50%)', easing: 'ease-out' },
+      { opacity: 1, transform: 'translate(-50%, -48%)', offset: .1, easing: 'ease-in-out' },
+      { opacity: 1, transform: 'translate(-50%, -14%)', offset: .5, easing: 'linear' },
+      { opacity: 1, transform: 'translate(-50%, -14%)', offset: .62, easing: 'ease-in-out' },
+      { opacity: 0, transform: 'translate(-50%, -40%)' }
+    ],
+    options: { duration: 900, easing: 'linear' }
+  }] }
 };

package/src/react-core.js

@@ -14,7 +14,7 @@ export function createEmojiMotionComponent(emojiMotion) {
     return registry.bind(glyph.current, emoji, { trigger: triggerRef?.current ?? wrapper.current, events, skinTone, ...(decoration ? { decoration: { container: visual.current } } : {}) });
   }, [registry, emoji, skinTone, decoration, events, triggerRef]);
   return createElement('span', { ...attributes, className, ref: wrapper, 'data-emoji-motion': 'component', role: 'img', 'aria-label': label ?? result?.name ?? emoji, tabIndex: attributes.tabIndex ?? (triggerRef ? -1 : 0), style },
-    createElement('span', { ref: visual, style: { display: 'inline-block', position: 'relative' } },
+    createElement('span', { ref: visual, style: { display: 'inline-block', position: 'relative', isolation: 'isolate' } },
       createElement('span', { ref: glyph, 'aria-hidden': 'true', style: { display: 'inline-block' } }, result?.glyph ?? emoji)));
 }
 }

package/src/registry.js

@@ -159,11 +159,17 @@ export function createRegistry(config = {}, classifier) {
           node.setAttribute('viewBox', layer.svg.viewBox);
           for (const shape of layer.svg.elements) {
             const child = container.ownerDocument.createElementNS('http://www.w3.org/2000/svg', shape.tag);
-            for (const [key, value] of Object.entries(shape.attrs)) child.setAttribute(key, value);
+            for (const [key, value] of Object.entries(shape.attrs)) {
+              // Presentation attributes cannot read custom properties, so a themed
+              // color goes through style and keeps its fallback as the attribute.
+              const themed = typeof value === 'string' && value.match(/^var\(\s*--[\w-]+\s*,\s*(.+)\)$/);
+              child.setAttribute(key, themed ? themed[1].trim() : value);
+              if (themed) child.style[key] = value;
+            }
             node.appendChild(child);
           }
         }
-        Object.assign(node.style, { position: 'absolute', left: '0', top: '0', opacity: '0', ...layer.style });
+        Object.assign(node.style, { position: 'absolute', left: '0', top: '0', opacity: '0', ...(layer.behind ? { zIndex: '-1' } : {}), ...layer.style });
         decorationRoot.appendChild(node);
         decorationAnimations.push(node.animate(layer.keyframes, layer.options));
       }
@@ -176,7 +182,21 @@ export function createRegistry(config = {}, classifier) {
   function bind(element, glyph, options = {}) {
     const trigger = options.trigger ?? element;
     const events = options.events ?? ['pointerenter', 'focus'];
-    const handler = () => play(element, glyph, options);
+    const cooldown = options.cooldown ?? 260;
+    let lastStart = -Infinity;
+    const handler = event => {
+      // A tap fires pointerenter and click together; let the click play it once.
+      if (event?.type === 'pointerenter' && event.pointerType === 'touch') return;
+      // A mouse click also focuses the trigger; only keyboard focus replays.
+      if ((event?.type === 'focus' || event?.type === 'focusin') && typeof event.target?.matches === 'function') {
+        try { if (!event.target.matches(':focus-visible')) return; } catch { /* Older engines without :focus-visible. */ }
+      }
+      // Quick repeated triggers would restart the motion before it reads.
+      const now = globalThis.performance?.now?.() ?? Date.now();
+      if (now - lastStart < cooldown) return;
+      lastStart = now;
+      play(element, glyph, options);
+    };
     for (const event of events) trigger.addEventListener(event, handler);
     return () => { for (const event of events) trigger.removeEventListener(event, handler); active.get(element)?.dispose(); active.delete(element); };
   }

package/src/vue-core.js

@@ -22,7 +22,7 @@ export function createEmojiMotionComponent(emojiMotion) {
     return () => {
       const result = props.registry.resolve(props.emoji, { skinTone: props.skinTone });
       return h('span', { ...attrs, ref: wrapper, 'data-emoji-motion': 'component', role: 'img', 'aria-label': props.label ?? result?.name ?? props.emoji, tabindex: attrs.tabindex ?? (props.trigger ? -1 : 0) },
-        h('span', { ref: visual, style: { display: 'inline-block', position: 'relative' } },
+        h('span', { ref: visual, style: { display: 'inline-block', position: 'relative', isolation: 'isolate' } },
           h('span', { ref: glyph, 'aria-hidden': 'true', style: { display: 'inline-block' } }, result?.glyph ?? props.emoji)));
     };
   }