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";

function App() {
  return (
    <AppleIntelligenceGlow
      state="thinking"
      radius={24}
      style={{
        width: 300,
        height: 200,
        background: "#1a1a2e",
        padding: 20,
      }}
    >
      <div style={{ 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";

function AIInput() {
  const [state, setState] = useState<GlowState>("idle");

  return (
    <AppleIntelligenceGlow
      state={state}
      radius={16}
      onMouseEnter={() => setState("hover")}
      onMouseLeave={() => setState("idle")}
      onFocus={() => setState("focus")}
    >
      <textarea placeholder="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

type GlowState = "idle" | "hover" | "focus" | "thinking" | "success" | "error";

---

Custom Colors

Override the default gradient colors using CSS variables:

<AppleIntelligenceGlow
  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 */}
</AppleIntelligenceGlow>

---

Examples

AI Chat Input

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 (
    <AppleIntelligenceGlow state={state} radius={12}>
      <input
        onFocus={() => !isLoading && setState("focus")}
        onBlur={() => !isLoading && setState("idle")}
      />
      <button onClick={handleSubmit}>Send</button>
    </AppleIntelligenceGlow>
  );
}

Card with Hover Effect

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

---

License

MIT