# Lock Melt

Premium content under frosted glass and a steel padlock. Unlocking heats the lock through dull red, orange and yellow, sags its shackle, then melts it top to bottom into WebGL metaball droplets that slide off, run down the panel and clear the frost wherever they pass.

- Page and source: https://uibrik.com/components/lock-melt
- Install (Pro, needs a license key, see https://uibrik.com/docs/pro): `npx shadcn@latest add @uibrik-pro/lock-melt`
- Packages: none beyond React
- Import: `import { LockMelt } from "@/components/uibrik/lock-melt/lock-melt"`

Where to use the Lock Melt React component:

- **Paywalls**: Unlocking a Pro feature or report becomes a reward in itself.
- **Upgrades**: The moment a plan upgrade lands, the locked panel melts open.
- **Reveals**: Hidden results, scores or answers revealed with a payoff.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| speed | `number` | `1` | Playback speed of the melt. |
| size | `number` | `56` | Width of the padlock's body. |
| frost | `number` | `0.6` | How strongly the cover blurs the content. |
| relock | `boolean` | `true` | Show a button to lock the content again once it's open. |
| width | `number` | `380` | Width of the card. |
| locked | `boolean` |  | Whether the content is locked (controlled). Pair with onLockedChange. |
| defaultLocked | `boolean` | `true` | Locked at the start when uncontrolled. |
| onLockedChange | `(locked: boolean) => void` |  | Called with false once the lock has melted, and true on relock. |
| children | `ReactNode` |  | The content behind the lock. Defaults to a sample forecast. |
| label | `string` | `"Unlock"` | Label of the unlock button. |
| caption | `string` | `"Pro feature"` | Text beside the button while locked. |
| className | `string` |  | Classes for the card. |