https://github.com/aeryflux/lumos
Modern landing page with 3D globe visualization - AeryFlux showcase
https://github.com/aeryflux/lumos
3d-globe 3d-visualization landing-page react threejs typescript vite
Last synced: 3 months ago
JSON representation
Modern landing page with 3D globe visualization - AeryFlux showcase
- Host: GitHub
- URL: https://github.com/aeryflux/lumos
- Owner: aeryflux
- License: mit
- Created: 2026-03-03T17:00:32.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-03-30T15:57:17.000Z (3 months ago)
- Last Synced: 2026-03-30T17:40:34.703Z (3 months ago)
- Topics: 3d-globe, 3d-visualization, landing-page, react, threejs, typescript, vite
- Language: TypeScript
- Homepage: https://aeryflux.com
- Size: 31.5 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Lumos
[](https://github.com/aeryflux/lumos/actions/workflows/deploy.yml)
**Live**: [aeryflux.com](https://aeryflux.com)
Modern landing page with 3D globe visualization.
## Features
- Interactive 3D globe with real-time data visualization (422 countries, 200 cities)
- Minimalist dark theme inspired by OpenClaw
- SmartInput with Kaspersky-style aura effect
- Multi-mode search: News, Wiki, Weather, Economy, Sports
- Internationalization (EN, FR, ES, DE)
- HexLoader honeycomb animation
- Responsive design
## Quick Start
```bash
# Clone
git clone https://github.com/aeryflux/lumos.git
cd lumos
# Install
npm install
# Development
npm run dev
```
Open http://localhost:3001
## Tech Stack
- **Framework**: React 19
- **Build**: Vite 5
- **3D**: Three.js
- **Styling**: Tailwind CSS
- **Testing**: Vitest + Playwright
## Project Structure
```
lumos/
├── src/
│ ├── components/ # React components
│ │ ├── SmartInput.tsx
│ │ ├── HexLoader.tsx
│ │ └── ...
│ ├── pages/ # Page components
│ ├── services/ # API services
│ └── App.tsx
├── public/ # Static assets
├── tests/ # E2E tests
└── index.html
```
## Components
### Globe
Interactive 3D globe via [@aeryflux/globe](https://www.npmjs.com/package/@aeryflux/globe).
```tsx
import { Globe } from '@aeryflux/globe/react';
```
### SmartInput
Search input with animated aura effect.
```tsx
handleSearch(query)}
/>
```
### HexLoader
Honeycomb loading animation.
```tsx
```
## Scripts
```bash
npm run dev # Start dev server
npm run build # Build for production
npm run preview # Preview production build
npm run test # Run unit tests
npm run test:e2e # Run E2E tests
```
## Environment
Create `.env` for API configuration:
```env
VITE_API_URL=http://localhost:3000
```
## Design System
### Colors
| Name | Hex |
|------|-----|
| Primary Green | `#00ff88` |
| Cyan | `#00d4ff` |
| Background | `#050508` |
### Mode Colors
| Mode | Color |
|------|-------|
| News | `#ef4444` |
| Weather | `#3b82f6` |
| Wiki | `#888888` |
| Economy | `#10b981` |
| Sports | `#f59e0b` |
### Typography
- Headings: HemiHead
- Body: Inter
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup and guidelines.
See [CHANGELOG.md](CHANGELOG.md) for version history.
## Related Projects
- [geojsonto3D](https://github.com/martinbaud/geojsonto3D) - GeoJSON to 3D globe converter
- [AeryFlux](https://github.com/aeryflux) - Full platform
## License
MIT - see [LICENSE](LICENSE)