@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
45 lines • 1.99 kB
TypeScript
import { type SpringOptions } from "motion/react";
import * as React from "react";
/** Configurable bubble color channels consumed by the CSS module. */
export interface BubbleBackgroundColors {
/** Primary bubble RGB triplet. @default "18,113,255" */
first: string;
/** Secondary bubble RGB triplet. @default "221,74,255" */
second: string;
/** Tertiary bubble RGB triplet. @default "0,220,255" */
third: string;
/** Fourth bubble RGB triplet. @default "200,50,50" */
fourth: string;
/** Fifth bubble RGB triplet. @default "180,180,50" */
fifth: string;
/** Sixth bubble RGB triplet used by the interactive layer. @default "140,100,255" */
sixth: string;
}
/** Props accepted by {@link BubbleBackground}. */
export interface BubbleBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
/** Enables mouse-following motion for the interactive bubble layer. @default false */
interactive?: boolean;
/** Spring configuration applied to the interactive bubble motion. @default {stiffness: 100, damping: 20} */
transition?: SpringOptions;
/** Overrides the CSS custom property color palette for the bubbles. @default {first: "18,113,255", second: "221,74,255", third: "0,220,255", fourth: "200,50,50", fifth: "180,180,50", sixth: "140,100,255"} */
colors?: BubbleBackgroundColors;
}
/**
* Renders drifting gradient bubbles with an optional interactive cursor follower.
*
* @remarks
* - Animated component using the `motion` library
* - Renders a `<div>` element
* - Styling via CSS Modules with `--ac-*` custom properties
* - Client-side only (`"use client"` directive)
*
* @example
* ```tsx
* <BubbleBackground interactive />
* ```
*
* @see {@link BubbleBackgroundProps} for available props
*/
declare const BubbleBackground: React.ForwardRefExoticComponent<BubbleBackgroundProps & React.RefAttributes<HTMLDivElement>>;
export { BubbleBackground };
//# sourceMappingURL=bubble-background.d.ts.map