create a website called "algorithmic garden" that uses webxr or xr.js plus three.js to display a list of .glb models that can overlayed over whatever a cellphone camera sees (AR). There should be pinch to zoom and rotate commands on the phone interface.
e34da73 verified | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| transition: background-color 0.3s ease; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| #ar-viewport { | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| background-color: #f0fdf4; | |
| } | |
| .model-card { | |
| transition: all 0.3s ease; | |
| transform: translateY(0); | |
| } | |
| .model-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| /* AR controls animation */ | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| #ar-controls button { | |
| animation: pulse 2s infinite; | |
| } | |
| /* Dark mode transitions */ | |
| .dark #ar-viewport { | |
| background-color: #1a2e05; | |
| } | |
| /* Loading spinner */ | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .animate-spin { | |
| animation: spin 1s linear infinite; | |
| } |