Free 3D Scene
3D Perspective Mockup Tilt
An interactive 3D application mockup card that tilts with cursor movement and reflects a dynamic specular glare.
Colours in this gradient
#0a0f1d#3b82f6#6366f1#ffffff
background: ;The code
Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="tilt-stage" id="tiltStage">
<div class="tilt-card" id="tiltCard">
<div class="tilt-glare" id="tiltGlare"></div>
<div class="tilt-browser-bar">
<div class="tilt-dots">
<span></span><span></span><span></span>
</div>
<div class="tilt-url">https://app.vectoranalytics.ai/dashboard</div>
</div>
<div class="tilt-screen">
<div class="tilt-top-stats">
<div class="ts-box"><small>ACTIVE CLUSTERS</small><b>2,410</b></div>
<div class="ts-box"><small>AVG LATENCY</small><b>1.8 ms</b></div>
<div class="ts-box"><small>UPTIME</small><b>99.99%</b></div>
</div>
<div class="tilt-chart-mock">
<div class="tc-bar" style="height: 45%;"></div>
<div class="tc-bar" style="height: 65%;"></div>
<div class="tc-bar" style="height: 40%;"></div>
<div class="tc-bar" style="height: 85%;"></div>
<div class="tc-bar tc-active" style="height: 100%;"></div>
<div class="tc-bar" style="height: 75%;"></div>
<div class="tc-bar" style="height: 90%;"></div>
</div>
</div>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.
Create an interactive 3D perspective dashboard mockup card that tilts with cursor movement in HTML, CSS and vanilla JavaScript. Requirements: - Perspective stage with perspective: 1200px. - Card with transform-style: preserve-3d. - Mousemove listener on container computing delta from center to calculate dynamic rotateX and rotateY angles. - Specular glare overlay positioned dynamically based on cursor percentage. - Browser top bar with 3 macOS-style dots and URL chip. - Smooth return to neutral state on mouseleave. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Set perspective on the parent stage and transform-style: preserve-3d on the card.
- 2
Calculate relative mouse position from card center: dx = (x - cx) / cx.
- 3
Apply rotateX(-dy * maxAngle) and rotateY(dx * maxAngle) dynamically.
- 4
Update radial-gradient glare origin to match mouse position coordinates.
Customisation tips
- Inverting dy gives natural 3D tilt towards the mouse.
- Use transition: transform 0.15s ease-out to eliminate jitter while maintaining responsiveness.