Код:

<!-- Тыква внизу слева -->
<style>
body {
  margin: 0;
}

#pumpkin {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1001;
  
  /* Размер */
  width: 40px;
  height: 40px;
  
  /* Фон */
  background-image: url('https://i.gyazo.com/3fad566ba3f8b5d08c98524267404d71.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  /* Анимация и взаимодействие */
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}

#pumpkin.hidden {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 768px) {
  #pumpkin {
    display: none !important;
  }
}
</style>

<div id="pumpkin"></div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const pumpkin = document.getElementById('pumpkin');
  if (!pumpkin) return;

  let hideTimeout = null;

  const hideTemporarily = () => {
    if (hideTimeout) clearTimeout(hideTimeout);
    pumpkin.classList.add('hidden');
    hideTimeout = setTimeout(() => {
      pumpkin.classList.remove('hidden');
      hideTimeout = null;
    }, 2000);
  };

  // Десктоп: наведение
  pumpkin.addEventListener('mouseenter', hideTemporarily);

  // Мобильные: касание
  pumpkin.addEventListener('touchstart', (e) => {
    hideTemporarily();
    e.preventDefault();
  });
});
</script>
<!-- Конец: тыква внизу слева -->

Код:

<!-- Паутина: будет создана только на главной странице и только на десктопе -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  // Проверка: мобильное устройство?
  const isMobile = window.matchMedia('(max-width: 768px)').matches; // или используйте любой другой порог
  if (isMobile) return;

  // Определяем, является ли текущая страница главной
  const isHomePage = 
    location.pathname === '/' || 
    location.pathname === '/index.html' ||
    location.pathname === '/index.htm';

  // Если НЕ главная — ничего не делаем
  if (!isHomePage) return;

  // Создаём элемент паутины
  const spiderWeb = document.createElement('div');
  spiderWeb.className = 'spider-web';
  document.body.appendChild(spiderWeb);

  // === Стили ===
  const style = document.createElement('style');
  style.textContent = `
    .spider-web {
      position: fixed;
      z-index: 1000;
      top: -20px;
      right: 4.5%;
      width: 20vw;
      max-width: 200px;
      aspect-ratio: 1 / 1;
      background-image: url('https://upforme.ru/uploads/0007/e3/f7/6822/348310.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 1;
      transition: opacity 0.3s ease;
      pointer-events: auto;
    }
    .spider-web.hidden {
      opacity: 0;
      pointer-events: none;
    }
  `;
  document.head.appendChild(style);

  // === Поведение: исчезновение и возврат ===
  let hideTimeout = null;
  const hideTemporarily = () => {
    if (hideTimeout) clearTimeout(hideTimeout);
    spiderWeb.classList.add('hidden');
    hideTimeout = setTimeout(() => {
      spiderWeb.classList.remove('hidden');
      hideTimeout = null;
    }, 2000);
  };

  spiderWeb.addEventListener('mouseenter', hideTemporarily);
  spiderWeb.addEventListener('touchstart', (e) => {
    hideTemporarily();
    e.preventDefault();
  });
});
</script>
<!-- Конец: паутина в углу -->

Код:

[html]
<div class="fog-container">
    <canvas id="fog"></canvas>
    <canvas id="fog-bg"></canvas>
    <canvas id="brush"></canvas>
    <svg id="brush-cursor" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
        <circle cx="24" cy="24" r="20" fill="none" stroke="white" stroke-width="2" stroke-opacity="0.7"/>
        <circle cx="24" cy="24" r="12" fill="white" fill-opacity="0.15"/>
    </svg>
</div>

<button id="reset-fog" type="button">Вернуть туман</button>

<style>
/* "Crafting dreams and magic" by Merlin */
.fog-container {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    margin: 20px 0;
    border-radius: 6px;
    touch-action: none;
    width: 100%;
    cursor: none;
}

/* Уменьшаем размер только на десктопе */
@media (min-width: 768px) {
    .fog-container {
        max-width: 60rem;
        margin-left: auto;
        margin-right: auto;
    }
}

.fog-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

#brush {
    opacity: 0;
}

#brush-cursor {
    position: fixed;
    pointer-events: none;
    width: 40px;
    height: 40px;
    margin: 0;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.15s ease;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4));
}

/* === Кнопка "Вернуть туман" под изображением === */
#reset-fog {
    display: block;
    margin: 20px auto;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    backdrop-filter: blur(4px);
    /* Сброс outline для кастомного focus */
    outline: none;
}

/* Эффект "тумана" при наведении — ТОЛЬКО для мыши */
@media (hover: hover) and (pointer: fine) {
    #reset-fog::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(4px);
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
        z-index: 0;
    }

    #reset-fog span {
        position: relative;
        z-index: 1;
    }

    #reset-fog:hover {
        border-color: rgba(255, 255, 255, 0.8);
    }

    #reset-fog:hover::before {
        transform: translateY(0);
    }
}

/* Активное состояние — для всех (мышь + тач) */
#reset-fog:active {
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.4);
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Фокус для клавиатуры */
#reset-fog:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Адаптивность */
@media (max-width: 480px) {
    #reset-fog {
        padding: 9px 20px;
        font-size: 15px;
    }
}

/* На сенсорных устройствах — возвращаем обычный курсор и скрываем кисть */
@media (pointer: coarse) {
    .fog-container {
        cursor: auto !important;
    }
    #brush-cursor {
        display: none !important;
    }
}
</style>

<script>
class FogParticle {
    constructor(ctx, canvasWidth, canvasHeight) {
        this.ctx = ctx;
        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;
        this.x = 0;
        this.y = 0;
    }
    setPosition(x, y) {
        this.x = x;
        this.y = y;
    }
    setVelocity(x, y) {
        this.xVelocity = x;
        this.yVelocity = y;
    }
    setImage(image) {
        this.image = image;
    }
    render() {
        if (!this.image) return;
        this.ctx.drawImage(
            this.image,
            this.x - this.image.width / 2,
            this.y - this.image.height / 2,
            400,
            400
        );
        this.x += this.xVelocity;
        this.y += this.yVelocity;
        if (this.x >= this.canvasWidth) {
            this.xVelocity = -this.xVelocity;
            this.x = this.canvasWidth;
        } else if (this.x <= 0) {
            this.xVelocity = -this.xVelocity;
            this.x = 0;
        }
        if (this.y >= this.canvasHeight) {
            this.yVelocity = -this.yVelocity;
            this.y = this.canvasHeight;
        } else if (this.y <= 0) {
            this.yVelocity = -this.yVelocity;
            this.y = 0;
        }
    }
}

class Fog {
    constructor({ selector, density = 50, velocity = 2, particle, bgi } = {}) {
        const canvas = document.querySelector(selector);
        const bcr = canvas.parentElement.getBoundingClientRect();
        this.ctx = canvas.getContext('2d');
        this.canvasWidth = canvas.width = bcr.width;
        this.canvasHeight = canvas.height = bcr.height;
        this.particleCount = density;
        this.maxVelocity = velocity;
        this.particle = particle;
        this.bgi = bgi;
        this._createParticles();
        this._setImage();
        if (!this.bgi) return;
        const img = new Image();
        img.onload = () => {
            const size = coverImg(img, this.canvasWidth, this.canvasHeight);
            this.bgi = { img, w: size.w, h: size.h };
            this._render();
        };
        img.src = this.bgi;
    }
    _createParticles() {
        this.particles = [];
        const random = (min, max) => Math.random() * (max - min) + min;
        for (let i = 0; i < this.particleCount; i++) {
            const particle = new FogParticle(this.ctx, this.canvasWidth, this.canvasHeight);
            particle.setPosition(
                random(0, this.canvasWidth),
                random(0, this.canvasHeight)
            );
            particle.setVelocity(
                random(-this.maxVelocity, this.maxVelocity),
                random(-this.maxVelocity, this.maxVelocity)
            );
            this.particles.push(particle);
        }
    }
    _setImage() {
        if (!this.particle) return;
        const img = new Image();
        img.onload = () => this.particles.forEach(p => p.setImage(img));
        img.src = this.particle;
    }
    _render() {
        if (this.bgi) {
            this.ctx.drawImage(this.bgi.img, 0, 0, this.bgi.w, this.bgi.h);
        } else {
            this.ctx.fillStyle = "rgba(0, 0, 0, 1)";
            this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
        }
        this.particles.forEach(p => p.render());
        requestAnimationFrame(this._render.bind(this));
    }
}

class Eraser {
    constructor({ bgCanvas, brushCanvas, bgi, radius = 120 } = {}) {
        this.bgCanvas = document.querySelector(bgCanvas);
        this.brushCanvas = document.querySelector(brushCanvas);
        this.bgCtx = this.bgCanvas.getContext('2d');
        this.brushCtx = this.brushCanvas.getContext('2d');
        this.parentElement = this.bgCanvas.parentElement;
        const bcr = this.parentElement.getBoundingClientRect();
        this.canvasWidth = this.bgCanvas.width = this.brushCanvas.width = bcr.width;
        this.canvasHeight = this.bgCanvas.height = this.brushCanvas.height = bcr.height;
        this.brushRadius = radius;

        this.bgi = new Image();
        this.bgi.src = bgi;
        this.bgi.onload = this._attachEvents.bind(this);

        const bgCanvasEl = this.bgCanvas;
        this.utils = {
            distanceBetween(point1, point2) {
                return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
            },
            angleBetween(point1, point2) {
                return Math.atan2(point2.x - point1.x, point2.y - point1.y);
            },
            getMousePos(e) {
                const bcr = bgCanvasEl.getBoundingClientRect();
                return { x: e.clientX - bcr.left, y: e.clientY - bcr.top };
            },
            getTouchPos(touch) {
                const bcr = bgCanvasEl.getBoundingClientRect();
                return { x: touch.clientX - bcr.left, y: touch.clientY - bcr.top };
            }
        };
    }

    _attachEvents() {
        const parent = this.parentElement;
        parent.addEventListener('mousemove', this._onMouseMove.bind(this));
        parent.addEventListener('mouseleave', this._onMouseLeave.bind(this));
        parent.addEventListener('touchstart', this._onTouchStart.bind(this), { passive: false });
        parent.addEventListener('touchmove', this._onTouchMove.bind(this), { passive: false });
        parent.addEventListener('touchend', this._onTouchEnd.bind(this), { passive: false });
    }

    _onMouseMove(e) {
        const currentPoint = this.utils.getMousePos(e);
        this._drawStroke(currentPoint);
    }

    _onMouseLeave() {
        this.lastPoint = null;
    }

    _onTouchStart(e) {
        e.preventDefault();
        const touch = e.touches[0];
        const pos = this.utils.getTouchPos(touch);
        this.lastPoint = pos;
    }

    _onTouchMove(e) {
        e.preventDefault();
        const touch = e.touches[0];
        const currentPoint = this.utils.getTouchPos(touch);
        this._drawStroke(currentPoint);
    }

    _onTouchEnd(e) {
        e.preventDefault();
        this.lastPoint = null;
    }

    _drawStroke(currentPoint) {
        this.lastPoint = this.lastPoint || currentPoint;
        const dist = this.utils.distanceBetween(this.lastPoint, currentPoint);
        const angle = this.utils.angleBetween(this.lastPoint, currentPoint);

        for (let ii = 0; ii < dist; ii += 5) {
            const x = this.lastPoint.x + (Math.sin(angle) * ii);
            const y = this.lastPoint.y + (Math.cos(angle) * ii);
            const brush = this.brushCtx.createRadialGradient(x, y, 0, x, y, this.brushRadius);
            brush.addColorStop(0, 'rgba(0, 0, 0, 1)');
            brush.addColorStop(0.3, 'rgba(0, 0, 0, 0.1)');
            brush.addColorStop(1, 'rgba(0, 0, 0, 0)');
            this.brushCtx.fillStyle = brush;
            this.brushCtx.fillRect(
                x - this.brushRadius,
                y - this.brushRadius,
                this.brushRadius * 2,
                this.brushRadius * 2
            );
        }

        this.lastPoint = currentPoint;

        this.bgCtx.globalCompositeOperation = 'source-over';
        const size = coverImg(this.bgi, this.canvasWidth, this.canvasHeight);
        this.bgCtx.drawImage(this.bgi, 0, 0, size.w, size.h);
        this.bgCtx.globalCompositeOperation = 'destination-in';
        this.bgCtx.drawImage(this.brushCanvas, 0, 0);
    }
}

const coverImg = (img, width, height) => {
    const ratio = img.width / img.height;
    let w = width;
    let h = w / ratio;
    if (h < height) {
        h = height;
        w = h * ratio;
    }
    return { w, h };
};

// ✅ Основное изображение
const bgi = 'https://upforme.ru/uploads/001a/f0/7d/2/35680.webp';

// Адаптивные параметры
function getFogDensity() {
    if (window.innerWidth < 480) return 25;
    if (window.innerWidth < 768) return 35;
    return 80;
}

function getEraserRadius() {
    if (window.innerWidth < 480) return 40;
    if (window.innerWidth < 768) return 55;
    return 60;
}

function resize() {
    new Fog({
        selector: '#fog',
        // ✅ Туман
        particle: 'https://upforme.ru/uploads/001a/f0/7d/2/814636.png',
        density: getFogDensity(),
        bgi,
    });
    new Eraser({
        bgCanvas: '#fog-bg',
        brushCanvas: '#brush',
        radius: getEraserRadius(),
        bgi,
    });
}

// Инициализация
resize();
window.addEventListener("resize", resize);

// === ТОЧНЫЙ КУРСОР-КИСТЬ (только для мыши) ===
const customCursor = document.getElementById('brush-cursor');
const fogContainer = document.querySelector('.fog-container');

// Показываем кисть ТОЛЬКО если есть точный указатель (мышь)
if (customCursor && fogContainer && window.matchMedia('(pointer: fine)').matches) {
    const updateCursor = (e) => {
        customCursor.style.left = e.clientX + 'px';
        customCursor.style.top = e.clientY + 'px';
        customCursor.style.opacity = '1';
    };

    fogContainer.addEventListener('mousemove', updateCursor);
    fogContainer.addEventListener('mouseenter', () => {
        customCursor.style.opacity = '1';
    });
    fogContainer.addEventListener('mouseleave', () => {
        customCursor.style.opacity = '0';
    });
} else if (customCursor) {
    // На тач-устройствах — скрываем
    customCursor.style.display = 'none';
}

// === КНОПКА "ВЕРНУТЬ ТУМАН" ===
document.getElementById('reset-fog')?.addEventListener('click', () => {
    ['fog', 'fog-bg', 'brush'].forEach(id => {
        const canvas = document.getElementById(id);
        if (canvas) {
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    });
    resize();
});
</script>
[/html]