apple-intelligence-glow-react

Apple Intelligence–inspired animated glow border as a reusable React component.


Live Demo

!Glow Demo

Features

- 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)

Components

- AppleIntelligenceGlow – Core reusable glow container with state support
- AppleIntelligenceLockScreen – Demo lock screen UI with dynamic island and live clock

---

Installation

``bash
npm install apple-intelligence-glow-react
`

or with yarn / pnpm:

`bash
yarn add apple-intelligence-glow-react


or


pnpm add apple-intelligence-glow-react
`

---

Quick Start

`jsx
import { AppleIntelligenceGlow } from "apple-intelligence-glow-react";

function App() {
return (
state="thinking"
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")}
>
<br /> </AppleIntelligenceGlow><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">| State | Description | Visual Effect |<br />|-------|-------------|---------------|<br />| </code>idle<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Default state | Very subtle glow (15% intensity) |<br />| </code>hover<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Mouse hover | Light highlight (35% intensity) |<br />| </code>focus<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Input focused | Clear focus ring (55% intensity) |<br />| </code>thinking<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | AI processing | Animated gradient (75% intensity, faster rotation) |<br />| </code>success<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Task complete | Bloom effect (100% intensity) |<br />| </code>error<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Error state | Solid red glow (no rotation) |</p><p class="my-3">---</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">API Reference</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">| Prop | Type | Default | Description |<br />|------|------|---------|-------------|<br />| </code>state<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>GlowState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>"thinking"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Visual state of the glow |<br />| </code>isActive<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Enable/disable glow effect |<br />| </code>isPaused<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Pause animation (keeps current state) |<br />| </code>radius<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number \| string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>50<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Border radius |<br />| </code>className<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | - | Custom CSS class |<br />| </code>style<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>CSSProperties<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | - | Inline styles |<br />| </code>children<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>ReactNode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | - | Content to wrap |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">| Prop | Type | Default | Description |<br />|------|------|---------|-------------|<br />| </code>width<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number \| string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>360<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Phone frame width |<br />| </code>height<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number \| string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>720<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Phone frame height |<br />| </code>isActive<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Enable/disable glow |<br />| </code>isPaused<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Pause animation |<br />| </code>className<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | - | Custom CSS class |<br />| </code>style<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>CSSProperties<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | - | Inline styles |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />type GlowState = "idle" | "hover" | "focus" | "thinking" | "success" | "error";<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Custom Colors</h2></p><p class="my-3">Override the default gradient colors using CSS variables:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><AppleIntelligenceGlow<br /> style={{<br /> "--aie-color-1": "#00FF00",<br /> "--aie-color-2": "#00CC00",<br /> "--aie-color-3": "#009900",<br /> "--aie-color-4": "#006600",<br /> "--aie-color-5": "#003300",<br /> "--aie-color-6": "#00FF00",<br /> }}<br />><br /> {/<em> Green theme </em>/}<br /></AppleIntelligenceGlow><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Examples</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />function AIChatInput() {<br /> const [state, setState] = useState("idle");<br /> const [isLoading, setIsLoading] = useState(false);</p><p class="my-3"> const handleSubmit = async () => {<br /> setState("thinking");<br /> setIsLoading(true);</p><p class="my-3"> try {<br /> await sendMessage();<br /> setState("success");<br /> } catch {<br /> setState("error");<br /> } finally {<br /> setIsLoading(false);<br /> setTimeout(() => setState("idle"), 2000);<br /> }<br /> };</p><p class="my-3"> return (<br /> <AppleIntelligenceGlow state={state} radius={12}><br /> <input<br /> onFocus={() => !isLoading && setState("focus")}<br /> onBlur={() => !isLoading && setState("idle")}<br /> /><br /> <button onClick={handleSubmit}>Send</button><br /> </AppleIntelligenceGlow><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><AppleIntelligenceGlow<br /> state={isHovered ? "hover" : "idle"}<br /> radius={20}<br /> className="card"<br />><br /> <h2>Premium Feature</h2><br /> <p>Unlock AI capabilities</p><br /></AppleIntelligenceGlow><br /></code>``</p><p class="my-3">---</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">MIT<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2b:[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}]\n2c:[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":4}]\n"])</script><script>self.__next_f.push([1,"2d:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@types/react\",{\"href\":\"/package/%40types%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.2.9\"}]]}],[\"$\",\"$L5\",\"@types/react-dom\",{\"href\":\"/package/%40types%2Freact-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.2.3\"}]]}],[\"$\",\"$L5\",\"tsup\",{\"href\":\"/package/tsup\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tsup\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.0.0\"}]]}],[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.0.0\"}]]}]]}]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>