Everything You Need To
Integrate MereCalm Animations

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<div id="animation-json"></div>

<script>
// json animation without hover
lottie.loadAnimation({
    container: document.getElementById("animation-json"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "JPG/sleepingcat-idle.json"
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<div id="lottie-container">
    
    <div id="cat1-target"></div>
    <div id="cat2-target"></div>
</div>
<script>
const container = document.getElementById("lottie-container");
const cat1Target = document.getElementById("cat1-target");
const cat2Target = document.getElementById("cat2-target");

// Load Cat 1 (Looping Idle)
const anim1 = lottie.loadAnimation({
    container: cat1Target,
    renderer: "svg",
    loop: true,
    autoplay: false,
    path: "sleepingcat-idle.json"
});

// Load Cat 2 (Hover Action)
const anim2 = lottie.loadAnimation({
    container: cat2Target,
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: "sleepingcat-hover.json"
});

let isHoverPlaying = false;

// Wait until Cat 1 loads, then immediately loop it
anim1.addEventListener("DOMLoaded", () => {
    cat2Target.style.display = "none"; // Hide hover asset initially
    anim1.play();
});

// When Hover animation completes, switch back to Idle loop
anim2.addEventListener("complete", () => {
    if (isHoverPlaying) {
        isHoverPlaying = false;
    }
    
    cat2Target.style.display = "none";  // Hide hover layer
    cat1Target.style.display = "block"; // Show loop layer
    anim1.goToAndPlay(0, true);         // Restart loop smoothly
});

// Trigger animation swap on mouse enter
container.addEventListener("mouseenter", () => {
    if (isHoverPlaying) return;

    isHoverPlaying = true;

    anim1.stop();                       // Pause idle loop
    cat1Target.style.display = "none";  // Hide loop layer
    cat2Target.style.display = "block"; // Show hover layer
    
    anim2.goToAndPlay(0, true);         // Play hover action once from start
});
</script>

<script type="module" src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.6.2/dist/dotlottie-wc.js"></script>

<dotlottie-wc src="JPG/sleepingcat-idle.lottie" autoplay loop style="width:300px;height:300px;"></dotlottie-wc>

<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.6.2/dist/dotlottie-wc.js" type="module"></script>

<div class="animation-container" id="hoverArea">
    
    <dotlottie-wc id="myLottiePlayer" src="sleepingcat-full.lottie" speed="1" style="width: 100%; height: 100%"
        segment="[0,120]" autoplay loop></dotlottie-wc>
</div>

<script>
    // -----------------------------
    // Animation Frame Ranges
    // -----------------------------

    const IDLE_START = 0;
    const IDLE_END = 119;

    const HOVER_START = 120;
    const HOVER_END = 479;

    const player = document.getElementById('myLottiePlayer');
    const hoverArea = document.getElementById('hoverArea');
    let isHovered = false;

    // Function to safely jump back to the idle looping animation
    function resetToIdleLoop() {
        if (!player.dotLottie) return;

        // Turn looping back on for Idle
        player.dotLottie.setLoop(true);
        player.dotLottie.setSegment(
            IDLE_START,
            IDLE_END
        );

        // Force the playhead to the beginning of the idle segment
        player.dotLottie.stop();
        player.dotLottie.play();
    }

    // 1. Hover In State: Plays Frames 181 to 432 EXACTLY once
    hoverArea.addEventListener('mouseenter', () => {
        if (!player.dotLottie) return;
        isHovered = true;

        // Remove any lingering complete handlers to avoid duplicate fires
        player.dotLottie.removeEventListener('complete', onHoverFinished);

        // Turn loop OFF so hover plays exactly once
        player.dotLottie.setLoop(false);
        player.dotLottie.setSegment(
            HOVER_START,
            HOVER_END
        );

        // Force playhead to drop to the absolute start of the hover frame (181)
        player.dotLottie.stop();
        player.dotLottie.play();

        // Listen for the exact moment the hover animation completes its timeline
        player.dotLottie.addEventListener('complete', onHoverFinished);
    });

    // Callback handler when the hover animation finishes its sequence
    function onHoverFinished() {
        player.dotLottie.removeEventListener('complete', onHoverFinished);

        // Go right back to the looping idle sequence automatically
        resetToIdleLoop();
    }

    // 2. Hover Out State: Safety net in case mouse leaves BEFORE hover finishes
    hoverArea.addEventListener('mouseleave', () => {
        isHovered = false;

        // Optional: If you want it to drop back to idle instantly when the mouse leaves, 
        // uncomment the line below. Otherwise, it will finish its current hover cycle.
        // resetToIdleLoop();
    });
</script>