Components
Loading preview...
This Interactive Cartoon Form component is a playful, engaging form built with Next.js, TypeScript, and Shadcn UI. It features a cartoon face whose eyes follow the user’s cursor, creating a sense of interactivity and liveliness. The eyes naturally blink periodically, enhancing the realistic feel of the animation. When the user focuses on the password field, the eyes “close” to mimic privacy, represented by a black line, and reopen once typing is done. The form itself uses Shadcn UI components for inputs, labels, and buttons, and is set against a stylish semi-transparent, blurred background, giving it a modern “glass” effect. This combination of animation and UI design makes filling out the form a fun, visually appealing experience while remaining fully functional.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/cloud-watch-form"use client";
import CloudWatchForm from "@/components/ui/cloud-watch-form";
export default function CloudWatchFormDemo() {
return (
<div style={{ display: "flex", justifyContent: "center", marginTop: 100 }}>
<CloudWatchForm />
</div>
);
}