Command Palette
Search for a command to run...
Loading component...
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
Type in the input field | |
Press Enter to trigger vanishing animation |
CLI UNAVAILABLE
pro component, try copying the source code from top right corner
How to use
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.in" onChange={handleChange} onSubmit={onSubmit} /> </div> ); };
Props | Description |
---|---|
placeholder | Placeholder text displayed in the input field |
onChange | Callback for input changes |
onSubmit | Callback for form submission |
Attribution
- Text Vanish effect used from Aceternity UI
- The sign in form is recreated from Devouring Details
Source code
Click on the top right to view the 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
Additionlly, if you find any bug or issue, feel free toDrop a dm.
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.