@sethwebster/react-ethereal-input

Animated nebula gradient input component for React.

Live demo

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