AeroStart

A modern, customizable browser start page with elegant search experience and personalized settings.

✨ Features

• 🎨 Multi-Theme Support - 8 preset theme colors to choose from
• 🖼️ Custom Wallpapers - Support for image and video backgrounds with multiple fit modes
• 🔍 Multiple Search Engines - Built-in Google, Baidu, Bing, DuckDuckGo, Bilibili
• ⏰ Real-time Clock - Support for 12/24 hour format with optional seconds display
• 🎭 Dynamic Blur - Background automatically blurs during search for enhanced focus
• 💾 Local Storage - All settings automatically saved to browser local storage
• 📱 Responsive Design - Perfect adaptation to all screen sizes
• 🎬 Smooth Animations - Carefully designed transitions and interactive animations

🚀 Quick Start

Deploy to Vercel

Click the button above to deploy your own instance of AeroStart to Vercel in minutes.

Local Development

Prerequisites: Node.js 16+

Install Dependencies

pnpm install
# or
npm install

Run Development Server

pnpm dev
# or
npm run dev

Visit http://localhost:3000 to view the application.

Build for Production

pnpm build
# or
npm run build

🎯 Usage Guide

Search Functionality

• Enter keywords in the search box and press Enter to search
• Click the icon on the left side of the search box to switch search engines
• Background automatically blurs during search to enhance focus

Settings Panel

• Right-click the background to enter Dashboard mode
• Click the settings icon in the top right corner to open the settings panel
• Customizable options:
  • Clock format (12/24 hour)
  • Background wallpaper (preset or custom URL)
  • Theme color
  • Search box opacity
  • Background blur intensity

Wallpaper Settings

• Support for image and video backgrounds
• 5 fit modes: Cover, Contain, Fill, Center, Repeat
• Add custom wallpaper URLs

🛠️ Tech Stack

• Framework: React 19
• Build Tool: Vite 6
• Language: TypeScript
• Styling: Tailwind CSS

📁 Project Structure

AeroStart/
├── components/          # React components
│   ├── Clock.tsx       # Clock component
│   ├── SearchBox.tsx   # Search box component
│   ├── SettingsModal.tsx # Settings panel
│   └── ...
├── utils/              # Utility functions
├── context/            # React Context
├── constants.ts        # Constants configuration
├── types.ts           # TypeScript type definitions
├── App.tsx            # Main application component
└── index.tsx          # Application entry point

🎨 Customization

Add Search Engine

Edit the SEARCH_ENGINES array in constants.ts:

{
  name: 'Engine Name',
  urlPattern: 'https://example.com/search?q=',
  icon: 'SVG icon string'
}

Add Theme Color

Edit the THEMES array in constants.ts:

{ name: 'Theme Name', hex: '#colorcode' }

📄 License

MIT License

🤝 Contributing

Issues and Pull Requests are welcome!