Installation
npx kinetic-ui-cli@latest add Usage
This form uses `matter-js` to create a physical environment that reacts to user input. It is highly engaging and gamifies the process of choosing a strong password.
import { PhysicsAuthForm } from "@/components/creative/physics-auth-form";
export function AuthPage() {
const handleLogin = (email: string, pass: string) => {
console.log("Authenticating...", email);
};
return (
<div className="w-full flex justify-center p-8">
<PhysicsAuthForm onLogin={handleLogin} />
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes for the form wrapper. |
onLogin | (email: string, pass: string) => void | undefined | Callback function triggered when the form is submitted. |
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { PhysicsAuthForm } from "@/components/creative/physics-auth-form";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { PhysicsAuthForm } from "@/components/creative/physics-auth-form";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<PhysicsAuthForm
onLogin="example"
/>
</div>
);
}