Popup shape

Cards that pop up in 3D using CSS perspective anchored to the viewport center.

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
import './popup-shape.css'
import { PopupShapeUtil } from './PopupShapeUtil'

const customShapeUtils = [PopupShapeUtil]

export default function PopupShapeExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw
				shapeUtils={customShapeUtils}
				onMount={(editor) => {
					for (let i = 0; i < 9; i++) {
						editor.createShape({
							type: 'my-popup-shape',
							x: (i % 3) * 220,
							y: Math.floor(i / 3) * 220,
						})
					}
					editor.zoomToBounds(editor.getCurrentPageBounds()!, { animation: { duration: 0 } })
				}}
			/>
		</div>
	)
}

Each shape renders a card tilted with a CSS rotateX transform inside an HTMLContainer that sets perspective. The trick is the perspective origin: it's computed from editor.getViewportPageBounds() relative to the shape, so every card shares one vanishing point at the center of the screen. Shape components are reactive, so reading the bounds during render keeps that origin updated as you pan and zoom.

Try panning around and double-clicking a card to pop it upright.

Is this page helpful?
Prev
Globs
Next
Commenting