@sethwebster/react-ethereal-input

Animated nebula gradient input component for React.

Install

npm install @sethwebster/react-ethereal-input
# or
pnpm add @sethwebster/react-ethereal-input
# or
yarn add @sethwebster/react-ethereal-input

Peer deps: react >= 17, react-dom >= 17. Zero runtime dependencies.

Quickstart

import { EtherealInput } from "@sethwebster/react-ethereal-input";

export function SearchBar() {
  return <EtherealInput placeholder="Search..." />;
}

Examples

Basic

<EtherealInput
  placeholder="Enter email"
  type="email"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

With left and right slots

import { SearchIcon, XIcon } from "lucide-react";

<EtherealInput
  placeholder="Search"
  leftContent={<SearchIcon size={16} />}
  rightContent={
    <button onClick={clear}>
      <XIcon size={16} />
    </button>
  }
/>

Textarea mode

<EtherealInput
  as="textarea"
  placeholder="Write something..."
  rows={4}
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

Custom colors (dark mode variant)

<EtherealInput
  placeholder="Dark theme"
  colors={["#ff6b6b", "#feca57", "#ff9ff3", "#48dbfb"]}
  containerStyle={{ background: "rgba(15, 15, 20, 0.95)", color: "#fff" }}
/>

Dialed-down glow

<EtherealInput
  placeholder="Subtle"
  glowBlur={0.3}
  glowOpacity={0.3}
  blobBlur={18}
  glowSize={10}
/>

Props

All standard input or textarea HTML attributes are forwarded. The following props are specific to EtherealInput.

Prop	Type	Default	Description
`as`	`"input" \| "textarea"`	`"input"`	Renders an `<input>` or `<textarea>`.
`colors`	`string[]`	`["#7b2ff7", "#2feef7", "#22c55e", "#a855f7", "#06b6d4"]`	Gradient blob colors. 3-6 values recommended.
`speed`	`number`	`1`	Animation speed multiplier. `1` is ~8-15 s per rotation depending on blob.
`blobBlur`	`number`	`30`	Blur radius (px) applied to each gradient blob.
`density`	`number`	`1`	Blob count multiplier. `2` = two blobs per color.
`glowSize`	`number`	`20`	How far the glow extends beyond the border (px). Set to `0` to disable glow.
`glowBlur`	`number`	`1`	Scales the blur spread of the glow layer. `0` disables it entirely.
`glowOpacity`	`number`	`0.6`	Opacity of the glow layer.
`borderWidth`	`number`	`3`	Gradient border thickness (px).
`borderRadius`	`number`	`24`	Border radius (px) of the outer border.
`leftContent`	`ReactNode`	—	Content rendered to the left of the input field.
`rightContent`	`ReactNode`	—	Content rendered to the right of the input field.
`bottomContent`	`ReactNode`	—	Content rendered below the input in a full-width row.
`wrapperStyle`	`CSSProperties`	—	Style overrides for the outermost `div`.
`containerStyle`	`CSSProperties`	—	Style overrides for the inner container (controls background, padding, etc.).
`inputStyle`	`CSSProperties`	—	Style overrides for the `<input>` or `<textarea>` element.
`className`	`string`	—	Class name applied to the outermost wrapper.

Typescript discriminated union

When as="textarea", all TextareaHTMLAttributes are available. When as="input" (or omitted), all InputHTMLAttributes are available. The style prop is replaced by inputStyle to avoid conflicts with the internal layout.

Features

Animated nebula gradient border with orbiting, wobbling blobs
Outer glow emanation layer — fully controllable or removable
Input and textarea modes via as prop
Left and right content slots for icons, buttons, labels
forwardRef compatible
SSR safe — no window access outside effects
Respects prefers-reduced-motion
Zero runtime dependencies
ESM + CJS dual build
TypeScript-first with full type inference

License

MIT — Seth Webster