--- name: Product Render — 3D-Tilted Animated Product Pages description: --- # Product Render — 3D-Tilted Animated Product Pages Generate a professional, character-aware **Next.js product render page** with a 3D-tilted hardware/app/object mockup and subtle living animations — the same visual language as the GIR Studios hero/panel renders, generalized for any product. ## Triggers Use this skill when the user asks to: - "Render a product page for X" - "Make a 3D panel render for [product]" - "Generate a product showcase / hero section for [product]" - "Create an animated product render like GIR" - "Mock up [product] as a [hardware panel / app / card]" - "Build a render page for [product]" - "Marketing page for [product]" Also trigger on any request that references the existing `/render/hero`, `/render/panels`, `/render/premiere` routes in gir-studios and asks for "another one like that" or "something similar for [product]". ## What this skill produces A single `page.tsx` file (Next.js App Router, `"use client"`) placed at either: - `~/Library/Mobile Documents/com~apple~CloudDocs/AI COOKUPS/gir-studios/src/app/render//page.tsx` (default — the GIR website) - A path the user specifies The page contains: 1. A `HeroSection` with product copy (title, subtitle, description, stats, feature pills) on one side 2. A **3D-tilted product mockup** on the other side (`perspective` + `rotateY/rotateX` + `preserve-3d` + colored drop-shadow halo) 3. An `` block with **only the CSS keyframes that match the product's character** (not the whole library) 4. Animated elements wired up via className (e.g. `className="led-dot-anim"`, `className="panel-float"`) The page works standalone in any Next.js 14+ App Router project. No external dependencies beyond React. ## Assets to read before generating Always read these files before producing output: 1. **`characters/README.md`** — character profile matrix. Pick ONE primary character based on the product; optionally one accent character for mixing. 2. **`templates/chrome.tsx`** — the library of product-mockup wrappers (`PanelChrome`, `PhoneChrome`, `BrowserChrome`, `GlassCard`, `ProductPedestal`, `TimelineChrome`). 3. **`templates/animations.tsx`** — per-character `@keyframes` blocks. Copy ONLY the block(s) you need into the generated page's `AnimStyles`. 4. **`templates/page.template.tsx`** — scaffold with `{{PLACEHOLDER}}` tokens. Replace all placeholders with real content. 5. **`reference/hero-page.reference.tsx`** — the gold-standard GIR hero page; study layout, typography, spacing, stat rows, feature pills. 6. **`reference/panels-page.reference.tsx`** — deep examples of actual hardware panels (SyncGir, GradeGir, FxGir, etc.) — use for inspiration when building custom panel contents. 7. **`reference/premiere-page.reference.tsx`** — timeline/playhead/waveform styling for creative-tool character. ## Workflow 1. **Ask / confirm** — if the user's request is ambiguous, ask for: - Product name + slug - One-sentence tagline - Accent color (hex) - 6 feature keywords (for pills) - 3 stats (value + label pairs) - Short description paragraph - Character (or let the skill infer — see below) 2. **Pick the character** — from `characters/README.md`: - Hardware panel → GIR-style pro tools, plugins, DAW devices - Software app → mobile apps, desktop apps, SaaS dashboards - Creative tool → music/video/design apps with timelines - AI / data → LLM apps, analysis tools - Physical → consumer products you hold - Luxury → editorial fashion, beauty, premium hardware - Game → games, interactive entertainment - Service → cloud APIs, protocols, platforms 3. **Pick tilt**: - Hardware panel: `rotateY(-8deg) rotateX(4deg)` or mirrored - App: `rotateY(±6deg) rotateX(2deg)` - Creative tool: `rotateY(-4deg) rotateX(2deg)` - Physical: `rotateY(-12deg) rotateX(4deg)` - Luxury: `rotateY(0deg) rotateX(0deg)` (static, dignified) - Game: `rotateY(±10deg) rotateX(6deg)` with `perspective: 800` - Default: `rotateY(-8deg) rotateX(4deg)` 4. **Write the file** — compose from `templates/page.template.tsx`: - Substitute `{{PRODUCT_NAME}}`, `{{PRODUCT_TAGLINE}}`, `{{PRODUCT_DESCRIPTION}}`, `{{ACCENT}}`, etc. - Replace the `ProductMockup()` body with the right chrome wrapper + inline content that reflects the product's UI - Copy only the relevant `@keyframes` + className rules from `animations.tsx` into the page's `` - Wire animated elements with className (e.g. panel gets `className="panel-float"`, LEDs get `className="led-dot-anim"`, etc.) - Ensure the page compiles as a Next.js client component 5. **Report** — return the absolute output path and suggest: - Run `npm run dev` in the gir-studios dir - Open `http://localhost:3000/render/` to preview - Iterate on copy, tilt angle, or animation intensity ## House style (always apply) - **Background**: `#0d0d10` (graphite) or `#1a1a1f` (surface) for the page - **Primary text**: `#ffffff`, **secondary**: `rgba(255,255,255,0.55)` - **Hero title**: 84px, 900 weight, letter-spacing -3, lineHeight 0.92 - **Subtitle**: 16px, uppercase, letter-spacing 4, in accent color with glow - **Description paragraph**: 15px, lineHeight 1.7, maxWidth 440, rgba(255,255,255,0.5) - **Stats**: value 36px 900 weight in accent with text-shadow; label 9px uppercase dim - **Feature pills**: 10px uppercase, `${accent}08` bg + `${accent}40` border, 99 radius - **Ambient halo**: `radial-gradient(ellipse, ${accent}08, transparent 60%)` 1200×800 centered - **Drop shadow on the mockup**: `0 60px 120px rgba(0,0,0,0.5), 0 0 120px ${accent}0A` - Typography stack: `SF Mono / Fira Code` for mono, system sans otherwise ## Anti-patterns — NEVER do these - ❌ Dump `AllAnimStyles` into a page — each character has its own animation vocabulary, mixing them feels incoherent. - ❌ Add `three.js`, `@react-three/fiber`, or any 3D library. The whole point is CSS-only + zero dependencies. - ❌ Use `framer-motion` unless the user specifically asks — CSS keyframes are the house style. - ❌ Over-tilt (rotateY > 18°) — it looks like a toy, not a product. - ❌ Make the accent halo too bright — 6-10% opacity is the signature subtle glow. - ❌ Make the panel float aggressively — ±4px is the vibe, not ±20px. - ❌ Use colors outside the product's accent + graphite + white trio without reason. - ❌ Generate stubs like "TODO: add content here" — fill every section with real, researched content. If you don't know a stat, ask the user. ## Example invocations **User**: "Make a product render for VOX — my iOS camera app, accent is golden yellow, tagline 'Film on your phone.'" → You: read characters/README.md, pick SOFTWARE APP, use PhoneChrome, fill phone screen with stylized camera UI (preview frame, exposure dial, mode selector), tilt rotateY(-6deg) rotateX(2deg), animations: screen-flicker + float-gentle. Output `gir-studios/src/app/render/vox/page.tsx`. **User**: "Render a page for my new Morpheus VST plugin." → You: pick HARDWARE PANEL character, use PanelChrome, content = sample pad grid + envelope knobs + MIDI input status LED, tilt rotateY(-8deg) rotateX(4deg), animations: led-breathe + screw-glint + panel-float + circuit-pulse. Output `gir-studios/src/app/render/morpheus/page.tsx`. **User**: "Product render for a fragrance I'm launching called EMBER, black bottle, amber accent." → You: pick LUXURY (with PHYSICAL accent), use ProductPedestal, place a tall black bottle SVG/image with label, tilt static or rotateY(-4deg), animations: slow-rotate + spotlight-sweep + shadow-breathe, typography heavy serif. Output path of user's choice. ## Output contract When done, reply with: - ✅ File written: `` - **Character chosen**: `` — reasoning - **Animations wired**: `` - **Tilt**: `rotateY(X) rotateX(Y)` - **Preview**: run `npm run dev` in the gir-studios dir, open `http://localhost:3000/render/` - **Next to tune**: (suggestions)