# Postal A window that tilts up from the page in 3D with a slight bounce, over a dimmed and blurred backdrop. > Postal is a THM Componentes component that opens a window with a 3D entrance: the panel starts almost flat, tilts up and settles with a slight bounce while the backdrop dims and blurs. It closes with Esc, an outside click or the X button, and locks page scroll behind it. It suits bookings, plan details and forms. - Category: Navigation and scroll - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/postal/ ## What it looks like Imagine a card lying flat on a table that someone lifts until it faces you. When the button is clicked, the page behind dims and blurs, and the panel appears small, almost flat and slightly below center; then it tilts up, grows and settles in the middle of the screen with a gentle spring wobble. The panel has rounded corners, is up to 720 pixels wide and has an X in the top right corner that grows on hover. In light mode it is white; in dark mode, near black with a gray border. The optional footer is gray. On close, the panel shrinks and fades out. ## You may be looking for this if you asked for something like - “a pop-up window that opens with a nice animation” - “a box that appears in the middle of the screen with the background blurred” - “a modal that flips in with a 3D effect when I click a button” - “show plan details in a window without leaving the page” - “a booking popup that feels like a premium app” - “a window that closes when I press Esc or click outside” - “a form that opens on top of the site with some motion” ## Also known as tilt-in modal, modal dialog, pop-up window, dialog box, 3D modal, overlay dialog ## When to use - Plan or product details without taking people off the page - A short booking, contact or sign-up form - Confirming an important action, with Cancel and Confirm in the footer - Launch notes or announcements that deserve a brief spotlight ## When to avoid - Long content: the panel caps at 85% of the screen height and, as is, clips anything beyond that - Pop-ups that open by themselves on page load, which annoy visitors and get in the way ## How to ask your AI ```text Create a modal with an animated 3D entrance for the plan details: the panel tilts up with a spring over a blurred backdrop, closes with Esc and an outside click, returns focus to the button, traps Tab inside the dialog and has a no-animation version for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Postal ### Does Postal work with the keyboard and screen readers? Mostly. Postal closes with Esc, uses role dialog with aria-modal, moves focus to the panel on open and returns it to the original button on close, and the X has an accessible label. The code does not trap Tab inside the window, so ask your AI to add a focus trap and a title linked with aria-labelledby. ### Can I open Postal from code, without a button? Yes. Postal accepts v-model:open to control the window from outside, plus defaultOpen for the initial state, and exposes openModal, closeModal and toggle through its slot or the useAnimatedModal composable. That way the window can open after a form submission or at the end of a step. ### Does Postal work on phones? It does. On phones, Postal takes the screen width minus a 16-pixel margin on each side, closes when you tap outside the panel and locks page scrolling while open. Since its maximum height is 85% of the screen and overflow is clipped, long content needs an inner scroll area. ## Related components - [Mezanino](https://vibecode.thmtecnologia.com/en/components/mezanino/): A panel that slides up from the bottom of the screen, stops at three heights and follows your finger. - [Trevo](https://vibecode.thmtecnologia.com/en/components/trevo/): A search box that opens with Ctrl K or ⌘K to find pages and run actions without leaving the keyboard. - [Translado](https://vibecode.thmtecnologia.com/en/components/translado/): Click a gallery card and its photo and title grow smoothly until they become the detail page. - [Prateleira](https://vibecode.thmtecnologia.com/en/components/prateleira/): A row of tall photo cards that scrolls sideways and opens each card in a panel over the page. - [Baliza](https://vibecode.thmtecnologia.com/en/components/baliza/): Tooltips and menus pinned to the button that opens them, switching sides on their own when they hit an edge. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).