Gallery Spline Embedded Playful — Motion Lab

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

// Mechanisme: gallery-spline-embedded-playful
// Spline declarative 3D via web component (Spline viewer).
// Plak je eigen scene-export URL in het url-attribuut.
// 1) Maak een scene op spline.design en exporteer als 'Code Export' -> 'Public URL'
// 2) Vervang SCENE_URL hieronder door bv. 'https://prod.spline.design/<HASH>/scene.splinecode'
// 3) De viewer rendert de scene client-side; bij netwerk/asset-fail blijft de CSS fallback-mesh staan.

import 'https://unpkg.com/@splinetool/viewer@1.9.48/build/spline-viewer.js';
const SCENE_URL = ''; // leeg = fallback gradient-mesh
const viewer = document.querySelector('spline-viewer');
if (viewer && SCENE_URL) viewer.setAttribute('url', SCENE_URL);

// Reduced motion: laat keyframes hun :root var lezen en pauzeer animaties.
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  document.documentElement.style.setProperty('--spline-anim','none');
}

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

<!-- Skeleton: gallery-spline-embedded-playful -->
<section class="spline-stage">
  <div class="spline-frame">
    <spline-viewer url="" loading-anim></spline-viewer>
    <div class="spline-fallback" aria-hidden="true"></div>
  </div>
  <header class="spline-meta">
    <p class="eyebrow">Gallery / Spline 3D</p>
    <h2>Speel met dimensie.</h2>
  </header>
</section>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: gallery-spline-embedded-playful */
:root{
  --block-bg:#FFF7F3;
  --block-fg:#1A1410;
  --block-accent:#FF4A1C;
  --block-soft:#FFB5A7;
  --spline-anim: bounce-rotate 4.2s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes bounce-rotate{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  50%{transform:translateY(-18px) rotate(8deg) scale(1.04)}
}
@media (prefers-reduced-motion: reduce){
  :root{--spline-anim:none}
}