Lottie handshake: light skin tone, medium-dark skin tone: nước da sáng có dùng thương mại miễn phí không?

Có. Google Noto Emoji Animation phát hành theo giấy phép Apache 2.0. Bạn dùng / chỉnh sửa / phân phối được trong dự án cá nhân lẫn thương mại — chỉ cần giữ thông tin attribution và license khi đóng gói source.

Animation đến từ đâu chính xác?

File phục vụ thẳng từ CDN Google tại https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fb_200d_1faf2_1f3fe/lottie.json. Site này không mirror cũng không chỉnh sửa — trình duyệt fetch trực tiếp từ fonts.gstatic.com. Khi Google cập nhật animation, site bạn nhận bản mới tự động.

Có dùng được Lottie này mà không qua lottie-web không?

Có. Bất kỳ renderer tương thích Bodymovin đều chạy được: lottie-web, lottie-react, Lottie iOS/Android, Skottie, dotLottie. Format là Lottie JSON v5.8.1 thuần — không khóa vendor.

DBEmoji

Noto Lottie

Unicode gốc

handshake: light skin tone, medium-dark skin tone: nước da sáng

Emoji con người & cơ thể: Handshake: light skin tone, medium-dark skin tone: nước da sáng.

Emoji động handshake: light skin tone, medium-dark skin tone: nước da sáng thuộc bộ Google Noto Emoji Animation: định dạng vector Lottie nên zoom thoải mái không vỡ, kích thước dưới 100 KB. Codepoint Unicode tương ứng là U+1FAF1 U+1F3FB U+200D U+1FAF2 U+1F3FE.

Lottie mang đúng nghĩa của 🫱🏻‍🫲🏾: Emoji con người & cơ thể: Handshake: light skin tone, medium-dark skin tone: nước da sáng. Animation chỉ làm khoảnh khắc đó "đậm" hơn.

handshake: light skin tone, medium-dark skin tone: nước da sáng động hợp dùng ở đâu

Landing page / điểm nhấn tính năng — thay SVG tĩnh bằng animation handshake: light skin tone, medium-dark skin tone: nước da sáng để có motion mà không cần video.
Empty / success / error state — ghép animation với câu kiểu "Xong rồi!" hoặc "Chưa có gì ở đây" để trang không bao giờ cảm thấy chết.
Reaction / sticker chat — render Lottie 64–128 px trong messaging UI, nhẹ hơn GIF và nét hơn ở mọi DPR.
Onboarding / tooltip — dùng loop làm focal point khi giải thích tính năng; loop ~1.2 s khớp với nhịp chú ý điển hình.
Bài marketing / social card — nhúng trong blog, changelog, post sản phẩm khi emoji tĩnh quá nhạt.

Nhúng handshake: light skin tone, medium-dark skin tone: nước da sáng vào dự án của bạn

Chọn snippet phù hợp stack. Mọi snippet đều trỏ vào cùng file Lottie JSON trên CDN của Google — không cần tự host asset.

Lottie JSON URL

URL gốc. Đưa vào renderer Lottie bất kỳ.

https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fb_200d_1faf2_1f3fe/lottie.json

<lottie-player> web component

HTML thuần, không cần build. Chạy trên mọi trình duyệt hiện đại.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player
  src="https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fb_200d_1faf2_1f3fe/lottie.json"
  background="transparent"
  speed="1"
  style="width: 160px; height: 160px"
  loop
  autoplay>
</lottie-player>

HTML + lottie-web (CDN)

Gọi loadAnimation() thủ công. Toàn quyền với loop, tốc độ, segment.

<div id="lottie-handshake-light-skin-tone-medium-dark-skin-tone-1faf1-1f3fb-200d-1faf2-1f3fe" style="width:160px;height:160px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById("lottie-handshake-light-skin-tone-medium-dark-skin-tone-1faf1-1f3fb-200d-1faf2-1f3fe"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fb_200d_1faf2_1f3fe/lottie.json"
  });
</script>

React + lottie-react

Component TypeScript. Fetch JSON khi mount.

import Lottie from "lottie-react";
import { useEffect, useState } from "react";

export function HandshakeLightSkinToneMediumDarkSkinTone1faf11f3fb200d1faf21f3fe() {
  const [data, setData] = useState<unknown>(null);
  useEffect(() => {
    fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fb_200d_1faf2_1f3fe/lottie.json").then((r) => r.json()).then(setData);
  }, []);
  if (!data) return null;
  return (
    <Lottie
      animationData={data}
      loop
      autoplay
      style={{ width: 160, height: 160 }}
    />
  );
}

Best practice

Render ở DPR 1× hoặc 2× — gốc 1024 px nên kích thước tới 256 px luôn sắc nét.
Lazy-load phần dưới fold. lottie-web đã ~50 KB gzip, defer instantiation tới khi player vào viewport.
Tôn trọng prefers-reduced-motion. Tắt autoplay và fallback về ký tự Unicode 🫱🏻‍🫲🏾 hoặc PNG tĩnh.
Cache JSON trên CDN của bạn. Bản gstatic của Google đã ở edge toàn cầu nhưng same-origin proxy giúp giữ kết nối.
Đừng sửa file Lottie. Google cập nhật bản canon định kỳ — overlay/filter màu thay vì chỉnh source.

FAQ emoji động

Lottie handshake: light skin tone, medium-dark skin tone: nước da sáng có dùng thương mại miễn phí không?: Có. Google Noto Emoji Animation phát hành theo giấy phép Apache 2.0. Bạn dùng / chỉnh sửa / phân phối được trong dự án cá nhân lẫn thương mại — chỉ cần giữ thông tin attribution và license khi đóng gói source.
Animation đến từ đâu chính xác?: File phục vụ thẳng từ CDN Google tại https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fb_200d_1faf2_1f3fe/lottie.json. Site này không mirror cũng không chỉnh sửa — trình duyệt fetch trực tiếp từ fonts.gstatic.com. Khi Google cập nhật animation, site bạn nhận bản mới tự động.
Có dùng được Lottie này mà không qua lottie-web không?: Có. Bất kỳ renderer tương thích Bodymovin đều chạy được: lottie-web, lottie-react, Lottie iOS/Android, Skottie, dotLottie. Format là Lottie JSON v5.8.1 thuần — không khóa vendor.

Nguồn asset

Lottie URL: https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fb_200d_1faf2_1f3fe/lottie.json
Codepoints: U+1FAF1 U+1F3FB U+200D U+1FAF2 U+1F3FE
Định dạng: Bodymovin Lottie · 60fps · 1024×1024
Giấy phép: Apache 2.0 · Google Noto

Nguồn animation: Google Noto Emoji Animation (Apache License 2.0). Host bởi Google trên fonts.gstatic.com.

Hai ngón tay bắt chéo

Cử chỉ yêu nhau