Tóm tắt: Xúc xắc trong suốt như kẹo gummy, va vào nhau thì lún và nảy như vật mềm thật, vẽ bằng WebGPU thuần.
Jelly Dice là những viên xúc xắc trong suốt như kẹo gummy. Chúng cư xử như vật mềm thật: rơi xuống thì lún, va nhau thì méo rồi bật lại. Tất cả nằm trong một file HTML, vẽ bằng WebGPU thuần với shader WGSL, không dùng Three.js. Nếu trình duyệt không có WebGPU, trang hiện một thẻ thông báo gọn.
Vì sao nhiều người dừng lại xem?
Vật cứng thì dễ mô phỏng. Vật mềm khó hơn nhiều, vì mỗi viên phải biết tự méo và tự hồi lại. Chất trong suốt của kẹo cũng khó vẽ cho đẹp. Prompt còn tính tới máy không hỗ trợ WebGPU, một chi tiết người làm sản phẩm thật mới nghĩ tới.
Cách dùng với Claude Opus 5.5
Mở Claude, chọn Opus 5.5, dán prompt bên dưới. Nhắc thêm một câu: "gói tất cả trong một file HTML, không cần cài gì". Lưu đoạn code Claude trả về thành file .html, mở bằng Chrome. Muốn có video để đăng, bạn quay màn hình lúc nó chạy. Bản prompt trong kho dữ liệu bị cắt giữa câu, nên mình viết lại phần còn thiếu theo ý chung (nút lăn, điều khiển bằng chuột). Phần đó là của mình, không phải của tác giả.
Prompt
Prompt mình viết lại theo ý của tác giả (không phải nguyên văn):
Build "Jelly Dice": a single self-contained HTML file (all JS/CSS inline, no build step) with translucent gummy-candy dice that behave like real soft bodies. Render with raw WebGPU (WGSL shaders, no three.js). If WebGPU is unavailable, show a clean fallback card that explains it.[Phần dưới do mình thêm:]The dice squash when they land, wobble when they hit each other, then settle and show the result. Add a Roll button and let me drag a die to throw it.Prompt by @SpacyApps, via Skillry / awesome-opus5-5-videos (MIT)
Câu hỏi thường gặp
Prompt này tạo ra cái gì?
Jelly Dice là những viên xúc xắc trong suốt như kẹo gummy.
Làm sao để tự chạy trang tương tác này trên máy của bạn?
Code dùng Three.js, WebGPU, Canvas, mở là chạy ngay trong trình duyệt. Mình dùng Claude Opus 5.5: dán prompt, bảo Claude gom mọi thứ vào một file HTML, mở bằng Chrome, rồi quay màn hình nếu muốn đăng thành video.
Prompt của @SpacyApps có được sửa lại cho việc của bạn không?
Được. Prompt là của @SpacyApps, mình lấy qua Skillry và bộ awesome-opus5-5-videos (giấy phép MIT). Chỗ nên đổi trước là dữ liệu, màu và cách người xem tương tác. Khi chia sẻ lại, bạn ghi nguồn @SpacyApps là đủ.