Hero Three Scene Editorial — Motion Lab

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

// Mechanisme: hero-three-scene-editorial
import * as THREE from 'https://esm.sh/[email protected]';
const cv = document.querySelector('.three-canvas-editorial');
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const wrap = cv.parentElement;
const r = new THREE.WebGLRenderer({ canvas: cv, antialias: true, alpha: true });
r.setPixelRatio(Math.min(devicePixelRatio, 2));
r.setSize(wrap.clientWidth, wrap.clientHeight);
const sc = new THREE.Scene();
const cam = new THREE.PerspectiveCamera(40, wrap.clientWidth / wrap.clientHeight, 0.1, 100);
cam.position.z = 4;
const mesh = new THREE.Mesh(
  new THREE.OctahedronGeometry(1, 0),
  new THREE.MeshStandardMaterial({ color: 0x0A0A0A, roughness: 0.85, metalness: 0.05, flatShading: true })
);
sc.add(mesh);
sc.add(new THREE.AmbientLight(0xfff5e8, 0.5));
const key = new THREE.DirectionalLight(0xffffff, 1.1); key.position.set(3, 4, 5); sc.add(key);
const rim = new THREE.DirectionalLight(0xfff0d8, 0.4); rim.position.set(-3, 2, -2); sc.add(rim);
function tick() {
  mesh.rotation.x += 0.0012;
  mesh.rotation.y += 0.0018;
  r.render(sc, cam);
  if (!reduce) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

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

<!-- Skeleton: hero-three-scene-editorial -->
<section class="hero-three">
  <div class="hero-three__stage">
    <canvas class="three-canvas-editorial"></canvas>
    <h1>Movement begins with intention.</h1>
  </div>
</section>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: hero-three-scene-editorial */
:root { --block-bg:#F4F1EB; --block-fg:#0A0A0A; --block-accent:#0A0A0A; }
.hero-three__stage { position: relative; width: 100%; height: 70vh; }
.three-canvas-editorial { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

Movement begins with intention, ends with clarity.