Smart Upload

A cinematic multi-stage upload component with scanning, encryption, and progress animations.

Installation

Note: This component uses Framer Motion for layout transitions and animated states. It is inspired by shoryacodes

Usage

import SmartUpload from '@/components/odysseyui/smart-upload';

export default function Page() {
  return <SmartUpload />;
}

How It Works

Uses a finite visual state system:
- idle
- scanning
- encrypting
- uploading
- done
Automatically sequences states using timed transitions.
Uses URL.createObjectURL() to generate a live preview.
Uses motion.div with layout for smooth container resizing.
Includes animated overlays for:
- Scanning beam
- Encryption grid pulses
- Upload progress fill
Automatically resets back to idle after completion.

Animation Flow

User selects a file.
Preview renders.
Virus Scan animation plays.
Encryption grid overlay animates.
Upload progress fills.
Completion state appears.
Component resets.

API Reference

SmartUpload

Prop	Type	Default
`status?`	`'idle' \| 'scanning' \| 'encrypting' \| 'uploading' \| 'done'`	-
`previewUrl?`	`string \| null`	-

Note: This component is currently self-contained and does not expose external props.
You can extend it by adding onUploadStart, onUploadComplete, or real API integration.

Examples

Basic Usage

<SmartUpload />

Features

Multi-stage animated upload simulation
Smooth layout transitions
Live image preview
Animated scanning beam
Encryption grid pulse effect
Dynamic progress indicator
Auto reset after completion
Fully responsive design

Smart Upload

On this page