Nfc Canvas

Live Demo: https://nfc-canvas.onrender.com
Repository: https://github.com/RasikhAli/NFC-Canvas
Official Website: agnific.com
Type: High-Performance Static Web Application (React 19 + Vite + HTML5 Canvas)

🌟 Overview

NFC Canvas is an ultra-modern, zero-backend web studio built to design and generate production-ready, ultra high-resolution contactless NFC "Tap to Review" business cards.

Engineered specifically for AGNIFIC contactless hardware cards, every graphic, bevel shader, typography rasterization, and circular logo crop is rendered 100% client-side in the browser at 2× Ultra-HD resolution (1276 × 2022 px).

📸 Screenshots

1. Studio Dashboard Overview (Identity & Fonts)

2. Multi-Color Text Segmentation Engine

Split any text line into up to 5 customized color segments with live canvas rendering.

3. Realtime Colors Live Chooser

Full 2D HSV color plane with auto-flip boundary positioning and studio harmonized swatches.

4. Granular Typography & Sizing Controls

Independent font size controls for Business Name, Slogan, TAP TO REVIEW, and Agnific branding.

5. 1-Click Studio Theme Presets

Instantly apply curated palettes: Obsidian Gold, Cyberpunk Neon, Emerald Luxe, Midnight Sapphire, and Rose Gold.

⚡ Core Features

• 💎 Bento Grid Architecture: Dark-mode modular studio inspired by Linear, Raycast, and Vercel.
• 🎴 Hero Live Canvas Viewport: Sticky 638 × 1011 px live card preview with glossy bevel shaders, dynamic background mesh, and 2× PNG export indicator.
• 🌈 Multi-Color Text Segmentation: Break down Business Name and Slogan into up to 5 custom-colored segments with visual chip tags and individual hex pickers.
• 🎨 Realtime Live Color Choosers: Embedded 2D Saturation/Value plane and 360° Hue slider with smart auto-flipping positioning so pickers are never cut off.
• 🔤 Curated Typeface Engine: Audiowide, Space Grotesk, Rajdhani, Orbitron, Montserrat, Poppins, Oswald, Bebas Neue, Merriweather, and Playfair Display with live-rendered dropdown pickers.
• 📏 Granular Typography & Spacing Sliders: Fine-tune font sizes:
  • Business Name: 40px – 130px (Default: 92px)
  • Slogan: 16px – 60px (Default: 30px)
  • TAP TO REVIEW: 20px – 60px (Default: 38px)
  • Powered By: 12px – 36px (Default: 20px)
  • AGNIFIC: 16px – 50px (Default: 30px)
  • NFC Icon Spacing: Optimized gap between callout text and the contactless icon.
• 🖼️ Circular Logo Processor: Drag-and-drop or file select with instant anti-aliased circular masking and 30%–100% scale adjustment.
• 🪄 1-Click Studio Presets: 5 hand-crafted studio themes for instant styling.
• 🛡️ 100% Client-Side Privacy: Zero server dependencies, zero telemetry, zero uploads.
• 🚀 2× UHD Production Export: 1-click PNG generation exporting pristine 1276 × 2022 px print-ready artwork.

📂 Project Structure

nfc-canvas/
├── public/                       # Production static assets served by Vite
│   ├── agnific-full-logo.png     # Official Agnific Primary Logo
│   ├── agnific-logo.png          # Official Agnific Emblem
│   ├── agnific-side-logo.png     # Official Agnific Landscape Logo
│   ├── favicon-32x32.png         # Browser Favicon
│   ├── favicon.png               # High-res Favicon
│   └── fonts/                    # Bundled TTF fonts
├── screens/                      # Showcase UI Screenshots for Documentation
│   ├── screenshot-0.png          # Dashboard Overview
│   ├── screenshot-1.png          # Multi-Color Segmentation
│   ├── screenshot-2.png          # Realtime Color Picker
│   ├── screenshot-3.png          # Typography Sizing
│   └── screenshot-4.png          # Studio Presets
├── design-assets/                # Raw source design files & branding
│   ├── fonts/                    # Original TrueType font files
│   ├── photoshop/                # PSD and artwork project files
│   └── raw-branding/             # Original logo artwork and icons
├── legacy/                       # Archived vanilla JS/CSS prototype
│   ├── script.js
│   └── style.css
├── src/
│   ├── components/
│   │   ├── AdvancedSettings.jsx  # Background and rating star customizations
│   │   ├── BentoGrid.jsx         # Modular Bento container components
│   │   ├── CardPreview.jsx       # Hero sticky canvas preview & export button
│   │   ├── ColorPill.jsx         # Color input trigger connected to LiveColorPicker
│   │   ├── FontDropdown.jsx      # Custom animated dropdown with live font preview
│   │   ├── Footer.jsx            # Agnific official footer with website links
│   │   ├── LiveColorPicker.jsx   # 2D HSV real-time color chooser popover
│   │   ├── LogoUploader.jsx      # Drag & drop circular logo uploader
│   │   ├── MultiColorTextEditor.jsx # Multi-segment color assignment engine
│   │   ├── Navbar.jsx            # Studio header with NFC Canvas & Agnific branding
│   │   ├── PresetThemes.jsx      # 1-click theme presets catalog
│   │   └── SizeSlider.jsx        # Premium range slider with numerical inputs
│   ├── utils/
│   │   └── cardRenderer.js       # Core HTML5 Canvas rendering & 2x UHD engine
│   ├── App.jsx                   # Master studio dashboard & state management
│   ├── index.css                 # Design tokens, glassmorphic shaders, typography
│   └── main.jsx                  # React 19 entry point
├── index.html                    # HTML5 shell with Google Font CDN & Meta tags
├── package.json                  # Project metadata, scripts, and dependencies
├── vite.config.js                # Vite build and dev server configuration
└── .gitignore                    # Git ignore rules

🛠️ Getting Started Locally

Prerequisites

• Node.js: v18.0.0 or higher
• npm: v9.0.0 or higher

Installation

# 1. Clone the repository
git clone https://github.com/RasikhAli/NFC-Canvas.git

# 2. Enter directory
cd NFC-Canvas

# 3. Install dependencies
npm install

# 4. Start local Vite development server
npm run dev

The application will be live at http://localhost:3000.

📦 Production Build & Deployment

To compile the production static bundle:

npm run build

The compiled, minified static files will be placed in the dist/ directory.

Deploying to Static Hosting Platforms

Render (Static Site)

1. Connect your GitHub repository to Render.
2. Select Static Site.
3. Set Build Command: npm install && npm run build
4. Set Publish Directory: dist
5. Click Create Static Site.

Vercel

npx vercel --prod

Netlify

npx netlify deploy --prod --dir=dist

⚖️ Brand & Attribution

• Product: NFC Canvas
• Developed & Engineered by: AGNIFIC
• Official Hardware Website: https://agnific.com
• Purpose: Official digital card creation studio companion for Agnific contactless NFC hardware products.