semih

Một lưới bảng phân cảnh (storyboard grid) 3×3 tỷ lệ [ratio] gọn gàng gồm chín khung hình có kích thước tỷ lệ [ratio] bằng nhau trên khung tổng thể tỷ lệ [4:5]. 

Sử dụng hình ảnh tham chiếu làm chuẩn gốc cho sản phẩm. Giữ nguyên hoàn toàn cùng một sản phẩm, thiết kế bao bì, nhận diện thương hiệu, chất liệu, màu sắc, tỷ lệ kích thước và tổng thể bản sắc xuyên suốt cả chín khung hình giống hệt như ảnh tham chiếu. Sản phẩm phải luôn được nhận diện rõ ràng trong mọi khung hình. Nhãn dán, logo và tỷ lệ hình khối phải giữ nguyên tuyệt đối.

Bảng phân cảnh này là một bản trình bày mockup thiết kế cao cấp dành cho hồ sơ năng lực thương hiệu (branding portfolio). Trọng tâm đặt vào hình khối, bố cục, tính chất vật liệu và nhịp điệu thị giác thay vì đi theo hướng tả thực đời thường hay kể chuyện lối sống. Tổng thể hình ảnh cần mang lại cảm giác được tuyển chọn kỹ lưỡng, đậm chất tạp chí nghệ thuật (editorial) và lấy thiết kế làm trung tâm.

KHUNG HÌNH 1 (FRAME 1):
Góc chụp chính diện chủ đạo (hero shot) của sản phẩm trong bối cảnh phòng chụp studio gọn gàng. Phông nền trung tính, bố cục cân đối, cách trình bày sản phẩm điềm tĩnh và đầy tự tin.

KHUNG HÌNH 2 (FRAME 2):
Góc chụp cận cảnh với tiêu điểm lấy nét tập trung vào phần chính giữa của sản phẩm. Đi sâu làm nổi bật kết cấu bề mặt, chất liệu vật liệu và các chi tiết in ấn sắc nét.

KHUNG HÌNH 3 (FRAME 3):
Hiển thị sản phẩm tham chiếu được đặt trong một môi trường tự nhiên ăn nhập hoàn hảo với tinh thần thương hiệu và danh mục sản phẩm. Bối cảnh studio được lấy cảm hứng từ chính các yếu tố thiết kế và bảng màu của sản phẩm. 

KHUNG HÌNH 4 (FRAME 4):
Sản phẩm được thể hiện trong trạng thái đang sử dụng hoặc có sự tương tác trên phông nền studio trung tính. Bàn tay và các yếu tố tương tác được tiết chế tối giản và chừng mực, tổng thể diện mạo đồng điệu với phong cách của bao bì. 

KHUNG HÌNH 5 (FRAME 5):
Bố cục trục đo (isometric composition) hiển thị nhiều sản phẩm được sắp xếp theo một trật tự hình học chuẩn xác nhìn từ góc isometric phía trên xuống. Tất cả các sản phẩm đều được đặt ở cùng một góc nghiêng isometric từ trên cao, cách đều nhau, gọn gàng, có cấu trúc chặt chẽ và giàu tính đồ họa.

KHUNG HÌNH 6 (FRAME 6):
Sản phẩm bay lơ lửng hơi nghiêng nhẹ trên một phông nền trung tính tiệp với bảng màu của hình ảnh tham chiếu. Tư thế lơ lửng có góc nghiêng đầy chủ đích, sản phẩm trôi nổi tự nhiên trong không gian.

KHUNG HÌNH 7 (FRAME 7):
Là một góc chụp siêu cận cảnh (extreme close-up) tập trung vào một chi tiết cụ thể của nhãn dán, đường viền cạnh, kết cấu bề mặt hoặc phản ứng ánh sáng của vật liệu.

KHUNG HÌNH 8 (FRAME 8):
Sản phẩm được đặt trong một bối cảnh bất ngờ nhưng cực kỳ ấn tượng về mặt thẩm mỹ, mang lại cảm giác táo bạo, đậm chất nghệ thuật tạp chí (editorial) và cuốn hút thị giác mạnh mẽ.
Bối cảnh độc đáo nhưng được cách điệu hóa cao độ. Dàn dựng trong studio và dẫn dắt bởi tư duy thiết kế. Bố cục táo bạo giúp nâng tầm giá trị thương hiệu.

KHUNG HÌNH 9 (FRAME 9):
Bố cục góc rộng hiển thị sản phẩm đang trong quá trình sử dụng, được đặt trong một không gian bài trí tinh tế của nhà thiết kế. Đạo cụ gọn gàng, tạo hình có kiểm soát, thống nhất hài hòa với toàn bộ các khung hình còn lại trong chuỗi.

MÁY ẢNH & PHONG CÁCH:
Hình ảnh studio chất lượng siêu cao mang vẻ đẹp chân thực của ống kính máy ảnh quang học. Đa dạng góc máy và cách cắt khung hình qua từng ô. Kiểm soát tốt độ sâu trường ảnh, ánh sáng chuẩn xác, tái tạo vật liệu và phản xạ chân thực. Logic chiếu sáng, bảng màu, tâm trạng (mood) và ngôn ngữ thị giác phải duy trì tính nhất quán xuyên suốt cả chín khung hình như một bộ ảnh nghệ thuật thống nhất.

ĐẦU RA:
Một lưới 3×3 gọn gàng không có đường viền ngăn cách, không có chữ viết, không có chú thích và không có hình mờ (watermarks).

Cảnh Đếm ngược Tối giản (Minimal Countdown Scene):
Đếm ngược từ 3 → 2 → 1 bằng một phông chữ hiện đại, gọn gàng.
Áp dụng hiệu ứng chuyển màu từ trái sang phải với các dải màu nền chuyển sắc (gradients) tinh tế.
Giữ thiết kế theo phong cách tối giản — chuyển đổi màu phông chữ và màu nền một cách mượt mà giữa các nhịp đếm.

Bắt đầu với phông nền trắng tinh khiết,
Sau đó chuyển nhanh sang các tông màu sống động, thanh lịch: vàng, hồng, xanh dương, cam — các bước chuyển màu nhanh, tràn đầy năng lượng để đẩy cao sự hào hứng.

Sau nhịp đếm ngược, hiển thị chữ
“Introducing”
Bằng phông chữ đơn cách (monospace font) với hiệu ứng hoạt ảnh chữ mượt mà, sắc sảo.

Cảnh Tiếp theo:
Đặt logo của Mitte.ai và Remotion ở chính giữa trên phông nền trắng.
Đặt hai logo nằm cạnh nhau — Mitte.ai ở bên trái, Remotion ở bên phải.

Đầu tiên, cho cả hai logo hiện rõ dần lên (fade in).
Sau đó, chạy hoạt ảnh vẽ một đường kẻ thẳng đứng từ dưới lên trên nằm ở chính giữa ngăn cách hai logo.

Khoảnh khắc Cuối cùng:
Từ từ phóng to (zoom in) vào khu vực cụm logo trong khi liên tục chuyển đổi màu sắc phông nền
Với các hiệu ứng chuyển tiếp quét từ trái sang phải và từ phải sang trái trong một chuyển động mang tính chúc mừng.

Phong cách Tổng thể:
Tinh thần công ty khởi nghiệp công nghệ (Startup vibes) — thanh lịch, sáng tạo, hiện đại và đầy tự tin.

Một biểu tượng ứng dụng iOS cao cấp dành cho ứng dụng chạy bộ và thể hình, nổi bật với 
hình tượng người chạy bộ trừu tượng cách điệu đang chuyển động, được tạo thành từ những dải ruy băng 
chuyển màu uyển chuyển mang sắc cam san hô tràn đầy năng lượng chuyển dần sang màu hồng sẫm (magenta) 
rực rỡ. Hình tượng gợi lên tốc độ và đà lao về phía trước với 
các vệt chuyển động kéo theo phía sau. Phông nền là màu xanh hải quân (navy blue) thẫm với 
hiệu ứng chuyển màu tỏa tròn (radial gradient) sáng hơn một cách tinh tế ở phía sau nhân vật. Năng động, 
tràn đầy sinh lực, truyền cảm hứng chinh phục. Ánh sáng dịu nhẹ kèm quầng sáng tỏa nhẹ (glow) tinh tế bao quanh 
nhân vật. Định dạng hình vuông bo góc, kích thước 1024x1024px.

hãy tuân thủ các thông số kỹ thuật dưới đây và các mẫu thiết kế biểu tượng ví dụ được đính kèm:

Các thông số kỹ thuật này định nghĩa ngôn ngữ thị giác của những biểu tượng ứng dụng hiện đại, cao cấp như thường thấy trên các ứng dụng iOS/macOS hàng đầu. Mục tiêu là tạo ra những biểu tượng mang cảm giác trau chuốt, dễ nhớ và xứng tầm với một sản phẩm chủ lực (flagship).

---

## 1. Khung vẽ & Hình dạng (Canvas & Shape)

### Hình dạng Cơ sở
- **Định dạng:** Hình vuông với các góc bo tròn liên tục (hình "squircle" của iOS)
- **Bán kính Góc bo:** Khoảng 22-24% chiều rộng biểu tượng (mô phỏng đường cong superellipse của Apple)
- **Tỷ lệ Khung hình:** 1:1
- **Độ phân giải Khuyến nghị:** 1024×1024px (thu nhỏ xuống các kích thước bé rất sắc nét)

### Vùng An toàn (Safe Zone)
- Giữ các yếu tố chính nằm gọn trong 80% vùng trung tâm của khung vẽ
- Cho phép các hiệu ứng tinh tế (quầng sáng, bóng đổ) tiến sát ra viền nhưng không bị cắt cụt (clip)

---

## 2. Xử lý Phông nền (Background Treatments)

### Nền Đơn sắc (Solid Backgrounds)
- **Tối/Đen:** Đen thuần khiết (#000000) đến xám than đậm (#1C1C1E) — tạo chiều sâu kịch tính, làm nổi bật các chi tiết bên trên
- **Đơn sắc Rực rỡ:** Đổ màu đơn có độ bão hòa cao (xanh dương điện tử #007AFF, cam ấm #FF9500)
- **Nền Chuyển màu (Gradient):** Chuyển màu tinh tế từ trên xuống dưới hoặc tỏa tròn từ tâm giúp tăng chiều sâu

### Các Loại Gradient (khi sử dụng)
| Loại | Mô tả | Ví dụ |
|------|-------------|---------|
| Tuyến tính (Linear) | Chuyển màu mềm mại, thường sáng hơn ở phía trên | Gradient bầu trời xanh |
| Tỏa tròn (Radial) | Hiệu ứng phát sáng ở tâm, tối dần ra các cạnh | Hiệu ứng đèn rọi (Spotlight) |
| Theo góc (Angular) | Chuyển màu quét xoay vòng | Bề mặt ánh xà cừ (Iridescent) |

### Kết cấu Bề mặt (Tinh tế)
- Các đường kẻ dọc/ngang mảnh mịn tạo cảm giác kim loại hoặc sợi vải
- Hạt nhiễu (noise grain) ở độ mờ 1-3% tạo sự ấm áp tự nhiên
- Tránh các kết cấu quá nặng nề làm cạnh tranh sự chú ý với biểu tượng chính

---

## 3. Bảng màu (Color Palette)

### Đặc điểm Bảng màu Chính
- **Độ bão hòa Cao:** Màu sắc sống động nhưng không chói gắt kiểu đèn neon
- **Tông Tối Giàu Chiều sâu:** Màu đen và xanh hải quân đóng vai trò nổi bật
- **Điểm Sáng Chọn lọc:** Các màu nhấn (accent colors) được sử dụng tiết chế để tạo điểm nhấn thị giác mạnh

### Các Họ Màu Khuyến nghị

#### Phổ Màu Lạnh (Cool Spectrum)
```
Navy/Deep Blue:    #0A1628, #1A2744, #2D4A7C
Electric Blue:     #007AFF, #5AC8FA, #64D2FF
Purple/Violet:     #5E5CE6, #BF5AF2, #AF52DE
Teal/Cyan:         #30D5C8, #5AC8FA, #32ADE6
```

#### Phổ Màu Ấm (Warm Spectrum)
```
Orange:            #FF9500, #FF6B35, #FF3B30
Pink/Coral:        #FF6B8A, #FF2D55, #FF375F
Peach/Salmon:      #FFACA8, #FF8A80, #FFB199
```

#### Màu Trung tính (Neutrals)
```
True Black:        #000000
Soft Black:        #1C1C1E, #2C2C2E
White:             #FFFFFF
Off-White:         #F5F5F7, #E5E5EA
```

### Quy tắc Hòa sắc (Color Harmony Rules)
- Giới hạn từ 2-3 màu chủ đạo trên mỗi biểu tượng
- Sử dụng mối quan hệ màu bổ túc (complementary) hoặc tương đồng (analogous)
- Một màu nên chiếm ưu thế chủ đạo (60%), màu phụ (30%), màu nhấn (10%)

---

## 4. Ánh sáng & Chiều sâu (Lighting & Depth)

### Nguồn sáng
- **Vị trí:** Phía trên bên trái hoặc chiếu thẳng từ đỉnh xuống (nhất quán ở góc 45°)
- **Chất lượng:** Mềm mại, khuếch tán — không có bóng đổ sắc gắt
- **Tạo ra:** Những mảng bắt sáng tinh tế ở bề mặt phía trên, bóng đổ dịu ở phía dưới

### Kỹ thuật Tạo Chiều sâu

#### Vùng sáng (Highlights)
- Dải chuyển màu trắng/sáng dịu trên các cạnh đỉnh của hình khối 3D
- Phản xạ gương (Specular reflections) dưới dạng các đốm sáng nhỏ (không lấn át tổng thể)
- Ánh sáng viền (Rim lighting) trên các cạnh hướng về phía nguồn sáng

#### Bóng đổ (Shadows)
- **Bóng đổ ngoài (Drop Shadows):** Mềm, khuếch tán, độ mờ 10-20%, lệch nhẹ theo trục Y
- **Bóng đổ trong (Inner Shadows):** Rất tinh tế, tạo hiệu ứng lõm sâu xuống
- **Bóng tiếp xúc (Contact Shadows):** Bóng tối hơn, thu hẹp sát ngay bên dưới vật thể

#### Phân lớp (Layering)
- Các phần tử nên có cảm giác như đang lơ lửng phía trên phông nền
- Sử dụng phối cảnh khí quyển (các phần tử ở xa hơi mờ sương hơn một chút)
- Các hình khối xếp chồng lên nhau tạo ra sự phân cấp tự nhiên

---

## 5. Ký hiệu & Hệ thống Hình tượng (Symbol & Iconography)

### Các Hướng Tiếp cận Phong cách

#### A. Vật thể Không gian Ba chiều / 3D (Dimensional/3D Objects)
- Hình khối bo tròn, mềm mại với thể tích rõ ràng
- Dải chuyển màu tinh tế gợi lên độ cong bề mặt
- Ví dụ: Máy bay giấy, cuốn sách đang mở, các khối cầu

#### B. Thiết kế Phẳng có Gợi ý Chiều sâu (Flat with Depth Cues)
- Các hình dạng đơn giản hóa kết hợp đổ bóng / bắt sáng có tính toán chiến lược
- Hình học gọn gàng với dải chuyển màu nhẹ
- Ví dụ: Biểu tượng ngọn lửa, mặt la bàn

#### C. Trừu tượng / Hình học (Abstract/Geometric)
- Các hình khối bán trong suốt xếp chồng lên nhau
- Các hình thái đan cài vào nhau tạo sự thú vị về thị giác
- Ví dụ: Các hình thoi chồng lớp, bố cục hình tam giác

#### D. Hiệu ứng Kính mờ / Bán trong suốt (Glassmorphic/Translucent)
- Hiệu ứng kính mờ (frosted glass) có làm nhòe hậu cảnh
- Các hình khối mang cảm giác xuyên thấu
- Khúc xạ tinh tế và hiệu ứng loang màu nhẹ

### Đặc tính của Ký hiệu
- **Sự đơn giản:** Có thể nhận diện rõ ràng ngay cả ở kích thước nhỏ 16×16px
- **Sự cân bằng:** Trọng lượng thị giác đặt ở tâm hoặc tạo thế năng động có chủ đích
- **Tính độc đáo:** Tránh cảm giác giống những hình mẫu clip-art đại trà
- **Tính ẩn dụ:** Ký hiệu liên hệ rõ ràng tới chức năng của ứng dụng

### Tỷ lệ Kích thước Ký hiệu Khuyến nghị
- Ký hiệu chính: chiếm 50-70% khung vẽ biểu tượng
- Chừa khoảng thở (breathing room) thoáng đãng xung quanh các cạnh
- Căn giữa theo thị giác (optical centering — có thể hơi khác so với tâm toán học thuần túy)

---

## 6. Chất liệu & Đặc tính Bề mặt (Material & Surface Qualities)

### Bề mặt Lì (Matte Surfaces)
- Chuyển màu dịu nhẹ không có các điểm lóe sáng sắc cạnh
- Có thể điểm xuyết kết cấu hạt rất nhẹ
- Màu sắc trông đặc, đằm và vững chãi

### Bề mặt Bóng / Phản chiếu (Glossy/Reflective Surfaces)
- Các vùng bắt sáng và phản chiếu rõ nét
- Tăng độ tương phản giữa vùng sáng và vùng tối
- Gợi liên tưởng đến thủy tinh, nhựa bóng hoặc kim loại đánh bóng

### Bề mặt Kim loại (Metallic Surfaces)
- Gradient tuyến tính hoặc tỏa tròn mô phỏng ánh kim
- Tông màu lạnh cho bạc/crôm, tông ấm cho vàng/đồng
- Các đường vân xước mảnh tùy chọn

### Thủy tinh / Bán trong suốt (Glass/Translucent)
- Giảm độ đục (opacity ở mức 60-85%)
- Hiệu ứng làm mờ (blur) trên các phần tử nằm phía sau
- Ám màu nhẹ kèm theo các cạnh viền sáng
- Quầng sáng nội bên trong (inner glow) tinh tế

### Giấy / Vải (Paper/Fabric)
- Màu sắc dịu nhẹ, trầm ấm
- Kết cấu bề mặt cực kỳ tinh tế
- Bóng đổ nhẹ nhàng gợi lên độ mềm dẻo, uốn lượn

---

## 7. Hiệu ứng & Độ hoàn thiện (Effects & Polish)

### Hiệu ứng Phát sáng (Glow Effects)
- **Phát sáng ngoài (Outer Glow):** Quầng sáng dịu bao quanh các phần tử sáng, độ mờ 5-15%
- **Phát sáng trong (Inner Glow):** Ánh sáng viền tinh tế bên trong, tạo cảm giác có thể tích khối
- **Phát sáng màu (Color Glow):** Quầng sáng nhuốm màu trùng với màu của phần tử (tạo bầu không khí)

### Phản chiếu (Reflections)
- Bóng phản chiếu mặt sàn tinh tế ngay bên dưới các vật thể đang lơ lửng (rất mờ)
- Phản chiếu môi trường trên các bề mặt bóng loáng
- Các đốm sáng phản xạ gương gợi mở vị trí nguồn sáng

### Chuyển màu Bên trong Hình khối (Gradients Within Shapes)
- Gradient đa điểm dừng (multi-stop) cho các dải chuyển màu phức tạp
- Gradient tỏa tròn để tạo vẻ ngoài hình cầu
- Gradient lưới (Mesh gradients) cho sự pha trộn màu sắc uyển chuyển, tự nhiên

### Làm mờ & Độ sâu Trường ảnh (Blur & Depth of Field)
- Làm mờ hậu cảnh cho các bố cục phân lớp
- Làm mờ Gaussian (Gaussian blur) ở mức 5-20px để tạo hiệu ứng chiều sâu không gian
- Chỉ sử dụng làm mờ chuyển động (motion blur) nếu muốn gợi tả tốc độ di chuyển

---

## 8. Nguyên tắc Bố cục (Composition Principles)

### Cân bằng Thị giác
- **Đặt giữa tâm (Centered):** Ký hiệu nằm ở tâm thị giác (cổ điển, vững vàng)
- **Năng động (Dynamic):** Độ lệch nhẹ khỏi tâm tạo ra năng lượng và sự chuyển động
- **Bất đối xứng (Asymmetric):** Sự mất cân bằng có chủ đích nhưng có đối trọng thị giác bù lại

### Không gian Âm (Negative Space)
- Khoảng trống / khoảng thở rộng rãi
- Phông nền là một phần của thiết kế, chứ không chỉ là chỗ trống vô nghĩa
- Không gian âm có thể khéo léo tạo thành các hình khối phụ thứ cấp

### Tiêu điểm (Focal Point)
- Một khu vực rõ ràng có độ tương phản / độ chi tiết cao nhất
- Ánh mắt người xem phải chạm vào phần tử quan trọng nhất đầu tiên
- Các phần tử bổ trợ lùi lại phía sau về mặt thị giác

### Tương phản Tỷ lệ (Scale Contrast)
- Sự kết hợp giữa các phần tử lớn và nhỏ tạo nên sự thú vị
- Ký hiệu chính chiếm ưu thế áp đảo, các chi tiết phụ giữ ở mức tinh tế
- Tránh làm rối mắt bằng việc đặt nhiều phần tử có kích thước ngang bằng nhau

---

## 9. Các Biến thể Phong cách (Style Variations)

### Tối giản Nền tối (Minimal Dark)
- Phông nền màu đen hoặc rất tối
- Một phần tử sáng duy nhất hoặc ký hiệu đơn sắc
- Độ tương phản cao, cảm giác ấn tượng giàu kịch tính
- Ví dụ: Biểu tượng ngọn lửa, biểu đồ chứng khoán

### Gradient Rực rỡ (Vibrant Gradient)
- Phông nền chuyển màu đa sắc
- Ký hiệu màu trắng hoặc sáng màu đặt nổi lên trên
- Cảm giác tràn đầy năng lượng, hiện đại
- Ví dụ: Telegram, ứng dụng Sách (Books)

### Dịu nhẹ & Tươi sáng (Soft & Light)
- Phông nền sáng sủa, thoáng đãng (màu trắng, màu phấn pastel)
- Các ký hiệu nhiều màu sắc đi kèm bóng đổ mềm mại
- Cảm giác thân thiện, dễ gần
- Ví dụ: Ứng dụng đo độ cao Altitude, các biểu tượng cử chỉ

### Kính mờ (Glassmorphic)
- Các phần tử bán trong suốt, phủ sương mờ
- Các hình khối xếp lớp với độ đục trong khác nhau
- Cảm giác đương đại, tinh xảo
- Ví dụ: Biểu tượng Phím tắt (Shortcuts), các hình khối giao nhau

### Kết xuất 3D (3D Rendered)
- Các vật thể 3D chân thực
- Hệ thống ánh sáng và chất liệu phức tạp
- Cảm giác cao cấp, sống động như có thể chạm vào được
- Ví dụ: Khối cầu, máy bay, cuốn sách