import React, { useState, useCallback } from 'react'; import { motion, AnimatePresence, useMotionValue, useTransform } from 'motion/react'; import { ChevronRight, ChevronLeft, User, Settings, Bell, CheckCircle2, Sparkles, ArrowRight, Camera, Search, Hash } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Badge } from '@/components/ui/badge'; import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Container } from '@/components/ui/container'; // --- Types --- type Step = 'welcome' | 'profile' | 'interests' | 'finalize'; const STEPS: Step[] = ['welcome', 'profile', 'interests', 'finalize']; // --- Components --- const StepIndicator = ({ currentStep }: { currentStep: number }) => { return (

{STEPS.map((_, idx) => (

))}

); }; export default function OnboardingFlow() { const [currentIdx, setCurrentIdx] = useState(0); const [direction, setDirection] = useState(0); const [formData, setFormData] = useState({ name: '', username: '', interests: [] as string[], notifications: true, }); const nextStep = useCallback(() => { if (currentIdx < STEPS.length - 1) { setDirection(1); setCurrentIdx(prev => prev + 1); } }, [currentIdx]); const prevStep = useCallback(() => { if (currentIdx > 0) { setDirection(-1); setCurrentIdx(prev => prev - 1); } }, [currentIdx]); // Drag logic const dragX = useMotionValue(0); const dragProgress = useTransform(dragX, [-100, 100], [1, -1]); const onDragEnd = (event: any, info: any) => { const threshold = 100; if (info.offset.x < -threshold) nextStep(); else if (info.offset.x > threshold) prevStep(); }; const variants = { enter: (direction: number) => ({ x: direction > 0 ? 500 : -500, opacity: 0, scale: 0.95 }), center: { zIndex: 1, x: 0, opacity: 1, scale: 1 }, exit: (direction: number) => ({ zIndex: 0, x: direction < 0 ? 500 : -500, opacity: 0, scale: 0.95 }) }; return (

{/* Header */}

VibeCraft

{currentIdx === 0 && } {currentIdx === 1 && } {currentIdx === 2 && } {currentIdx === 3 && }

{/* Footer Navigation */}

); } // --- Steps --- function WelcomeStep({ onNext }: { onNext: () => void }) { return (

Welcome to the Future. VibeCraft transforms your creative workflow with kinetic motion and neural design. Let's set up your space.

); } function ProfileStep({ formData, setFormData, onNext }: any) { return (

Create your identity

Tell us who you are in the digital realm.

Full Name setFormData({...formData, name: e.target.value})} />

Username

@ setFormData({...formData, username: e.target.value})} />

This is how you'll appear to other crafters.

); } function InterestsStep({ formData, setFormData }: any) { const interests = [ 'Motion Design', 'AI Art', 'Web3', 'Architecture', 'Music Production', 'Data Viz', 'Typography', 'Branding', '3D Rendering', 'UI/UX', 'Cloud Systems', 'Robotics' ]; const toggleInterest = (interest: string) => { const next = formData.interests.includes(interest) ? formData.interests.filter((i: string) => i !== interest) : [...formData.interests, interest]; setFormData({...formData, interests: next}); }; return (

Pick your vibe

Select at least 3 to personalize your feed.

{interests.map((interest) => ( toggleInterest(interest)} > {interest} ))}

Smart Feed

Auto-curate based on your choices.

Notifications

Get pinged for daily inspiration.

setFormData({...formData, notifications: checked})} />

); } function FinalizeStep({ formData }: any) { return (

You're all set!

Your workspace is ready for action.

{formData.name || 'Anonymous Crafter'}

@{formData.username || 'user_2026'}

Interests Selected

{formData.interests.length > 0 ? ( formData.interests.slice(0, 5).map((i: string) => ( {i} )) ) : ( No interests selected )} {formData.interests.length > 5 && ( +{formData.interests.length - 5} more )}

); }

Kinetic Onboarding Flow