Tilt Card
Overview
The card tilts in 3D with the pointer, the highlight moves the other way and the content layer has parallax. It springs back on leave.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Tilt Card to your project in your colors.
Where to use it
Sections that present information in groups: features, case studies and work, team members, article lists.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add tilt-card
mcp › Use 8pt MCP to call get_component("tilt-card")
Code
Source for Tilt Card. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-tilt">
<article class="x-tilt__card">
<span class="x-tilt__glare" aria-hidden="true"></span>
<div class="x-tilt__top"><span class="x-tilt__chip" aria-hidden="true"></span><span>ORBIT CARD</span></div>
<div class="x-tilt__num">4128 ·· ·· 2048</div>
<div class="x-tilt__row"><span>A. Sample</span><span>08/29</span></div>
</article>
</div>.x-tilt{perspective:800px;display:grid;place-items:center;width:100%;height:100%}
.x-tilt__card{position:relative;overflow:hidden;width:min(270px,100%);aspect-ratio:1.586;padding:18px 20px;border-radius:16px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,color-mix(in srgb,var(--d-accent,#4D74FF) 85%,#000),#1b1240 60%,#0b0b14);box-shadow:0 30px 50px -25px rgba(0,0,0,.7);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.4,.5,1);will-change:transform}
.x-tilt__card.live{transition:transform .08s linear}
.x-tilt__glare{position:absolute;left:0;top:0;width:200%;height:200%;margin:-100% 0 0 -100%;background:radial-gradient(circle at center,rgba(255,255,255,.35),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
.x-tilt__card:hover .x-tilt__glare{opacity:1}
.x-tilt__top{display:flex;justify-content:space-between;align-items:center;font:700 11px/1 var(--d-font,system-ui,sans-serif);letter-spacing:.16em;transform:translateZ(30px)}
.x-tilt__chip{width:34px;height:26px;border-radius:6px;background:linear-gradient(135deg,#f5d77a,#b8913a)}
.x-tilt__num{font:600 17px/1 ui-monospace,monospace;letter-spacing:.08em;transform:translateZ(40px)}
.x-tilt__row{display:flex;justify-content:space-between;font:500 11px/1 var(--d-font,system-ui,sans-serif);opacity:.8;transform:translateZ(20px)}const init = (root) => {
const card = root.querySelector('.x-tilt__card'), glare = card.querySelector('.x-tilt__glare');
let raf = 0, idle, t = 0;
const set = (rx, ry, gx, gy) => { card.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg)`; glare.style.transform = `translate(${gx}px, ${gy}px)`; };
card.addEventListener('pointermove', e => {
cancelAnimationFrame(idle); idle = 0;
const r = card.getBoundingClientRect(), px = (e.clientX - r.left) / r.width, py = (e.clientY - r.top) / r.height;
card.classList.add('live'); cancelAnimationFrame(raf);
raf = requestAnimationFrame(() => set((0.5 - py) * 18, (px - 0.5) * 22, px * r.width, py * r.height));
});
card.addEventListener('pointerleave', () => { card.classList.remove('live'); set(0, 0, 0, 0); });
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
…Subscribe to Builder to see the full source.See pricing