Pointerstable

Vellum

A sheet that leans toward the pointer, with an optional dent and sheen.

Customize

Sheetgeometry of the tilt

Tilt9 degtilt

Radius22 pxradius

Ease0.140ease

Perspective900 pxperspective

Highlightoptional dent and sheen

Enabledhighlight

Dent0.35dent

Sheen0.50sheen

Sheen coloursheenColor

TSX

import { Vellum } from "zerogravity"

<Vellum>
    <div>Card</div>
</Vellum>

Generated from the controls above. Only props that differ from their defaults are shown.

6 documented props on Vellum
Property	Type	Default	Description
`tilt`	`number`	`9`	Tilt. Range 0 to 30 deg.
`radius`	`number`	`22`	Radius. Range 0 to 64 px.
`ease`	`number`	`0.14`	Ease. Range 0.02 to 1.
`perspective`	`number`	`900`	Perspective. Range 300 to 2000 px.
`children`	`ReactNode`	`—`	Whatever sits on the sheet.
`highlight`	`VellumHighlight \| false`	`false`	Dent and sheen settings, or false to switch both off.

0 external runtime dependencies

Ships with nothing but React.