Câu chuyện và ghi chép từ quá trình xây dựng FleaWinder — một rạp xiếc hoạt hình nhỏ xíu vận hành bằng bàn phím và chuột của bạn.
Mang rạp xiếc đến màn hình nhỏ
FleaWinder được thiết kế cho một dải rộng và mỏng phía trên thanh tác vụ — thoải mái ở chế độ ngang. Điện thoại thì ở chế độ dọc. Làm cho rạp xiếc hoạt động trên màn hình nhỏ có nghĩa là phải suy nghĩ lại bố cục mà không mất đi điều làm cho nó sống động.
The embeddable widget flips to a tall canvas on mobile, stacking the acts vertically instead of spreading them across a ribbon. Anyone dropping FleaWinder into their own site gets a layout that adapts automatically. Four theme presets (dark, light, warm, cool) and a scale parameter let it blend with whatever surrounds it.
Thách thức lớn hơn là tính dễ đọc. Trên màn hình điện thoại, bọ chét vẽ ở tỷ lệ máy tính chỉ là những chấm nhỏ. Chúng tôi đã thêm một bước phóng to phóng đại thân bọ chét để trang phục, biểu cảm và phụ kiện thực sự hiện rõ — băng đô của Pip, mũ bảo hiểm của Rex, vương miện nhỏ xíu của Blaze. Những chi tiết cá tính vốn luôn ở đó bỗng nhiên đọc được ở khoảng cách một cánh tay.
Phần còn lại của cuộc đại tu di động ít hào nhoáng hơn nhưng quan trọng không kém: vùng chạm thân thiện với ngón tay, co giãn phông chữ tốt hơn, khoảng cách đáp ứng trên toàn trang tiếp thị. Không có gì cách mạng — chỉ đảm bảo rạp xiếc trông đúng ở bất cứ đâu bạn tìm thấy nó.
Trang phục, mùa và một quản đốc đoàn xiếc
Tuần này toàn bộ là về chiều sâu hình ảnh. Mỗi con bọ chét trong đàn giờ mặc một trang phục độc đáo — Nova có ô dù trên dây, Rex đội mũ bảo hiểm trong đại bác, Blaze nhận vương miện cho tiết mục phun lửa. Chi tiết nhỏ, nhưng mang lại cho mỗi nghệ sĩ một bản sắc có thể nhận ra ngay lập tức.
Sân khấu tự thay đổi theo lịch. Hệ thống hạt theo mùa rắc tuyết vào mùa đông, hoa anh đào vào mùa xuân, đom đóm vào mùa hè, và lá bay vào mùa thu. Còn có sắc thái ngày/đêm tinh tế gắn với đồng hồ thực của bạn — dải ấm lên vào giờ vàng và tối đi sau hoàng hôn, với những vì sao sáng hơn trên bầu trời đêm.
Bổ sung lớn nhất là quản đốc đoàn xiếc — một con bọ chét đặc biệt đội mũ chóp cao đi dạo giữa các tiết mục, kiểm tra buổi diễn. Nó không biểu diễn; nó giám sát. Điều chỉnh đường tuần tra cho đúng có nghĩa là sắp xếp bước đi sao cho nó đến đúng lúc chuyển tiết mục kết thúc, mang lại cho cả rạp xiếc cảm giác biên đạo mà trước đây chưa có.
Ẩn bên dưới, một hệ thống giao diện hoàn chỉnh giờ vận hành tất cả. Tám bảng màu cộng thêm chế độ tự động theo mùa chọn bảng phù hợp dựa trên tháng. Mỗi màu trong mỗi tiết mục và phần tử giao diện đều lấy từ giao diện đang hoạt động, nên việc chuyển đổi cảm thấy liền mạch chứ không phải chắp vá.
v1.1.0: Hai tiết mục mới
Phiên bản 1.1.0 bổ sung tiết mục Tung hứng và Người phun lửa vào danh sách, nâng tổng số lên bảy tiết mục xiếc trực tiếp. Cả hai chạy trên cùng hệ thống năng lượng điều khiển phần còn lại của buổi biểu diễn — gõ phím, di chuột và nhấp chuột của bạn.
Người tung hứng theo dõi nhiều quả bóng trên quỹ đạo parabol chân thực. Số lượng tỷ lệ với năng lượng: hai hoặc ba khi rảnh rỗi, lên đến sáu ở công suất tối đa, với các cú bắt sau lưng khi đám đông cuồng nhiệt. Để đồng bộ thời gian đúng đòi hỏi phải tách pha của mỗi quả bóng để chúng không bị dồn cục.
Người phun lửa sử dụng hệ thống hạt hiện có nhưng với hiệu ứng lung linh nhiệt mới. Chiều dài ngọn lửa tăng theo năng lượng, và nhấp chuột tạo ra các đợt bùng phát thêm. Phần khó nhất là pha trộn màu sắc — chuyển tiếp mượt mà từ đỏ sẫm ở gốc đến vàng sáng ở đầu mà không bị phân dải.
Cả hai tiết mục được đưa vào hệ thống xoay vòng hiện có, nên bạn sẽ thấy chúng hoán đổi cùng với năm tiết mục gốc. Nếu bạn muốn ghim tiết mục yêu thích, bảng Cài đặt giờ cho phép bạn bật tắt từng tiết mục riêng lẻ.
Lịch sử đằng sau trang Lịch sử
Trang lịch sử của FleaWinder ghi lại hơn bốn trăm năm rạp xiếc bọ chét thật — từ bản phác họa kính hiển vi của Robert Hooke năm 1665 đến những nghệ sĩ biểu diễn Oktoberfest vẫn đang hoạt động ngày nay. Viết trang này đồng nghĩa với việc đọc các tờ rơi thời Victoria, cắt báo số hóa, và một số lượng đáng ngạc nhiên các bài báo học thuật về giải trí côn trùng học.
Phần khó nhất là quyết định bỏ qua cái gì. Riêng Louis Bertolotto đã có thể viết đầy một cuốn sách (và ông ấy đã viết — thực ra là nhiều cuốn). Giải pháp thỏa hiệp là một dòng thời gian điểm qua các mốc chính và một tập hợp các phần mở rộng cho bất kỳ ai muốn tìm hiểu sâu hơn.
Trang sử dụng chữ cái đầu đoạn lớn, đường viền trang trí, và phông chữ serif để gợi nhớ các tờ rơi và áp phích quảng cáo mà nó mô tả. Mỗi phần mặc định được thu gọn để người đọc không bị choáng ngợp, nhưng đoạn đầu tiên luôn hiển thị với chữ cái đầu lớn để thu hút sự chú ý.
Tất cả văn bản có sẵn bằng tiếng Anh, tiếng Tây Ban Nha và tiếng Đức. Quá trình dịch thuật đã phát hiện một số lịch sử địa phương thú vị — ví dụ, truyền thống Flohzirkus (rạp xiếc bọ chét) của Đức tại Oktoberfest có dòng phả hệ riêng biệt với các sân khấu ở London và New York.
Tại sao tôi xây dựng FleaWinder
Tôi muốn thứ gì đó làm cho máy tính có cảm giác sống động — không phải theo cách gây xao nhãng, mà như một người bạn đồng hành lặng lẽ phản hồi với sự hiện diện của bạn. Hầu hết trình bảo vệ màn hình kích hoạt khi bạn rời đi; FleaWinder kích hoạt khi bạn đến.
Ý tưởng rất đơn giản: lấy tất cả đầu vào rảnh rỗi mà hệ điều hành bỏ qua — nhịp gõ phím, tốc độ chuột, nhịp nhấp chuột — và đưa cho một đoàn xiếc bọ chét hoạt hình. Bạn làm việc càng nhiều, buổi biểu diễn càng sống động.
Xây dựng nó như một lớp phủ trong suốt phía trên thanh tác vụ hóa ra là ràng buộc đúng đắn. Nó luôn hiển thị nhưng không bao giờ cản trở. Bạn không tương tác trực tiếp với nó; bạn chỉ làm việc, và nó phản hồi. Thách thức kỹ thuật là làm cho nó thực sự cho phép nhấp xuyên qua để không bao giờ chiếm quyền focus.
FleaWinder là bức thư tình gửi đến rạp xiếc bọ chét thời Victoria — một hình thức nghệ thuật thật sự, có lịch sử hàng thế kỷ, nơi các thợ đồng hồ buộc bọ chét thật để kéo xe ngựa thu nhỏ và đi trên dây. Trang lịch sử kể toàn bộ câu chuyện đó.
