# Browser tilt (goodtabs UI)

A browser window that leans back in perspective and lies flat as it scrolls into place.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/browser-tilt.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/browser-tilt`

## Usage

```tsx
import { BrowserTilt } from "@/components/ui/browser-tilt"

<BrowserTilt url="acme.dev/dashboard">
  <img src="/dashboard.png" alt="The dashboard with three charts" />
</BrowserTilt>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| url | `string` | `"goodtabs.co"` | Shown in the address field. |
| tilt | `number` | `24` | Starting angle in degrees, leaning back from the bottom edge. |
| children | `ReactNode` |  | The page shown inside the frame. |

## When to use

- The product shot under a hero heading
- One big reveal of a screen on a landing page
- A page that needs a single moment of depth and nothing else

## When not to use

- For small previews or lists of screenshots: use the plain browser frame
- More than once on a page, because the second tilt repeats the trick
- Inside a scaled or transformed parent, which breaks ScrollTrigger's measuring

## Notes for agents

- GSAP installs from npm under GSAP's own licence. No GSAP code ships in this registry
- Keep scroll room below it: the frame only lies flat when its top reaches 12 percent of the viewport
- Below 768px, under reduced motion and with no script it renders flat. Under motion with script on, CSS paints the tilt before hydration, so a hero frame never jumps
- The light reads the --glow token and the top edge uses surface-shine; define both or the frame simply renders without them

## The maths

- The top edge shrinks by p / (p + H sin θ). At 1600px perspective, 620px tall and 24 degrees that is 0.86, so it reads 14 percent narrower.
- Height on screen is H cos θ, so the frame opens from 91 percent of its height to all of it as θ falls to 0.
- The light scrubs opacity from 0.2 to 1 against the same progress as the angle, so it brightens as the frame flattens.

Docs: https://ui.goodtabs.co/components/browser-tilt