From c62e79e4c6264ec910f4a1829a05c94e567bf64e Mon Sep 17 00:00:00 2001 From: Alberto Moretti Date: Thu, 2 Jul 2026 12:55:16 +0200 Subject: [PATCH] docs --- docs/01-stile-visivo-gambling.md | 393 +++++++++++++ docs/02-meccaniche-suspense-reveal.md | 334 +++++++++++ docs/03-interattivita-coinvolgimento.md | 530 ++++++++++++++++++ docs/04-implementazione-vanilla-js.md | 708 ++++++++++++++++++++++++ docs/README.md | 44 ++ 5 files changed, 2009 insertions(+) create mode 100644 docs/01-stile-visivo-gambling.md create mode 100644 docs/02-meccaniche-suspense-reveal.md create mode 100644 docs/03-interattivita-coinvolgimento.md create mode 100644 docs/04-implementazione-vanilla-js.md create mode 100644 docs/README.md diff --git a/docs/01-stile-visivo-gambling.md b/docs/01-stile-visivo-gambling.md new file mode 100644 index 0000000..5190f5c --- /dev/null +++ b/docs/01-stile-visivo-gambling.md @@ -0,0 +1,393 @@ +# Linguaggio visivo del gambling / casino / betting online + +Guida pratica per replicare l'estetica "hyper-gambling" (slot machine, casino online, betting) su web e app. Riferimenti reali e attuali (2023-2026). Ogni sezione include indicazioni concrete direttamente utilizzabili da uno sviluppatore. + +L'obiettivo estetico e' quello di trasmettere **eccitazione, urgenza, lusso e ricompensa immediata**: sfondi scuri, colori neon saturi, oro e metallo, luci lampeggianti, cifre giganti che salgono, effetti di vincita continui. + +--- + +## 1. Palette colori + +Il pattern dominante e' **sfondo scuro + accenti saturi ad alto contrasto**. Il buio fa risaltare i neon, l'oro e i bagliori (il glow neon e' visibile SOLO su fondo scuro). + +### 1.1 Le combinazioni ricorrenti + +| Palette | Colori | Uso / significato | +|---|---|---| +| **Classic Luxury** | Nero, Oro, Argento | Casino high-end, esclusivita', ricchezza | +| **Vibrant / Energetic** | Rosso acceso, Giallo, Verde neon | Aree slot, eccitazione, pubblico giovane | +| **Royal Elegance** | Viola profondo, Oro, Bianco | Lusso, regalita', tavoli VIP | +| **Neon Nightlife** | Neon blue, Hot pink, Electric yellow | Energia notturna, vibe "arcade" | +| **Casino Table** | Verde feltro, Rosso, Oro | Richiamo diretto ai tavoli (roulette, blackjack) | +| **Crypto Dark** | Blu notte / Viola, accenti neon green | Stile Stake / Roobet (vedi sez. 6) | + +### 1.2 Palette pronte all'uso (hex) + +Gli articoli di branding elencano combinazioni ma raramente danno hex. Ecco valori concreti coerenti con lo stile, pronti da incollare come CSS custom properties: + +```css +:root { + /* --- Base scura (sfondi) --- */ + --bg-900: #0a0a12; /* quasi nero, blu-viola */ + --bg-800: #12121f; + --bg-700: #1b1b2e; /* pannelli / card */ + --bg-purple: #1a0b2e; /* variante viola profondo (Roobet-like) */ + + /* --- Oro / metallo --- */ + --gold-500: #ffd700; /* oro puro */ + --gold-600: #f5c518; + --gold-700: #d4af37; /* oro antico */ + --gold-glow: #ffdf6b; + + /* --- Neon --- */ + --neon-green: #39ff14; /* verde neon "vincita" */ + --neon-cyan: #00fff0; + --neon-pink: #ff2e97; /* hot pink */ + --neon-magenta: #ff00e5; + --neon-blue: #2d6bff; + --neon-purple: #b026ff; + + /* --- Rosso / verde casino --- */ + --casino-red: #e21b3c; /* roulette red, urgenza */ + --casino-green: #0f7b3f; /* feltro tavolo */ + --casino-green-felt: #1c7a4d; + + /* --- Testo --- */ + --text: #f5f5fa; + --text-dim: #9aa0b5; +} +``` + +### 1.3 Gradienti caratteristici + +I gradienti sono ovunque: bottoni, jackpot, badge, sfondi. Tre famiglie: + +```css +/* Oro metallico (bottoni "PLAY", jackpot) */ +--grad-gold: linear-gradient(180deg, #fff3b0 0%, #ffd700 40%, #d4af37 60%, #a67c00 100%); + +/* Neon bicolore (CTA arcade, banner) */ +--grad-neon: linear-gradient(135deg, #ff2e97 0%, #b026ff 50%, #2d6bff 100%); + +/* Viola profondo (sfondo hero) */ +--grad-purple-bg: radial-gradient(circle at 50% 0%, #3a1a5e 0%, #1a0b2e 60%, #0a0a12 100%); + +/* Verde vincita */ +--grad-win: linear-gradient(180deg, #7dff5a, #39ff14, #0f9b2e); +``` + +Il gradiente radiale posizionato in alto (`radial-gradient(circle at 50% 0%, ...)`) crea il tipico effetto "riflettore/palcoscenico" dietro l'hero o le slot. + +### 1.4 Psicologia del colore (perche' funziona) + +- **Rosso** = urgenza, eccitazione, fortuna. Usato per CTA, timer, "HOT". +- **Verde** = fortuna, denaro, vincita, feltro del tavolo. Usato per importi vinti, "WIN", saldo positivo. +- **Oro** = ricchezza, premio, esclusivita'. Jackpot, VIP, monete. +- **Viola/Blu profondo** = lusso, mistero, fiducia. Sfondi premium (Roobet, Stake). +- **Neon** = energia, notte, dopamina. Bordi, glow, accenti. + +--- + +## 2. Tipografia + +Lo stile richiede caratteri **grassi, condensati, ad alto impatto** per i titoli, e font **display / LED** per i numeri (jackpot, saldo, timer). Tutti i font sotto sono gratuiti. + +### 2.1 Display / Headline (grassi e condensati) — Google Fonts + +| Font | Caratteristiche | Uso | +|---|---|---| +| **Anton** | Sans grottesco, condensato, ultra-bold, peso unico | Titoli dominanti, "JACKPOT", banner | +| **Bebas Neue** | Condensato alto, elegante, molto diffuso | Headline, etichette, tab | +| **Oswald** | Stretto, 6 pesi (ExtraLight→Bold) | Testi UI densi, header editoriali | +| **Archivo Black** | Sans nero, largo e pesante | CTA, badge | +| **Teko** | Condensato tecnico, moderno | Numeri, contatori, punteggi | +| **Fjalla One** | Display medio-bold | Titoli secondari | +| **Titan One / Luckiest Guy / Bungee** | Chunky, arcade, cartoon | Vibe "juicy"/arcade, premi | + +`Bungee` (di David Jonathan Ross, Google Fonts) e' particolarmente adatta all'estetica insegna/marquee urbana. + +### 2.2 Numeri LED / 7-segment (jackpot, saldo, timer) + +Per i contatori digitali serve un font 7/14-segmenti che imiti i display LED reali: + +- **DSEG** (keshikan.net) — famiglia free open source, imita display a 7 e 14 segmenti, con varianti Classic/Modern, weight e italic. E' lo standard de facto. Include `DSEG7` (7 segmenti) e `DSEG14`. +- **Segment7** (Font Library, open source) — monospace, solo 7 segmenti, look calcolatrice/LED autentico. +- **Seven Segment** (FontGet / CDNFonts) — alternativa, free per uso personale. + +In alternativa, per un look "digitale" ma leggibile, va bene una monospace tech: **Share Tech Mono**, **Orbitron** (futuristica, ottima per sci-fi/arcade) o **DotGothic16** (dot-matrix), tutte su Google Fonts. + +### 2.3 Abbinamenti consigliati + +- **Anton** (titoli) + **Inter/Roboto** (corpo) + **DSEG7** (numeri jackpot). +- **Bebas Neue** (headline) + **Oswald** (UI) + **Orbitron** (contatori). + +--- + +## 3. Motivi UI ricorrenti + +Elementi grafici che definiscono immediatamente il genere: + +- **Reel della slot** — 3-5 colonne verticali che scorrono con simboli (7, campanelle, frutti, diamanti, monete). Effetto blur in movimento + decelerazione elastica allo stop. +- **Ruota della fortuna (wheel of fortune)** — cerchio a spicchi colorati alternati, indicatore/lancetta in alto, decelerazione con `cubic-bezier` per il "quasi-vinci". +- **Monete e gettoni (chips)** — monete dorate 3D (spesso animate/rotanti), fiches da poker colorate. +- **Jackpot counter / ticker** — cifre grandi LED che salgono di continuo (count-up animato), spesso con ticker scorrevole ("$1,204,556" incrementale). +- **Luci da marquee (chase lights)** — cornici di lampadine che si accendono in sequenza attorno a banner/insegne. +- **Confetti, scintille, particelle** — esplosione di coriandoli e monete al momento della vincita. +- **Badge / medaglie / corone** — livelli VIP, loyalty, "BONUS", "FREE SPINS". +- **Banner promozionali + jackpot ticker scorrevole** — tile dei giochi live con jackpot in tempo reale, barra loyalty visibile. +- **Simboli portafortuna** — 777, ferri di cavallo, quadrifogli, diamanti, stelle. + +--- + +## 4. Illuminazione ed effetti + +Il "peso visivo" arriva dagli effetti luce/materiale: + +- **Neon glow** — bagliore colorato attorno a testo e bordi (layer multipli di shadow). Vedi sez. 5.1. +- **Drop shadow profonde** — le card "galleggiano" su fondo scuro. +- **Chrome / metallico** — gradienti oro/argento con highlight speculari e bordo scuro per dare volume. +- **Shine sweep (riflesso che passa)** — striscia di luce diagonale che attraversa bottoni/carte periodicamente. +- **Inner glow / tubo neon** — inset shadow chiaro per l'effetto "tubo al neon acceso". +- **Bevel / emboss** — bordi smussati su monete e bottoni per il 3D. +- **Pulsazione / flicker** — glow che pulsa o lampeggia come insegna al neon. + +> Nota performance/accessibilita': blur grandi e animazioni infinite di `box-shadow` sono costosi da ridipingere. Animare con parsimonia e avvolgere gli effetti pulsanti in `@media (prefers-reduced-motion: reduce)`. + +--- + +## 5. Tecniche CSS concrete + +### 5.1 Testo neon (text-shadow a layer) + +Layer multipli dello stesso colore con blur crescente = alone luminoso (tecnica CSS-Tricks): + +```css +.neon-text { + color: #fff; + text-shadow: + 0 0 7px #fff, + 0 0 10px #fff, + 0 0 21px #fff, + 0 0 42px #39ff14, + 0 0 82px #39ff14, + 0 0 92px #39ff14, + 0 0 102px #39ff14, + 0 0 151px #39ff14; +} + +/* Flicker da insegna al neon */ +@keyframes flicker { + 0%, 18%, 22%, 25%, 53%, 57%, 100% { + text-shadow: + 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, + 0 0 40px #39ff14, 0 0 80px #39ff14, 0 0 90px #39ff14, + 0 0 100px #39ff14, 0 0 150px #39ff14; + } + 20%, 24%, 55% { text-shadow: none; } +} +.neon-text--flicker { animation: flicker 1.5s infinite alternate; } + +@media (prefers-reduced-motion: reduce) { + .neon-text--flicker { animation: none; } +} +``` + +### 5.2 Bordo/box neon glow (bottone, card) + +```css +.neon-box { + border: 2px solid var(--neon-pink); + border-radius: 12px; + box-shadow: + 0 0 5px var(--neon-pink), + 0 0 15px var(--neon-pink), + 0 0 30px var(--neon-pink), + inset 0 0 8px rgba(255, 46, 151, .6); /* inner glow "tubo" */ +} +``` + +### 5.3 Bottone oro metallico (CTA "PLAY / SPIN") + +```css +.btn-gold { + background: linear-gradient(180deg, #fff3b0 0%, #ffd700 40%, #d4af37 60%, #a67c00 100%); + color: #3a2a00; + font-family: "Anton", sans-serif; + letter-spacing: .05em; + border: 2px solid #a67c00; + border-radius: 14px; + box-shadow: + inset 0 2px 2px rgba(255,255,255,.7), /* highlight superiore */ + inset 0 -3px 4px rgba(0,0,0,.35), /* ombra inferiore = volume */ + 0 6px 0 #7a5c00, /* "spessore" 3D */ + 0 10px 20px rgba(0,0,0,.5), /* ombra a terra */ + 0 0 24px rgba(255,215,0,.6); /* glow oro */ + text-shadow: 0 1px 0 rgba(255,255,255,.5); +} +.btn-gold:active { transform: translateY(4px); box-shadow: /* riduci il 0 6px 0 ... */ ; } +``` + +### 5.4 Bordo a gradiente (gradient border) + +Due tecniche affidabili: + +```css +/* A) border-image */ +.grad-border { + border: 3px solid transparent; + border-image: linear-gradient(135deg, #ff2e97, #b026ff, #2d6bff) 1; +} + +/* B) doppio background (permette border-radius, la A no) */ +.grad-border-radius { + border: 3px solid transparent; + border-radius: 16px; + background: + linear-gradient(var(--bg-800), var(--bg-800)) padding-box, + linear-gradient(135deg, #ff2e97, #b026ff, #2d6bff) border-box; +} +``` + +### 5.5 Shine sweep (riflesso animato su bottone/card) + +```css +.shine { position: relative; overflow: hidden; } +.shine::after { + content: ""; + position: absolute; top: 0; left: -150%; + width: 60%; height: 100%; + background: linear-gradient(120deg, + transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%); + transform: skewX(-20deg); + animation: sweep 3s infinite; +} +@keyframes sweep { 0% { left: -150%; } 60%,100% { left: 150%; } } +``` + +### 5.6 Testo con riempimento a gradiente (oro/neon) + +```css +.grad-text { + background: linear-gradient(180deg, #fff3b0, #ffd700, #d4af37); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +``` + +### 5.7 Luci da marquee (cornice di lampadine) + +Con `box-shadow` multipli su uno pseudo-elemento, o piu' semplicemente con un `repeating-radial-gradient` + animazione di opacita' per l'effetto "chase". Per il chase preciso conviene JS o `background-position` animato di un pattern di puntini. + +```css +.marquee-lights { + padding: 12px; + border-radius: 16px; + background: + radial-gradient(circle, #ffdf6b 2px, transparent 3px) 0 0 / 20px 20px; + animation: chase .6s steps(2) infinite; +} +@keyframes chase { to { background-position: 20px 0; } } +``` + +### 5.8 Slot reel (scorrimento verticale) + +Il pattern base: una colonna piu' alta del viewport, si trasla verso l'alto con `transform: translateY()` e si ferma con easing elastico. Approcci reali su CodePen (sez. 6): pure CSS con `@keyframes`, JS con `requestAnimationFrame` + decelerazione, o 3D con `rotateX`/`translateZ` per il reel cilindrico. + +```css +.reel { height: 120px; overflow: hidden; } +.reel__strip { display: flex; flex-direction: column; + transition: transform 3s cubic-bezier(.15,.9,.25,1); } /* decelerazione */ +.reel--spinning .reel__strip { filter: blur(2px); } /* motion blur */ +``` + +### 5.9 Count-up del jackpot + +Il conteggio incrementale si fa in JS (aggiornando `textContent`), abbinato al font DSEG7 e a un container con glow verde/oro. Per performance usare `requestAnimationFrame` e `Intl.NumberFormat` per i separatori delle migliaia. + +--- + +## 6. Riferimenti da studiare (URL reali) + +### Prodotti / casino live +- **Stake** — https://stake.com/ e https://stake.com/casino/home — tema scuro blu notte, "Stake Originals" con dark theme + accenti colorati, equilibrio professionale/immersivo. +- **Roobet** — https://roobet.com/ — estetica viola + verde neon, "neon-lit realm", playground digitale pulsante. + +### Collezioni ispirazione (UI/branding) +- Dribbble — Casino UI: https://dribbble.com/tags/casino-ui +- Dribbble — Gambling UI: https://dribbble.com/tags/gambling-ui +- Dribbble — Casino App: https://dribbble.com/tags/casino_app +- Dribbble — esempio piattaforma: https://dribbble.com/shots/23736814-UX-UI-Design-of-Casino-Gambling-Platform +- Behance — Casino Game UI: https://www.behance.net/search/projects/casino%20game%20ui +- Behance — Casino Web Design: https://www.behance.net/search/projects/casino%20web%20design +- Colorlib — 17 Casino Website Design 2026: https://colorlib.com/wp/casino-website-design/ +- Subframe — 25 Casino Website Design Examples: https://www.subframe.com/tips/casino-website-design-examples + +### CodePen (slot / reel / animazioni) +- CSS-only Slot Machine: https://codepen.io/tangxuguo/pen/xqrNmx +- Simple CSS Slot Machine Animation: https://codepen.io/cnbkts/pen/QMXPZM +- CSS/JS Slot machine: https://codepen.io/MrFirthy/pen/oGVWqK +- Slot Machine Spinner: https://codepen.io/Thomasbetten/pen/nPeMPo +- Real Slots Reels (3D): https://codepen.io/josfabre/pen/abReBvP +- Reel Slot Machine (no JS): https://codepen.io/stevencamilleri-mrg/pen/abzGOGd + +### Font (download) +- Bebas Neue — https://fonts.google.com/specimen/Bebas+Neue +- Anton — https://fonts.google.com/specimen/Anton +- Oswald — https://fonts.google.com/specimen/Oswald +- DSEG (7/14-segment) — https://www.keshikan.net/fonts-e.html +- Segment7 — https://fontlibrary.org/en/font/segment7 + +### CSS glow / neon (tecniche) +- CSS-Tricks — Neon Text with CSS: https://css-tricks.com/how-to-create-neon-text-with-css/ +- Coder's Block — Creating Glow Effects with CSS: https://codersblock.com/blog/creating-glow-effects-with-css/ +- FreeFrontend — 40+ CSS Glow Effects: https://freefrontend.com/css-glow-effects/ + +--- + +## 7. Checklist rapida per replicare l'estetica + +- [ ] Sfondo scuro (near-black blu/viola), MAI bianco puro. +- [ ] Palette: base scura + 1-2 neon + oro. Alto contrasto. +- [ ] Font titoli condensato ultra-bold (Anton/Bebas Neue). +- [ ] Numeri jackpot/saldo con font LED (DSEG7) + glow verde/oro. +- [ ] CTA in oro metallico con bevel 3D + glow. +- [ ] Bordi neon (box-shadow multipli + inset glow) su card/CTA. +- [ ] Gradienti ovunque (oro, neon bicolore, radiale hero). +- [ ] Micro-animazioni: shine sweep, pulse, flicker, count-up. +- [ ] Feedback vincita: confetti + monete + verde neon + glow. +- [ ] Motivi: reel, ruota, monete/chips, marquee lights, ticker jackpot. +- [ ] Rispettare `prefers-reduced-motion`. + +--- + +## Fonti + +- The Best Color Schemes for Gambling Websites — https://mightymegaphone.com/2025/02/12/the-best-color-schemes-for-gambling-websites-designers-guide/ +- Top 10 Color Palettes for Casino Branding (Lounge Lizard, 2025) — https://www.loungelizard.com/blog/top-10-color-palettes-for-casino-branding/ +- The Psychology of Color in Casino Design (BetBoyz) — https://betboyz.com/igaming-branding-and-design/igaming-branding-the-psychology-of-color-in-casino-design/ +- The Color of Luck: Palette Choices in Casino Game Design — https://www.seegreatart.art/the-color-of-luck-a-visual-study-of-palette-choices-in-casino-game-design/ +- 17 Best Casino Website Design Inspiration 2026 (Colorlib) — https://colorlib.com/wp/casino-website-design/ +- 25 Casino Website Design Examples (Subframe) — https://www.subframe.com/tips/casino-website-design-examples +- Inside the Digital Lobby: Casino Interface Design — https://www.muggsybogues.com/inside-the-digital-lobby-a-feature-spotlight-on-casino-interface-design/ +- Stake — https://stake.com/ | https://stake.com/casino/home +- Stake Review (aesthetic details) — https://www.sportsgambler.com/review/stake/ +- Roobet — https://roobet.com/ +- Roobet Review (aesthetic details) — https://www.thespike.gg/reviews/roobet +- Dribbble Casino UI — https://dribbble.com/tags/casino-ui +- Dribbble Gambling UI — https://dribbble.com/tags/gambling-ui +- Behance Casino Game UI — https://www.behance.net/search/projects/casino%20game%20ui +- Bebas Neue (Google Fonts) — https://fonts.google.com/specimen/Bebas+Neue +- Anton (Google Fonts) — https://fonts.google.com/specimen/Anton +- Oswald (Google Fonts) — https://fonts.google.com/specimen/Oswald +- DSEG 7/14-segment fonts — https://www.keshikan.net/fonts-e.html +- Segment7 (Font Library) — https://fontlibrary.org/en/font/segment7 +- 17 Royal Casino Fonts (HipFonts) — https://hipfonts.com/casino-fonts/ +- Best Casino Fonts Free/Premium (Hyperpix) — https://hyperpix.net/fonts/casino-fonts/ +- How to Create Neon Text With CSS (CSS-Tricks) — https://css-tricks.com/how-to-create-neon-text-with-css/ +- Creating Glow Effects with CSS (Coder's Block) — https://codersblock.com/blog/creating-glow-effects-with-css/ +- 47 Best CSS Glow Effects (TestMu AI) — https://www.testmuai.com/blog/glowing-effects-in-css/ +- 40+ CSS Glow Effects (FreeFrontend) — https://freefrontend.com/css-glow-effects/ +- CodePen — CSS-only Slot Machine — https://codepen.io/tangxuguo/pen/xqrNmx +- CodePen — Real Slots Reels — https://codepen.io/josfabre/pen/abReBvP +- CodePen — Reel Slot Machine — https://codepen.io/stevencamilleri-mrg/pen/abzGOGd diff --git a/docs/02-meccaniche-suspense-reveal.md b/docs/02-meccaniche-suspense-reveal.md new file mode 100644 index 0000000..046070e --- /dev/null +++ b/docs/02-meccaniche-suspense-reveal.md @@ -0,0 +1,334 @@ +# Meccaniche di Suspense e Reveal: slot machine, ruote della fortuna e loot box + +> Ricerca applicata alla nostra app: assegniamo le persone alle stanze tramite un algoritmo (risultato **predeterminato**), ma lo riveliamo con un'animazione che costruisce **attesa ed eccitazione**, esattamente come lo "spin" di una slot machine. Questo documento raccoglie la psicologia, le meccaniche di animazione e le tecniche JS/CSS concrete per farlo bene. + +--- + +## 1. La psicologia dello "spin & reveal" + +Il punto centrale, ripetuto in quasi tutta la letteratura di game design, è controintuitivo ma fondamentale per noi: + +> **Il momento della rivelazione (lo spin, il rallentamento, il drumroll) genera più coinvolgimento del premio stesso.** Un'animazione di 3-5 secondi fa "più lavoro motivazionale" del contenuto effettivo che viene rivelato. + +Questo significa che, anche se la stanza è già decisa dall'algoritmo, è la **coreografia della rivelazione** a creare l'emozione. Ecco i meccanismi psicologici da sfruttare. + +### 1.1 Anticipazione e dopamina +Il cervello rilascia **più dopamina nell'anticipazione di una ricompensa incerta** che di fronte a una garantita ("dopamine release is significantly higher when a reward is uncertain than when it's guaranteed"). L'incertezza percepita — non il risultato — è il motore emotivo. Da qui la regola: **allungare e drammatizzare la fase di attesa**, non accorciarla. + +### 1.2 Variable reward (rinforzo a rapporto variabile) +Le slot machine funzionano su uno **schedule di rinforzo a rapporto variabile** (variable ratio reinforcement), lo stesso principio comportamentale (Skinner) che rende difficile smettere: la ricompensa arriva in modo imprevedibile, e il cervello resta in stato di anticipazione costante. Nel nostro caso l'assegnazione avviene una volta sola, ma possiamo comunque sfruttare l'**imprevedibilità percepita** dell'esito (quale stanza?) durante lo spin. + +### 1.3 Effetto near-miss (quasi-vincita) +Il **near-miss** è la situazione in cui i simboli si fermano *quasi* allineati (due jackpot allineati, il terzo a una posizione di distanza). Pur essendo tecnicamente una perdita, stimola il cervello **quasi come una vittoria reale**, rilasciando dopamina e alimentando la sensazione che il colpo grosso sia "a un passo". + +Applicazione al nostro reveal: durante lo scorrimento, far **passare vicino** ad altre stanze/opzioni prima di fermarsi su quella finale amplifica la tensione ("stava per uscire l'altra stanza..."). È la stessa logica della roulette CS:GO che rallenta sfiorando altri item. + +### 1.4 Escalation ed escalation sensoriale +I designer aumentano deliberatamente l'**arousal** prima di mostrare il contenuto: +- In *Overwatch*, la loot box **trema e vibra** prima di aprirsi. +- Fasci di luce dorati e particellari **segnalano un drop raro PRIMA** che l'item appaia. +- Suoni, animazioni temporizzate e persino lo **screen shake** enfatizzano l'impatto emotivo. + +L'escalation crea una **curva di tensione crescente**: più segnali "sta per succedere qualcosa di importante" accumuli, più forte è il picco al reveal. + +### 1.5 Il rallentamento finale (slow-down / easing) +Elemento chiave e più imitabile: verso la fine, lo spin **decelera progressivamente**. Questo rallentamento è ciò che il cervello legge come "sta per fermarsi, dove cadrà?" — è il momento di massima tensione. In termini tecnici è una curva di **easing-out** (veloce all'inizio, lento alla fine), spesso con un piccolo **overshoot/rimbalzo** finale (`back-out`) per un "settle" soddisfacente (vedi §2.2). + +### 1.6 Principi di design etico da mystery box (da Yu-kai Chou) +Riassunto delle leve applicabili in modo sano: +1. **Basso costo di partecipazione** — l'utente accetta l'incertezza se lo sforzo è minimo. +2. **Investire nel reveal** — il momento teatrale conta più del premio. +3. **Pacing dei reveal** — reveal troppo frequenti diluiscono l'impatto e la sensibilità dopaminergica; spaziarli mantiene la novità. +4. **Floor garantito / "pity"** — nessuno esce a mani vuote; anche l'esito "comune" deve sembrare significativo (importante per noi: qualunque stanza deve essere presentata come una "bella" assegnazione). + +--- + +## 2. Meccaniche di animazione dei rulli (slot reel) + +### 2.1 Come gira un rullo +Il rullo è tipicamente una **striscia verticale di simboli** (un contenitore lungo dentro una finestra con `overflow: hidden`). Lo spin si ottiene traslando la striscia in verticale (`transform: translateY(...)`), non spostando i singoli simboli. Approcci comuni: +- **CSS transition/animation** su `translateY` con easing (semplice, performante). +- **Web Animations API** (`element.animate`) per controllo dinamico del valore finale (consigliato per risultato predeterminato — vedi §7). +- **requestAnimationFrame** per controllo frame-by-frame (fisica custom, blur di movimento). + +Per la **velocità percepita**, durante la fase veloce si può aggiungere un leggero **motion blur** (es. `filter: blur()` verticale) o semplicemente ripetere i simboli in modo che scorrano rapidamente. + +### 2.2 Curve di easing: le più importanti +Il carattere dell'animazione dipende quasi tutto dalla **timing function**. Riferimento pratico (`easings.net`): + +| Effetto | Keyword / cubic-bezier | Uso | +|---|---|---| +| `ease-out` | `cubic-bezier(0, 0, 0.58, 1)` | Decelerazione base a fine spin | +| `easeOutBack` (overshoot) | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Il rullo supera il target e torna indietro → "settle" con rimbalzo | +| Wheel of fortune (con molla) | `cubic-bezier(0.440, -0.205, 0.000, 1.130)` | Decelerazione + micro-bounce elastico | +| `ease-in` | `cubic-bezier(0.42, 0, 1, 1)` | Accelerazione iniziale (partenza dello spin) | + +**Nota tecnica cruciale sui cubic-bezier**: gli assi `x` (tempo) devono stare tra 0 e 1, ma **`y` (progresso) può uscire da 0–1**. Un `y > 1` produce **overshoot** (l'elemento supera la destinazione e rientra → effetto "back"/molla); un `y < 0` produce undershoot. È così che si ottiene la sensazione elastica del rimbalzo finale con **due sole maniglie**. + +Per un vero **elastic/bounce multi-oscillazione** (più rimbalzi smorzati), un singolo cubic-bezier non basta: serve un `@keyframes` complesso o una libreria (GSAP, Motion, Svelte easing). `easeOutElastic` dà "l'illusione di un rullo che ruota e poi si assesta". + +### 2.3 Struttura tipica dello spin di un rullo +1. **Accelerazione** breve (`ease-in`) o partenza istantanea. +2. **Fase veloce** a velocità costante (loop di simboli, eventuale blur). +3. **Decelerazione** lunga (`ease-out`) — è qui che nasce la suspense. +4. **Settle / bounce** finale (`easeOutBack`) — il rullo si allinea al simbolo con un micro-scatto. + +### 2.4 Stagger tra i rulli (fermata sequenziale) +Elemento firma delle slot: i rulli **non si fermano tutti insieme**, ma **uno dopo l'altro da sinistra a destra**. Questo: +- prolunga la tensione (l'esito totale si scopre solo all'ultimo rullo); +- abilita l'effetto **near-miss** (i primi rulli mostrano il simbolo giusto, l'ultimo tiene sul filo). + +Implementazione: si applica un **delay incrementale** per indice di rullo (es. `delay = index * 400ms`, oppure lo step di aggiornamento è `50ms + index*stagger`). Con Web Animations API basta impostare `delay` diverso per ogni rullo; con CSS, `transition-delay` o `animation-delay` scalati. + +### 2.5 Il "bounce/settle" finale +I videogiochi di slot inseriscono "un piccolo rimbalzo nei rulli verso la fine dello spin, subito prima che l'esito finale venga mostrato". Tecnicamente: si fa fermare il rullo **poco oltre** la posizione target e lo si riporta indietro con un `easeOutBack` o un keyframe che overshoota di ~1 riga e rientra. È il dettaglio che rende la fermata "soddisfacente" invece che secca. + +**Riferimenti implementativi slot**: +- Victor Toschi, *How to create a Slot Machine animation with CSS and JavaScript* (metodi `init` / `spin` / `shuffle`) + CodePen `toschivictor/pen/JjNZjEj`. +- `ezslots` (jQuery toolkit) e `HTML-slot-machine-example` (vanilla) su GitHub. +- CodePen `MrFirthy/pen/oGVWqK` (CSS/JS slot machine). + +--- + +## 3. Ruota della fortuna / spinning wheel (fisica e landing) + +### 3.1 Struttura +La ruota è un cerchio suddiviso in spicchi; ogni spicchio è ruotato di `360° / n * indice` con `transform-origin` sul bordo/centro. Si anima la **rotazione dell'intera ruota** (`transform: rotate(...)`) e un puntatore fisso indica il vincitore in cima. + +### 3.2 Decelerazione (l'anima dell'effetto) +Come per i rulli, la magia è nella curva: la ruota parte veloce e **decelera** fino a fermarsi. Esempio reale dall'articolo DEV Community *Wheel of Fortune with CSS* (Web Animations API): + +```js +animation = wheel.animate( + [ + { transform: `rotate(${previousEndDegree}deg)` }, + { transform: `rotate(${newEndDegree}deg)` } + ], + { + duration: 4000, + easing: 'cubic-bezier(0.440, -0.205, 0.000, 1.130)', // decelerazione + micro-bounce + fill: 'forwards', + iterations: 1 + } +); +``` + +### 3.3 Atterrare su un target (landing predeterminato) +Formula generale: +``` +angoloSpicchio = 360 / numeroSpicchi +offsetTarget = angoloSpicchio * indiceVincitore +rotazioneTotale = (giriInteri * 360) + offsetTarget // ± correzione per il puntatore +``` +- Diversi **giri interi** (es. `Math.random() * 360 + 1800`, cioè ≥5 giri) servono a rendere l'effetto credibile: "spinnare direttamente sul premio non sembra giusto, servono dei giri completi". +- Si aggiunge una **randomizzazione entro lo spicchio** così che il puntatore non cada sempre esattamente al centro (più realistico). +- Importante: **cancellare l'animazione precedente** (`animation.cancel()`) prima di rilanciarne una nuova, per evitare conflitti. + +### 3.4 Riferimenti wheel +- `dev.to/madsstoumann/wheel-of-fortune-with-css` (Web Animations API, cubic-bezier a molla). +- `jamesrwilliams.ca/posts/css-wheel-of-fortune` (approccio CSS puro). +- **Winwheel.js** (`dougtesting.net/winwheel`) — libreria dedicata con `animation.stopAngle`, spin verso segmento predeterminato. +- **Konva** (`konvajs.org/docs/sandbox/Wheel_of_Fortune.html`) — canvas 2D. +- Emanuele Feronato — *JavaScript + CSS 3D Wheel of Fortune*. + +--- + +## 4. Card flip, scratch card, box/envelope e loot box + +Alternative allo spin che possiamo usare come **variazione del reveal** (o come "atto finale" dopo lo spin). + +### 4.1 Card flip (rivelazione a carta girata) +Tecnica CSS 3D standard (David DeSandro, *Intro to CSS 3D transforms — Card Flip*): +- `perspective` sul contenitore genitore → contesto 3D. +- `transform-style: preserve-3d` sulla carta. +- Due facce sovrapposte; il retro con `backface-visibility: hidden` e pre-ruotato `rotateY(180deg)`. +- Al click/hover si applica `transform: rotateY(180deg)` per rivelare. + +Ottimo come **reveal secco e teatrale**: la carta si gira e mostra la stanza. Si combina bene con un piccolo delay/drumroll prima del flip. + +### 4.2 Scratch card (gratta e vinci) +Con `` e composite operation: +- Si disegna la copertura opaca sul canvas. +- `ctx.globalCompositeOperation = "destination-out"` fa sì che il movimento del cursore **cancelli** la copertura, rivelando il contenuto sotto. +- Si tracciano archi (`ctx.arc`) alla posizione del puntatore e si può calcolare la **percentuale di area grattata** per auto-rivelare al superamento di una soglia. + +Vantaggio: introduce **interazione fisica** (l'utente "scopre" la propria stanza), aumentando ownership ed engagement. Riferimenti: Envato Tuts+ *scratch card effect in vanilla JavaScript*; Medium (Mr Zouraiz) *Digital Scratch Card*. + +### 4.3 Box / envelope / loot box open +Pattern loot box (Overwatch-style): +1. Oggetto (box/busta) che **vibra e trema** (keyframe di shake) con intensità crescente. +2. Build-up di **particellari e luce** che anticipa la rarità/importanza. +3. **Apertura** (scale + fade + burst) e uscita del contenuto (la stanza). + +Lo shake si fa con un `@keyframes` di piccole traslazioni/rotazioni alternate; l'escalation con `animation-duration` decrescente o ampiezza crescente. Il picco luminoso PRIMA del contenuto è il trucco che "vende" il reveal. + +--- + +## 5. Countdown, drumroll ed escalation della tensione + +Prima dello spin/reveal, un **build-up** temporizzato aumenta l'attesa. + +- **Countdown ring animato**: si anima `stroke-dasharray` di un cerchio SVG per "svuotare" un anello nel tempo, o si sovrappone un anello colorato che si consuma come progress bar (CSS-Tricks, *How to Create an Animated Countdown Timer*). +- **Drumroll audio + visivo**: rullo di tamburi con vibrazione/pulsazione crescente dell'elemento centrale sincronizzata; il picco coincide con l'inizio dello spin. +- **Escalation**: aumentare progressivamente frequenza dei flash, ampiezza dello shake, pitch/volume del suono. La curva di tensione deve **salire** fino al reveal e poi **scaricarsi** al settle. +- **Attenzione UX**: i countdown troppo aggressivi generano stress/panico (Medium, *The Stress of Countdown Clocks*). Per noi il countdown deve essere **eccitante, non ansiogeno** → durate brevi (2-3s), tono celebrativo, nessuna penalità reale. + +--- + +## 6. Come far sembrare RANDOM un risultato PREDETERMINATO + +Questo è il cuore del nostro caso d'uso: l'algoritmo ha già scelto la stanza, ma l'animazione deve costruire suspense come se fosse un sorteggio dal vivo. + +**Principio guida**: in *tutti* questi sistemi (slot, CS:GO case, loot box) **l'esito è già deciso prima dell'animazione** — "the weapon contained in a case is already predetermined... there is no roulette". L'animazione è pura scenografia. Quindi possiamo replicarlo in modo legittimo. + +### Ricetta pratica +1. **Decidi il risultato server-side** (la stanza) e passalo al client. +2. **Costruisci una lista visiva** che *contiene* il risultato in una posizione nota, circondato da distrattori (altre stanze). Es. per una roulette orizzontale stile CS:GO: array lungo di item con il vincitore posizionato vicino alla fine, poi altri item dopo per poter "sfiorare" e superare. +3. **Anima verso quella posizione** con easing-out lungo, così l'utente vede scorrere molte opzioni e non può prevedere dove si fermerà. +4. **Sfrutta il near-miss**: fai passare/rallentare vicino ad altre stanze prima di fermarti su quella giusta (l'effetto "stava per uscire l'altra"). +5. **Settle con bounce** (`easeOutBack`) sull'elemento vincitore + highlight/particellari. +6. **Non rivelare mai la posizione target in anticipo** nel DOM visibile: l'ordine può essere reale ma l'occhio non deve poter contare gli spicchi. + +### Roulette orizzontale (CS:GO-style) — la più adatta a "assegnazione stanza" +È il pattern che mappa meglio sul nostro problema (una lista di stanze che scorre e si ferma su una). +- Striscia orizzontale di card (le stanze, ripetute/mischiate), dentro una finestra con `overflow: hidden` e un **marker centrale** fisso. +- Si anima `translateX` negativo fino a portare la card vincitrice sotto il marker, con `ease-out` lungo (3-6s). +- La distanza finale include un piccolo **offset random dentro la card** così che non si fermi sempre perfettamente al centro → sembra fisico. +- Riferimenti CodePen: `killerek/pen/gLBgWd` (case opening animation), `marctannous/pen/xGRGBz` (layout CS:GO + winner selection), `memir0/pen/QPEPxm` (random name picker side-scrolling). Discussione GSAP: *Creating CS:GO Roulette Horizontal Spinner*. + +--- + +## 7. Tecniche JS/CSS pratiche + +### 7.1 Web Animations API (`element.animate`) — consigliata per risultato dinamico +Ideale quando il valore finale (posizione/rotazione) è calcolato a runtime dall'esito dell'algoritmo. + +```js +const spin = strip.animate( + [ + { transform: 'translateX(0)' }, + { transform: `translateX(${-targetX}px)` } + ], + { + duration: 5000, + easing: 'cubic-bezier(0.12, 0.8, 0.2, 1)', // decelerazione forte + fill: 'forwards' + } +); + +// Sapere quando è finita → trigger del settle/celebrazione +spin.finished.then(() => { + highlightWinner(); +}); +// oppure: spin.onfinish = () => { ... } +``` +Opzioni chiave: `duration` (ms), `easing`, `iterations`, `delay` (per lo **stagger** dei rulli), `fill: 'forwards'` (mantiene lo stato finale). Controllo: `play/pause/reverse/finish/cancel`; `cancel()` prima di un nuovo spin per evitare conflitti. + +### 7.2 CSS transition/animation +Semplice e performante per spin a target fisso o loop: +```css +.reel { + transition: transform 4s cubic-bezier(0.12, 0.8, 0.2, 1); +} +.reel.spinning { transform: translateY(-3000px); } + +/* settle con overshoot */ +.reel.settle { + transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); +} +``` +Per lo stagger: `transition-delay` / `animation-delay` scalati per indice. Nota: un cubic-bezier a 2 maniglie **non** fa bounce multipli → usare `@keyframes` o libreria. + +### 7.3 requestAnimationFrame (fisica custom) +Quando serve controllo totale: decelerazione basata su velocità/attrito, snap al simbolo più vicino, motion blur dipendente dalla velocità. +```js +function frame() { + velocity *= friction; // attrito → decelerazione + offset += velocity; + strip.style.transform = `translateY(${-offset}px)`; + if (velocity > threshold) requestAnimationFrame(frame); + else snapToNearest(); // allineamento finale + bounce +} +``` +`requestAnimationFrame` sincronizza il callback con il ciclo di paint del browser → animazioni fluide ed efficienti. + +### 7.4 Performance +- Animare **solo `transform` e `opacity`** (compositor-only, no reflow/repaint). +- Evitare di animare `top/left/width/height`. +- `will-change: transform` sugli elementi che spinnano; rimuoverlo a fine animazione. +- Preferire un **singolo loop rAF** condiviso a molti loop indipendenti. + +### 7.5 Librerie utili +- **GSAP** — timeline, easing avanzati (`back`, `elastic`, `bounce`), usato spesso per roulette CS:GO. +- **Motion / Web Animations API improvements** (`motion.dev`) — spring nativi, DX migliorata. +- **Winwheel.js** — ruote della fortuna con landing su segmento. +- **Konva** — animazioni canvas 2D (ruota, particellari). + +--- + +## 8. Applicazione consigliata al nostro reveal "assegnazione stanza" + +Sequenza proposta, orchestrando i pezzi sopra: +1. **Build-up** (2-3s): countdown ring + drumroll, elemento centrale che pulsa/vibra con escalation. Tono celebrativo, non ansiogeno (§5). +2. **Spin**: roulette orizzontale CS:GO-style (§6) o rulli slot (§2) che scorrono le stanze, con blur/velocità alta. +3. **Decelerazione** lunga con `ease-out` (§2.2, §3.2): momento di massima tensione. +4. **Near-miss**: rallenta sfiorando 1-2 stanze alternative prima del target (§1.3). +5. **Settle** con `easeOutBack` sul target + burst di luce/particellari (§1.4, §2.5). +6. **Reveal finale**: opzionale card flip / apertura box sulla stanza assegnata (§4) con celebrazione. +7. **Floor positivo**: presentare qualsiasi stanza come esito desiderabile (§1.6, punto pity). + +Il risultato è deciso dall'algoritmo al passo 0, ma l'utente vive un sorteggio dal vivo credibile ed eccitante. + +--- + +## Fonti + +**Psicologia (near-miss, variable reward, anticipazione, loot box)** +- The Psychology Behind Near Misses in Slot Games — https://news.eternalslots.com/the-psychology-behind-near-misses-in-slot-games/ +- Slot Machine Psychology: How the Near Miss Effect Drives Player Behavior — https://www.casinocenter.com/slot-machine-psychology-how-the-near-miss-effect-drives-player-behavior-in-online-gaming/ +- The Slot Machine Psyche: Variable Ratio Reinforcement (PSU) — https://www.psu.com/news/the-slot-machine-psyche-how-variable-ratio-reinforcement-drives-modern-gaming-engagement/ +- The Psychology Behind Slot Machines (problemgambling.com) — https://www.problemgambling.com/post/the-psychology-behind-slot-machines-how-they-keep-you-gambling +- Yu-kai Chou — Decoding the Mystery Box: Reward Design — https://yukaichou.com/advanced-gamification/decoding-the-mystery-box-a-dive-into-the-intricacies-of-reward-design/ +- Rare Loot Box Rewards Trigger Larger Arousal and Reward Responses (PMC) — https://pmc.ncbi.nlm.nih.gov/articles/PMC7882574/ +- Loot Boxes Hook Players — How We Used the Same Psychology Ethically (Medium) — https://medium.com/avianu/loot-boxes-hook-players-heres-how-we-used-the-same-psychology-ethically-296f44261917 +- Zelda's Treasure Chests and the Psychology of Random Rewards (GameTyrant) — https://gametyrant.com/news/zelda-random-rewards-psychology + +**Animazione rulli slot** +- Victor Toschi — Slot Machine animation with CSS and JavaScript (Medium) — https://medium.com/@victortoschi/how-to-create-a-slot-machine-animation-with-css-and-javascript-9073ab9db9ea +- CodePen — CSS/JS Slot machine (MrFirthy) — https://codepen.io/MrFirthy/pen/oGVWqK +- ezslots (jQuery slots toolkit, GitHub) — https://github.com/kirkjerk/ezslots +- HTML slot machine example (vanilla JS, GitHub) — https://github.com/flixrp/HTML-slot-machine-example +- Create a slot machine game in vanilla JavaScript (Envato Tuts+) — https://webdesign.tutsplus.com/how-to-create-a-slot-machine-game-in-vanilla-javascript--cms-108974t + +**Ruota della fortuna** +- Wheel of Fortune with CSS (DEV / madsstoumann) — https://dev.to/madsstoumann/wheel-of-fortune-with-css-p-pi-1ne9 +- A CSS wheel of fortune (James R. Williams) — https://jamesrwilliams.ca/posts/css-wheel-of-fortune +- Winwheel.js — Wheel of Fortune example — https://dougtesting.net/winwheel/examples/wheel_of_fortune +- Wheel of Fortune (Konva canvas) — https://konvajs.org/docs/sandbox/Wheel_of_Fortune.html +- JavaScript + CSS 3D Wheel of Fortune (Emanuele Feronato) — https://emanueleferonato.com/2025/10/31/javascript-css-3d-wheel-of-fortune/ + +**Roulette orizzontale / case opening (risultato predeterminato)** +- CSGO Roulette Wheel Explained — https://csgoskins.games/csgo-roulette-wheel/ +- Case opening animation (CodePen, killerek) — https://codepen.io/killerek/pen/gLBgWd +- CS:GO layout + winner selection (CodePen, marctannous) — https://codepen.io/marctannous/pen/xGRGBz +- CS:GO-like side-scrolling random name picker (CodePen, memir0) — https://codepen.io/memir0/pen/QPEPxm +- GSAP forum — Creating CS:GO Roulette Horizontal Spinner — https://gsap.com/community/forums/topic/42002-help-needed-creating-csgo-roulette-horizontal-spinner/ + +**Card flip, scratch card** +- Card Flip — Intro to CSS 3D transforms (David DeSandro) — https://3dtransforms.desandro.com/card-flip +- How To Create a Flip Card with CSS (W3Schools) — https://www.w3schools.com/howto/howto_css_flip_card.asp +- Scratch card effect in vanilla JavaScript (Envato Tuts+) — https://webdesign.tutsplus.com/how-to-create-a-scratch-card-effect-in-vanilla-javascript--cms-108922t +- Digital Scratch Card HTML/CSS/JS (Medium, Mr Zouraiz) — https://medium.com/@mr.zouraiz1580/digital-scratch-card-html-8eaf1dad6095 + +**Countdown / drumroll / tensione** +- How to Create an Animated Countdown Timer (CSS-Tricks) — https://css-tricks.com/how-to-create-an-animated-countdown-timer-with-html-css-and-javascript/ +- The Stress of Countdown Clocks in UX Psychology (Medium) — https://medium.com/design-bootcamp/the-stress-of-countdown-clocks-understanding-panic-inducing-timers-in-ux-psychology-b8d1a6333691 + +**Easing e tecniche JS/CSS** +- Easing Functions Cheat Sheet — https://easings.net/ +- cubic-bezier() (CSS-Tricks Almanac) — https://css-tricks.com/almanac/functions/c/cubic-bezier/ +- Understanding easing and cubic-bezier curves (Josh Collinsworth) — https://joshcollinsworth.com/blog/easing-curves +- Incorporating elastic ease in CSS animations (LogRocket) — https://blog.logrocket.com/how-to-incorporate-elastic-ease-in-css-animations/ +- Using the Web Animations API (MDN) — https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API +- Improvements to the Web Animations API (Motion) — https://motion.dev/docs/improvements-to-the-web-animations-api-dx +- JavaScript Animations with requestAnimationFrame and WAAPI — https://tutorialreference.com/javascript/advanced-topics/animation/javascript-animations-with-requestanimationframe-and-web-animations-api diff --git a/docs/03-interattivita-coinvolgimento.md b/docs/03-interattivita-coinvolgimento.md new file mode 100644 index 0000000..9cdbaf7 --- /dev/null +++ b/docs/03-interattivita-coinvolgimento.md @@ -0,0 +1,530 @@ +# 03 — Interattività e Coinvolgimento + +> Come trasformare l'assegnazione di ~20 persone a un set di stanze in uno **spettacolo condiviso** +> in stile scommesse / game-show / slot machine, guardato tutti insieme su un unico schermo. + +Questo documento raccoglie idee di game design, meccaniche di gamification, sound design, +momenti di celebrazione e soluzioni tecniche concrete (con nomi di librerie e URL CDN reali) +per rendere la web app **massimamente divertente e coinvolgente**. + +--- + +## 1. Il principio di base: l'attesa vale più del premio + +La ricerca sul gambling e sui game-show è concorde: **l'anticipazione conta più del risultato**. +Il rilascio di dopamina è massimo *nei momenti che precedono* la rivelazione, non nella rivelazione +stessa. I "reward" imprevedibili (variable ratio reward schedule) generano una risposta emotiva +molto più forte di quelli prevedibili. + +Implicazioni di design per la nostra app: + +- **Non rivelare tutto insieme.** Diluire l'assegnazione nel tempo (una persona / una stanza alla + volta) moltiplica i picchi di tensione. +- **Rallentare proprio prima del risultato.** Come la ruota della fortuna che decelera: gli ultimi + secondi prima dello "stop" sono quelli che valgono. +- **Sfruttare il "quasi-vinto" (near-miss).** Far vedere che qualcuno stava per finire nella "stanza + VIP" ma poi... no. Il near-miss tiene il cervello in stato di attesa e alza l'engagement di tutta + la sala. +- **Incertezza come feature, non come bug.** Non mostrare mai l'esito prima del tempo; la sorpresa è + il prodotto. + +Questi principi guidano tutte le sezioni successive. + +--- + +## 2. Meccaniche di engagement e gamification + +### 2.1 Suspense e reveal sociale + +- **Reveal una persona alla volta**: il nome della persona appare, parte lo "spin", e solo dopo si + scopre la stanza. Ogni singola assegnazione diventa un micro-evento. +- **Spinning wheel / slot reel come metafora principale**: la ruota/rullo che gira e decelera è una + delle meccaniche di suspense più efficaci perché il pubblico *vede tutti gli esiti possibili* + scorrere davanti e può "tifare" per uno di essi. +- **Ordine di rivelazione studiato per il dramma** (vedi §6): non alfabetico, ma costruito a + crescendo. +- **Countdown visibile** (3… 2… 1…) prima di ogni spin, con drumroll audio e vibrazione. + +### 2.2 Scommesse / pronostici prima del reveal (il cuore "gambling") + +Prima che l'algoritmo riveli le assegnazioni, si apre una **finestra di pronostici**: + +- Ogni partecipante (o la sala a mano alzata, in modalità single-screen) prova a indovinare + **in quale stanza finirà una data persona**. +- Si possono mostrare **quote/odds** fittizie accanto a ogni stanza ("Stanza VIP paga 5x", "Stanza + Sgabuzzino paga 1.2x") per dare sapore da sala scommesse e orientare l'ironia del gruppo. +- **Punti / gettoni virtuali** da puntare: chi indovina di più sale in classifica. +- Il momento della rivelazione diventa doppiamente teso: non scopri solo dove va la persona, ma + anche *se hai vinto la scommessa*. + +Questa meccanica sfrutta esattamente la psicologia dell'incertezza del premio: la posta in gioco +personale amplifica l'attenzione di tutti. + +### 2.3 Leaderboard e classifiche + +- **Classifica pronosticatori**: chi ha indovinato più assegnazioni. +- Aggiornamento **live dopo ogni reveal**, con animazione di scalata (righe che si riordinano). +- Ranking individuale e/o a squadre; le squadre aumentano il tifo e le esultanze collettive. +- La leaderboard è essa stessa un momento di spettacolo: mostrarla a schermo intero tra un blocco di + reveal e l'altro. + +### 2.4 Reazioni, emoji e tifo + +- **Emoji reactions in tempo reale** che volano sullo schermo condiviso (🎉 😱 🔥 👑 💀) quando esce + un'assegnazione clamorosa. +- Se i telefoni sono connessi (vedi §7), i partecipanti "lanciano" emoji dal telefono e appaiono + sul proiettore. +- In modalità puramente single-screen: reazioni scatenate da tasti/hotkey dell'MC, o semplicemente + dal tifo dal vivo amplificato dagli effetti audio/visivi. + +### 2.5 Streak e momenti speciali + +- **Streak del pronosticatore**: 3 assegnazioni indovinate di fila → effetto "on fire" 🔥 con audio + e confetti dedicati. +- **Streak di stanza**: se la stessa stanza riceve N persone di fila → "HOT ROOM" con luci + lampeggianti. +- **Combo/moltiplicatori**: più la streak è lunga, più i punti valgono (moltiplicatore visibile che + sale), come nei giochi arcade. + +### 2.6 Feedback game-show generale + +- **MC / annunciatore** (testo + audio): battute pre-scritte a tema per ogni tipo di reveal (vedi §6.4). +- **Barra di "hype"** che si riempie con le reazioni della sala. +- **Achievement/badge** sbloccabili ("Primo Jackpot", "Cappotto di pronostici", "Sfortunato del + giorno"). + +--- + +## 3. Sound design + +Il suono è metà dello spettacolo. Serve un piccolo **kit di effetti** riutilizzabili. + +### 3.1 Gli effetti chiave da avere + +| Momento | Suono | Quando parte | +|---|---|---| +| Avvio spin | *whoosh* / rullo che accelera | inizio dell'animazione della slot/ruota | +| Rotazione | tick-tick-tick dei rulli | durante lo spin (loop) | +| Decelerazione | ticchettio che rallenta | ultimi secondi prima dello stop | +| Assegnazione normale | *ding* / campanello | quando si ferma su una stanza | +| Stanza VIP / jackpot | *jackpot* + monete che cadono (coin drop) | reveal di una stanza speciale | +| Pre-reveal drammatico | *drumroll* (rullo di tamburi) | durante il countdown 3-2-1 | +| Vittoria / grande momento | *crowd cheer* (folla che esulta) | jackpot, fine evento, streak | +| Errore / near-miss | *buzz* / *sad trombone* | quando un pronostico fallisce | +| Cambio schermata | *swoosh* UI | transizioni tra i blocchi | + +### 3.2 Dove trovare effetti sonori GRATIS (royalty-free) + +Tutte fonti utilizzabili in progetti personali e commerciali (verificare la licenza del singolo file). + +**Mixkit** — nessuna registrazione, uso libero personale e commerciale: +- Slot machine: +- Casino: +- Utili qui: reel spin, coin drop, big win jingle. + +**Pixabay** — royalty-free, nessuna attribuzione richiesta, download MP3: +- Slot machine: +- Slot spin: +- Jackpot: +- Casino: +- Per gli altri effetti cercare: `drumroll`, `applause` / `crowd cheer`, `coin`, `ding`, `buzzer`, + `whoosh`. + +**Freesound** — database collaborativo Creative Commons (attenzione: alcuni file richiedono +attribuzione, controllare la licenza CC0 vs CC-BY): +- Home / ricerca: +- Esempio pack slot machine: + +Suggerimento pratico: scaricare gli MP3, **normalizzare i volumi** (un jackpot troppo forte rispetto +al ding rovina l'esperienza) e tenerli in una cartella `assets/audio/` con nomi parlanti +(`spin.mp3`, `ding.mp3`, `jackpot.mp3`, `drumroll.mp3`, `coin.mp3`, `cheer.mp3`, `buzz.mp3`). + +### 3.3 Come far partire i suoni nel browser + +Due strade: `