3D磁吸卡片生成提示词

3D磁吸卡片生成提示词 3D磁吸卡片生成提示词 Modified July 24, 2025 Code block JavaScript Copy qrCode: 20, background: 8 } }; let isInMagneticField = false; let isHovering = false; let animationFrame; function getDistance(x1, y1, x2, y2) { return Math.sqrt(Math.pow(x2 x1, 2) + Math.pow(y2 y1, 2)); } function applyMagneticEffect(mouseX, mouseY) { const areaRect = magneticArea.getBoundingClientRect(); const cardRect = card.getBoundingClientRect(); const areaCenterX = areaRect.left + areaRect.width / 2; const areaCenterY = areaRect.top + areaRect.height / 2; const cardCenterX = cardRect.left + cardRect.width / 2; const cardCenterY = cardRect.top + cardRect.height / 2; const distance = getDistance(mouseX, mouseY, areaCenterX, areaCenterY); if (distance < config.magneticRadius) { isInMagneticField = true; const magneticForce = (config.magneticRadius distance) / config.magneticRadius; const pullStrength = magneticForce config.magneticStrength; const deltaX = (mouseX cardCenterX) pullStrength; const deltaY = (mouseY cardCenterY) pullStrength; card.style.transform = ; indicator.style.left = ; indicator.style.top = ; indicator.classList.add('active'); } else { isInMagneticField = false; card.style.transform = 'translate(0px, 0px)'; indicator.classList.remove('active'); } } function updateCardTransforms(mouseX, mouseY) { if (!isHovering) return; const rotateY = mouseX config.maxRotate config.rotateMultiplier; const rotateX = mouseY config.maxRotate config.rotateMultiplier; const scale = 1 + (Math.abs(mouseX) + Math.abs(mouseY)) 0.02; content.style.transform = ; const { sensitivity } = config; layers.title.style.transform = ; layers.code.style.transform = ; layers.iconTopRight.style.transform = ; layers.qrCode.style.transform = ; layers.bgImage.style.transform = ; } document.addEventListener('mousemove', (e) = { if (animationFrame) { cancelAnimationFrame(animationFrame); } animationFrame = requestAnimationFrame(() = { applyMagneticEffect(e.clientX, e.clientY); if (isHovering) { const cardRect = card.getBoundingClientRect(); const x = e.clientX cardRect.left; const y = e.clientY cardRect.top; const { width, height } = cardRect; const mouseX = (x / width) 0.5; const mouseY = (y / height) 0.5; updateCardTransforms(mouseX, mouseY); layers.glare.style.left = ; layers.glare.style.top = ; layers.glare.style.opacity = '1'; } }); }); controlArea.addEventListener('mouseenter', () = { isHovering = true; }); controlArea.addEventListener('mouseleave', () = { isHovering = false; if (animationFrame) { cancelAnimationFrame(animationFrame); } content.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)'; layers.title.style.transform = 'translateZ(40px)'; layers.code.style.transform = 'translateZ(40px)'; layers.iconTopRight.style.transform = 'translateZ(50px)'; layers.qrCode.style.transform = 'translateZ(80px)'; layers.bgImage.style.transform = 'translateZ( 50px) scale(1.1)'; layers.glare.style.opacity = '0'; }); card.addEventListener('click', (e) = { if (e.target.closest('.icon top right')) { return; } content.style.transform = 'rotateX(0deg) rotateY(0deg) scale(0.95)'; setTimeout(() = { content.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)'; window.open('https://x.com/vista8', ' blank'); }, 150); }); homeIcon.addEventListener('click', (e) = { e.stopPropagation(); const icon = homeIcon.querySelector('.icon'); icon.style.transform = 'scale(0.9)'; setTimeout(() = { icon.style.transform = 'scale(1.1)'; window.open('https://x.com/vista8', ' blank'); }, 100); }); card.addEventListener('selectstart', (e) = { e.preventDefault(); }); magneticArea.addEventListener('mouseleave', () = { isInMagneticField = false; card.style.transform = 'translate(0px, 0px)'; indicator.classList.remove('active'); }); Code block JavaScript Copy qrCode: 20, background: 8 } }; let isInMagneticField = false; let isHovering = false; let animationFrame; function getDistance(x1, y1, x2, y2) { return Math.sqrt(Math.pow(x2 x1, 2) + Math.pow(y2 y1, 2)); } function applyMagneticEffect(mouseX, mouseY) { const areaRect = magneticArea.getBoundingClientRect(); const cardRect = card.getBoundingClientRect(); const areaCenterX = areaRect.left + areaRect.width / 2; const areaCenterY = areaRect.top + areaRect.height / 2; const cardCenterX = cardRect.left + cardRect.width / 2; const cardCenterY = cardRect.top + cardRect.height / 2; const distance = getDistance(mouseX, mouseY, areaCenterX, areaCenterY); if (distance < config.magneticRadius) { isInMagneticField = true; const magneticForce = (config.magneticRadius distance) / config.magneticRadius; const pullStrength = magneticForce config.magneticStrength; const deltaX = (mouseX cardCenterX) pullStrength; const deltaY = (mouseY cardCenterY) pullStrength; card.style.transform = ; indicator.style.left = ; indicator.style.top = ; indicator.classList.add('active'); } else { isInMagneticField = false; card.style.transform = 'translate(0px, 0px)'; indicator.classList.remove('active'); } } function updateCardTransforms(mouseX, mouseY) { if (!isHovering) return; const rotateY = mouseX config.maxRotate config.rotateMultiplier; const rotateX = mouseY config.maxRotate config.rotateMultiplier; const scale = 1 + (Math.abs(mouseX) + Math.abs(mouseY)) 0.02; content.style.transform = ; const { sensitivity } = config; layers.title.style.transform = ; layers.code.style.transform = ; layers.iconTopRight.style.transform = ; layers.qrCode.style.transform = ; layers.bgImage.style.transform = ; } document.addEventListener('mousemove', (e) = { if (animationFrame) { cancelAnimationFrame(animationFrame); } animationFrame = requestAnimationFrame(() = { applyMagneticEffect(e.clientX, e.clientY); if (isHovering) { const cardRect = card.getBoundingClientRect(); const x = e.clientX cardRect.left; const y = e.clientY cardRect.top; const { width, height } = cardRect; const mouseX = (x / width) 0.5; const mouseY = (y / height) 0.5; updateCardTransforms(mouseX, mouseY); layers.glare.style.left = ; layers.glare.style.top = ; layers.glare.style.opacity = '1'; } }); }); controlArea.addEventListener('mouseenter', () = { isHovering = true; }); controlArea.addEventListener('mouseleave', () = { isHovering = false; if (animationFrame) { cancelAnimationFrame(animationFrame); } content.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)'; layers.title.style.transform = 'translateZ(40px)'; layers.code.style.transform = 'translateZ(40px)'; layers.iconTopRight.style.transform = 'translateZ(50px)'; layers.qrCode.style.transform = 'translateZ(80px)'; layers.bgImage.style.transform = 'translateZ( 50px) scale(1.1)'; layers.glare.style.opacity = '0'; }); card.addEventListener('click', (e) = { if (e.target.closest('.icon top right')) { return; } content.style.transform = 'rotateX(0deg) rotateY(0deg) scale(0.95)'; setTimeout(() = { content.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)'; window.open('https://x.com/vista8', ' blank'); }, 150); }); homeIcon.addEventListener('click', (e) = { e.stopPropagation(); const icon = homeIcon.querySelector('.icon'); icon.style.transform = 'scale(0.9)'; setTimeout(() = { icon.style.transform = 'scale(1.1)'; window.open('https://x.com/vista8', ' blank'); }, 100); }); card.addEventListener('selectstart', (e) = { e.preventDefault(); }); magneticArea.addEventListener('mouseleave', () = { isInMagneticField = false; card.style.transform = 'translate(0px, 0px)'; indicator.classList.remove('active'); });