Mỗi recipe là một widget thực tế đã ghép sẵn nhiều tính năng — copy là chạy. Phần “Kết hợp” cho biết demo đó dùng cái gì với cái gì. Nội dung trung tính, không phụ thuộc lĩnh vực nào.
Nhiều card đánh giá / view, tự chạy, kéo được — như khối “reviews” trên landing page.
Slider toàn chiều rộng cho đầu trang: tiêu đề + nút CTA, chuyển cảnh mượt.
Hàng sản phẩm cuộn ngang theo “trang”, responsive, có nút điều hướng.
Kệ sản phẩm kéo trớn quán tính + thanh cuộn kéo được + mép mờ — kiểu “you may also like”.
Dải logo chạy liên tục đều tốc độ (px/s), vòng vô tận, dừng khi hover — hai chiều.
Lưới sản phẩm nhiều hàng, nhảy theo cột màn hình — khối danh mục nhiều dòng.
Trang chi tiết: ảnh lớn + dải thumbnail đồng bộ hai chiều, bấm để đổi ảnh.
500 sản phẩm cuộn ngang: chỉ render quanh khung nhìn, lăn chuột + kéo trớn.
Khung ảnh lớn hiệu ứng coverflow, đồng bộ hai chiều với dải thumbnail bên dưới.
Dải logo đối tác chạy tự động, nhiều ô cùng lúc — “được tin dùng bởi…”.
Bảng tin một dòng cuộn dọc, tự đổi tin — dùng cho thanh thông báo.
Giới thiệu các bước/tính năng bằng hiệu ứng cube 3D, kiểu onboarding.
Slide ở giữa nổi bật, hai bên ló một phần — bố cục “peek” quen thuộc.
Ảnh chỉ tải khi slide sắp vào tầm nhìn — tiết kiệm băng thông.
Mỗi slide một tag; URL đổi #tag, mở lại đúng slide.
Thanh tiến trình và nút tạm dừng/chạy, dựng bằng sự kiện & API.
Tự dựng nút, bộ đếm “n / tổng” và dots riêng, nối qua API.
Dùng CSS scroll-snap gốc của trình duyệt — cực nhẹ, momentum mượt.
Khung tự co giãn chiều cao theo slide đang xem (chữ dài/ngắn khác nhau).
Cách chạy: từ thư mục gốc repo chạy npx serve . rồi mở
/examples/recipes/. Các demo dùng importmap trỏ tới
/packages/*/dist.