Tóm tắt: Không phải video mà là một phần trang web: ảnh xe bị xóa dần theo con trỏ, lộ ra khung carbon và hộp số bên dưới như chụp X-quang.
Prompt mô tả phần đầu trang cho thương hiệu xe đạp điện OBLT, làm bằng React thuần, không thư viện animation. Ảnh ngoại thất xe phủ kín màn hình. Khi rê chuột, một vùng tròn quanh con trỏ xóa lớp ảnh ngoài, lộ ra ảnh bên trong xe: khung carbon và hộp số.
Vì sao nhiều người dừng lại xem?
Prompt dài gần 11.000 ký tự và viết như tài liệu kỹ thuật: font, mã màu, từng lớp ảnh, kích thước menu, hành vi trên điện thoại. Kiểu prompt này dùng khi bạn đã có thiết kế và muốn Claude dựng đúng từng chi tiết. Hiệu ứng nhìn xuyên vào trong rất hợp với sản phẩm có cấu tạo đáng khoe.
Cách dùng với Claude Opus 5.5
Bạn cần hai tấm ảnh cùng góc chụp: ảnh ngoài và ảnh bên trong sản phẩm. Dán prompt vào Claude (chọn Opus 5.5). Muốn xem nhanh, xin "một file HTML" thay vì React. Prompt gốc rất dài, mình rút gọn bên dưới.
Prompt
Prompt mình viết lại theo ý của tác giả (không phải nguyên văn):
Build a full-viewport, dark, cinematic e-bike product header for the brand OBLT in React (client component), with pure CSS and no animation libraries.
Core effect: a cursor-following "x-ray" spotlight. The exterior bike photo fills the header. A second layer holds the x-ray image (internal carbon frame and gearbox), masked by a radial gradient centered on the cursor, so moving the mouse wipes away the exterior and reveals the inside. Add a vertical dark veil so text stays readable at top and bottom.
Type and color: one Google font (Almarai), background #272727, text #E0E1CC.
Layout: top nav with the logo "OBLT." on the left, three links in the center (E-bikes, Features, Connect), and an uppercase "Explore the bike" link on the right. On mobile, a hamburger opens a blurred dropdown menu. A flexible empty stage in the middle, headline and call-to-action pinned at the bottom.
Rules: all animation is hand-written CSS keyframes plus an inline CSS mask-image. Scope every style under .vt-header, never global. Images cannot be dragged or selected. When the cursor leaves, the x-ray spotlight fades out smoothly.Prompt by @iamtanzil_, via Skillry / awesome-opus5-5-videos (MIT)
Câu hỏi thường gặp
Prompt này tạo ra cái gì?
Prompt mô tả phần đầu trang cho thương hiệu xe đạp điện OBLT, làm bằng React thuần, không thư viện animation.
Phần đầu trang web xe đạp điện được dựng bằng công cụ nào?
Code dùng 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 @iamtanzil_ có được sửa lại cho việc của bạn không?
Được. Prompt là của @iamtanzil_, mình lấy qua Skillry và bộ awesome-opus5-5-videos (giấy phép MIT). Chỗ nên đổi trước là tên thương hiệu, câu chữ, màu và thời lượng. Khi chia sẻ lại, bạn ghi nguồn @iamtanzil_ là đủ.
