[html]<div class="fog-container">
    <canvas id="fog"></canvas>
    <canvas id="fog-bg"></canvas>
    <canvas id="brush"></canvas>
</div>

<style>
.fog-container {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    margin: 20px 0;
    border-radius: 6px;
    touch-action: none;
    width: 100%;
}

/* Уменьшаем размер только на десктопе */
@media (min-width: 768px) {
    .fog-container {
        max-width: 60rem; /* ≈960px при 16px базовом шрифте */
        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;
}
</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://atuin.ru/demo/i/fog-bg.webp';

// Адаптивные параметры
function getFogDensity() {
    if (window.innerWidth < 480) return 25;   // очень маленькие экраны
    if (window.innerWidth < 768) return 35;   // мобильные
    return 60;                                // десктоп
}

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

function resize() {
    // Создаём новые эффекты с адаптивными настройками
    new Fog({
        selector: '#fog',
        particle: 'https://atuin.ru/demo/i/fog-particle.png',
        density: getFogDensity(),
        bgi,
    });
    new Eraser({
        bgCanvas: '#fog-bg',
        brushCanvas: '#brush',
        radius: getEraserRadius(),
        bgi,
    });
}

// Инициализация
resize();
window.addEventListener("resize", resize);
</script>[/html]