PowerModeInput can make your text input box more compelling
This project can make your input box lively. One day I saw a vscode plugin called Power Mode, so I wanted to write a similar javascript library. This project uses proton.js and it is also great.
By the way recommend a great react particle animation background component https://github.com/lindelof/particles-bg
npm install --save power-mode-inputimport PowerModeInput from "power-mode-input"; const input = document.getElementById("obinput"); PowerModeInput.make(input); // close PowerModeInput PowerModeInput.close(input); // destroy PowerModeInput PowerModeInput.destroy(); // another usage PowerModeInput.make(".phone", { height: 5, tha: [0, 360], g: 0.5, num: 5, radius: 6, circle: true, alpha: [0.75, 0.1], color: "random" });componentDidMount(){ PowerModeInput.make(this.inputRef.current); }mounted() { PowerModeInput.make(this.$refs.inputRef); }const inputElement = this.elementRef.nativeElement.querySelector('input'); PowerModeInput.make(inputElement);PowerModeInput.make(input, { height: 5, tha: [0, 360], g: 0.5, num: 5, ... // Parameter });| key | describe | type | example |
|---|---|---|---|
g | Whether to add gravity | number | 1 |
num | The number of particles emitted each time | number | 3 |
radius | The radius of every particle | number | 10 |
alpha | The alpha of every particle | number | .1 |
tha | The Particle emitter angle | array | [0, 360] |
v | The Particle emitter Particle velocity | number | 0.5 |
life | The life of every particle | number | 1.2 |
color | Particle color | array or string | #ffcccc |
random | Random force | number | 1.2 |
y | Particle emitter height | number | 2 |
height | Particle emitter height Ibid | number | 2 |
For some special types of input boxes, the cursor may not be positioned correctly. I am also looking for a solution to this problem. If you know, please let me know. See here for specific reasons
I very much hope that you can work with me to modify the code. I also have a lot of fun ideas. Maybe you can join me to implement it.