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

SCROLL → COMPARE

BASIC

€499/M

  • 5 PROJECTEN
  • BASIS SUPPORT
  • 1 SEAT
  • — GEEN API
  • — GEEN WHITELABEL
SELECT

PREMIUM ★

€999/M

  • ONBEPERKT PROJECTEN
  • PRIORITY SUPPORT
  • 5 SEATS
  • API TOEGANG
  • WHITELABEL
SELECT
1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: pricing-scrub-comparison-brutalist — 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.to('.scrub-hl',{xPercent:100,ease:'none',scrollTrigger:{trigger:'.scrub-section',start:'top 80%',end:'bottom 20%',scrub:1}});
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: pricing-scrub-comparison-brutalist — 2 cols + scrub highlight -->
<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-brutalist — wit + 2px borders + hot-spot highlight */
.plan { border:2px solid #0A0A0A; font-family:'JetBrains Mono',monospace; }
.scrub-hl { background:#FF4A1C; mix-blend-mode:multiply; }