Sora Tech Voxel Logo & 3D CRT Simulation
Thử nghiệm các công nghệ đồ họa tương tác (Interactive Web Graphics) của Soratech. Bao gồm bản giả lập phần cứng 3D hoài cổ (Three.js/WebGL) và hiệu ứng chuyển động logo phẳng siêu nhẹ (2D SVG).
3D WebGL1. Giả lập 3D CRT Monitor & Voxel Logo
Sử dụng: Three.js, R3F, Custom Shaders2D SVG2. Hiệu ứng tản mác Pixel phẳng (Flat Web Animations)
Sử dụng: Inline SVG & Web Animations API⚡ Cơ chế hoạt động
- 3D CRT Simulation: Giả lập màn hình bóng đèn hình cong bằng custom shader (bẻ góc màn hình, tạo đường chạy scanlines, hiệu ứng bloom/glow). Logo 3D xoay và bám tọa độ di chuột, tương tác mở khóa bằng thanh trượt.
- 2D Pixel Shatter: Click vào logo để kích hoạt lực đẩy từ tâm khiến các hạt pixel bay tản mác và rơi tự do theo trọng lực ảo. Logo tự động phục hồi sau 6 giây.
💡 Ứng dụng thực tế
Các giải pháp đồ họa tương tác giúp tối ưu nhận diện thương hiệu của doanh nghiệp:
- WebGL 3D: Thích hợp cho trải nghiệm landing page nghệ thuật cao, gây ấn tượng sâu sắc (wow factor) cho người dùng desktop.
- 2D SVG: Thích hợp thay thế logo tĩnh truyền thống trên Header, chạy mượt mà 60 FPS trên 100% dòng điện thoại mà không làm nóng máy hay hao pin.