<style>
    .gif-container {
        position: fixed;
        pointer-events: none;
        display: none;
        user-select: none;
        height: auto;
        width: 200px;
        border-radius: 10px;
        overflow: hidden;
        z-index: 9999;
    }

    .textwgif a[href] {
        cursor: default;
        text-decoration: none;
        color: black; /* Цвет ссылки */
        /* Эффект градиента в тексте */
        background: linear-gradient(90deg, #e933ff, #ffb400, #ff3333, #334dff, #e933ff);
        background-size: 200% auto;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: textflow 5s linear infinite;
    }

    @keyframes textflow {
        from { background-position: 0% center; }
        to { background-position: 200% center; }
    }
</style>
<script>
    $(() => {
        const hookLink = (link) => {
            const $container = $('<img class="gif-container">')
                .attr("src", $(link).attr("href"))
                .appendTo(document.body);

            $(link).attr("href", "#");

            var containerWidth = 0;
            var containerHeight = 0;

            $container.load(() => {
                containerWidth = $container.width();
                containerHeight = $container.height();
            })

            const updatePosition = (e) => {
                const x = e.clientX - containerWidth / 2;
                const y = e.clientY - containerHeight - 20;

                $container.css({
                    left: `${x}px`,
                    top: `${y}px`
                })
            }

            $(link).on("mouseenter", (e) => {
                updatePosition(e);
                $(link).on("mousemove", updatePosition);
                $container.show();
            })

            $(link).on("mouseleave", () => {
                $(link).off("mousemove");
                $container.hide();
            })

            $(link).click(e => e.preventDefault())
        }

        $(".t396__artboard").each((_, artboard) => {
            $(artboard).on("artBoardRendered", () => {
                $(
                  ".textwgif a[href]",
                  artboard
                ).each((_, link) => hookLink(link))
            })
        })
    })
</script>