Brickslab.Tools

@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

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  intensity={30}
  speed={8}
  mask="none"
  children={undefined}
/>

intensityspeedmaskchildren

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