Esplora migliaia di film come stelle in una galassia tridimensionale, dove ogni film è connesso attraverso generi, temi e similitudini cinematografiche.
- 5000+ film rappresentati come stelle interattive nello spazio
- Clustering intelligente basato su generi e similitudini cinematografiche
- Navigazione fluida con controlli orbit intuitivi
- Effetti visivi spettacolari con animazioni e transizioni fluide
- Analisi AI delle similitudini tra film con LLM
- Caching intelligente per ottimizzare le performance
- Suggerimenti personalizzati basati sulle connessioni cinematografiche
- Level of Detail (LOD) dinamico che si adatta alle prestazioni
- Frustum Culling per renderizzare solo elementi visibili
- Lazy Loading progressivo dei dati
- 60 FPS target con adattamento automatico della qualità
- Responsive Design per desktop, tablet e mobile
- Touch Controls ottimizzati per dispositivi mobili
- Fullscreen Mode per esperienza immersiva
- Cursore spaziale personalizzato su desktop
- Node.js 18.0 o superiore
- npm o yarn
- Account Vercel (opzionale per deployment)
- API Key OpenAI (opzionale per analisi AI)
- Clona il repository
git clone https://github.com/yourusername/cinema-constellations.git
cd cinema-constellations- Installa le dipendenze
npm install
# o
yarn install- Configura le variabili d'ambiente
cp .env.example .env.localModifica .env.local:
# OpenAI API (opzionale)
OPENAI_API_KEY=sk-...
# Supabase (opzionale per caching)
NEXT_PUBLIC_SUPABASE_URL=https://...
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...- Aggiungi i dati dei film
Inserisci il file movie-data.json nella cartella public/:
[
{
"id": 19995,
"title": "Avatar",
"overview": "Descrizione...",
"genres": ["Azione", "Avventura"],
"poster_path": "https://...",
"x": 4.45,
"y": 7.19,
"z": 4.63,
"cluster_id": 43,
"neighbor_ids": [285, 206647],
"release_year": 2009,
"duration": 162,
"rating": 7.592,
"director": "James Cameron"
}
]- Avvia il server di sviluppo
npm run dev
# o
yarn devApri http://localhost:3000 nel browser.
cinema-constellations/
├── app/
│ ├── api/
│ │ ├── movies/ # API per caricamento film
│ │ └── llm-analysis/ # API analisi AI
│ ├── components/
│ │ ├── StarField.tsx # Campo stellare 3D principale
│ │ ├── Star.tsx # Componente stella/film
│ │ ├── ClusterSphere.tsx # Visualizzazione cluster
│ │ ├── SpaceCursor.tsx # Cursore spaziale custom
│ │ ├── LoadingScreen.tsx # Schermata caricamento
│ │ └── MovieDetailsDialog.tsx # Dettagli film
│ ├── page.tsx # Pagina principale
│ ├── layout.tsx # Layout app
│ └── globals.css # Stili globali
├── lib/
│ ├── movieStore.ts # State management
│ ├── types.ts # TypeScript types
│ ├── utils.ts # Utility functions
│ └── db.ts # Database helpers
├── public/
│ ├── movie-data.json # Dataset film
│ └── Cinema-Avatar.png # Logo app
└── package.json
- 🖱️ Drag sinistro: Orbita attorno all'universo
- 📜 Scroll: Zoom in/out
- 🖱️ Drag destro: Pan della camera
- 🎯 Click su stella: Apri dettagli film
- 🔍 Hover su stella: Mostra titolo
- 👆 Un dito: Ruota camera
- 🤏 Pizzica: Zoom in/out
- 👆👆 Due dita drag: Pan camera
- 📱 Tap su stella: Apri dettagli
Per abilitare il caching delle analisi AI:
- Crea database su Vercel
vercel postgres create cinema-cache- Inizializza tabelle
npm run db:init- Ottieni API key da platform.openai.com
- Aggiungi in
.env.local:
OPENAI_API_KEY=sk-your-keyModifica lib/movieStore.ts:
const colorMap = {
'Azione': '#ff6b6b',
'Commedia': '#ffe66d',
// Aggiungi altri...
}In components/StarField.tsx:
const getMaxStarsToRender = () => {
switch (levelOfDetail) {
case 'low': return 300
case 'medium': return 600
default: return 1000
}
}npm run dev # Avvia server sviluppo
npm run build # Build produzione
npm run start # Avvia produzione
npm run lint # Linting codice
npm run type-check # Verifica TypeScript
npm run db:init # Inizializza database- Installa Vercel CLI
npm i -g vercel- Deploy
vercelFROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]Contribuzioni sono benvenute! Per contribuire:
- Fork il progetto
- Crea un branch (
git checkout -b feature/AmazingFeature) - Commit modifiche (
git commit -m 'Add AmazingFeature') - Push al branch (
git push origin feature/AmazingFeature) - Apri Pull Request
- Segui lo stile di codice esistente
- Aggiungi test per nuove features
- Aggiorna documentazione se necessario
- Assicurati che il build passi
- FPS: 60 (desktop), 30+ (mobile)
- Time to Interactive: < 3s
- Lighthouse Score: 90+
- Bundle Size: < 500KB gzipped
- ✅ Dynamic Level of Detail (LOD)
- ✅ Frustum Culling
- ✅ Lazy Loading
- ✅ Texture Atlasing
- ✅ Instance Rendering
- ✅ Worker Threads per calcoli pesanti
- Riduci numero stelle visibili in
StarField.tsx - Disabilita effetti particelle nelle impostazioni
- Usa Chrome/Edge per migliori performance WebGL
- Verifica che
movie-data.jsonsia inpublic/ - Controlla formato JSON sia valido
- Verifica console per errori
- Verifica API key OpenAI in
.env.local - Controlla limiti rate API
- Sistema ha fallback automatici
Distribuito sotto licenza MIT. Vedi LICENSE per maggiori informazioni.
Your Name 💻 🎨 |
- Three.js - Grafica 3D
- React Three Fiber - React renderer per Three.js
- Next.js - React framework
- Vercel - Hosting e deployment
- OpenAI - API per analisi AI
- Supabase - Database e backend
Made with ❤️ and ☕ in Italy 🇮🇹