Brickslab.Tools

@brickslab./ui-web

God rays light beams flowing downward with configurable ray count speed and opacity

God Rays

Props

Prop	Type	Défaut	Requis	Description
`rayCount`	`number`	`5`	—	Number of light rays to render
`speed`	`number`	`6`	—	Animation speed in seconds
`blur`	`number`	`30`	—	Blur amount of the rays
`opacity`	`number`	`0.6`	—	Opacity of the rays (0-1)
`color`	`string`	`"rgba(255, 255, 255, 0.8)"`	—	Base color of the rays

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
  rayCount={5}
  speed={6}
  blur={30}
  opacity={0.6}
  color="rgba(255, 255, 255, 0.8)"
/>

rayCountspeedbluropacitycolor

Usage

tsx

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

export function MyComponent() {
  return (
    <div className="relative w-full h-screen bg-black">
      <LightRaysBackground 
        rayCount={5} 
        speed={6} 
        blur={30} 
        opacity={0.6} 
      />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold text-white">God Rays</h1>
      </div>
    </div>
  );
}

Variations

Many Thin Rays

Thin Rays

Few Wide Rays

Wide Rays