3D Tilt Card

Optional perspective tilt—default intensity low; product settings can disable entirely.

Low intensity, opt-inOptional perspective tilt—default intensity low; product settings can disable entirely.Use this asset as a visual and interaction brief. Copy the prompt into your AI coding tool, then adapt layout, brand voice and motion intensity to your product.

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Effects
Category: Agency
Style: Experimental
Tech stack: JAVASCRIPT
Animation: Hover
Difficulty: Beginner
License: Personal
Access: Free
Creator: Noah Bennett
Views: 894

Hover
Tilt
JavaScript

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Implement a low-intensity 3D tilt card (max 6deg). Fine pointer only. Reset on mouseleave. Feature-flag via data-tilt="off". Reduced motion: never tilt. Use transform and will-change sparingly.

Code

<!-- HTML -->
<div class="sys" id="sys"><span></span><span></span><span></span><span></span></div>

/* CSS */
body{display:grid;place-items:center}.sys{position:relative;width:min(52vmin,220px);height:min(52vmin,220px)}.sys span{position:absolute;inset:18%;border:1px solid rgba(255,255,255,.12);border-radius:50%;animation:spin 12s linear infinite}.sys span:nth-child(1){inset:0;border-color:hsl(18 85% 62%);opacity:.5;animation-duration:18s}.sys span:nth-child(2){inset:12%;animation-direction:reverse;animation-duration:14s}.sys span:nth-child(3){inset:28%;border-color:hsl(116 70% 55%);animation-duration:9s}.sys span:nth-child(4){inset:40%;background:radial-gradient(circle,hsl(18 85% 62%),transparent 70%);border:0;animation:pulse 3s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(1.15);opacity:.7}}

// JS
var s=document.getElementById("sys");window.addEventListener("pointermove",function(e){var r=s.getBoundingClientRect(),dx=(e.clientX-(r.left+r.width/2))/30,dy=(e.clientY-(r.top+r.height/2))/30;s.style.transform="perspective(600px) rotateY("+dx+"deg) rotateX("+(-dy)+"deg)"});