AppleGlow

Overlay a rotating multi-colour gradient glow around the edges of a parent element.

AppleGlow is a client component that renders an absolutely positioned layer with a rotating linear gradient behind a blurred inset mask, so only a soft coloured edge is visible. Use it to show that an assistant or background task is active. It depends on motion/react.

Assistant is listening

Import#

typescript

import { AppleGlow } from "@reactberry/system/blocks";

Usage#

typescript

"use client";

import { useState } from "react";
import { AppleGlow } from "@reactberry/system/blocks";
import { Box, Button } from "@reactberry/system/elements";

export default function AssistantPanel() {
  const [active, setActive] = useState(false);

  return (
    <Box position="relative" p="l" shape="rounded" minHeight="200px">
      <AppleGlow preview={active} borderRadius="16px" />
      <Box position="relative">
        <Button variant="default" onClick={() => setActive((value) => !value)}>
          {active ? "Stop" : "Start"}
        </Button>
      </Box>
    </Box>
  );
}

Examples#

Subtle two-colour glow#

Pass two colors, a smaller intensity and a higher rotationSpeed for a quieter, slower glow.

Summary ready3 action items were found in this meeting.

Pill outline#

Use a large borderRadius and a small blurAmount for a thin glowing outline around a pill-shaped element.

Ask anything

API#

AppleGlow#

Prop	Type	Default	Description
`colors`	`string[]`	`[…`	Gradient colour stops.
`borderRadius`	`string \| number`	—	Applied as an inline style; the inset mask inherits it when set.
`intensity`	`number \| "sm" \| "md" \| "lg" \| "xl"`	`xl`	Mask blur. Presets map to 8, 16, 24 and 32 pixels; a number is used as pixels.
`preview`	`boolean`	`false`	Renders and animates the glow. Nothing is rendered when `false`.
`blurAmount`	`number`	—	Mask blur in pixels. Overrides `intensity`.
`backgroundColor`	`string`	`base`	Background of the inset mask. Match it to the parent's background.
`rotationSpeed`	`number`	`50`	Milliseconds per degree of rotation; higher values rotate more slowly. `0` stops rotation.

The default colors are ["#3B82F6", "#A855F7", "#7A84FF", "#35B3DF"]. All remaining BoxProps (except children) are spread onto the glow layer. The props type is exported as AppleGlowProps from @reactberry/system/blocks.

Accessibility#

The glow is a decorative div with no role or label. If it signals a state, such as an assistant listening, also show that state in text.
When the user prefers reduced motion, a static gradient is shown and no animation loop runs.

Notes#

The layer is position: absolute with all edges at 0 and pointer-events: none. Its parent needs position: relative, and sibling content should be positioned to render above it.
The inset mask is offset 2px from each edge; the visible glow comes from the mask's blurred edges.
The glow fades in and out over 0.3 s via AnimatePresence.
The gradient angle is updated with requestAnimationFrame, writing style.background directly instead of re-rendering React.