How do I add this to my project?

Copy the install command and paste it into Claude Code. It handles everything - downloads the component, installs dependencies, and adds it to your project.

Can I customize the styling?

Yes! Just tell Claude Code what you want. Example: 'Change the gradient to purple' or 'Make the buttons larger'. It will update the component for you.

How do I hook this up to my actual AI API?

The component currently simulates an 8-second generation process. Replace the setTimeout in handleGenerate with your actual API call. The component already tracks state (isGenerating, isReady) and handles the file (selectedFile), so you can send that data to your endpoint and update the UI when you get a response.

Can I change the status messages during processing?

Absolutely. The generatingPhrases array contains all the rotating messages. Just modify that array with your own steps. The component automatically cycles through them with random delays between 2-4 seconds to feel more natural.

Forms

MemberPopular

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.

Installation 30s

Run Claude Code then copy and paste this command

@5ds/framework

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

Description

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.

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

Join Dan, Zehra and 0 others building AI businesses in days with video tutorials and 1 on 1 support.

Used In

Colouring Page

Dependencies

framer-motion@tabler/icons-reactshadcn/tooltip

These will be automatically installed when you add this component to your project.

Related Components

Expandable Icon Toggle 1

Free

Components Forms

Pill Toggle With Icon 1