Apple Intelligence style animated glow border as a reusable React component.
npm install @xuanhe/apple-intelligence-glow-reactApple Intelligence–inspired animated glow border as a reusable React component.


- Multiple glow states: idle, hover, focus, thinking, success, error
- Smooth state transitions with CSS animations
- SSR compatible (Next.js, Remix, etc.)
- Respects prefers-reduced-motion
- TypeScript support
- Zero dependencies (only React peer dependency)
- AppleIntelligenceGlow – Core reusable glow container with state support
- AppleIntelligenceLockScreen – Demo lock screen UI with dynamic island and live clock
---
``bash`
npm install apple-intelligence-glow-react
or with yarn / pnpm:
`bash`
yarn add apple-intelligence-glow-reactor
pnpm add apple-intelligence-glow-react
---
`jsx
import { AppleIntelligenceGlow } from "apple-intelligence-glow-react";
function App() {
return (
radius={24}
style={{
width: 300,
height: 200,
background: "#1a1a2e",
padding: 20,
}}
>
---
State Control
The component supports 6 different visual states:
`jsx
import { useState } from "react";
import { AppleIntelligenceGlow, GlowState } from "apple-intelligence-glow-react";function AIInput() {
const [state, setState] = useState("idle");
return (
state={state}
radius={16}
onMouseEnter={() => setState("hover")}
onMouseLeave={() => setState("idle")}
onFocus={() => setState("focus")}
>
);
}
`| State | Description | Visual Effect |
|-------|-------------|---------------|
|
idle | Default state | Very subtle glow (15% intensity) |
| hover | Mouse hover | Light highlight (35% intensity) |
| focus | Input focused | Clear focus ring (55% intensity) |
| thinking | AI processing | Animated gradient (75% intensity, faster rotation) |
| success | Task complete | Bloom effect (100% intensity) |
| error | Error state | Solid red glow (no rotation) |---
API Reference
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
state | GlowState | "thinking" | Visual state of the glow |
| isActive | boolean | true | Enable/disable glow effect |
| isPaused | boolean | false | Pause animation (keeps current state) |
| radius | number \| string | 50 | Border radius |
| className | string | - | Custom CSS class |
| style | CSSProperties | - | Inline styles |
| children | ReactNode | - | Content to wrap |$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
width | number \| string | 360 | Phone frame width |
| height | number \| string | 720 | Phone frame height |
| isActive | boolean | true | Enable/disable glow |
| isPaused | boolean | false | Pause animation |
| className | string | - | Custom CSS class |
| style | CSSProperties | - | Inline styles |$3
`typescript
type GlowState = "idle" | "hover" | "focus" | "thinking" | "success" | "error";
`---
Custom Colors
Override the default gradient colors using CSS variables:
`jsx
style={{
"--aie-color-1": "#00FF00",
"--aie-color-2": "#00CC00",
"--aie-color-3": "#009900",
"--aie-color-4": "#006600",
"--aie-color-5": "#003300",
"--aie-color-6": "#00FF00",
}}
>
{/ Green theme /}
`---
Examples
$3
`jsx
function AIChatInput() {
const [state, setState] = useState("idle");
const [isLoading, setIsLoading] = useState(false); const handleSubmit = async () => {
setState("thinking");
setIsLoading(true);
try {
await sendMessage();
setState("success");
} catch {
setState("error");
} finally {
setIsLoading(false);
setTimeout(() => setState("idle"), 2000);
}
};
return (
onFocus={() => !isLoading && setState("focus")}
onBlur={() => !isLoading && setState("idle")}
/>
);
}
`$3
`jsx
state={isHovered ? "hover" : "idle"}
radius={20}
className="card"
>
Premium Feature
Unlock AI capabilities
``---
MIT