Lottie Bắt tay: nước da ngả tối 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/1f91d_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

Bắt tay: nước da ngả tối

Emoji con người & cơ thể: Bắt tay: nước da ngả tối.

Emoji động Bắt tay: nước da ngả tối 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+1F91D U+1F3FE.

Lottie mang đúng nghĩa của 🤝🏾: Emoji con người & cơ thể: Bắt tay: nước da ngả tối. Animation chỉ làm khoảnh khắc đó "đậm" hơn.

Bắt tay: nước da ngả tối động hợp dùng ở đâu

Landing page / điểm nhấn tính năng — thay SVG tĩnh bằng animation Bắt tay: nước da ngả tối để 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 Bắt tay: nước da ngả tối 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/1f91d_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/1f91d_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-medium-dark-skin-tone-1f91d-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-medium-dark-skin-tone-1f91d-1f3fe"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f91d_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 HandshakeMediumDarkSkinTone1f91d1f3fe() {
  const [data, setData] = useState<unknown>(null);
  useEffect(() => {
    fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/1f91d_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 Bắt tay: nước da ngả tối 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/1f91d_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/1f91d_1f3fe/lottie.json
Codepoints: U+1F91D 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