Blur Area

Obscure specific map regions for privacy, restrictions, or focus.

Installation

First, make sure you have the base map component installed:

npx shadcn@latest add https://terrae.vercel.app/maps/map.json

Then install the blur area component:

npx shadcn@latest add https://terrae.vercel.app/maps/map-blur-area.json

Use the rounded prop to add border radius. Set to "full" for a circular or pill shape.

Prevent map interactions (pan, zoom, click) on the blur area. Try dragging inside the blurred region.

Control the blur area visibility with state. Useful for unlock flows or premium content reveals.

Use the areas prop to blur multiple regions with a single component. Each area can have its own blur, background color, and border radius settings.

Prop	Type	Default	Description
`coordinates`	`[number, number][]`	`—`	Array of [longitude, latitude] pairs defining a single blur area (minimum 3 points).
`areas`	`BlurAreaConfig[]`	`—`	Array of blur area configurations for multiple regions. Each config has: coordinates, blur, backgroundColor, rounded.
`blur`	`number`	`8`	Default blur intensity in pixels (applies to single area or as fallback for areas).
`backgroundColor`	`string`	`—`	Default tint color (use rgba for semi-transparent effects).
`rounded`	`number \| "full"`	`0`	Default border radius in pixels, or "full" for fully rounded corners.
`blockInteraction`	`boolean`	`false`	Prevent map interactions (pan, zoom, click) on blur areas.

Blur detailed data until user subscribes or unlocks access

Hide undiscovered regions in games until the player explores them

Requires minimum 3 coordinate points to define the area
The blur area is rendered as a rectangular bounding box around the provided coordinates
Works best with pitch={0} - CSS backdrop-filter has limitations with 3D map projections
Combine with markers to add context like a lock icon or label