web/js/moEffects.js - master - vladlevin790/cpp-lab-2

web/js/moEffects.js
221 строка5 KB
vladlevin790
init
05 май 2026, 21:32
05 май 2026, 21:323310cbd
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

function getMojs() {
    return window.mojs || null;
}

function centerOf(element) {
    const rect = element.getBoundingClientRect();

    return {
        x: rect.left + rect.width / 2,
        y: rect.top + rect.height / 2
    };
}

export function playControlBurst(element, color = "#67e8f9") {
    const mojs = getMojs();

    if (!mojs || prefersReducedMotion || !element) {
        return;
    }

    const point = centerOf(element);

    const timeline = new mojs.Timeline();

    timeline.add(new mojs.Burst({
        left: point.x,
        top: point.y,
        radius: { 8: 34 },
        count: 8,
        degree: 210,
        children: {
            shape: "zigzag",
            points: 5,
            stroke: color,
            strokeWidth: { 3: 0 },
            radius: { 6: 12 },
            duration: 460,
            easing: "quad.out"
        }
    }));

    timeline.add(new mojs.Shape({
        left: point.x,
        top: point.y,
        shape: "circle",
        radius: { 0: 26 },
        stroke: color,
        strokeWidth: { 3: 0 },
        fill: "none",
        duration: 420,
        easing: "cubic.out"
    }));

    timeline.add(new mojs.Html({
        el: element,
        scale: { 0.98: 1 },
        y: { 1: 0 },
        duration: 280,
        easing: "back.out"
    }));

    timeline.play();
}

export function playCanvasPing(element, color = "#67e8f9") {
    const mojs = getMojs();

    if (!mojs || prefersReducedMotion || !element) {
        return;
    }

    const point = centerOf(element);

    const timeline = new mojs.Timeline();

    timeline.add(new mojs.Shape({
        left: point.x,
        top: point.y,
        shape: "rect",
        radiusX: { 8: Math.min(element.clientWidth / 2, 180) },
        radiusY: { 8: Math.min(element.clientHeight / 2, 120) },
        stroke: color,
        strokeWidth: { 2: 0 },
        fill: "none",
        duration: 520,
        easing: "quad.out"
    }));

    timeline.add(new mojs.ShapeSwirl({
        left: point.x,
        top: point.y,
        shape: "circle",
        fill: color,
        radius: { 4: 18 },
        swirlSize: 18,
        swirlFrequency: 2,
        duration: 620,
        opacity: { 0.9: 0 }
    }));

    timeline.play();
}

export function playResultPop(element) {
    const mojs = getMojs();

    if (!mojs || prefersReducedMotion || !element) {
        return;
    }

    new mojs.Html({
        el: element,
        y: { 4: 0 },
        opacity: { 0.72: 1 },
        duration: 360,
        easing: "cubic.out"
    }).play();
}

export function playAsciiSweep(element) {
    const mojs = getMojs();

    if (!mojs || prefersReducedMotion || !element) {
        return;
    }

    const point = centerOf(element);
    const width = Math.min(element.clientWidth, 420);

    new mojs.Shape({
        left: point.x,
        top: point.y - element.clientHeight / 2 + 28,
        shape: "rect",
        radiusX: { 0: width / 2 },
        radiusY: 1,
        fill: { "#67e8f9": "#facc15" },
        opacity: { 0.9: 0 },
        duration: 700,
        easing: "cubic.out"
    }).play();

    new mojs.Burst({
        left: point.x + width / 2 - 28,
        top: point.y - element.clientHeight / 2 + 28,
        radius: { 4: 24 },
        count: 5,
        children: {
            shape: "circle",
            fill: ["#67e8f9", "#facc15", "#34d399"],
            radius: { 3: 0 },
            duration: 520
        }
    }).play();
}

export function playHeroIntro() {
    const mojs = getMojs();
    const hero = document.querySelector(".hero-screen");
    const core = document.querySelector(".core-chip");
    const title = document.querySelector(".hero-copy h1");
    const tokens = Array.from(document.querySelectorAll(".float-token"));

    if (!mojs || prefersReducedMotion || !hero || !core || !title) {
        return;
    }

    const point = centerOf(core);
    const timeline = new mojs.Timeline();

    timeline.add(new mojs.Html({
        el: title,
        y: { 18: 0 },
        duration: 720,
        easing: "cubic.out"
    }));

    tokens.forEach((token, index) => {
        timeline.add(new mojs.Html({
            el: token,
            y: { 18: 0 },
            rotateZ: { [-4 + index * 2]: 0 },
            duration: 520,
            delay: index * 55,
            easing: "back.out"
        }));
    });

    timeline.add(new mojs.ShapeSwirl({
        left: point.x,
        top: point.y,
        shape: "polygon",
        points: 6,
        fill: { "#67e8f9": "#8b5cf6" },
        radius: { 6: 22 },
        swirlSize: 28,
        swirlFrequency: 3,
        duration: 900,
        opacity: { 0.9: 0 }
    }));

    timeline.add(new mojs.Burst({
        left: point.x,
        top: point.y,
        radius: { 20: 120 },
        count: 12,
        children: {
            shape: ["line", "circle", "polygon"],
            points: 5,
            stroke: ["#67e8f9", "#facc15", "#34d399"],
            fill: "none",
            strokeWidth: { 3: 0 },
            radius: { 8: 18 },
            duration: 800,
            easing: "quad.out"
        }
    }));

    timeline.play();
}