Website Animated Chất Lượng $10,000 Trong 30 Phút: Claude Code + Motion + Không Cần Biết Code

TL;DR

Website animated từng tốn $10,000+ và mất vài tuần. Với Claude Code, Motion và Nano Banana Pro, bạn ship được trong 30 phút - không cần biết code. Bài này hướng dẫn từng bước, kèm ba kỹ thuật animation giúp site trông như agency thay vì "AI build."

Vấn Đề $10,000

Những con số rất thực tế với doanh nghiệp nhỏ:

1 trong 4 doanh nghiệp nhỏ ở Mỹ vẫn chưa có website
Phần lớn những doanh nghiệp có website đang dùng template generic trông giống hệt đối thủ cùng ngành
75% người dùng đánh giá uy tín doanh nghiệp dựa trên thiết kế website
Ấn tượng đầu tiên hình thành trong 50 millisecond
Website animated custom từ agency vẫn tốn từ $10,000 trở lên

Khoảng cách giữa "được tin tưởng" và "bị bỏ qua" hoàn toàn nằm ở visual. Giờ khoảng cách đó có thể lấp trong 30 phút với $20/tháng.

Bộ Công Cụ: Ba Thứ Không Cạnh Tranh, Chúng Xếp Chồng

Ba công cụ. Một miễn phí, một miễn phí có giới hạn, một trả phí $20/tháng.

Claude Code - AI coding agent của Anthropic, chạy trong terminal hoặc VS Code sidebar. Đọc project, tự viết và sửa code, chạy test và deploy. Bắt đầu từ Claude Pro ($20/tháng).
Motion - Thư viện animation React open-source, trước đây là Framer Motion. Miễn phí. npm install motion. Phiên bản 12.23+ tương thích React 19, bundle nhỏ tới 2.3 KB với LazyMotion.
Nano Banana Pro - Model tạo ảnh Gemini 3 Pro của Google. Tạo ảnh sản phẩm 4K chất lượng studio, hỗ trợ fusion tới 8 ảnh tham chiếu. Có free tier trên Google AI Studio.

Điểm mấu chốt: Claude Code là não, Motion là cơ bắp, Nano Banana Pro là bộ phận thiết kế. Thiếu một cái là site trông như mọi landing page AI build khác.

Xây Dựng Từng Bước

Bước 1 - Cài Claude Code (5 phút)

Hai cách: cài VS Code + extension Claude Code, hoặc bỏ qua IDE - Claude Code tích hợp sẵn trong Claude desktop app tại claude.ai/download. Cùng agent, ít bước hơn.

Khi đã mở folder project, scaffold bằng:

mkdir animated-site && cd animated-site
npx create-next-app@latest . --typescript --tailwind --app
npm install motion

Claude Code có thể chạy hết những lệnh này cho bạn - dán vào là nó tự dựng project.

Bước 2 - Cài Skills (3 phút)

"Skills" của Claude Code là file Markdown nạp best practice vào agent. Cần hai cái: skill frontend design và skill video-to-website. Cái thứ hai dạy Claude đọc video sản phẩm và chuyển chuyển động thành trải nghiệm scroll-driven.

Thả file .md vào .claude/skills/, rồi nói với Claude: "use the skills in .claude/skills/ for this project."

Bước 3 - Tạo Hero Asset Với Nano Banana Pro (5 phút)

Đây là nơi cảm giác "Apple-tier" đến từ. Tạo hai ảnh sản phẩm - một ở trạng thái bình thường, một ở dạng exploded view hoặc x-ray thấy các linh kiện bên trong. Ví dụ với bàn phím cơ:

Prompt 1: "Studio shot of a low-profile mechanical keyboard in matte black with warm amber keycaps, floating, soft side lighting, charcoal background, 4K product render"

Prompt 2: "Same keyboard but exploded view - keycaps floating up in formation, switches exposed beneath, PCB and aluminum plate separated and suspended, clean technical illustration style, charcoal background"

Nội suy hai ảnh thành video 3 giây bằng Nano Banana Pro hoặc Runway/Kling. Clip đó là thứ Claude Code sẽ đọc tiếp theo.

Bước 4 - Đưa Video Cho Claude Code (2 phút)

Kéo video vào /public/reveal.mp4, rồi dán prompt này:

"Build me a product landing page using the video at /public/reveal.mp4. The video shows a mechanical keyboard opening into an exploded view - keycaps floating up, switches exposed, PCB and plate separated. Use Motion for scroll-driven reveals, follow the video-to-website skill, match Apple's product page layout structure."

Claude đọc video, hiểu arc chuyển động, build trang scroll-linked nơi frame video tiến theo cuộn trang. Copy fade vào theo từng nhịp. Bạn không viết copy, không chọn màu - Claude tự suy ra từ asset.

Ba Chi Tiết Cho Thấy "Đắt Tiền"

Claude đưa bạn tới 90% tự động. 10% còn lại là thứ phân biệt "AI build" với "studio build." Dán prompt này:

"Go through the landing page and upgrade every animation. Use a custom cubic-bezier easing curve [0.22, 1, 0.36, 1] instead of the default ease. For the hero, fade in from 40px below over 0.8s. For feature cards lower on the page, stagger the reveals by 0.1s as they scroll into view. Make it feel like Apple."

Ba thứ xảy ra bên dưới:

1. Easing curve. Easing mặc định cảm giác robot - tốc độ đều, không có tính cách. Custom cubic-bezier làm mọi thứ trượt mượt:

transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}

Bốn con số đó bảo Motion bắt đầu nhanh rồi trượt chậm dần đến điểm dừng. Đây là dấu hiệu rõ nhất phân biệt "vibe-coded" và "studio-built."

2. Entrance. Các element trượt lên vào vị trí thay vì chỉ fade từ không khí:

initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}

3. Stagger. Các card tính năng hiện ra lần lượt khi người dùng cuộn - không phải cùng lúc:

<motion.div
  initial={{ opacity: 0, y: 60 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-100px" }}
  transition={{ duration: 0.6, delay: i * 0.1 }}
>

delay: i * 0.1 nghĩa là mỗi card chờ thêm 0.1s so với card trước. Hiệu ứng stagger reveal đó là thứ các studio tính tiền thật.

Micro-Interaction Và Deploy (5 phút)

Trước khi deploy, thêm micro-interaction làm website có cảm giác sống. Dán prompt này:

"Add micro-interactions across the site. Buttons should scale up slightly on hover and press down on click, with a spring physics feel. Add subtle parallax to the hero so the keyboard image shifts as the user moves their cursor. Then review the entire build, fix any layout bugs on mobile, optimize all images, and prepare it for deploy."

Pattern button mà Claude thêm vào:

<motion.button
  whileHover={{ scale: 1.04 }}
  whileTap={{ scale: 0.97 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
  mua ngay
</motion.button>

whileHover phóng to 4% - sống mà không cartoon. whileTap thu nhỏ 3% - giả lập cảm giác nhấn vật lý. type: "spring" với stiffness: 400, damping: 17 tạo snap cảm giác iOS. Bốn dòng, sự khác biệt giữa trang tĩnh và trang được thiết kế.

Deploy bằng một lệnh:

npx vercel --prod

Tổng thời gian: dưới 30 phút.

Đây Là Mô Hình Kinh Doanh, Không Chỉ Tutorial

Doanh nghiệp nhỏ đang dùng template generic có ở khắp nơi và đang tìm kiếm cách nâng cấp uy tín. Một build 30 phút có thể thu $3,000-$8,000 từ khách hàng - người đó nếu không sẽ trả agency $10,000+ và chờ hai tháng.

Chi phí stack: $20/tháng Claude Pro + Motion miễn phí + Nano Banana Pro free tier. Một project khách hàng đủ trả phí tooling cho nhiều năm. Rào cản kỹ năng giờ là chất lượng prompt, không phải chất lượng code.