Wensity

Apple Intelligence Glow

Pro

A soft Apple Intelligence edge glow that traces the screen with a rotating iridescent gradient you can toggle on.

glowbordergradientapplesirioverlay
Apple Intelligence Glow component preview

Overview

Apple Intelligence Glow is a React and Tailwind CSS screen edge glow that traces a rounded stage with the rotating iridescent gradient Siri shows on iPhone, in Next.js or any React app, with no dependencies. A conic gradient is stroked along the rim on canvas and bloomed inward, with additive light in dark mode and solid color in light mode. A pill toggles it, or drive active yourself and pass your own children. It pauses off screen and in hidden tabs, and reduced motion freezes the orbit but keeps the glow. reach sets how far the mist falls inward.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add apple-intelligence-glow

Usage

Import AppleIntelligenceGlow from @/components/wensity/apple-intelligence-glow and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { AppleIntelligenceGlow } from "@/components/wensity/apple-intelligence-glow";


export default function Example() {
  return (
    <AppleIntelligenceGlow
      className="h-[480px] w-full"
      defaultActive
    />
  );
}

Props

PropTypeDefaultDescription
activeboolean-Controlled on/off. Pass this to drive the glow from your own state.
defaultActivebooleantrueUncontrolled initial state.
onActiveChange(active: boolean) => void-Fires whenever the glow turns on or off.
onLabelstring"Turn On Apple Intelligence"Pill label when the glow is off.
offLabelstring"Turn Off Apple Intelligence"Pill label when the glow is on.
captionstring""Uppercase hint above the pill. Pass an empty string to hide it.
hideTogglebooleanfalseHide the built-in pill. Use this when you pass your own children.
childrenReact.ReactNode-Inner content. Defaults to the Apple Intelligence pill.
reachnumber52Inward mist size, in pixels.
durationnumber10One full color orbit in seconds.
labelstring"Apple Intelligence glow"Accessible name for the stage.

Related components

  • Dynamic Island Toast component preview

    Dynamic Island Toast

    A pixel-faithful Apple Dynamic Island that morphs, splits, and breathes while it hosts live activities inside your app.

  • Infinite Marquee component preview

    Infinite Marquee

    A seamless, GPU-only logo strip that never stutters or snaps at the loop point.

  • Apple-Style Sticky Scroll component preview

    Apple-Style Sticky Scroll

    A pinned cinematic section that morphs in lock-step with scroll, staying perfectly in sync whichever way you travel.

  • Morphing Shape Background component preview

    Morphing Shape Background

    Lava lamp background for React heroes: soft gradient shapes that drift and melt.