Hiệu ứng xuất hiện cho thẻ widget biểu đồ: phóng to, trượt từng chi tiết, vệt sáng lướt qua

Tóm tắt: Prompt của một designer, mô tả từng bước như đang chỉnh trong After Effects. Mẫu tốt để xin hiệu ứng giao diện.

Prompt mô tả hiệu ứng cho một thẻ widget: thẻ phóng từ 30% lên 100% và từ ẩn thành hiện. Khi thẻ ổn định, từng chi tiết trượt vào lần lượt. Đường biểu đồ tự vẽ ra như một đường path. Vầng sáng phía sau hiện dần khi các chi tiết trượt vào. Hai hình chữ nhật lướt qua màn hình lệch nhịp nhau, tạo hiệu ứng vệt sáng.

Vì sao nhiều người dừng lại xem?

Prompt viết theo thứ tự thời gian, mỗi câu một chuyển động, giống cách designer giao việc cho người làm motion. Cách viết này hợp với bất kỳ ai cần hiệu ứng cho app hay trang web: không cần biết tên kỹ thuật, chỉ cần tả cái mình thấy.

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. Gửi kèm ảnh chụp thẻ giao diện của bạn để Claude làm đúng thiết kế đó.

Prompt

Prompt gốc của tác giả:

the card should scale in from 30% to 100% scale and it should go from Invisible to visible. every detail slide in orderly one after the other when the card settles in scale. the graph line animates in like a line path. the glow at the back becomes visible as the card details slides in. the two rectangles move accross the screen at slightly different timing giving it this light effect.

Prompt by @Khlaseek_dsgner, 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ả hiệu ứng cho một thẻ widget: thẻ phóng từ 30% lên 100% và từ ẩn thành hiện.

Video này chạy bằng gì, có cần cài phần mềm không?

Chỉ cần Claude Opus 5.5 và Chrome. Bạn dán prompt, xin Claude trả về một file HTML duy nhất, lưu rồi mở lên. Không cần cài gì, mở là chạy ngay trong trình duyệt. Cần file video thì quay lại màn hình.

Muốn biến video này thành phiên bản của riêng bạn thì đổi chỗ nào?

Được. Prompt là của @Khlaseek_dsgner, 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 @Khlaseek_dsgner là đủ.

Previous
Previous

Hoạt hình kiểu Minecraft trên một con phố thật: xếp TNT, dựng tháp vàng, thả khối khổng lồ

Next
Next

Đèn dung nham (lava lamp) chân thực bằng WebGL: sáp nổi lên, kéo dài rồi tách đôi