Devouring details sign in

Interactive text input with vanishing animation effect. Features a canvas-based particle system that disintegrates text into animated particles when submitted, creating a unique and engaging form interaction experience.

Dependencies

Interaction Type

Install via Pro CLI [Requires a Pro license key]

import { VanishForm } from "@/components/v1/skiper56";

const CustomInput = () => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log("Input changed:", e.target.value);
  };

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log("Form submitted");
  };

  return (
    <div className="w-full max-w-md">
      <VanishForm
        placeholder="yo@gxuri.me"
        onChange={handleChange}
        onSubmit={onSubmit}
      />
    </div>
  );
};

Source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

License & Usage:

• Free to use and modify in both personal and commercial projects.
• Attribution to Skiper UI is required when using the free version.
• No attribution required with Skiper UI Pro.