Brickslab.Tools

@brickslab./ui-web

Glassmorphism with animated aurora gradient effect and backdrop blur

Glass Aurora

Props

Prop	Type	Défaut	Requis	Description
`colors`	`string[]`	`["#FF00FF", "#00FFFF", "#00FF00"]`	—	Array of colors for the aurora gradient
`blur`	`number`	`10`	—	Glassmorphism blur amount (px)
`intensity`	`number`	`0.8`	—	Intensity of the aurora animation (0-1)
`border`	`boolean`	`true`	—	Show glassmorphic border

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
  colors={["#FF00FF", "#00FFFF", "#00FF00"]}
  blur={10}
  intensity={0.8}
  border={true}
/>

colorsblurintensityborder

Usage

tsx

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

export function MyComponent() {
  return (
    <div className="relative w-full h-screen bg-black">
      <GlassAuroraBackground
        colors={["#FF00FF", "#00FFFF", "#00FF00"]}
        blur={10}
        intensity={0.8}
        border
      />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold text-white">Glass Aurora</h1>
      </div>
    </div>
  );
}

Variations

Soft Glow Without Border

Soft Aurora

Intense Electric Colors

Electric