← Blurr Motion pricing-scrub-comparison-editorial
Categorie pricing Tier 1 Techniek #8 Deps gsap

Compare, slowly

Twee tempo’s, één atelier.

Atelier

€499/maand

Voor wie kalm wil starten.

  • 5 projecten
  • Editorial care
  • 1 redacteur
  • — geen art-director
Begin

Maison

€999/maand

Voor wie het volledige atelier wil.

  • Onbeperkte projecten
  • Toegewijde art-director
  • Maandelijkse review
  • Print-ready bestanden
Begin
1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: pricing-scrub-comparison-editorial — kalme scrub highlight basic→premium
import gsap from 'https://esm.sh/[email protected]';
import{ScrollTrigger}from 'https://esm.sh/[email protected]/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
if(window.matchMedia('(prefers-reduced-motion: reduce)').matches)return;
gsap.fromTo('.scrub-hl',{xPercent:0},{xPercent:100,ease:'expo.out',scrollTrigger:{trigger:'.scrub-section',start:'top 80%',end:'bottom 20%',scrub:1.5}});
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: pricing-scrub-comparison-editorial — asymmetric serif comparison -->
<section class="scrub-section">
  <div class="scrub-grid">
    <div class="scrub-hl"></div>
    <article class="plan basic">…</article>
    <article class="plan prem">…</article>
  </div>
</section>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling: pricing-scrub-comparison-editorial — cream + Fraunces serif italic + asymmetric */
.plan { background:#F4F1EB; font-family:'Fraunces',serif; }
.scrub-hl { background:rgba(10,10,10,.05); border-right:1px solid #0A0A0A; }