Làm animation Rive trong vài phút với Claude Code

1. Rive là gì, và vì sao giờ làm nhanh hơn

Lukas Margerie mở đầu: anh đã muốn nói về Rive trên kênh của mình từ khá lâu. Nếu bạn chưa biết Rive là gì, theo Lukas (video đăng ngày 06/10/2026), đó là công cụ đứng sau những giao diện tương tác kiểu Spotify recap, bản tổng kết mỗi năm về nghệ sĩ, album và bài hát yêu thích của bạn. Anh nói Rive cũng là công cụ đứng sau những animation loading, ví dụ animation loading của FigJam. Trang chủ Rive, như trên màn hình trong video, cũng ghi dòng "Trusted by Spotify Wrapped, Duolingo, and products reaching 2 billion users".

Điểm khác, theo Lukas (video đăng ngày 06/10/2026), là những animation này không chỉ là animation Lottie truyền thống. Bạn có thể hover lên chúng, có thể tap vào chúng, và mỗi tương tác đó kích hoạt một animation khác.

Trước đây, mà theo anh là cách đây vài tháng tính từ lúc quay video (đăng ngày 06/10/2026), bạn phải tự tạo những tương tác này bên trong Rive editor. Editor trông như trên màn hình: rất nhiều công cụ, bạn phải tinh chỉnh bằng tay, và anh nói phải mất rất nhiều giờ làm việc vất vả mới xong được một tác phẩm như vậy.

Còn tính đến lúc video đăng (06/10/2026), Lukas nói Rive đã có CLI riêng, tích hợp dễ dàng vào Claude Code hoặc vào Codex, và bạn làm được rất nhiều thứ với CLI đó. Đó là nội dung của video: anh chỉ cách bắt đầu, rồi đi qua một vài ví dụ. Đầu tiên là các tương tác đơn giản. Sau đó là lấy những website đã có sẵn animation Rive, rồi chỉ trong vài phút remix lại và đổi sang một phong cách khác.

Cuối video (đăng ngày 06/10/2026), anh đi vào các workflow nâng cao hơn, như đi từ Blender sang Rive, giống một bài đăng trên X mà anh cho xem: tác giả tạo một asset 3D trong Blender, rig nó bằng bones, import vào Rive, rồi dùng Rive CLI để expose các bones đó ra.

2. Bắt đầu: tài khoản Rive, Rive CLI và Claude Code

Theo Lukas, bắt đầu với Rive rất, rất đơn giản. Việc đầu tiên anh làm là đăng ký một tài khoản. Anh nói, tính đến video đăng ngày 06/10/2026, bạn không cần tài khoản trả phí cho việc này. Bạn chỉ cần trả phí nếu sau này muốn export file mà không có splash screen. Với gói miễn phí, bạn có Rive editor và CLI, nên muốn thử nghiệm bao nhiêu cũng được.

Trên màn hình bảng giá Rive mà anh lướt qua trong video (đăng ngày 06/10/2026): gói Free $0/seat/tháng gồm "Rive Editor and CLI", export file .riv kèm splash screen, 3 file cộng tác và "Agent with limits"; gói Cadet $9/seat/tháng (tối đa 3 seat) cho phép export .riv không có splash screen và không giới hạn số file; gói Voyager $32/seat/tháng (tối đa 25 seat) thêm Libraries, Embed URL hosting và agent với model nâng cao; cột Enterprise ghi $120 một seat.

Vậy là đăng ký Rive, rồi copy dòng lệnh cài CLI trên trang chủ. Trong video (đăng ngày 06/10/2026), ô "RIVE CLI" ở tab macOS / Linux hiện lệnh sau:

curl -fsSL https://releases.rive.app/cli/install.sh | sh

Trang chủ rive.app khi đọc ngày 24/10/2026 ghi cùng địa chỉ đó nhưng kết thúc bằng | bash.

Tiếp theo, trong app Claude Code bản desktop, anh mở một folder mới và đặt tên là Rive. Trong video (đăng ngày 06/10/2026), anh chọn model Opus 5.5 ở mức effort high, và chọn chế độ bypass permissions để nó không hỏi xin quyền liên tục. Rồi anh cài CLI: dán các lệnh vào và submit. Xong bước đó là có thể bắt đầu đưa cho nó vài ví dụ ngẫu nhiên.

3. Ví dụ 1: những sợi dây đàn guitar phản ứng khi hover

Ví dụ đầu tiên trong video (đăng ngày 06/10/2026), Lukas đưa cho Claude Code một tấm ảnh: chỉ là những đường kẻ dọc có gradient, mờ dần ở khoảng giữa. Anh bảo nó dựng lại cái này, nhưng đổi đường kẻ sang màu xanh dương và nền sang màu đen; và khi anh hover lên các đường kẻ, chúng phải phản ứng, chuyển động như những sợi dây đàn guitar căng cứng. Prompt anh gõ, như trên màn hình:

rebuild this, but make the lines blue and the background black... and as i hover over the lines, they should react and kinda move like stiff guitar strings.

Trong câu trả lời trên màn hình (demo trong video đăng ngày 06/10/2026), Claude liệt kê cách hover hoạt động: Catch and bend, một sợi dây bị bắt khi con trỏ đi qua và uốn theo con trỏ, tới tối đa 15px; Snap and ring, quá mức đó thì sợi dây tuột ra và rung ở khoảng 5 Hz, tắt dần trong khoảng một giây, các hoạ âm cao tắt nhanh hơn nên tạo cảm giác căng cứng; Fast swipes, quét nhanh thì gảy mọi sợi đi qua mà không giữ sợi nào; Colour, sợi đang rung sáng lên màu xanh nhạt hơn rồi trở lại.

Và đây là thứ nó build (demo trong video đăng ngày 06/10/2026). Thiết kế giữ y hệt bản gốc về dòng chảy của các sợi dây, về gradient và mọi thứ. Nhưng giờ có thêm hiệu ứng: anh di chuột, và với tương tác hover này, các sợi dây hơi cứng như dây đàn guitar. Di chuột tới đâu, điểm bắt đầu uốn cong nằm ở đó; anh kéo chuột lên phía trên thì chỗ cong nằm phía trên, kéo xuống dưới thì chỗ cong bắt đầu ở phía dưới.

4. Ví dụ 2: dựng lại một animation từ hai screenshot

Một cách khác, Lukas nói trong video (đăng ngày 06/10/2026), là lấy từ một video có sẵn. Anh tìm được video về GPT Images 2, trong đó có một cảnh: một ô prompt nhỏ, bạn bắt đầu gõ, và ô đó mở ra cùng với hình ảnh. Anh chỉ đưa cho Claude Code hai tấm ảnh, tức hai screenshot của đúng cảnh đó, một ở trạng thái đầu, một ở trạng thái sau, rồi gõ:

i need you to build an animation like this, so when i hover over the prompt rectangle, it opens up

Anh nói: prompt rất, rất đơn giản, và context đưa vào cũng rất đơn giản, chỉ hai tấm ảnh của trạng thái một và trạng thái hai.

Trên màn hình (demo trong video đăng ngày 06/10/2026), Claude báo nó đã đọc tài liệu Rive authoring và dựng khung project ở prompt-bar/, rồi kiểm tra cách viết text, hình ảnh và easing trước khi build animation hover. Nó cho biết đã kiểm tra bằng headless render chứ không bằng tay trong cửa sổ: trạng thái thu gọn, đang mở, mở hoàn toàn, giữ mở khi con trỏ nằm trên thẻ, đang đóng, và rời đi giữa chừng đều chạy đúng; khung hình đóng lại sau một lần hover trùng khớp từng pixel với khung hình ban đầu. Khi hover: viên thuốc màu trắng nở ra thành tấm thẻ bo góc với một chút overshoot, hàng nhập liệu trượt xuống dưới; ảnh thumbnail mờ dần hiện ra và phóng to ở góc trên bên trái; chữ "Ask ChatGPT" mờ đi và "Design a home office" được gõ từ trái sang phải sau một con trỏ xanh nhấp nháy.

Và đây là kết quả (demo trong video đăng ngày 06/10/2026): vector hoá rất sắc nét, không có pixel nào, toàn bộ là vector và tất cả đều tương tác được. Anh hover lên, hình ảnh bật ra theo một định dạng đẹp, mờ vào rồi mờ ra. Rồi có chuyển động gõ chữ, có con trỏ nhấp nháy nhỏ. Theo Lukas, nó làm tất cả trong một lần (one shot), chỉ dựa trên hai tấm ảnh anh đưa.

5. Ví dụ 3: bộ điều nhiệt từ một video trên trang Rive

Trên website của Rive, theo Lukas (video đăng ngày 06/10/2026), có những use case rất hay về những người build bằng Rive: Duolingo, bản tổng kết năm của LinkedIn, và như anh đã nhắc, Spotify recap. Nhưng cũng có những thứ anh thấy rất thú vị, như ví dụ này; trên màn hình nó ghi là một concept smart home hub làm bằng Rive. Bài đăng đó, theo anh, là từ hai năm trước; trên màn hình nó ghi ngày 12/07/2024. Người làm đã tự tay dựng nó từ đầu trong Rive editor. Bạn có thể lướt qua video đó để thấy toàn bộ quá trình và mọi tương tác của thiết bị, và anh thấy rất hay ở cách họ render nó bằng 3D ở cuối.

Chỉ để thử nghiệm, vì tò mò, anh đưa (trong video đăng ngày 06/10/2026) cho Claude Code tất cả screenshot lấy từ video đó: animation mở đầu, các trạng thái khác nhau, và một screenshot cho thấy tương tác trông thế nào.

Trên màn hình (demo trong video đăng ngày 06/10/2026), Claude ghi các bước nó đã làm: đọc sample pointer-driven và view model script API, tạo project thermostat (script cho mặt số, scene được sinh ra, rồi compile và kiểm tra), render mặt số ở các trạng thái đứng yên, kéo sang nóng, đổi mode, kéo sang lạnh và giữa đoạn intro, làm dịu ánh sáng viền, kiểm tra lại và mở previewer. Nó còn nói thêm: vì bạn không nói phải làm gì với các screenshot, nên nó đoán bạn muốn dựng lại mặt số nhiệt độ trong Rive.

Kết quả, theo Lukas, "không tệ lắm" (demo trong video đăng ngày 06/10/2026). Mặt số đang ở chế độ nóng hơn; anh di chuột vòng quanh để kéo sang nhiệt độ lạnh, rồi sang ấm hơn. Anh chọn được các nút khác nhau như hot, cold hay eco. Phía sau còn có một animation gradient nhỏ chạy ở nền.

6. Ví dụ 4: dựng lại bento grid của brand.dropbox.com chỉ từ URL

Để không chỉ đưa context bằng hình ảnh cho Claude Code, Lukas muốn thử xem nó làm việc với site thật thế nào. Anh tìm tới brand.dropbox.com, một trong những use case chính trên website Rive, theo lời anh (video đăng ngày 06/10/2026). Site có những animation hover rất đẹp, một số rất phức tạp: hover lên một ô, hoặc lên ô topography hay ô hình ảnh, thì có hình tròn biến thành mặt trăng, có chuyển cảnh mượt của ổ khoá.

Anh chỉ lấy URL và gõ: cuộn xuống cuối site, phân tích bento grid, rồi dán URL vào. Prompt trên màn hình:

scroll to the bottom of this site, analyze the bento grid: https://brand.dropbox.com/

Nó trả về toàn bộ layout, từng ô của bento grid gồm những gì (demo trong video đăng ngày 06/10/2026). Trên màn hình, Claude mô tả grid là một hình chong chóng (pinwheel): tám ô xoay quanh một ô vuông nhỏ màu xanh chứa logo Dropbox, lấp đúng một viewport. Nó đọc ra một grid 5 cột × 3 hàng, khe 10px, lề ngoài 10px; ở viewport 1024×768 thì các cột rộng 185, 252, 90, 252, 185px và các hàng cao 319, 90, 319px, cột và hàng hẹp ở giữa giao nhau thành ô vuông 90×90 ở tâm. Rồi một bảng cho từng ô: Framework, Voice & Tone, Logo, Typography, Iconography, Color, Imagery, Motion, mỗi ô có cột, hàng, kích thước, màu nền và màu chữ/icon bằng giá trị rgb().

Sau đó anh bảo nó dựng lại bento grid này trong Rive, kèm các animation hover (demo trong video đăng ngày 06/10/2026).

Đây là kết quả (demo trong video đăng ngày 06/10/2026), chỉ dựa trên một URL, anh không bỏ chút công sức nào, chỉ bảo nó copy y hệt. Lukas nói: tất nhiên có vài thiết kế không đẹp bằng bản gốc, nhưng với lần đầu tiên thì theo anh nó làm khá tốt. Animation ổ khoá trông vẫn hơi tệ; và anh nói, những chi tiết nhỏ như vậy thực sự vẫn cần bạn làm thủ công mới ra đúng.

7. Remix: bento grid cho Claude Code theo phong cách một chiếc controller

Để remix lại grid này, trong video (đăng ngày 06/10/2026), Lukas tìm được một video trên Twitter, mà anh đoán cũng đến từ website Rive, giới thiệu các use case khác nhau của họ. Trong đó có một chiếc controller nhỏ, sáng lên khi bạn giữ các cần gạt và bấm các nút khác nhau.

Anh bảo Claude Code bắt đúng phong cách đó, và thay nội dung sao cho hợp với Claude Code thay vì Dropbox (demo trong video đăng ngày 06/10/2026).

Và đây là thứ nhận được (demo trong video đăng ngày 06/10/2026): hover lên các thẻ khác nhau thì chúng sáng lên như vậy, có những chuyển cảnh nhỏ mượt mà. Theo Lukas, chúng vẫn cần cải thiện, chưa gọn gàng bằng bản gốc, nhưng chậm mà chắc, mọi thứ đang tiến dần tới đó.

8. Nhân vật của Duolingo và state machine

Lukas chuyển sang nhân vật. Theo anh (video đăng ngày 06/10/2026), Duolingo dùng Rive để tạo những nhân vật nhỏ bạn thấy trong lúc học ngôn ngữ trên app. Nếu zoom thật gần, họ dùng rất nhiều rig nhỏ. Mỗi nhân vật có đủ loại trạng thái: miệng cử động chẳng hạn, hoặc đi từ trạng thái idle sang trả lời đúng, hay sang trả lời sai. Tức là nó có cả những bước logic khác nhau.

Anh nói Duolingo có một video YouTube rất hay đi sâu vào cách họ dùng Rive để làm animation cho tất cả nhân vật trong app, và anh sẽ để link bên dưới. Trên màn hình, đó là bài blog của Duolingo về chuyện này, cuối bài nhúng talk Duocon 2023 "How we animate the Duolingo world". Bài blog (đọc ngày 24/10/2026) kể họ chọn Rive vì State Machine, thứ cho phép điều khiển bằng code trạng thái animation nào được gọi, gọi thế nào và chuyển tiếp, trộn với nhau ra sao.

Nhưng trong video (đăng ngày 06/10/2026), Lukas muốn tạo nhân vật của riêng mình, theo kiểu minh hoạ nhỏ này: một chú thỏ nhỏ, tên là Mark, và Mark biết code. Khi bạn hover lên, Mark chào bạn. Anh dùng ChatGPT để tạo ra hình ảnh đó, và có được chú thỏ này.

9. Dùng Mobbin MCP để tìm cảm hứng cho màn hình loading

Một workflow thú vị khác, Lukas nói, là dùng Mobbin. Anh đã nói về Mobbin nhiều lần trên kênh. Theo anh (video đăng ngày 06/10/2026), đó là một thư viện khổng lồ gồm đủ loại UI, screenshot từ các app khác nhau, không chỉ app mobile mà cả web app; và họ có một MCP rất dễ dùng, kết nối thẳng vào Claude Code hoặc Codex, để truy cập mọi màn hình và flow trong cơ sở dữ liệu Mobbin.

Anh đưa prompt này cho Claude Code (demo trong video đăng ngày 06/10/2026), đại ý: hãy dùng connector Mobbin để tìm những trang loading của app có chuyển động hoặc tương tác thú vị. Trên màn hình:

use the mobbin connector to find interesting app loading ages that have motion or interaction

Anh nhận được danh sách kết quả này (demo trong video đăng ngày 06/10/2026). Chỉ cần bấm vào kết quả đầu tiên là anh đã hình dung khá rõ mình muốn gì. Đó là Finch, app thú cưng chăm sóc bản thân (self-care pet). Giống Duolingo, họ có phong cách nhân vật 2D như thế này.

Lukas nói thật lòng (video đăng ngày 06/10/2026), không có ý xúc phạm team Finch, nhưng anh nghĩ nhân vật này có thể được cải thiện thêm về phong cách minh hoạ, theo kiểu Duolingo.

10. Mark, chú thỏ biết code

Vậy là, trong video (đăng ngày 06/10/2026), anh vào ChatGPT và tạo một hình ảnh chú thỏ nhỏ màu trắng. Gọi chú là Mark. Mark thích mang chiếc laptop nhỏ đi khắp nơi; việc Mark làm là ngồi xuống và tập trung code. Còn khi bạn hover lên, Mark vẫy tay chào.

Anh quay lại Claude Code, đính kèm ảnh và gõ:

this is a rabbit named mark.

can you use rive to make mark type rapidly on his computer, and then when the mouse hovers over him, he makes this hello gesture (as seen in the attached image)

Đây là ví dụ đầu tiên nhận được (demo trong video đăng ngày 06/10/2026), và theo Lukas thì nó không ổn chút nào. Anh nghĩ chỉ có phần hover là tạm được, nhưng trông rất không chuyên nghiệp. Rồi anh gõ "make him look exactly like the original image" (làm cho Mark trông giống hệt ảnh gốc), và nó khá hơn một chút, nhưng vẫn hơi vụng về.

Sau đó anh bảo Claude Code tạo thêm hình ảnh ở cùng tư thế. Nó dùng một MCP tạo ảnh để gọi GPT Images 2.5, theo lời anh; trên màn hình, model ghi là "GPT Image 2.5 Flare" (demo trong video đăng ngày 06/10/2026). Kết quả sạch hơn một chút, nhưng vẫn còn phải đánh bóng: ở ngón tay có chỗ cắt chưa chuẩn, nền có một chuyển động lạ, và đôi tai cử động hơi kỳ.

Nhưng rồi cuối cùng, anh nói trong video (đăng ngày 06/10/2026), bạn có thể bảo: thêm animation Mark vào một UI giống Finch, với chú thỏ nằm trong component loading hình tròn. Prompt trên màn hình:

add the mark animation to a ui similar to finch (where the rabbit innside the circle loading component

Trên màn hình (demo trong video đăng ngày 06/10/2026), Claude báo Mark giờ nằm trong một màn hình loading kiểu Finch, là một project mới: màn hình dọc cỡ điện thoại 390×844, một vòng tiến độ tròn với Mark bên trong và hai dòng chú thích "Getting things ready / with Mark…"; vòng cung màu hồng chạy theo chiều kim đồng hồ từ đỉnh trong khoảng 5,5 giây, giữ đầy 1,5 giây rồi chạy lại. Nó cũng ghi những điểm khác Finch: nền tối chứ không trắng vì ảnh của Mark có sẵn nền than chì, và vòng tiến độ chỉ là vòng lặp demo, chưa nối với giá trị loading thật nào.

Và đây là kết quả (demo trong video đăng ngày 06/10/2026): nó đang loading, và anh hover lên chú thỏ nhỏ thì Mark chào lại. Lukas nói bạn có thể dùng kiểu này cho các use case khác, ví dụ một app khác dùng nó cho luồng đăng ký: mỗi khi bạn hover lên chú phi hành gia nhỏ, chú phi hành gia chào bạn.

11. Từ Blender sang Rive: model, rig và video tham chiếu

Cuối cùng, trong video (đăng ngày 06/10/2026), Lukas quay lại bài đăng trên X của Angga Motion mà anh gọi là tuyệt vời: một chiếc rương báu, khi mở ra thì sáng lên, và bạn thấy được các rig khác nhau bên trong Rive. Nhưng tất cả ban đầu được làm trong Blender. Trên màn hình, bài đăng tóm quy trình: tạo asset 3D trong Blender, rig nó bằng bones, import vào Rive, dùng Rive CLI để expose các bones, rồi animate mọi thứ ngay trong Rive Editor; và điểm hay là các bones 3D có thể được điều khiển, animate hoàn toàn bên trong Rive.

Theo Lukas (video đăng ngày 06/10/2026), bạn thực sự có thể dùng Blender khá tốt với các coding agent này. Ý kiến riêng của anh là dùng Codex với Blender là tốt nhất, vì nó điều khiển máy tính của bạn một lúc và dựng model từ đầu.

Đây là model Blender trông thế nào (demo trong video đăng ngày 06/10/2026), và nó còn tự animate từ trạng thái đóng sang mở. Thay vì một chiếc rương báu, Lukas chọn một chiếc đèn bàn đang gập lại; khi mở ra thì đèn sáng lên, rồi gập lại lần nữa. Codex còn rig model để bạn có thể tự tay di chuyển từng bộ phận, và bạn xem được video preview ngay bên trong Codex, mà theo anh trông rất ổn.

Tiếp theo, theo Lukas (video đăng ngày 06/10/2026), bạn đưa cho nó video bạn tìm thấy trên X: tải video đó về làm tham chiếu, tức làm context đưa cho Claude Code. Trên màn hình, các bước được đánh số: 1 Model in Blender, 2 Rig the parts, 3 Give Claude Code the video, 4 Build it in Rive.

12. Đèn bàn hẹn giờ tập trung, và bước tiếp theo

Rồi, theo Lukas (video đăng ngày 06/10/2026), bạn có thể gõ kiểu như: dựng một UI hẹn giờ tập trung nhỏ, tương tác được, quanh chiếc đèn, theo phong cách minh hoạ của chú thỏ Mark. Khi hover lên đèn, đèn bật dậy và sáng lên với ánh sáng ấm, dịu; khi rời chuột đi, đèn từ từ hạ xuống và mờ đi. Click vào thì bắt đầu một phiên tập trung, đèn giữ sáng và hiện bộ đếm ngược có nút pause và reset. Prompt anh gõ, kèm file video MP4 đính kèm, như trên màn hình:

Build a small interactive focus-timer UI around the lamp, matching the Mark bunny illustration style. When I hover over the lamp, have it perk up and switch on with a soft, warm glow; when I move away, have it gently settle and dim. Clicking it should start a focus session, keep the lamp lit, and reveal a countdown with pause and reset controls.

Và xem này, đây là kết quả (demo trong video đăng ngày 06/10/2026): "Hover to wake me, click to start focusing". Theo Lukas, đó đúng là model đã có trong Blender, nhưng giờ mang phong cách minh hoạ kia, và tất cả được dựng bằng Rive. Anh click vào thì có một bộ hẹn giờ nhỏ, và anh pause được. Lúc pause, chiếc đèn như đang ngủ. Anh bấm play lại thì đèn mở ra. Anh nói đây chỉ là một ví dụ nhỏ, nhanh, dựa trên bài đăng kia.

Bước tiếp theo, theo Lukas (video đăng ngày 06/10/2026), là dùng Blender, Rive và Opus 5.5 để làm những video sản phẩm hay ho như video anh cho xem. Nếu muốn anh làm một video về chủ đề đó, hãy để lại bình luận. Anh kết thúc phần hướng dẫn, mời mọi người để lại bình luận hoặc câu hỏi, cảm ơn mọi người đã xem và hẹn gặp lại.