p4ni-ui

WebGL/CSS-flavored React UI effects by p4ni. Demo: https://ui.p4ni.com

Structure

packages/ui/        publishable @p4ni/ui package
apps/playground/    Vite preview app
apps/site/          Astro demo site (ui.p4ni.com)

Development

pnpm install
pnpm dev          # start the playground (source-linked + HMR)
pnpm dev:site     # start the Astro demo site
pnpm build        # build UI first, then build the demo site into root dist
pnpm build:ui     # build @p4ni/ui with tsup
pnpm build:site   # build the demo site
pnpm release      # build:ui + npm publish (--access public)

Usage

npm install @p4ni/ui

GlowInput (CSS)

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

<GlowInput
  placeholder="Type here... / ここに入力..."
  colors={["#7f77dd", "#1d9e75", "#d85a30"]}
  speed={3.2}
  intensity={0.45}
  reactive
/>

AuraInput (WebGL)

The WebGL upgrade for GlowInput. It layers shader-rendered aura behind a real <input> (the canvas uses pointer-events: none, so IME, paste, and accessibility still work). three and @react-three/fiber are required as optional peer dependencies.

npm install @p4ni/ui three @react-three/fiber

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

<AuraInput
  placeholder="Type and it breathes... / 入力で脈動..."
  colors={["#7f77dd", "#1d9e75", "#d85a30"]}
  speed={3.2}
  intensity={0.45}
  reactive          // boosts the glow while typing
  particles         // emits a pulse on each keypress
  bleed={24}        // aura spread outside the input in px
  fps={60}          // frame-rate cap for power saving
/>

• With prefers-reduced-motion: reduce, animation slows to near stillness
• Off-screen rendering is paused with IntersectionObserver
• In Next.js (App Router), load it without SSR:

import dynamic from "next/dynamic";

const AuraInput = dynamic(
  () => import("@p4ni/ui/aura").then((m) => m.AuraInput),
  { ssr: false },
);

Roadmap

• [x] GlowInput (CSS)
• [x] AuraInput (Three.js / R3F) — WebGL shader glow + typing particles
• [ ] Skyline — React port of astro-skyline
• [x] Astro demo site (ui.p4ni.com) — apps/site (deploy pending)
• [ ] Ladle catalog