Apple Intelligence style animated glow border as a reusable React component.
npm install apple-intelligence-glow-reactApple Intelligence–inspired animated glow border as a reusable React component.
This package exposes:
- AppleIntelligenceGlow – the core, reusable glow container. It only renders the animated border and lets you provide any content inside.
- AppleIntelligenceLockScreen – example lock screen UI built on top of the same glow logic, intended as a demo/showcase.
---
``bash`
npm install apple-intelligence-glow-react
or with yarn / pnpm:
`bash`
yarn add apple-intelligence-glow-reactor
pnpm add apple-intelligence-glow-react
---
The core idea is: wrap your own UI with AppleIntelligenceGlow and let the component handle the animated border.
`jsx
import React from "react";
import { AppleIntelligenceGlow } from "apple-intelligence-glow-react";
export default function Demo() {
return (
minHeight: "100vh",
background: "#fff",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
style={{
width: 360,
height: 720,
background: "#000",
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "#fff",
padding: 40,
}}
>
{/ Your own UI goes here: lock screen, card, panel, etc. /}
The component:
- Injects the required CSS once at runtime.
- Uses multiple blurred conic gradients to create the Apple Intelligence–style animated border.
- Keeps your content fully under your control.
---
$3
If you want a ready‑made demo that looks like an Apple‑style lock screen, you can also import
:`jsx
import React from "react";
import {
AppleIntelligenceGlow,
AppleIntelligenceLockScreen,
} from "apple-intelligence-glow-react";export default function Demo() {
return (
minHeight: "100vh",
background: "#fff",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: 48,
padding: 40,
}}
>
{/ 1. Glow + custom content /}
style={{
width: 360,
height: 720,
background: "#000",
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "#fff",
}}
>
My custom lock screen or card
{/ 2. Full lock screen demo /}
is built using the same glow logic and is mainly intended for demos, docs, and inspiration.---
$3
####
AppleIntelligenceGlowCore container that renders the animated glow border around its children.
Props
-
Corner radius of the glow and clipping mask.
- Default: 50 (pixels)
- You can also pass CSS values like "3rem" or "32px".-
className?: string
Custom class name applied to the outer glow container.-
style?: React.CSSProperties
Inline style applied to the outer glow container.
Commonly used to define:
- Width / height
- Background color
- Layout (flexbox, padding, etc.)-
children: React.ReactNode
Any React content you want to render inside the glow.---
####
AppleIntelligenceLockScreenExample lock screen UI that uses the same glow effect, with:
- Dynamic Island‑style notch
- Live digital clock
- Date label
- Bottom home indicator bar
Props
-
Width of the phone frame. Default: 360 (pixels).-
height?: number | string
Height of the phone frame. Default: 720 (pixels).-
showHelperText?: boolean
Whether to show the helper caption under the phone. Default: true.-
className?: string
Custom class name applied to the outermost container.-
style?: React.CSSProperties
Inline style merged onto the outermost container (in addition to internal CSS variables for width/height).---
$3
This repository is already configured to be published as an npm package:
-
main and module both point to src/index.js.
- Only src and README.md are included in the published tarball via the "files" field.If you want to publish under your own npm account:
1. Login to npm
`bash
npm login
`2. Adjust the package name (optional)
Update the
field in package.json if you want a different public name.3. Bump the version
`bash
npm version patch # or minor / major
`4. Publish
bash
npm publish --access public
`Once published, consumers can install it with:
bash
npm install apple-intelligence-glow-react
``and use it as shown in the examples above.
---
MIT