Bright knot, slow tumble.

// Mechanisme: gallery-r3f-island-playful
// R3F-equivalent (educatief):
import { Canvas, useFrame } from '@react-three/fiber';
function Knot() {
  const ref = useRef();
  useFrame((_, dt) => { ref.current.rotation.x += dt*0.3; ref.current.rotation.y += dt*0.4; });
  return (
    <mesh ref={ref}>
      <torusKnotGeometry args={[0.9, 0.32, 140, 24]} />
      <meshStandardMaterial color="#FF4A1C" roughness={0.35} metalness={0.2}/>
    </mesh>
  );
}
export default () => (
  <Canvas camera={{ position:[0,0,4], fov:55 }}>
    <ambientLight intensity={0.7}/>
    <directionalLight position={[3,4,5]} intensity={1.2}/>
    <Knot/>
  </Canvas>
);

// --- VANILLA (LIVE) ---
import * as THREE from 'https://esm.sh/three@0.160.0';
const host = document.querySelector('.r3f-island-mount');
const renderer = new THREE.WebGLRenderer({ antialias:true, alpha:true });
host.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color('#FFE9C7');
const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 100);
camera.position.set(0,0,4);
scene.add(new THREE.AmbientLight(0xffffff, 0.7));
const d = new THREE.DirectionalLight(0xffffff,1.2); d.position.set(3,4,5); scene.add(d);
const knot = new THREE.Mesh(
  new THREE.TorusKnotGeometry(0.9, 0.32, 140, 24),
  new THREE.MeshStandardMaterial({ color:'#FF4A1C', roughness:0.35, metalness:0.2 })
);
scene.add(knot);
function tick(){ knot.rotation.x += 0.005; knot.rotation.y += 0.007; renderer.render(scene,camera); requestAnimationFrame(tick); }
tick();

<!-- Skeleton: gallery-r3f-island-playful -->
<section class="r3f-island">
  <p class="kicker">Motion Lab / Galleries / r3f island / playful</p>
  <h1>Bright knot, slow tumble.</h1>
  <div class="r3f-island-mount">
    <div class="r3f-island-fallback" hidden></div>
  </div>
</section>

/* Styling: gallery-r3f-island-playful */
:root {
  --block-bg: #FFE9C7;
  --block-fg: #0A0A0A;
  --block-accent: #FF4A1C;
}
.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; }
.kicker { font-family: 'JetBrains Mono', monospace; }