BR Hardware & Precision Gadgets — Industrial Design prompts

Here is a complete set of AI generation prompts tailored for BR. Built By Ruturaj (BR).
To achieve that high-end, architectural, industrial design feel (think Teenage Engineering meets Apple / Nothing Tech), these prompts focus on matte finishes, neutral studio backdrops, precision explosion layers, and smooth lighting.

📽️ AI Video Generation Prompts (6 Prompts)
Recommended tools: Runway Gen-3 Alpha, Luma Dream Machine, Kling AI, or Pika

🖱️ Category: Mice

Video 1: Exploded View Assembly (Precision Motion)
Prompt: Cinematic 3D product render video of a high-end minimalist wireless mouse expanding into a floating exploded view in mid-air. Smooth mechanical motion as the sculpted matte graphite outer shell, precision optical sensor, PCB board, titanium scroll wheel, and internal battery separate layer by layer. Dark slate gray background, soft studio rim lighting, slow 360-degree rotation, photorealistic, 60fps, ultra-clean industrial design.

Video 2: Hero Reveal & Desk Setup
Prompt: Slow cinematic camera pan across a sleek, low-profile ergonomic wireless mouse sitting on a dark felt desk mat. A subtle ambient LED ring lights up under the scroll wheel. Modern studio lighting, soft shadows, macro close-up of tactile side button clicks and matte metal texture. Architectural, clean, premium tech commercial aesthetic.

⌨️ Category: Keyboards

Video 3: Exploded Mechanical Keyboard Layers
Prompt: 3D exploded motion reveal of a custom 75% mechanical keyboard floating against a neutral light-beige studio background. Components seamlessly separate vertically: translucent keycaps, mechanical switches, brass switch plate, PCB board with hotswap sockets, acoustic dampening foam, and anodized aluminum bottom case. Soft shadows, smooth frame-rate, hyper-detailed mechanical aesthetic.

Video 4: Macro Switch Mechanics & Typing Dynamic
Prompt: Close-up macro video focusing on two custom tactile keyboard switches being pressed downward on a frosted polycarbonate mechanical keyboard. Subtle spring bounce effect, glowing subtle warm-white backlighting under keycaps, graphite matte finishes, modern industrial precision motion.

🔋 Category: Power Banks

Video 5: Exploded Power Architecture
Prompt: High-tech product animation of a sleek 100W USB-C magnetic power bank disassembling into an exploded view layout. Floating layers reveal the CNC aluminum chassis, wireless MagSafe coil ring, stacked lithium polymer battery cores, digital OLED status display screen, and copper heat dissipation pads. Ultra-minimal grey background, smooth studio illumination.

Video 6: Magnetic Snap & Desktop Reveal
Prompt: Minimalist commercial shot of a ultra-slim matte-black magnetic power bank floating down and smoothly snapping onto the back of a modern smartphone with a subtle, sleek LED charge gauge activating upward. Clean geometric studio setup, crisp shadows, ultra-modern tech aesthetic.

---

📸 AI Image Generation Prompts (6 Prompts)
Recommended tools: Midjourney v6 or Flux.1

🖱️ Category: Mice

Image 1: Hero Exploded View (Isometric)
Prompt: Photorealistic 3D isometric render exploded view diagram of a sleek ergonomic mouse, floating components arranged vertically along a center axis, matte graphite shell, micro-switches, optical sensor chip, optical scroll wheel, lithium battery, clean matte off-white background, soft studio shadows, minimal industrial design portfolio shot, highly detailed, 8k resolution, shot on 85mm lens --ar 16:9 --style raw

Image 2: Minimalist Hero Product Shot
Prompt: Minimalist hero camera shot of a matte-black ergonomic wireless mouse with a raw brass scroll wheel resting on a slate desk mat, single key light creating sharp rim highlights, background clean neutral grey, architectural aesthetic, premium tech photography, photorealistic --ar 16:9 --v 6.0

⌨️ Category: Keyboards

Image 3: Exploded Mechanical Schematic (Top-Down / Perspective)
Prompt: High-end architectural studio shot, exploded view of a 65% custom mechanical keyboard. Floating layers showing frosted polycarbonate top case, PBT keycaps, lubricated mechanical switches, copper plate, PCB board, gasket mounts, sound dampening dampeners, heavy aluminum base plate. Clean neutral beige backdrop, soft diffused studio light, industrial design layout --ar 16:9 --v 6.0

Image 4: Dark Mode Hero Keyboard Shot
Prompt: Perspective hero photography of a modern custom mechanical keyboard with matte grey aluminum chassis, clean typography keycaps, subtle white glow under keys, sitting next to a minimalist brass desk accessory, dark tech aesthetic, shot on Hasselblad, studio lighting --ar 16:9 --style raw

🔋 Category: Power Banks

Image 5: Power Bank Internal Exploded View
Prompt: Photorealistic 3D exploded view layout of a compact magnetic power bank. Separated internal layers: anodized titanium frame, glass MagSafe alignment array, high-density lithium battery cells, printed circuit board with USB-C controller, mini OLED screen component. Pure minimal white studio setting, directional key light, precise engineering photography --ar 16:9 --v 6.0

Image 6: Lifestyle Minimal Standalone Shot
Prompt: Minimalist product shot of a pocket-sized high-capacity magnetic power bank standing vertically on a concrete slab, matte dark finish with subtle brass USB-C ports, sharp geometric shadows cast by direct sunlight, modern architecture background out of focus --ar 16:9 --v 6.0

You are acting as a Lead Creative Technologist and Senior Front-End Engineer specializing in high-end industrial design showcase websites (think Teenage Engineering, Apple, and Nothing Tech aesthetics).

Build a clean, ultra-minimalist, scroll-animated e-commerce/showcase web application for the hardware brand:
**BR. Built By Ruturaj (BR)** — A studio crafting precision-engineered mice, mechanical keyboards, and magnetic power banks.

---

### 1. 🛠️ Tech Stack & Requirements
- **Framework:** Next.js (App Router, TypeScript)
- **Styling:** Tailwind CSS (utilizing CSS variables for industrial color palettes)
- **Animation Engine:** Framer Motion (for sticky scroll-reveals, smooth parallax, and micro-interactions) + Lucide React (minimalist iconography)
- **Fonts:** Geist / Inter paired with a technical monospaced font (e.g., JetBrains Mono / Geist Mono) for spec readouts.

---

### 2. 🎥 Asset Integration (Strictly 6 Videos)
Store these video paths under `/public/assets/videos/` and map them to their corresponding product components:

#### 🖱️ Category 1: Precision Mice
1. `mouse-exploded.mp4` -> **Video 1 (Exploded View Assembly):** 3D exploded motion reveal of minimalist wireless mouse expanding into floating precision layers (matte graphite shell, optical sensor, titanium wheel, PCB, battery).
2. `mouse-hero.mp4` -> **Video 2 (Hero Reveal & Desk Setup):** Cinematic camera pan across low-profile ergonomic wireless mouse sitting on dark felt mat with subtle ambient scroll wheel lighting.

#### ⌨️ Category 2: Mechanical Keyboards
3. `keyboard-exploded.mp4` -> **Video 3 (Exploded Mechanical Layers):** 3D exploded motion reveal of 75% custom keyboard floating against light-beige background (translucent caps, switches, brass plate, PCB, acoustic foam, anodized case).
4. `keyboard-macro.mp4` -> **Video 4 (Macro Switch Mechanics):** Macro close-up of tactile switches being pressed on frosted polycarbonate body with subtle warm-white backlighting.

#### 🔋 Category 3: Power Banks
5. `powerbank-exploded.mp4` -> **Video 5 (Exploded Power Architecture):** 100W USB-C magnetic power bank disassembling into CNC aluminum chassis, MagSafe coil, stacked polymer cells, OLED screen, and copper heat pads.
6. `powerbank-snap.mp4` -> **Video 6 (Magnetic Snap & Desktop Reveal):** Ultra-slim matte-black magnetic power bank floating down and snapping onto a smartphone with activating LED charge gauge.

---

### 3. 🎨 Design System & UI/UX Guidelines
- **Palette:**
  - Backgrounds: Obsidian Dark (`#0A0A0C`), Matte Graphite (`#121215`), Off-White Studio (`#F5F5F3`)
  - Accent: Raw Brass / Metallic Warm Slate (`#C8A97E`)
  - Typography: Pure White (`#FAFAFA`), Muted Gray (`#71717A`)
- **Layout Philosophy:** Architectural grid lines, sub-pixel borders, generous whitespace, stark typography contrast, sticky scroll viewports where products expand layer-by-layer as the user scrolls.

---

### 4. 📐 Website Structure & Key Sections

#### A. Global Navigation
- Fixed minimalist header with blur backdrop (`backdrop-blur-md`).
- Brand mark: **BR** logo with `Built By Ruturaj` subtitle in technical mono font.
- Dynamic indicator showing active section / scroll progress.

#### B. Hero Section
- High-impact layout featuring a dual-video background switcher or ambient preview.
- Headline: *"Monolithic Engineering. Tactile Perfection."*
- Interactive CTA with smooth scroll target.

#### C. Interactive Exploded Product Showcases (Sticky Scroll Reveal)
Create 3 distinct sticky scroll sections—one for each category:

1. **Mice Section (`#mice`):**
   - **Scroll Interaction:** As the user scrolls through the 200vh section, `mouse-exploded.mp4` plays/scrubs into view alongside an interactive component breakdown list (Shell, Optical Sensor, Titanium Wheel, Battery).
   - **Secondary Highlight:** Card featuring `mouse-hero.mp4` showcasing the tactile side buttons and desk aesthetics.

2. **Keyboard Section (`#keyboards`):**
   - **Scroll Interaction:** Sticky container featuring `keyboard-exploded.mp4` expanding vertically. Floating technical spec overlays trigger at key scroll thresholds (Gasket Mount, Hotswap Sockets, Brass Plate).
   - **Secondary Highlight:** Split-screen section with `keyboard-macro.mp4` demonstrating keypress bounce and LED illumination dynamics.

3. **Power Bank Section (`#powerbanks`):**
   - **Scroll Interaction:** `powerbank-exploded.mp4` animating open to reveal CNC Aluminum, OLED screen, and wireless MagSafe coils.
   - **Secondary Highlight:** Snappy interactive showcase featuring `powerbank-snap.mp4`.

#### D. Tech Specs Comparison Matrix
- Minimalist grid layout comparing key hardware specs (Weight, Materials, Connectivity, Battery Capacity, Processing Latency).

#### E. Footer
- Minimalist architectural footer with brand manifesto, newsletter signup with subtle button micro-animations, and copyright info.

---

### 5. 🚀 Execution Steps for Claude Code
1. Initialize a clean Next.js project structure with Tailwind CSS and Framer Motion.
2. Build reusable layout components (`Navbar`, `Footer`, `VideoPlayer`, `ExplodedCard`).
3. Construct the custom scroll-driven animation hooks (`useScroll`, `useTransform`) for sticky video-reveals.
4. Assemble all 3 product sections using the mapped 6 video assets.
5. Apply polished hover states, cursor interactions, and responsive design for all viewport sizes.

Proceed to scaffold and write the complete component code.