Infinite Canvas

x-infinite-canvas

A pannable, zoomable infinite surface. Scroll or trackpad to glide with momentum, dispatch events to zoom or recenter, and drop any content in the middle. Optional dotted background.

php artisan components:add infinite-canvas

Playground

scale dotPattern centerCanvasOnResize

Examples

Basic

Scroll or trackpad to glide across a dotted-grid canvas.

<div class="flex h-72 w-full items-center justify-center overflow-hidden rounded-large border border-foreground/10 bg-card">
    <x-components.infinite-canvas :scale="100" dot-pattern>
        <div class="rounded-large border border-foreground/10 bg-background px-6 py-4 text-center shadow-xs">
            <p class="font-semibold text-foreground">Pan around me</p>
            <p class="mt-1 text-sm text-foreground/60">Scroll or trackpad to glide across the canvas.</p>
        </div>
    </x-components.infinite-canvas>
</div>

Props

Prop	Type	Default	Description
`scale`	text	`100`	Initial zoom as a percentage (100 = 1×).
`dotPattern`	boolean	`false`	Show a themed dotted-grid background.
`centerCanvasOnResize`	boolean	`false`	Re-center the viewport whenever the window resizes.

Slots

Slot	Description
`slot`	Content placed at the center of the canvas.