BricksLab Catalog

@brickslab/ui-web

Animated skew and scale distortion effect with optional radial gradient mask

Warp Effect

Props

Prop	Type	Défaut	Requis	Description
`intensity`	`number`	`30`	—	Controls the amount of distortion applied (0-100)
`speed`	`number`	`8`	—	Animation speed in seconds
`mask`	`"none" \| "radial"`	`"none"`	—	Apply radial gradient mask to edge
`children`	`ReactNode`	`undefined`	—	Content to overlay on the background

Usage

tsx

import { WarpBackground } from "@brickslab/ui-web";

export function MyComponent() {
  return (
    <WarpBackground intensity={30} speed={8} mask="radial">
      <div className="flex items-center justify-center h-screen">
        <h1 className="text-4xl font-bold text-white">Warp Effect</h1>
      </div>
    </WarpBackground>
  );
}

Variations

With Radial Mask

Masked Warp

No Mask with High Intensity

High Intensity