Rim Glow

import * as React from "react"
import { cn } from "cn"

// A rim of light around whatever it wraps, colored by currentColor. Also a
// full-viewport presence wash when `viewport` is set.

type RimGlowState = "dim" | "steady" | "breathing"

const STATE_OPACITY: Record<RimGlowState, number> = {
  dim: 0.55,
  steady: 1,
  breathing: 1,
}

// breathing drives its own opacity from the stylesheet, so the reduced-motion
// branch can substitute a steady value instead of collapsing into steady.
const BREATHE_CSS = `@keyframes rg-breathe{0%,100%{opacity:1}50%{opacity:0.7}}.rg-breathe{animation:rg-breathe 4.4s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.rg-breathe{animation:none;opacity:0.8}}`

function mix(pct: number): string {
  const p = Math.round(Math.max(0, Math.min(100, pct)))
  return `color-mix(in oklab, currentColor ${p}%, transparent)`
}

/**
 * Wraps its children in a rim of light in the text color: a hairline with
 * glows inside and outside the edge. Set a `text-*` class for the color and
 * a `rounded-*` class for the corners; the rim follows both.
 *
 * `state="breathing"` pulses slowly and holds still at 80% under reduced
 * motion. `viewport` instead draws only the inner glow as a fixed
 * full-screen overlay that takes no pointer events, beside the children.
 */
function RimGlow({
  state = "steady",
  intensity = 1,
  spread = 24,
  viewport = false,
  className,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  /** dim = lowered · steady = full · breathing = a slow 4.4s pulse */
  state?: RimGlowState
  /** 0–1.5 — multiplies every glow layer's alpha */
  intensity?: number
  /** Glow reach in px — how far the rim bleeds inward/outward */
  spread?: number
  /**
   * Draws the glow as a fixed full-screen overlay that takes no pointer
   * events. Children render in place, outside it, and `className` and other
   * props go on the overlay.
   */
  viewport?: boolean
}) {
  // A negative or non-finite blur invalidates the whole box-shadow.
  const reach = Number.isFinite(spread) ? Math.max(0, spread) : 24
  const boxShadow = [
    `inset 0 0 0 1px ${mix(85 * intensity)}`,
    `inset 0 0 ${Math.round(reach * 0.5)}px ${mix(45 * intensity)}`,
    `inset 0 0 ${Math.round(reach * 1.6)}px ${mix(18 * intensity)}`,
    ...(viewport
      ? []
      : [
          `0 0 ${Math.round(reach * 0.75)}px ${mix(30 * intensity)}`,
          `0 0 ${Math.round(reach * 2)}px ${mix(12 * intensity)}`,
        ]),
  ].join(", ")

  const overlay = (
    <span
      aria-hidden="true"
      className={cn(
        "pointer-events-none rounded-[inherit]",
        viewport ? "fixed inset-0" : "absolute inset-0",
        state === "breathing" && "rg-breathe"
      )}
      style={
        state === "breathing"
          ? { boxShadow }
          : { boxShadow, opacity: STATE_OPACITY[state] }
      }
    />
  )

  const breathe = state === "breathing" && (
    // href + precedence so React hoists one copy, not one per instance
    <style href="rim-glow-breathe" precedence="default">
      {BREATHE_CSS}
    </style>
  )

  // The viewport glow sits beside the children, not around them, so they
  // keep their place in the page and their pointer events.
  if (viewport)
    return (
      <>
        {children}
        <div
          data-slot="rim-glow"
          data-state={state}
          className={cn("pointer-events-none fixed inset-0 z-50", className)}
          {...props}
        >
          {breathe}
          {overlay}
        </div>
      </>
    )

  return (
    <div
      data-slot="rim-glow"
      data-state={state}
      className={cn("relative", className)}
      {...props}
    >
      {breathe}
      {overlay}
      {children}
    </div>
  )
}

export { RimGlow, type RimGlowState }

pnpm dlx shadcn add @01orbital/rim-glow

npx shadcn add @01orbital/rim-glow

yarn shadcn add @01orbital/rim-glow

bunx --bun shadcn add @01orbital/rim-glow

pnpm dlx shadcn add @01orbital/card @01orbital/item

npx shadcn add @01orbital/card @01orbital/item

yarn shadcn add @01orbital/card @01orbital/item

bunx --bun shadcn add @01orbital/card @01orbital/item