An ultra-minimalist QR code generator featuring innovative 3D logo fusion technology, inspired by 1950s mid-century modern design aesthetics.
Less is More. QR Studio embraces the timeless elegance of 1950s design - clean lines, purposeful simplicity, and a carefully curated color palette that brings warmth and character to every QR code you create.
| Color | Hex | Usage |
|---|---|---|
| Cream | #F5E6C8 |
Background |
| Mint | #7DD2B7 |
Accents, buttons |
| Coral | #E8765C |
Primary actions |
| Turquoise | #52C3D3 |
Secondary actions |
| Charcoal | #333333 |
Text, borders |
| Mustard | #D4A017 |
Highlights |
QR Studio introduces a revolutionary approach to branded QR codes:
- 3D Perspective View - QR codes are displayed with depth and dimension
- Floating Animation - Subtle movement brings your codes to life
- Logo Integration - Your brand seamlessly emerges from the code itself
- Interactive Preview - Hover to explore from different angles
The 3D effect creates a visual where the logo and QR code become one unified element, rather than a logo simply placed on top of a flat code.
- URL links
- Plain text
- WiFi credentials (auto-connect)
- Email with subject and body
- Phone numbers
- Geographic locations
- Calendar events (vCalendar)
- 6 retro-inspired color presets
- Custom color controls for dots, background, and corners
- 6 dot pattern styles (square, dots, rounded, classy, etc.)
- Corner square and dot customization
- 4 error correction levels
- Adjustable size (150-400px)
- Upload custom logos/images
- Automatic high error correction when logo is added
- Adjustable logo size (15-50%)
- Logo margin control
- 3D emergence effect
- PNG (web-optimized)
- SVG (print-quality vectors)
- JPEG (compressed)
- Framework: Next.js 15 with App Router
- UI Library: React 19
- Language: TypeScript 5.7
- Styling: Tailwind CSS 3.4
- Typography: Space Grotesk (display) + Inter (body)
- QR Engine: qr-code-styling
- Icons: Lucide React
- Node.js 18.0 or higher
- npm, yarn, or pnpm
# Clone the repository
git clone https://github.com/sergiopesch/qr-code-generator.git
cd qr-code-generator
# Install dependencies
npm install
# Start the development server
npm run devOpen http://localhost:3000 in your browser.
npm run build
npm start- Select the QR code type from the collapsible Type section
- Enter your content (URL, text, WiFi details, etc.)
- Watch your QR code update in real-time in the 3D preview
- Open the Colors section
- Choose from 6 pre-designed color presets:
- Classic (black on white)
- Mint (fresh and modern)
- Coral (warm and inviting)
- Turquoise (cool and calm)
- Mustard (bold and vintage)
- Charcoal (sophisticated on cream)
- Fine-tune with custom color pickers
- Open the Logo Fusion section
- Upload your logo image
- Adjust size (35% default, 15-50% range)
- Set margin for padding around logo
- Toggle 3D Float to see your logo emerge from the code
- Hover over the QR code to flatten and enlarge
- Toggle 3D Float button to enable/disable floating animation
- The preview shows exactly how your QR code will look when exported
qr-studio/
├── src/
│ ├── app/
│ │ ├── globals.css # Retro styling, 3D effects
│ │ ├── layout.tsx # Fonts, metadata
│ │ └── page.tsx # Minimal landing page
│ └── components/
│ └── QRCodeGenerator.tsx # Main generator component
├── public/
├── tailwind.config.ts # 50's color palette
├── package.json
└── README.md
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm start |
Start production server |
npm run lint |
Run ESLint |
npm run type-check |
Run TypeScript type checking |
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
3D CSS transforms require a modern browser for optimal display.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Design inspiration from 1950s mid-century modern aesthetics
- qr-code-styling for QR generation
- Lucide for beautiful icons
- Tailwind CSS for utility-first styling
- Complete minimalist redesign with 1950s aesthetic
- Introduced 3D Logo Fusion technology
- New floating QR code preview with perspective effects
- Added 6 retro color presets (Mint, Coral, Turquoise, Mustard, Charcoal, Classic)
- Collapsible accordion-style control panels
- New typography with Space Grotesk display font
- Retro form styling with offset shadows
- Interactive 3D hover effects
- Streamlined UI with ultra-minimal approach
- Complete rewrite with Next.js 15 and React 19
- Added qr-code-styling library for advanced customization
- Added multiple QR code types (WiFi, Email, Location, Events)
- Added logo embedding with size and margin controls
- Added 6 different dot styles and corner customization
- Added multiple export formats (PNG, SVG, JPEG)
- Added error correction level selection
- Modern UI with Tailwind CSS and dark mode support
- Full TypeScript support
- Initial project setup
- Basic repository structure
Create. Scan. Connect.
Made with precision and care.