elemental-input

Animated effect text field for React. Type magic words to trigger fire, water, ice, and 10 more live particle effects.

Install

npm install elemental-input

Usage

import { EffectTextField } from 'elemental-input';
import 'elemental-input/style.css';

function App() {
  const [text, setText] = useState('');

  return (
    <EffectTextField
      value={text}
      onChange={setText}
      placeholder="Type fire, water, ice…"
      style={{ height: 400 }}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | wordEffects | Record<string, EffectType> | — | Custom word → effect mappings (merged with defaults) | | enableDefaultEffects | boolean | true | Auto-map the 13 built-in magic words | | value | string | — | Controlled value | | defaultValue | string | '' | Uncontrolled initial value | | onChange | (value: string) => void | — | Change handler | | placeholder | string | — | Placeholder text | | forceFieldRadius | number | 310 | Mouse repulsion radius (px) | | forceFieldStrength | number | 90 | Mouse repulsion strength | | particleDensity | number | 0.3 | Particle spawn multiplier | | enableJitter | boolean | true | Blur words inside the force field |

Built-in effects

fire · smoke · metal · wind · water · ice · shadow · gold · electric · neon · blood · void · aurora

Custom word mapping

<EffectTextField
  wordEffects={{
    storm:    'electric',
    love:     'gold',
    night:    'void',
    ocean:    'water',
  }}
/>

Set enableDefaultEffects={false} to use only your own mappings.

Adding a custom effect

Each effect lives in its own file and implements EffectDefinition. Register it once at app startup:

import { registerEffect } from 'elemental-input';

registerEffect('rainbow', {
  spawnRate: 1.5,
  additive: true,

  newParticle(w, h) {
    const r = Math.random;
    return {
      x: w * r(), y: h * r(),
      vx: (r() - 0.5) * 0.3, vy: -0.3 - r() * 0.5,
      life: 0, max: 50 + r() * 30, size: 2 + r() * 3,
    };
  },

  drawParticle(ctx, p, t) {
    const hue = (p.x / ctx.canvas.width) * 360;
    const a   = (1 - t) * 0.8;
    ctx.fillStyle = `hsla(${hue},100%,65%,${a})`;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
    ctx.fill();
  },
});

Then use it in your mapping:

<EffectTextField wordEffects={{ magic: 'rainbow' }} />

License

MIT © Khoa Pham