# 🎬 DTTube — Animated Splash Screen Specification

Apply the frontend-design skill.

---

## 📖 System Reference

Read `general.md` completely before implementation.

Follow:

- Tailwind design system
- Component architecture
- Redux/theme rules
- Branding system

---

## 🎯 Goal

Build a premium animated splash screen for DTTube web app.

The splash screen should feel modern, cinematic, smooth, and similar to:

- YouTube
- Netflix
- Spotify
- OTT streaming platforms

---

## 📁 File Structure

```text
src/components/splash/
  ├── SplashScreen.tsx
  ├── SplashLogo.tsx
  ├── SplashBackground.tsx
  ├── SplashLoader.tsx
```

---

## 🧩 Splash Screen Layout

### Center Content

- Animated app logo
- App name: DTTube
- Tagline (optional)

### Background

- Gradient background
- Animated glow/light effect
- Soft particles or pulse effect

### Bottom Area

- Animated loading indicator

---

## 🎨 Visual Style

### Theme

- Dark cinematic background
- Premium glow effects
- Smooth transitions

### Colors

Use theme tokens only from:

```ts
@/branding
```

Do NOT hardcode colors.

---

## ✨ Animation Requirements

### Logo Animation

- Scale in
- Fade in
- Slight floating effect

### Background Animation

- Animated gradient
- Blur glow movement
- Soft pulse effect

### Loader Animation

- Progress bar OR spinner
- Smooth infinite animation

---

## ⚙️ Animation Library

Use:

```bash
npm install framer-motion
```

Use:

```tsx
motion.div;
AnimatePresence;
```

---

## 🧠 Responsive Rules

Must work on:

- Mobile
- Tablet
- Desktop

Center content perfectly on all screens.

---

## 🌙 Theme Support

Support:

- Dark mode
- Light mode

Use Redux theme state if available.

---

## 🌍 Branding Rules

Use:

```ts
import { TEXT, IMAGES, CONFIG } from "@/branding";
```

- No hardcoded logo
- No hardcoded app name
- No hardcoded assets

---

## 🎬 Animation Flow

### On App Start

1. Background fades in
2. Logo scales up
3. Glow pulse starts
4. Loader animates
5. Transition to home page

---

## ⏱ Timing

### Recommended

- Total splash duration: 2–4 seconds
- Smooth easing
- No sudden transitions

---

## 🚀 Navigation

After animation complete:

```ts
router.replace("/");
```

---

## ⚠️ Performance Rules

- Avoid heavy animations
- GPU-friendly transforms only
- Use opacity + transform animations
- No layout thrashing

---

## 🚫 Strict Rules

- No inline styles
- No CSS libraries
- No random animations
- No hardcoded values

---

## ✅ Expected Output

Generate:

- Beautiful animated splash screen
- Modular reusable components
- Framer Motion animations
- Production-ready code

---

## 🔥 Bonus (Optional)

- Sound wave animation
- Video intro background
- Dynamic loading progress
- Logo morph animation

---

🔥 Generate premium OTT-style splash experience
