react ui effects · glow components

Inputs that glow.

WebGL & CSS effect components for React. The <input> stays real DOM — IME, paste and accessibility intact. The light is just light.

$ npm i @p4ni/ui

speed3.2sintensity0.45reactive

usage.tsx

import { GlowInput } from "@p4ni/ui";

<GlowInput
  placeholder="type here…"
  colors={["#7f77dd", "#1d9e75", "#d85a30", "#ed93b1"]}
  speed={3.2}
  intensity={0.45}
  reactive
/>

speed3.2sintensity0.45bleed24pxparticles

usage.tsx

import { AuraInput } from "@p4ni/ui/aura";

<AuraInput
  placeholder="type — the fog reacts…"
  colors={["#7f77dd", "#1d9e75", "#d85a30"]}
  speed={3.2}
  intensity={0.45}
  bleed={24}
  particles
/>

peer deps: npm i three @react-three/fiber — Next.js should load it with dynamic(…, { ssr: false }).

UNLOCKEDYour children render here.

hint: the keyword is "p4ni" — type it and press Enter

usage.tsx

import { LockInput } from "@p4ni/ui/three";

<LockInput
  keyword="p4ni"          // string | RegExp | (value) => boolean
  placeholder="keyword"
  onUnlock={() => console.log("unlocked!")}
  onFail={(v) => console.log("wrong:", v)}
>
  <h2>UNLOCKED</h2>
</LockInput>

peer deps: npm i three @react-three/fiber — theatrical, not cryptographic: the keyword ships in the client bundle, so authorize real secrets on the server.

in orbit —

A React port of astro-skyline. City lights sit on the horizon of your form.

Real DOM first

All decoration lives in background layers. The input itself stays untouched, so Japanese IME, paste, and screen readers keep working.

SSR safe

The canvas is created only after mount. In Next.js, use a ssr: false dynamic import.

Respects motion prefs

With prefers-reduced-motion, animation slows to near stillness. Off-screen rendering is paused with IntersectionObserver.