Componenti Visualizzatore a 360° Componente visualizzatore a 360°

Componente visualizzatore a 360°

Un componente visualizzatore reattivo a 360° con microinterazioni per i social media, con temi chiari e scuri utilizzando colori analoghi e complessità moderata.

Anteprima

Codice HTML

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- 360° Viewer Component -->
  <div class="relative w-full max-w-sm md:max-w-md lg:max-w-lg mb-8 group">
    
    <!-- Image Stack (simulating 360 view) -->
    <div class="relative w-full h-80 rounded-lg overflow-hidden shadow-lg group-hover:scale-105 transition-transform duration-300">
      <!-- Base Image -->
      <img src="https://picsum.photos/600/400?random=1" alt="Product View 1" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-100 group-hover:opacity-0">
      <!-- Layered Images (for hover effect) -->
      <img src="https://picsum.photos/600/400?random=2" alt="Product View 2" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0 group-hover:opacity-100">
    </div>

    <!-- Microinteraction: Viewfinder effect -->
    <div class="absolute inset-0 border-4 border-transparent group-hover:border-blue-400 dark:group-hover:border-blue-600 rounded-lg pointer-events-none transition-all duration-300"></div>

    <!-- Microinteraction: "Drag to spin" hint -->
    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black bg-opacity-70 text-white text-xs px-3 py-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      Drag to spin
    </div>

    <!-- Microinteraction: Navigation Dots -->
    <div class="absolute bottom-4 right-4 flex space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      <span class="block w-2.5 h-2.5 bg-white rounded-full transition-colors duration-200 hover:bg-blue-400 dark:hover:bg-blue-600"></span>
      <span class="block w-2.5 h-2.5 bg-gray-400 rounded-full transition-colors duration-200 hover:bg-blue-400 dark:hover:bg-blue-600"></span>
      <span class="block w-2.5 h-2.5 bg-gray-400 rounded-full transition-colors duration-200 hover:bg-blue-400 dark:hover:bg-blue-600"></span>
    </div>

  </div>

  <!-- Social Media Context (Example) -->
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover mr-3">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-100">Jane Doe</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
      Check out this amazing new product! What do you think of the 360&deg; view?
    </p>
    <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
      <div class="flex items-center hover:text-blue-500 dark:hover:text-blue-500 cursor-pointer transition-colors duration-200">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H3v-3.371a2 2 0 01.781-1.608l1.609-1.609A5 5 0 0112 11.206V10z"></path></svg>
        <span>120 Likes</span>
      </div>
      <div class="flex items-center hover:text-blue-500 dark:hover:text-blue-500 cursor-pointer transition-colors duration-200">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        <span>34 Comments</span>
      </div>
      <div class="flex items-center hover:text-blue-500 dark:hover:text-blue-500 cursor-pointer transition-colors duration-200">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M19 15l1-2 2-2M15 15l-1-2-2-2M18 19 21 21M9 19l3 2 3-2M5 19l-3 2-2-2M13 13c0-2-3-3-3-3s-3 1-3 3-1 4 2 5 2 2-3 2-4-1-4-1"></path></svg>
        <span>Share</span>
      </div>
    </div>
  </div>

</div>

<style>
  /* This is a simplified simulation. A true 360 viewer would use JavaScript to dynamically change images based on drag. */
  /* The hover effects provide a basic microinteraction experience. */
</style>

Componenti correlati

PastelBrutalist360AssetViewer

Un componente Asset Viewer a 360° semplice e reattivo con uno stile di design brutalista e una combinazione di colori rosa pastello. Realizzato su misura per i cruscotti, è dotato di un segnaposto per immagini statiche (che simulano una vista a 360°), pulsanti di controllo non funzionanti e visualizzazione delle informazioni. Costruito con Tailwind CSS, supporta la modalità oscura e mostra un'estetica cruda e audace con bordi spessi e ombre sfalsate nette.

Aperto