Glow

import { Glow } from "@lualtek/react-components";
 
export default () => {
  return (
    <Glow>
      <div>...</div>
    </Glow>
  );
};

export type GlowProps = {
  /**
   * The distance from the edge of the card to start the glow effect
   *
   * @defaultValue 170
   */
  proximity?: number;
  /**
   * The width of the highlighted area
   *
   * @defaultValue 80
   */
  spread?: number;
  /**
   * The starting opacity of the glow effect
   */
  opacity?: number;
  /**
   * Whether the glow should fit the content or expand
   *
   * @defaultValue false
   */
  fitContent?: boolean;
  /**
   * The width of the border
   */
  borderWidth?: number;
  /**
   * The color of the border
   *
   * @defaultValue 'var(--vibrancy-background-hard)'
   */
  borderColor?: string;
  /**
   * The offset of the border.
   * Nevative values will put the border outside the panel
   *
   * defaultValue -5
   */
  borderOffset?: number;
  /**
   * The color of the glow effect
   */
  glowColor?: string;
  /**
   * The power of the glow effect. Set to 0 to disable.
   *
   * @defaultValue 10
   */
  glowPower?: number;
  /**
   * The value of the radius of the inner element.
   * This will be used to set the radius of the glow effect based on `borderOffset`.
   */
  innerRadius?: TokensTypes['radius'] | [RadiusType?, RadiusType?, RadiusType?, RadiusType?];
  /**
   * Whether the highlight should be global and shared across all cards
   *
   * @defaultValue true
   */
  globalHighlight?: boolean;
  /**
   * Whether the highlight should be rainbow colored
   */
  rainbowColors?: boolean;
}