ar-gallery

Imported from livedtrid/ar-gallery (AGENTS.md). Install upstream with npx skills add livedtrid/ar-gallery. Copyright stays with the author.

AGENTS.md

Project: POD AR Gallery

Build a modern, touch-friendly, single-page product gallery website for POD (Point of Disruption). The site showcases 3D product models and allows users to view each object in Augmented Reality using Google <model-viewer>.

The experience must work well on:

• Safari on Apple Vision Pro
• Chrome on Android
• Chrome on Windows desktop

The site should feel like an innovation showroom: dark, premium, futuristic, with neon cyan accents, glassmorphism cards, large product visuals, and a network-style animated hero background using Vanta.js NET.

Core Goals

Create a simple but polished website that:

1. Displays a vertical product gallery.
2. Uses Google Model Viewer for every product.
3. Supports AR viewing from each product card.
4. Adapts cleanly to 16:9 and 9:16 screens.
5. Is touch-friendly and scrolls vertically only.
6. Uses Vanta.js NET animation in the hero/top background.
7. Loads 3D models and poster images from the /models directory.

Tech Requirements

Use plain HTML, CSS, and JavaScript unless the existing project already uses a framework.

Required libraries:

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<script src="three.r134.min.js"></script>
<script src="vanta.net.min.js"></script>

If local copies of three.r134.min.js and vanta.net.min.js are not present, place them in a /vendor folder and reference them from there.

Example:

<script src="/vendor/three.r134.min.js"></script>
<script src="/vendor/vanta.net.min.js"></script>

Do not rely on build tools unless they already exist in the project.

File Structure

Expected structure:

/
├── index.html
├── styles.css
├── app.js
├── AGENTS.md
├── vendor/
│   ├── three.r134.min.js
│   └── vanta.net.min.js
└── models/
    ├── model_01/
	│   ├── credits.txt
    │   ├── model.glb
	│   ├── model.usdz
    │   └── poster.webp
    ├── model_02/
	│   ├── credits.txt
    │   ├── model.glb
	│   ├── model.usdz
    │   └── poster.webp
    ├── model_03/
	│   ├── credits.txt
    │   ├── model.glb
	│   ├── model.usdz
    │   └── poster.webp
    └── model_04/
	    ├── credits.txt
        ├── model.glb
	    ├── model.usdz
        └── poster.webp

Each model folder should contain:

• model.glb
• model.usdz
• credits.txt
• poster.webp

Do not hardcode external product image URLs. Use the local /models/model_xx/poster.webp assets.

Visual Direction

Use the generated concept as the design reference:

• Fullscreen dark layout.
• No right-side mobile preview panel.
• Hero section at the top.
• Vanta NET animation behind the hero.
• Large POD branding.
• Main title: POD AR Gallery.
• Subtitle: Explore produtos, espaços e objetos em realidade aumentada.
• Cyan/neon accents.
• Rounded glass cards.
• Product cards stacked vertically.
• Large buttons with generous touch targets.
• Minimal top navigation.

Suggested palette:

--bg: #040f1d;
--bg-deep: #020812;
--text: #f5f7fb;
--muted: #a8b3c7;
--cyan: #11d9ff;
--cyan-strong: #11a0db;
--card: rgba(5, 15, 30, 0.72);
--card-border: rgba(120, 220, 255, 0.28);

Use a modern sans-serif font stack:

font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

Layout Requirements

General

• Single page only.
• Vertical scroll only.
• Avoid horizontal overflow at all breakpoints.
• Use scroll-behavior: smooth.
• Main content should have a max width around 1120px to 1280px on desktop.
• Use comfortable spacing for touch interaction.

Desktop / 16:9

Hero section:

• Left side: eyebrow, title, subtitle, CTA, availability row.
• Right side: large featured <model-viewer> card.
• Hero height should be close to one viewport height but not force content below the fold unnecessarily.

Product cards:

• Horizontal layout: model preview on the left, product info on the right.
• Cards should be large and cinematic.

Mobile / 9:16

Hero section:

• Stack content vertically.
• Title first, then featured model viewer.
• CTA remains easy to tap.

Product cards:

• Stack preview and info vertically.
• Each card should feel like a premium mobile story card.
• Buttons must be at least 44px high.

Use media queries around:

@media (max-width: 768px) {}
@media (orientation: portrait) {}

Vanta.js Hero Background

Add an element for the animated background:

<section id="hero-vanta" class="hero">
  ...
</section>

Initialize Vanta NET in app.js:

let vantaEffect = null;

function initVanta() {
  const el = document.querySelector('#hero-vanta');
  if (!el || !window.VANTA || !window.THREE) return;

  vantaEffect = window.VANTA.NET({
    el,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.0,
    minWidth: 200.0,
    scale: 1.0,
    scaleMobile: 1.0,
    color: 0x11a0db,
    backgroundColor: 0x040f1d,
    maxDistance: 17.0,
    spacing: 14.0
  });
}

window.addEventListener('DOMContentLoaded', initVanta);
window.addEventListener('beforeunload', () => {
  if (vantaEffect) vantaEffect.destroy();
});

Important:

• Keep Vanta only in the hero/top area, not the entire page.
• Add a CSS gradient overlay to keep text readable.
• Respect reduced motion:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (prefersReducedMotion) return;

For weaker devices, the site must still look good if Vanta fails to load.

Google Model Viewer Requirements

Use <model-viewer> for each model.

Base example:

<model-viewer
  src="/models/model_01/model.glb"
  poster="/models/model_01/poster.webp"
  alt="Modelo 3D do produto Future 01"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  auto-rotate
  reveal="interaction"
  loading="lazy"
  shadow-intensity="1"
  environment-image="neutral"
  exposure="1"
  touch-action="pan-y">
  <button slot="ar-button" class="ar-button">
    Ver em AR
  </button>
</model-viewer>

Rules:

• Every product card must contain one <model-viewer>.
• Use local .glb files only.
• Use local .webp posters only.
• Use touch-action="pan-y" to preserve vertical scrolling on touch devices.
• Use camera-controls for direct interaction.
• Use auto-rotate, but keep rotation subtle.
• Use loading="lazy" for product cards below the hero.
• Use descriptive alt text.
• Include an AR button for every product.
• Use ar-modes="webxr scene-viewer quick-look" to cover Android, browser WebXR, and Apple Quick Look.

Note:

• Apple platforms may require USDZ for the most reliable Quick Look AR experience. Implement the site with GLB first. Do not invent USDZ paths unless actual USDZ files exist.
• If USDZ files are added, support them with ios-src="/models/model_01/model.usdz".

Product Data

Store product definitions in app.js as a JavaScript array.

Example:

const products = [
  {
    id: 'model_01',
    name: 'Future 01',
    category: 'Ténis',
    description: 'Design futurista com máximo desempenho e conforto.',
    model: '/models/model_01/model.glb',
	ios-src:'/models/model_01/model.usdz',
    poster: '/models/model_01/poster.webp',
    alt: 'Ténis futurista Future 01 em 3D'
  },
  {
    id: 'model_02',
    name: 'Orbit Watch',
    category: 'Acessórios',
    description: 'Tecnologia e elegância em perfeita órbita.',
    model: '/models/model_02/model.glb',
	ios-src:'/models/model_02/model.usdz',
    poster: '/models/model_02/poster.webp',
    alt: 'Relógio Orbit Watch em 3D'
  },
  {
    id: 'model_03',
    name: 'Lumi Chair',
    category: 'Móveis',
    description: 'Minimalismo e conforto para qualquer espaço.',
    model: '/models/model_03/model.glb',
	ios-src:'/models/model_03/model.usdz',
    poster: '/models/model_03/poster.webp',
    alt: 'Cadeira Lumi Chair em 3D'
  },
  {
    id: 'model_04',
    name: 'POD Cabin',
    category: 'Arquitetura',
    description: 'Espaços modulares para um novo viver.',
    model: '/models/model_04/model.glb',
	ios-src:'/models/model_04/model.usdz',
    poster: '/models/model_04/poster.webp',
    alt: 'Modelo arquitetónico POD Cabin em 3D'
  }
];

Render the gallery dynamically from this array.

Product Filters

Add simple category filters:

• Todos
• Ténis
• Acessórios
• Móveis
• Arquitetura

Requirements:

• Filters should be buttons.
• Buttons must be touch-friendly.
• Active filter must be visually highlighted.
• Filtering should not reload the page.
• Filtering should preserve vertical-only scrolling.

Accessibility

• Use semantic HTML.
• Use real buttons, not clickable divs.
• Every button needs accessible text.
• Every model viewer needs meaningful alt text.
• Maintain visible focus states.
• Ensure contrast is readable on the animated background.
• Respect prefers-reduced-motion.
• Do not trap focus inside model viewers.

Performance

• Lazy-load non-hero model viewers.
• Use poster images to avoid blank loading states.
• Keep Vanta limited to the hero.
• Avoid loading too many high-poly models at once if the gallery grows.
• Avoid heavy scroll animations.
• Use CSS transitions sparingly.
• Ensure the page remains usable if WebGL is unavailable.

Browser Compatibility Notes

Safari on Vision Pro

• Ensure controls are large and easy to target.
• Avoid hover-only interactions.
• Do not depend on mouse-specific behavior.
• Keep scroll vertical and natural.
• Test model interaction with camera-controls and touch-action="pan-y".

Chrome on Android

• scene-viewer should be included in ar-modes.
• AR button should be clearly visible.
• Avoid fixed elements that interfere with viewport resizing.

Chrome on Windows

• AR may not be available, but 3D viewing must work.
• The AR button can still exist; Model Viewer handles unsupported modes.
• Desktop layout should look like a premium showroom.

Content Copy

Use Portuguese copy.

Suggested page copy:

Hero eyebrow:

Inovação · Design · Realidade Aumentada

Hero title:

POD AR Gallery

Hero description:

Explore produtos, espaços e objetos em realidade aumentada.

CTA:

Ver galeria

Availability:

Disponível em Mobile e Vision Pro

Gallery title:

Explorar produtos

AR info card:

Experimente em realidade aumentada
Toque em “Ver em AR” e visualize o produto no seu espaço com o seu dispositivo.

Implementation Checklist

Before finishing, verify:

• index.html, styles.css, and app.js exist.
• The site has a fullscreen-width layout without the right-side concept preview panel.
• Hero has Vanta NET background.
• Site still looks good when Vanta is disabled or unavailable.
• Gallery renders from the products array.
• Each product uses /models/model_xx/model.glb.
• Each product uses /models/model_xx/poster.webp.
• Each product has a <model-viewer>.
• Each product has a visible Ver em AR button.
• ar-modes="webxr scene-viewer quick-look" is present.
• touch-action="pan-y" is present on model viewers.
• Page works in portrait 9:16.
• Page works in landscape 16:9.
• No horizontal scrolling occurs.
• Buttons are touch-friendly.
• Navigation anchors scroll smoothly.
• Reduced motion preference is respected.

Do Not Do

• Do not create a multi-page site.
• Do not add a right-side mobile preview panel.
• Do not use horizontal scrolling as the main navigation.
• Do not require a backend.
• Do not require a build step unless the repo already has one.
• Do not invent USDZ files if only GLB files exist.
• Do not use external product images.
• Do not hide AR behind complex interactions.
• Do not make the layout dependent on hover.

Definition of Done

The project is complete when opening index.html shows a polished, responsive, single-page POD AR Gallery with:

• animated Vanta NET hero background,
• fullscreen modern layout,
• vertical gallery,
• local GLB model previews,
• local WEBP posters,
• category filters,
• visible AR buttons,
• touch-friendly controls,
• responsive behavior for 16:9 and 9:16 screens,
• compatibility-minded behavior for Safari on Vision Pro, Chrome on Android, and Chrome on Windows.