← Blurr Motion pricing-physics-flip-minimal
Categorie pricing Tier 2 Techniek #31 Deps gsap

Start

€499/maand

Kaartje draait — bekijk specs

Inbegrepen

  • 5 projecten
  • Basis support
  • 1 gebruiker

Pro

€999/maand

Kaartje draait — bekijk specs

Inbegrepen

  • Onbeperkt projecten
  • Priority support
  • 5 gebruikers
  • API toegang

Scale

€2499/maand

Kaartje draait — bekijk specs

Inbegrepen

  • Whitelabel
  • Dedicated CSM
  • Onbeperkt seats
1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: pricing-physics-flip-minimal — kalme 3D flip-loop
import gsap from 'https://esm.sh/[email protected]';
if(window.matchMedia('(prefers-reduced-motion: reduce)').matches)return;
const cards=document.querySelectorAll('.flip-card');
gsap.set(cards,{transformPerspective:1200,transformStyle:'preserve-3d'});
gsap.from(cards,{rotateY:180,duration:1.6,ease:'power3.out',stagger:0.18});
let flipped=false;
setInterval(()=>{
  flipped=!flipped;
  gsap.to(cards,{rotateY:flipped?180:0,duration:1.4,ease:'power3.inOut',stagger:0.18});
},3500);
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: pricing-physics-flip-minimal — 3 cream flip-cards, 1px rules -->
<div class="fm-grid">
  <article class="flip-card">
    <div class="face front"><p class="tier">Start</p><p class="price">€499</p></div>
    <div class="face back"><ul><li>5 projecten</li></ul></div>
  </article>
</div>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling: pricing-physics-flip-minimal — cream + Inter + 1px rules + whitespace */
.flip-card { background:#F4F1EB; border:1px solid rgba(10,10,10,.18); }
.face { font-family:'Inter','Archivo',sans-serif; }
.face.back { transform:rotateY(180deg); }