edge-aura: Siri-style Animated Screen Edge Glow in JavaScript

edge-aura is a dependency-free Canvas 2D library for adding an animated, multicolor glow around your browser viewport.

The glow reacts to taps, keystrokes, and successful saves with bursts of light along the screen edges.

Features

• Smooth color cycling with a bright core and soft inward bloom.
• Seven color palettes and four appearance presets.
• Adjustable corners, glow depth, and dark-background rendering.
• Animated palette transitions and entrance reveals.
• React adapter with idle-frame throttling and reduced-motion support.

How to Use It

Installation

Install the ESM package with npm.

The optional React adapter requires React 18+.

npm install edge-aura

Basic Usage: Vanilla JavaScript

Add a canvas that spans the viewport.

<canvas id="aura-canvas" aria-hidden="true"></canvas>

#aura-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* keep the page interactive. */
  z-index: 40;
}

Create the engine and drive its animation loop. This example handles viewport resizing and reduced-motion changes.

import { createAuraEngine } from "edge-aura";
const canvas = document.querySelector("#aura-canvas");
const engine = createAuraEngine(canvas);
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
let frameId = 0;
let previousTime = 0;
function draw(now) {
  engine.step(previousTime ? now - previousTime : 0);
  engine.render();
  previousTime = now;
  frameId = requestAnimationFrame(draw);
}
function syncMotion() {
  cancelAnimationFrame(frameId);
  previousTime = 0;
  if (reducedMotion.matches) engine.renderStatic();
  else frameId = requestAnimationFrame(draw);
}
const onResize = () => {
  engine.resize();
  if (reducedMotion.matches) engine.renderStatic();
};
window.addEventListener("resize", onResize);
reducedMotion.addEventListener("change", syncMotion);
syncMotion();
function disposeAura() {
  cancelAnimationFrame(frameId);
  window.removeEventListener("resize", onResize);
  reducedMotion.removeEventListener("change", syncMotion);
  engine.destroy();
}

Basic Usage: React

The React adapter handles the canvas, animation loop, resizing, and reduced-motion preferences.

import { EdgeAura } from "edge-aura/react";
export default function AppAura() {
  return <EdgeAura />;
}

Control the glow from application state and position it above other UI layers with style.zIndex.

<EdgeAura
  state={isTyping ? "typing" : "idle"}
  savedAt={lastSavedAt}
  palette="ocean"
  style={{ zIndex: 40 }}
/>

Handle Pointer, Keyboard, and Save Input

Connect pointer and keyboard events to the vanilla engine. tap() takes viewport coordinates; key() takes a horizontal position from 0 to 1. Call pulse() after a successful save.

import { keyCodeToPosition } from "edge-aura";
window.addEventListener("pointerdown", (event) => {
  engine.tap({ x: event.clientX, y: event.clientY });
});
window.addEventListener("keydown", (event) => {
  const position = keyCodeToPosition(event.code);
  if (position) engine.key(position.x);
});
function onSaveSucceeded() {
  engine.pulse();
}

For the React adapter, dispatch these window events with the default aura prefix:

import { keyCodeToPosition } from "edge-aura";
window.addEventListener("pointerdown", (event) => {
  window.dispatchEvent(new CustomEvent("aura:tap", {
    detail: { x: event.clientX, y: event.clientY }
  }));
});
window.addEventListener("keydown", (event) => {
  const position = keyCodeToPosition(event.code);
  if (position) {
    window.dispatchEvent(new CustomEvent("aura:key", { detail: position }));
  }
});
function onSaveSucceeded() {
  window.dispatchEvent(new CustomEvent("aura:saved-pulse"));
}

Change the Palette and Appearance

Use updateOptions() to adjust the active glow. For a dark page, set background: "dark" and choose a blend mode. Call setPalette() after those updates to crossfade to another color scheme.

engine.updateOptions({
  geometry: { band: 56, cornerFill: true },
  palette: { background: "dark", blendMode: "screen" },
  motion: { hueDriftDeg: 6 }
});
engine.setPalette("sunset", { crossfadeMs: 350 });

To start with an appearance preset, use these options in place of the default createAuraEngine(canvas) call shown earlier:

import { createAuraEngine, EDGE_AURA_PRESETS, EDGE_AURA_PALETTES } from "edge-aura";
const engine = createAuraEngine(canvas, {
  ...EDGE_AURA_PRESETS.subtle,
  palette: {
    ...EDGE_AURA_PRESETS.subtle.palette,
    stops: EDGE_AURA_PALETTES.aurora
  }
});

Trigger an Entrance Reveal in React

Attach a ref to call kindle(x, y) at the click position. React 18 can use the kindleOrigin prop when mounting the component.

import { useRef } from "react";
import { EdgeAura, type EdgeAuraHandle } from "edge-aura/react";
export default function EntryButton() {
  const auraRef = useRef<EdgeAuraHandle>(null);
  return (
    <>
      <button onClick={(event) => auraRef.current?.kindle(event.clientX, event.clientY)}>
        Activate glow
      </button>
      <EdgeAura ref={auraRef} />
    </>
  );
}

API Reference

Initialization and Exported Helpers

Public TypeScript Types

Geometry Options

Palette Options

Custom stops require at least two [position, [r, g, b]] entries, starting at 0 and ending at 1. Positions must be finite and nondecreasing; RGB values must be finite.

Motion Options

Input Options

Top-Level Option

Engine Methods

React Component Props

React CustomEvents

The adapter listens for these window CustomEvents. You can change the aura prefix with the eventPrefix prop.

Palette Presets

Appearance Presets

Markup and Styling Hooks

The React wrapper uses inline position: fixed; inset: 0; pointer-events: none styles. You can override them through the style prop.

Alternatives and Related Resources

• Animated Gradient Border In Pure CSS
• 10+ Stunning Border Styles For UI/UX Design – Bordex.js
• Shaders: 199 WebGPU Components for Interactive Effects