Bạn mở repo lên, thấy ngay một con cá mập hammerhead vẽ bằng dấu chấm phẩy, dấu phần trăm với ký tự @ trên nền đen. Đó là toàn bộ ý tưởng của ascii-sharks: dựng cá và cá mập từ ký tự ASCII, render lên HTML canvas, đóng gói thành component TypeScript. Không phải hiệu ứng 3D, không phải shader, chỉ là nghệ thuật ký tự chạy trong trình duyệt.
Tác giả là stackedlol, repo tạo ngày 19/10/2026, hiện có 564 sao. Ngôn ngữ chính TypeScript. Không thấy LICENSE trong phần thông tin repo, điểm này tính sau.
Nó làm gì, cụ thể
Repo cung cấp một bộ component TypeScript để vẽ cá mập ASCII trên canvas. README mô tả ngắn gọn: “Fish and sharks drawn as ASCII on a canvas. Zero dependencies.” Tức là engine tự xử lý việc vẽ ký tự, không kéo theo thư viện đồ họa nào, không có runtime dependency.
API chính là OceanEngine. Bạn truyền vào canvas và một mảng cấu hình, mỗi phần tử khai báo loại cá mập (kind) và kích thước (size). Đoạn ví dụ trong README chỉ có vậy:
import { OceanEngine } from "./src";
const engine = new OceanEngine(canvas, [{ kind: "hammerhead", size: 1 }]);
Vậy là đủ để hình dung. Engine nhận danh sách cá mập, mỗi con có loại riêng (hammerhead là loại được nhắc trong README) và scale theo size. Phần còn lại (vẽ, cập nhật khung hình, đặt vị trí) nằm trong engine. Mục đích rõ ràng: làm chi tiết trang trí, easter egg, hoặc nền động cho website mà không cần asset ảnh, không cần font icon, không cần file SVG nặng.
Vì sao 564 sao
Con số 564 không phải bom tấn, nhưng với một repo mới tạo trong ngày và chỉ có vài dòng hướng dẫn, đó là tín hiệu tốt. Cái thu hút người ta ở đây là tính thẩm mỹ của terminal: ASCII art có sức hút riêng với dân dev, kiểu nostalgia của BBS và man page. Một con cá mập bơi qua canvas bằng ký tự text đánh trúng gu đó.
Điểm khác biệt so với đa số thư viện hoạt hình trên web: zero dependencies. Không dùng PixiJS, không dùng Three.js, không canvas wrapper nào. Với người đang cố giữ bundle size nhỏ, đây là lựa chọn nhẹ nhất có thể. Thêm nữa, viết bằng TypeScript nên có type ngay từ đầu, không phải cài thêm @types.
Cũng phải nói thẳng: repo mới, chưa có topics, chưa có release, tài liệu ngoài README gần như bằng không. Cơn sốt sao kiểu này thường đến từ một post trên mạng xã hội hơn là từ độ chín của code. Đừng nhầm số sao với độ ổn định.
Cài và chạy thử
README chỉ đưa lệnh dev, không có hướng dẫn cài như package npm:
npm install && npm run dev
Clone repo về, chạy lệnh trên, mở trình duyệt xem demo. Sau đó import engine theo đúng code mẫu ở trên. Lưu ý đường dẫn "./src" là import nội bộ trong repo, nên nếu bạn muốn dùng trong project riêng thì phải copy source hoặc trỏ đúng đường dẫn sau khi build. Chưa thấy tên package trên npm trong README, nên đừng kỳ vọng một dòng npm install ascii-sharks là chạy được.
Dùng vào việc gì, ai nên dùng
- Trang portfolio cá nhân: một dải cá mập ASCII bơi ngang header, nhẹ hơn ảnh GIF và không cần asset.
- Trang lỗi 404 hoặc trang chờ: cá mập bơi trong lúc chờ load, đúng tinh thần dev.
- Terminal-themed dashboard nội bộ: hợp với giao diện monospace, giữ được cảm giác CLI.
- Demo, slide, buổi talk: hiệu ứng nhỏ gây chú ý mà không cần setup đồ họa.
Ai không nên dùng: người cần animation phức tạp, vật lý nước, va chạm, hay hàng trăm thực thể cùng lúc. Đây là component trang trí, không phải game engine. Cũng không phù hợp nếu bạn cần accessibility nghiêm ngặt, vì nội dung canvas gần như vô hình với screen reader trừ khi bạn tự thêm mô tả.
So sánh nhanh
Với nhu cầu vẽ ASCII art trên web, có những hướng khác như dùng thẻ <pre> tĩnh (đơn giản nhất, không animation), hoặc các thư viện ASCII art generator sinh text từ ảnh (khác mục đích: chuyển ảnh sang ký tự, không phải vẽ sinh vật chuyển động). ascii-sharks nằm giữa: có chuyển động, có engine, nhưng phạm vi hẹp. Nếu bạn đã dùng PixiJS hay Three.js cho việc khác thì thêm một engine nhỏ thế này là thừa, tự viết vài chục dòng là xong. Còn nếu project chỉ cần đúng hiệu ứng này, dùng luôn tiện hơn.
Ưu điểm và những chỗ cần cân nhắc
Ưu điểm: zero dependencies, TypeScript, API gọn (một class, một mảng cấu hình), phù hợp làm hiệu ứng nhẹ, không cần asset. Đọc code dễ vì engine tự viết chứ không wrap thư viện lớn.
Hạn chế: không rõ license. Đây là điểm chặn thật sự nếu bạn định dùng trong sản phẩm thương mại, vì không có LICENSE nghĩa là mặc định giữ toàn bộ bản quyền, muốn dùng phải hỏi tác giả. Tài liệu chỉ có README vài dòng, không nêu danh sách kind hỗ trợ ngoài hammerhead, không nói cách thêm loại cá mập mới, không nói engine có animation loop hay cần tự gọi update. Độ trưởng thành thấp: tạo và cập nhật cùng một ngày, chưa có test, chưa có release. Cũng chưa rõ hiệu năng khi size lớn hoặc nhiều cá mập cùng lúc, vì canvas vẽ từng ký tự có thể tốn CPU nếu không cẩn thận.
Nếu bạn định đưa vào production, việc cần làm trước tiên là mở issue hỏi license và đọc source để hiểu vòng đời engine. Với project cá nhân hay demo, cứ clone về nghịch trước đã.
Kết luận thực dụng
ascii-sharks là món đồ chơi đẹp, gọn, đúng tinh thần dev: 564 sao trong ngày đầu, zero dependencies, một class TypeScript là chạy. Nó không giải quyết bài toán lớn nào, nhưng làm tốt đúng một việc là vẽ cá mập ASCII trên canvas. Cân nhắc kỹ chuyện license trước khi đem vào sản phẩm thương mại, còn lại thì cứ thử: stackedlol/ascii-sharks.
