Tre varianti per il case study Web/Admin. C è il browser Safari ufficiale di magicui.design (open-source, MIT) — molto più dettagliato.
Stackato in DOM: 2 MacBook (silver + spacegray) + 7 iMac (silver, blue, green, pink, yellow, orange, purple). Al page load JS pesca uno random, poi crossfade ogni 6s (su questa pagina test) / 12s (live nella SezioneWeb). Video in pausa negli slot inattivi per non sprecare CPU. Pausa anche quando la tab non è visibile.
iMac 24" M1 2021 con chin colorato. Più ampio del MacBook ma stile "desktop showroom". Stesso pattern devices.css + wrapper Astro con tilt/glow/float.
MacBook Pro 2022 stile Space Gray con notch, dal repo open-source picturepan2/devices.css (MIT).
Cornice ultra dettagliata, base power, sensors, btns. Aggiunto il mio wrapper con tilt/glow/float come gli iPhone.
Backup completo dell'intera libreria in src/styles/external/devices.css/ (include anche iMac, iPhone 14 Pro, iPad Pro, Apple Watch).
Magic UI Safari dentro una cornice MacBook stile MockupCss (l'iPhone che hai già): tilt al mousemove,
float continuo, glow brand alle spalle, base/keyboard area + trackpad cutout. Effetto "computer reale".
SVG ufficiale Magic UI: traffic lights, barra URL con lock, freccia indietro/avanti, refresh, share, plus, multi-tab. URL personalizzabile ("admin.vislagps.com"). Aspect-ratio nativo 1203×753. Perfetto per landing SaaS.
📌 Come scegliere
C (Safari Magic UI) è quello che usano landing tipo Stripe, Linear, Vercel. Il punto debole: non ha "il device" intorno (è solo browser frame), ma in compenso la barra URL personalizzabile comunica subito che è un sito web. A/B sono i miei custom: più "device" ma meno dettagliati.