Move across the surface and a GPU density field carves the cover away. Content underneath shows through, then the veil seals back as the trail fades.
Cover
72px
0.7
0.72
0.55
tsx
import { Mask } from "@/components/motion/mask"export function Example() { return ( <Mask className="aspect-[16/10] w-full" radius={72} softness={0.7} persistence={0.72} viscosity={0.55} coverColor="#09090b" > <img src="/assets/brand/demos/attachments/attachment-2.png" alt="" className="size-full object-cover" /> </Mask> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add maskUsage
import { Mask } from "@/components/motion/mask"<Mask className="aspect-[16/10] w-full" coverColor="#09090b"> <img src="/photo.jpg" alt="" className="size-full object-cover" /></Mask>API Reference
Mask
| Prop | Type | Default |
|---|---|---|
| radius | number | 72 |
| softness | number | 0.7 |
| persistence | number | 0.72 |
| viscosity | number | 0.55 |
| coverColor | string | #09090b |
| className | string | — |
| children | ReactNode | — |
Also accepts the other native div attributes. Radius is in pixels. Uses ogl for the WebGL sim.