npm package: @sethwebster/react-ethereal-input
Description: Animated nebula gradient input component for React
Author: Seth Webster
Latest version: 0.4.0

# @sethwebster/react-ethereal-input

Animated nebula gradient input component for React.

**[Live demo](https://react-ethereal-input.sethwebster.com)**

---

## Install

```bash
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

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

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

---

## Examples

### Basic

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

### With left and right slots

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

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

### Textarea mode

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

### Custom colors (dark mode variant)

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

### Dialed-down glow

```tsx
<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