Brickslab.Tools

@brickslab./ui-web

Diagonal stripes with optional scroll animation and customizable angle and width

Animated Stripes

Props

Prop	Type	Défaut	Requis	Description
`angle`	`number`	`45`	—	Angle of stripes in degrees
`stripeWidth`	`number`	`10`	—	Width of each stripe in pixels
`animate`	`boolean`	`false`	—	Enable scroll animation
`speed`	`number`	`8`	—	Animation speed in seconds
`gap`	`number`	`10`	—	Gap between stripes

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
  angle={45}
  stripeWidth={10}
  animate={false}
  speed={8}
  gap={10}
/>

anglestripeWidthanimatespeedgap

Usage

tsx

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

export function MyComponent() {
  return (
    <div className="relative w-full h-screen bg-white">
      <StripedPattern angle={45} stripeWidth={10} animate speed={8} />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold">Stripes</h1>
      </div>
    </div>
  );
}

Variations

Static Stripes

Static

Vertical Stripes

Vertical