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/<slug>/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 <AnimStyles /> 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 <AnimStyles />
   • 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/<slug> 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: <absolute-path>
• Character chosen: <character> — reasoning
• Animations wired: <list>
• Tilt: rotateY(X) rotateX(Y)
• Preview: run npm run dev in the gir-studios dir, open http://localhost:3000/render/<slug>
• Next to tune: (suggestions)