Đây là một dự án phức tạp với nhiều cảnh và nhân vật. Tôi sẽ vào chế độ lên kế hoạch để tạo một plan chi tiết cho bạn duyệt trước khi bắt đầu xây dựng.

Tôi đã hiểu rõ kịch bản và cấu trúc dự án. Đây là một dự án Next.js với shadcn/ui. Bây giờ tôi sẽ tạo kế hoạch chi tiết cho Web Animation Player.

Tuyệt vời! Tôi đã hiểu rõ kế hoạch và kịch bản. Bây giờ tôi sẽ bắt đầu xây dựng Web Animation Player. Đầu tiên, tôi cần tạo todo list và thiết lập design inspiration.

Tôi đã có đầy đủ thông tin. Bây giờ tôi sẽ bắt đầu xây dựng Web Animation Player với phong cách "điêu khắc cát" - tông màu ấm áp (be, nâu, cam). Hãy bắt đầu với việc cập nhật globals.css và tạo các components.

Bây giờ tôi sẽ tạo các components cho Animation Player. Bắt đầu với data definition và các nhân vật:

Now let me create the props (pan, clock) and then the backgrounds:

Now let's create the backgrounds:

Now let's create the main animation player and scene renderer components:

Now let's create the main page:

Now let's update the layout with proper metadata:

I've already completed most of the tasks. Let me mark progress and finish the remaining polish:

Let me add some additional effects for better polish - a smoke trail effect and some HocSinh (student) components for the classroom scene:

Toi da hoan thanh xay dung Web Animation Player cho video hoat hinh "Con Ac Mong Truoc Gio Hoc" (4 phut). Day la mot ung dung web hoan chinh bao gom:

Cac thanh phan chinh:

• Animation Player voi controls day du: Play/Pause, Restart, Timeline scrubber, Scene selector, Speed control (0.5x - 2x), Fullscreen mode
• 6 nhan vat SVG theo phong cach "dieu khac cat": Nam, Hung, Me Nam, Ba Cu, Thay Suu, Thay Bao Ve
• 6 backgrounds cho cac canh: Phong ngu, Nha ve sinh, Duong pho, Cong truong, Lop hoc, San truong
• Props (dong ho bao thuc, chao bay) voi animation rieng
• 7 scenes voi animation va dialogue bubbles tuong ung voi kich ban

Tinh nang:

• Responsive design (hoat dong tot tren mobile va desktop)
• Timeline cho phep nhay den bat ky thoi diem nao trong 4 phut
• Dialogue bubbles hien thi loi thoai theo thoi gian
• Cac hieu ung animation: chay, bay, rung, glow (ma ba cu), va nhieu hieu ung khac