Create seamless X/Twitter profiles where your header and profile picture flow together perfectly.
Seamless is a web tool that helps you create visually stunning X/Twitter profiles by seamlessly connecting your banner and profile picture. Upload any image, position it precisely using our visual editor, and download perfectly sized assets for your profile.
- 🖼️ Visual Editor - Drag, zoom, and position your image with real-time preview
- 🎯 Perfect Alignment - Ensures your profile picture and banner align flawlessly
- 📱 Mobile-First Design - Works beautifully on all devices
- ⚡ Fast & Lightweight - Built with Next.js for optimal performance
- 🎨 Modern UI - Beautiful glass-morphism design with smooth animations
- 💾 Persistent State - Your edits are saved locally as you work
- 📥 Easy Export - Download ready-to-use images for immediate upload
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion + GSAP
- State Management: Zustand
- Canvas Editing: Konva.js + React Konva
- Icons: Lucide React
- Analytics: Vercel Analytics
- Node.js 18.x or later
- npm or yarn
- Clone the repository:
git clone https://github.com/preyam2002/projection.git
cd projection- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
- Upload an Image - Drag and drop or click to select an image (up to 5MB)
- Position Your Image - Use the visual editor to align the circular crop area
- Preview in Real-Time - See exactly how your profile will look
- Download Assets - Get perfectly sized images for your X/Twitter profile
- Upload to X - Set the downloaded images as your header and profile picture
app/
├── editor/ # Editor page component
├── error.tsx # Error boundary
├── layout.tsx # Root layout
├── not-found.tsx # 404 page
└── page.tsx # Home page (upload zone)
components/
├── CropTool.tsx # Circular cropping interface
├── Editor.tsx # Main editor component
├── HeaderPreview.tsx # Header preview component
├── ShuffleText.tsx # Animated text component
├── UploadZone.tsx # File upload component
└── ui/ # UI components
lib/
├── store.ts # Zustand state management
└── utils.ts # Utility functions
public/
├── example.png # Example output image
└── logo.png # App logo
The easiest way to deploy is using Vercel:
npm run buildOr deploy directly from GitHub to Vercel:
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
Built with ❤️ by Preyam
Live Demo: projection-sable.vercel.app