Brickslab.Tools

@brickslab./ui-web

Concentric ripple rings expanding from center with customizable frequency and amplitude

Ripple

Props

Prop	Type	Défaut	Requis	Description
`amplitude`	`number`	`100`	—	Height of the ripple waves
`frequency`	`number`	`5`	—	Number of ripple rings
`center`	`{ x: number; y: number }`	`{ x: 50, y: 50 }`	—	Center position of ripples (0-100 for both x and y)
`speed`	`number`	`6`	—	Animation speed in seconds

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
  amplitude={100}
  frequency={5}
  center={{ x: 50, y: 50 }}
  speed={6}
/>

amplitudefrequencycenterspeed

Usage

tsx

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

export function MyComponent() {
  return (
    <div className="relative w-full h-screen">
      <RippleBackground amplitude={100} frequency={5} centerX={50} centerY={50} />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold text-white">Ripple Effect</h1>
      </div>
    </div>
  );
}

Variations

Offset Center

Off-Center

Dense Ripples

Dense