Tilt Browser Card

Cards

About

A Safari-style browser window that holds a screenshot and tilts toward the cursor with a subtle hover lift.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tilt Browser Card to your project and fits it to your theme.

Code

How Tilt Browser Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { TiltBrowserCard } from "@/components/ui/tilt-browser-card";

/** Inline SVG "screenshot" as a data-URI so the demo is fully self-contained. */
const SHOT = `data:image/svg+xml,${encodeURIComponent(
  `<svg xmlns='http://www.w3.org/2000/svg' width='1280' height='620'>
    <defs>
      <linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'>
        <stop offset='0' stop-color='#eef2ff'/><stop offset='1' stop-color='#e0e7ff'/>
      </linearGradient>
    </defs>
    <rect width='1280' height='620' fill='url(#bg)'/>
    <rect width='1280' height='72' fill='#ffffff'/>
    <circle cx='58' cy='36' r='14' fill='#6366f1'/>
    <rect x='88' y='28' width='120' height='16' rx='8' fill='#c7d2fe'/>
    <rect x='980' y='23' width='86' height='26' rx='13' fill='#6366f1'/>
    <rect x='1080' y='23' width='130' height='26' rx='13' fill='#a5b4fc'/>
    <rect x='120' y='208' width='620' height='56' rx='10' fill='#312e81'/>
    <rect x='120' y='292' width='470' height='24' rx='8' fill='#818cf8'/>
    <rect x='120' y='332' width='380' height='24' rx='8' fill='#a5b4fc'/>
    <rect x='120' y='402' width='190' height='50' rx='25' fill='#6366f1'/>
    <rect x='330' y='402' width='150' height='50' rx='25' fill='#ffffff' stroke='#c7d2fe' stroke-width='2'/>
    <rect x='820' y='168' width='340' height='300' rx='16' fill='#ffffff' stroke='#c7d2fe' stroke-width='2'/>
    <rect x='850' y='198' width='280' height='120' rx='10' fill='#eef2ff'/>
    <rect x='850' y='338' width='200' height='18' rx='9' fill='#c7d2fe'/>
    <rect x='850' y='370' width='260' height='18' rx='9' fill='#e0e7ff'/>
    <rect x='850' y='402' width='160' height='18' rx='9' fill='#e0e7ff'/>
  </svg>`
)}`;

export default function TiltBrowserCardDemo() {
  return (
    <div className="flex min-h-[440px] w-full items-center justify-center bg-neutral-100 p-8 dark:bg-neutral-950 sm:p-12">
      <div className="w-full max-w-2xl [perspective:1200px]">
        <TiltBrowserCard src={SHOT} url="yoursite.com" alt="Website preview" />
      </div>
    </div>
  );
}