Gọi là có kỹ thuật
“Alo” là tiếng gọi quen nhất của người Việt khi nhấc máy - gần gũi, sẵn sàng kết nối. “dev” là đội kỹ sư đứng sau. Alodev gói lại một lời hứa đơn giản: cần là có người làm thật, không qua trung gian.
Studio Lab · Behind the scenes
Animation vẽ logo ở trang chủ không dùng library nào: đây là canvas 2D thuần với field thời gian per-pixel do chúng tôi tự thiết kế. Trang này chạy đúng code production, thêm điều khiển để bạn xem nó hoạt động thế nào.
Monogram “ad” viết tắt Alodev. Nhưng cách nó được dựng mới là phần kể chuyện: toàn bộ là một nét liền, hai vòng khoá vào nhau thành hình số 8 nằm ngang. Đây là những gì hình khối đó mang theo.
“Alo” là tiếng gọi quen nhất của người Việt khi nhấc máy - gần gũi, sẵn sàng kết nối. “dev” là đội kỹ sư đứng sau. Alodev gói lại một lời hứa đơn giản: cần là có người làm thật, không qua trung gian.
Cả logo vẽ ra bằng đúng một nét, không nhấc bút giữa chừng. Đó cũng là cách chúng tôi làm việc: nhận việc là đi cùng tới khi hệ thống chạy thật, không dừng ở bản demo rồi buông.
Hai vòng của chữ “a” và “d” khoá vào nhau thành hình số 8 nằm ngang - biểu tượng vô cực. Nghiên cứu, làm sản phẩm, đưa vào vận hành rồi cải tiến, lặp lại không ngừng; và cũng là Alodev với doanh nghiệp gắn kết, đồng hành dài lâu.
Vì thế animation ở trang chủ vẽ logo bằng đúng một nét theo chiều đó - không phải hiệu ứng trang trí, mà là chính câu chuyện được kể lại mỗi lần bạn mở web. Phần dưới đây là cách chúng tôi làm cho nét vẽ ấy sạch tuyệt đối.
Path SVG của monogram được fill lên canvas ẩn rồi đọc lại bằng getImageData. Kết quả: lưới alpha per-pixel - biết chính xác pixel nào thuộc logo, kể cả viền anti-alias.
Đường GUIDE là quỹ đạo bút theo đúng chiều thiết kế: đuôi chữ a, vòng trái thuận chiều kim đồng hồ, cross sang vòng phải ngược chiều, lên thân chữ d. Lấy mẫu N điểm bằng getPointAtLength.
Mỗi pixel nhận đúng MỘT thời điểm hiện: lúc đầu bút (bán kính R) quét qua nó lần đầu. Pixel nằm ngoài tầm bút lấy thời điểm bút tới gần nhất, cộng thêm trễ chảy mực theo khoảng cách.
BFS lan theo bề mặt logo từ điểm đặt bút để thống nhất vùng junction mở đầu, rồi nhiều pass smoothing có ngưỡng làm mặt sóng liền mạch - không răng cưa, không mảng nhảy cóc.
Mỗi frame chỉ so sánh front (0 đến 1, cosine ease) với thời điểm của từng pixel. Pixel hiện đúng một lần, không bao giờ vẽ đè hay vá - đó là lý do nét sạch tuyệt đối.
Bước 03-04 là O(W x H x N), khoảng 100 triệu phép tính. Toàn bộ chạy trong Web Worker (Blob, transferable buffers) nên main thread không khựng một frame nào lúc tải trang.
Cách phổ biến để "vẽ" logo là animate stroke-dashoffset trên path SVG. Chúng tôi đã thử trước: với monogram hai vòng tròn chồng nhau, mọi biến thể stroke đều lộ nhược điểm - nét brush lộ hình dạng đầu bút, brush rộng thì lem sang vòng kế bên ở phần eo, clip theo từng vòng thì cắt mất phần fill chung. Field thời gian per-pixel giải quyết tận gốc: mỗi pixel hiện đúng một lần theo thứ tự bút đi, biên giữa hai vòng sắc nét tuyệt đối vì không có "nét" nào được vẽ đè.
Đánh đổi là chi phí tính toán O(W x H x N). Xử lý: hạ độ phân giải lưới về mức mắt không phân biệt được trên màn retina, và đẩy toàn bộ vào Web Worker với transferable buffers - main thread chỉ nhận kết quả và animate, không khựng frame nào.
Đây là mức độ kỹ càng chúng tôi dành cho một chi tiết 1.5 giây.
Cần bản riêng cho doanh nghiệp bạn?
Mọi công cụ trong Lab đều do đội ngũ Alodev tự xây. Chúng tôi có thể xây phiên bản riêng - gắn thương hiệu, nối dữ liệu nội bộ, thêm tính năng theo quy trình của bạn.
Chọn nhu cầu và để lại số - không ràng buộc.