Gallery R3F Island Editorial — Motion Lab

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes

// Mechanisme: gallery-r3f-island-editorial (vanilla three.js)
// R3F-equivalent (educatief):
import { Canvas } from '@react-three/fiber';
<Canvas camera={{ position:[0,0,4.2], fov:35 }}>
  <ambientLight intensity={0.6}/>
  <directionalLight position={[2,3,2]} intensity={0.9}/>
  <mesh rotation-y={t}>
    <octahedronGeometry args={[1.2,0]}/>
    <meshStandardMaterial color="#0A0A0A" roughness={0.45}/>
  </mesh>
</Canvas>;

// --- VANILLA (LIVE) ---
import * as THREE from 'https://esm.sh/three@0.160.0';
const mount = document.querySelector('.r3f-island-mount');
const renderer = new THREE.WebGLRenderer({ antialias:true, alpha:true });
mount.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color('#F4F1EB');
const camera = new THREE.PerspectiveCamera(35, 1, 0.1, 100);
camera.position.set(0,0,4.2);
scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const dir = new THREE.DirectionalLight(0xffffff, 0.9); dir.position.set(2,3,2); scene.add(dir);
const mesh = new THREE.Mesh(
  new THREE.OctahedronGeometry(1.2, 0),
  new THREE.MeshStandardMaterial({ color:'#0A0A0A', roughness:0.45, metalness:0.1 })
);
scene.add(mesh);
function tick(){ mesh.rotation.y += 0.0035; renderer.render(scene,camera); requestAnimationFrame(tick); }
tick();

2. Skeleton — DOM + class-namen, mag herschikken

<!-- Skeleton: gallery-r3f-island-editorial -->
<section class="r3f-island">
  <p class="eyebrow">Vol. 03 / R3F Island</p>
  <h1>A solid in slow rotation.</h1>
  <div class="r3f-island-mount">
    <div class="r3f-island-fallback" hidden></div>
  </div>
  <p class="lede">An octahedron rendered in matte ink...</p>
</section>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: gallery-r3f-island-editorial */
:root {
  --block-bg: #F4F1EB;
  --block-fg: #0A0A0A;
  --block-accent: rgba(10,10,10,.5);
}
.r3f-island { background: var(--block-bg); color: var(--block-fg); min-height: 100vh; }
.r3f-island-mount { position: relative; width: 100%; min-height: 80vh; }
.r3f-island-mount canvas { display: block; width: 100% !important; height: 100% !important; }
.eyebrow { font-family: 'Fraunces', Georgia, serif; font-style: italic; }