Lottie Ếch 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/1f438/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

Fluent 3D

Unicode gốc

Ếch

Ếch — emoji động vật & thiên nhiên.

Ếch (🐸) là phiên bản hoạt hình của emoji 🐸 do Google Noto vẽ tay dưới dạng Lottie. File lặp ở 60fps trên canvas 1024×1024, nặng khoảng 60–90 KB — đủ nhẹ để dùng ở mọi vị trí thay cho PNG tĩnh.

Motion làm Ếch "nặng ký" hơn ký tự tĩnh. Dùng phiên bản động khi message cần thêm một nhịp — landing page, onboarding, sticker phản ứng, hiệu ứng mừng trong app.

Ếch động hợp dùng ở đâu

Landing page / điểm nhấn tính năng — thay SVG tĩnh bằng animation Ếch để 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 Ếch 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/1f438/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/1f438/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-frog-1f438" 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-frog-1f438"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f438/lottie.json"
  });
</script>

React + lottie-react

Component TypeScript. Fetch JSON khi mount.

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

export function Frog1f438() {
  const [data, setData] = useState<unknown>(null);
  useEffect(() => {
    fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/1f438/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 Ếch 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/1f438/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/1f438/lottie.json
Codepoints: U+1F438
Đị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.