AI Generator Form 1
Multi-step AI generation form with animated progress states, file upload, and configurable options for orientation and detail level. Component used in Colouring Page.
A polished form interface that walks users through an AI generation workflow with real-time progress feedback.
The component animates through three states: input collection, processing with rotating status messages, and completion. You get file upload with preview, optional text fields that expand on click, and toggle controls for orientation (portrait/landscape/square) and detail level.
The form validates inputs, shows a spinning gradient border during processing, and displays elapsed time. All animations use Framer Motion with spring physics for natural feel. The mobile version condenses the detail toggles to save space while maintaining full functionality.
Install Component
Run Claude Code then copy and paste this command
Locked for Members Only
Setup your account to install
Claude Code will install this into the /src/components folder in your project
Tell Claude Code where you want to use this
Key Features
File upload with image preview and removal
Animated progress states with rotating status messages and elapsed timer
Expandable optional fields that appear on click
Orientation selector (portrait/landscape/square) with hover expansion
Detail level toggle that adapts layout on mobile
Form validation with auto-clearing error messages
Spinning gradient border effect during processing
Use Cases
Building AI image generation tools that need clear progress feedback
Creating multi-step forms where you want to hide complexity until needed
Adding file upload interfaces with preview and validation
Building workflows that process user inputs with visible status updates
Frequently Asked Questions
Used In
Dependencies
These will be automatically installed when you add this component to your project.
