blobmascot

Maskot blob interaktif untuk aplikasi React. Bentuk, ekspresi, dan arah pandang diperbarui live di canvas.

Tanpa sprite, tanpa file Lottie, tanpa asset pipeline. Bentuk, ekspresi, motion, dan gaze adalah sumbu independen yang diinterpolasi di canvas.

Demo langsung: naandalist.github.io/blobmascot

Fitur

• Langsung pakai <BlobMascot /> plus controller
• 12 bentuk yang bisa morph (circle, pebble, squircle, capsule, triangle, cloud, droplet, flame, medal, acorn, jellyfish, clover)
• 12 ekspresi yang membentuk ulang mata
• 13 state motion (idle/thinking berulang; wink, alert, burst, dan lainnya sebagai one-shot)
• Gaze mengikuti pointer secara default, atau kendalikan yaw / pitch sendiri
• Poke lewat klik, atau panggil controller.poke()
• Ekspor still sebagai PNG atau WebP
• Tipe TypeScript untuk setiap nilai publik

Instalasi

npm install blobmascot

Peer dependency: react dan react-dom 18 atau lebih baru.

Penggunaan

import { BlobMascot, useBlobMascot } from "blobmascot";

export function App() {
  const mascot = useBlobMascot({
    shape: "droplet",
    expression: "curious",
    state: "idle",
    color: "#111111",
  });

  return <BlobMascot controller={mascot} size={240} />;
}

Reaksi

mascot.setExpression("surprised");
mascot.setState("alert");

mascot.setExpression("happy");
mascot.setState("idle");

Morph

mascot.setShape("clover");
mascot.setExpression("proud");
mascot.setColor("#4B8FEA");

Gaze

followCursor aktif secara default. Matikan jika ingin mengarahkan gaze sendiri:

<BlobMascot controller={mascot} size={240} followCursor={false} />

mascot.lookAt({ yaw: 20, pitch: -8 });
mascot.resetGaze();

Lisensi

MIT

Untuk detail lebih lanjut, kunjungi repositori GitHub.