apple-intelligence-glow-react

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

Live 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

npm install apple-intelligence-glow-react

or with yarn / pnpm:

yarn add apple-intelligence-glow-react
# or
pnpm add apple-intelligence-glow-react

---

Quick Start

import{AppleIntelligenceGlow}from"apple-intelligence-glow-react";functionApp(){return(<AppleIntelligenceGlowstate="thinking"radius={24}style={{width: 300,height: 200,background: "#1a1a2e",padding: 20,}}><divstyle={{color: "#fff"}}>
AI is thinking...
</div></AppleIntelligenceGlow>);}

---

State Control

The component supports 6 different visual states:

import{useState}from"react";import{AppleIntelligenceGlow,GlowState}from"apple-intelligence-glow-react";functionAIInput(){const[state,setState]=useState<GlowState>("idle");return(<AppleIntelligenceGlowstate={state}radius={16}onMouseEnter={()=>setState("hover")}onMouseLeave={()=>setState("idle")}onFocus={()=>setState("focus")}><textareaplaceholder="Ask AI..."/></AppleIntelligenceGlow>);}

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

AppleIntelligenceGlow

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

AppleIntelligenceLockScreen

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

GlowState Type

typeGlowState="idle"|"hover"|"focus"|"thinking"|"success"|"error";

---

Custom Colors

Override the default gradient colors using CSS variables:

<AppleIntelligenceGlowstyle={{"--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 */}</AppleIntelligenceGlow>

---

Examples

AI Chat Input

functionAIChatInput(){const[state,setState]=useState("idle");const[isLoading,setIsLoading]=useState(false);consthandleSubmit=async()=>{setState("thinking");setIsLoading(true);try{awaitsendMessage();setState("success");}catch{setState("error");}finally{setIsLoading(false);setTimeout(()=>setState("idle"),2000);}};return(<AppleIntelligenceGlowstate={state}radius={12}><inputonFocus={()=>!isLoading&&setState("focus")}onBlur={()=>!isLoading&&setState("idle")}/><buttononClick={handleSubmit}>Send</button></AppleIntelligenceGlow>);}

Card with Hover Effect

<AppleIntelligenceGlowstate={isHovered ? "hover" : "idle"}radius={20}className="card"><h2>Premium Feature</h2><p>Unlock AI capabilities</p></AppleIntelligenceGlow>

---

License

MIT