Raw Source Toggle Dropdown

• Minified Source

MrKoby07 / Simple tilt effect on guns.lol cards

// ==UserScript==
// @name         Simple tilt effect on guns.lol cards
// @namespace    http://tampermonkey.net/
// @version      1.and.only
// @description  Tilt the profile card using event listeners and code from my website https://home.master3307.org/en/card
// @match        https://guns.lol/*
// @grant        none
// @license      MIT
// @run-at       document-end
// ==/UserScript==

(function () {
  'use strict';

  // Main card container – class, not id
  const TARGET_SELECTOR = '.userPage_userContainer__eymIK';

  function tiltCard(event) {
    const card = event.currentTarget;
    if (!card) return;

    const rect = card.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;

    const rotateX = (event.clientY - centerY) / 50;
    const rotateY = (event.clientX - centerX) / 50;

    card.style.transition = 'transform 0.05s ease';
    card.style.transform =
      `perspective(1000px) rotateX(${rotateX}deg) rotateY(${-rotateY}deg)`;
  }

  function resetCard(event) {
    const card = event.currentTarget;
    if (!card) return;

    card.style.transition = 'transform 0.5s ease';
    card.style.transform =
      'perspective(1000px) rotateX(0deg) rotateY(0deg)';
  }

  function attach() {
    const card = document.querySelector(TARGET_SELECTOR);
    if (!card) {
      console.log('[guns-tilt] card not found (class selector)');
      return false;
    }

    if (card.dataset.tiltAttached === 'true') return true;

    card.dataset.tiltAttached = 'true';
    card.style.willChange = 'transform';
    card.style.transformStyle = 'preserve-3d';

    card.addEventListener('mousemove', tiltCard);
    card.addEventListener('mouseleave', resetCard);

    console.log('[guns-tilt] attached to', card);
    return true;
  }

  // Try once at start
  attach();

  // React/Next can re-render the card – watch and reattach if needed
  const observer = new MutationObserver(() => {
    attach();
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();