Text Behind Image

Place text behind objects in photos. Upload an image, add text, and let the app automatically position it behind the main subject.

Features

• Automatic background removal using AI
• Multiple text layers with full customization
• Real-time preview of text placement
• Text effects - shadows, outlines, glow
• 3D transformations - rotation, tilt, positioning
• Export to PNG with high quality

Quick Start

npm install
npm run dev

Open http://localhost:3000 and upload an image to start.

Tech Stack

• Next.js 15 (React 19)
• TypeScript
• Tailwind CSS
• @imgly/background-removal - AI-powered background removal
• Radix UI - accessible components
• Framer Motion - animations

How It Works

1. Upload an image
2. AI removes the background, isolating the main subject
3. Add and customize text layers
4. Text renders between background and foreground
5. Download the final composition

Project Structure

app/
  ├── page.tsx          # Landing page
  └── editor/
      └── page.tsx      # Main editor
components/
  ├── layer-composition.tsx    # Canvas rendering
  ├── text-customizer.tsx      # Text controls
  └── ui/                      # UI components
lib/
  ├── image-utils.ts    # Image processing

Contributing

Pull requests are welcome. For major changes, open an issue first to discuss what you'd like to change.

License

MIT