@fivemepeople/seasonal-effects-v2/SummerHat2.ts

Coleção de componentes React com efeitos sazonais e animações

"use client";

import React, { useEffect } from 'react';

const SummerHat = () => {
  useEffect(() => {
    // Add styles
    const style = document.createElement('style');
    style.innerHTML = `
      .summer-hat-container {
        position: absolute;
        top: 800px;
        left: 580px;
        width: 200px;
        height: 200px;
        pointer-events: none;
        z-index: 15;
      }

      /* Sol simples e bonito */
      .ball {
        position: absolute;
        top: -650px; /* Bem lá em cima */
        left: 50px; /* Centralizado */
        border-radius: 50%;
        width: 70px;
        height: 70px;
        background-color: orange;
        box-shadow: 0 0 35px 5px yellow, 0 0 25px 10px yellow inset;
        z-index: 10;
      }

      .summer-umbrella-wrapper {
        margin-top: -50px;
        margin-right: -25px;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: rotateX(70deg) rotateY(-15deg);
        position: relative;
      }

      .umbrella-pole {
        position: absolute;
        width: 5px;
        height: 150px;
        top: 100px;
        left: 100px;
        background: linear-gradient(to bottom, #8b4513, #654321, #4a2c17);
        transform-origin: 50% 0;
        transform: translateZ(-3px) rotateX(-90deg);
        border-radius: 2px;
        z-index: 1;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
      }

      .umbrella {
        position: relative;
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;
        animation: umbrella-rotate 8s linear infinite;
        z-index: 2;
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
      }

      .umbrella-triangle {
        position: absolute;
        top: 100px;
        left: 75px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 24px 100px 25px;
        border-color: transparent transparent #fff transparent;
        transform-origin: 50% 0;
        z-index: 2;
      }

      .umbrella-triangle-1 {
        transform: rotateZ(0deg) rotateX(-24deg) translateY(-1px);
        border-color: transparent transparent #ff6b6b transparent;
      }
      .umbrella-triangle-2 {
        transform: rotateZ(30deg) rotateX(-24deg) translateY(-1px);
        border-color: transparent transparent #fff transparent;
      }
      .umbrella-triangle-3 {
        transform: rotateZ(60deg) rotateX(-24deg) translateY(-1px);
        border-color: transparent transparent #ff6b6b transparent;
      }
      .umbrella-triangle-4 {
        transform: rotateZ(90deg) rotateX(-24deg) translateY(-1px);
        border-color: transparent transparent #fff transparent;
      }
      .umbrella-triangle-5 {
        transform: rotateZ(120deg) rotateX(-24deg) translateY(-1px);
        border-color: transparent transparent #ff6b6b transparent;
      }
      .umbrella-triangle-6 {
        transform: rotateZ(150deg) rotateX(-24deg) translateY(-1px);
        border-color: transparent transparent #fff transparent;
      }
      .umbrella-triangle-7 {
        transform: rotateZ(180deg) rotateX(-24deg) translateY(-1px);
        border-color: transparent transparent #ff6b6b transparent;
      }
      .umbrella-triangle-8 {
        transform: rotateZ(210deg) rotateX(-24deg) translateY(-1px);
        border-color: transparent transparent #fff transparent;
      }
      .umbrella-triangle-9 {
        transform: rotateZ(240deg) rotateX(-24deg) translateY(-1px);
        border-color: transparent transparent #ff6b6b transparent;
      }
      .umbrella-triangle-10 {
        transform: rotateZ(270deg) rotateX(-24deg) translateY(-1px);
        border-color: transparent transparent #fff transparent;
      }
      .umbrella-triangle-11 {
        transform: rotateZ(300deg) rotateX(-24deg) translateY(-1px);
        border-color: transparent transparent #ff6b6b transparent;
      }
      .umbrella-triangle-12 {
        transform: rotateZ(330deg) rotateX(-24deg) translateY(-1px);
        border-color: transparent transparent #fff transparent;
      }

      @keyframes umbrella-rotate {
        from {
          transform: rotateZ(0deg);
        }
        to {
          transform: rotateZ(360deg);
        }
      }
    `;

    document.head.appendChild(style);

    // Cleanup
    return () => {
      if (style.parentNode) {
        document.head.removeChild(style);
      }
    };
  }, []);

  return (
    <div className="summer-hat-container">
      {/* Sol simples como uma bola laranja */}
      <div className="ball" />

      {/* Guarda-sol existente */}
      <div className="summer-umbrella-wrapper">
        <div className="umbrella-pole" />
        <div className="umbrella">
          <div className="umbrella-triangle umbrella-triangle-1" />
          <div className="umbrella-triangle umbrella-triangle-2" />
          <div className="umbrella-triangle umbrella-triangle-3" />
          <div className="umbrella-triangle umbrella-triangle-4" />
          <div className="umbrella-triangle umbrella-triangle-5" />
          <div className="umbrella-triangle umbrella-triangle-6" />
          <div className="umbrella-triangle umbrella-triangle-7" />
          <div className="umbrella-triangle umbrella-triangle-8" />
          <div className="umbrella-triangle umbrella-triangle-9" />
          <div className="umbrella-triangle umbrella-triangle-10" />
          <div className="umbrella-triangle umbrella-triangle-11" />
          <div className="umbrella-triangle umbrella-triangle-12" />
        </div>
      </div>
    </div>
  );
};

export default SummerHat;