Interactive Case Study

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Flip } from 'gsap/Flip';
import Lenis from 'lenis';

gsap.registerPlugin(ScrollTrigger, Flip);

initDemoShell({ title: 'Interactive Case Study', category: 'pages', tech: ['gsap', 'scrolltrigger', 'svg', 'flip', 'lenis'] });

const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add('reduced-motion');

// ─── Hero Parallax Depth Cards (Demo 38 technique) ──────────────────────────
const heroCards = document.querySelectorAll('.hero-card');
const depths = [1.0, 0.65, 0.45, 0.8];

heroCards.forEach((card, i) => {
  if (!reduced) {
    gsap.set(card, { opacity: 0, scale: 0.7, y: 40 });
    gsap.to(card, {
      opacity: 1,
      scale: 1,
      y: 0,
      duration: 1.2,
      ease: 'expo.out',
      delay: 0.4 + i * 0.15,
    });
  }
});

// Hero content entrance
if (!reduced) {
  gsap.set(['.hero .eyebrow', '.hero h1', '.hero-desc', '.hero-tags'], { opacity: 0, y: 30 });
  gsap.timeline({ defaults: { ease: 'expo.out' } })
    .to('.hero .eyebrow', { opacity: 1, y: 0, duration: 0.7, delay: 0.5 })
    .to('.hero h1', { opacity: 1, y: 0, duration: 0.9 }, '-=0.4')
    .to('.hero-desc', { opacity: 1, y: 0, duration: 0.7 }, '-=0.5')
    .to('.hero-tags span', { opacity: 1, y: 0, duration: 0.5, stagger: 0.07 }, '-=0.4');

  gsap.set('.hero-tags span', { opacity: 0, y: 15 });
}

// Hero parallax depth on scroll
if (!reduced) {
  ScrollTrigger.create({
    trigger: '.hero',
    start: 'top top',
    end: 'bottom top',
    scrub: 1,
    onUpdate: (self) => {
      heroCards.forEach((card, i) => {
        const d = depths[i];
        gsap.set(card, { y: self.progress * d * 80, overwrite: 'auto' });
      });
    },
  });
}

// ─── Challenge Stats (scroll counter) ────────────────────────────────────────
document.querySelectorAll('.stat-pill').forEach((pill, i) => {
  const valEl = pill.querySelector('.stat-val');
  const target = parseFloat(pill.dataset.target);
  const suffix = pill.dataset.suffix || '';

  if (!reduced) {
    gsap.set(pill, { opacity: 0, x: -20 });
    gsap.to(pill, {
      opacity: 1,
      x: 0,
      duration: 0.7,
      ease: 'expo.out',
      delay: i * 0.1,
      scrollTrigger: { trigger: '.challenge-stats', start: 'top 75%', toggleActions: 'play none none reverse' },
    });

    ScrollTrigger.create({
      trigger: pill,
      start: 'top 80%',
      end: 'top 30%',
      onUpdate: (self) => {
        const val = target * self.progress;
        const display = target % 1 !== 0 ? val.toFixed(1) : Math.round(val);
        valEl.textContent = display + suffix;
      },
    });
  } else {
    valEl.textContent = target + suffix;
  }
});

// Challenge text reveal
document.querySelectorAll('.challenge-text h2, .challenge-text p, .quote-block').forEach((el) => {
  if (!reduced) {
    gsap.set(el, { opacity: 0, y: 25 });
    gsap.to(el, {
      opacity: 1,
      y: 0,
      duration: 0.7,
      ease: 'expo.out',
      scrollTrigger: { trigger: el, start: 'top 75%', toggleActions: 'play none none reverse' },
    });
  }
});

// ─── SVG Process Workflow (Demo 40 technique) ────────────────────────────────
const procLines = document.querySelectorAll('.proc-line');

procLines.forEach((path) => {
  const length = path.getTotalLength();
  gsap.set(path, { strokeDasharray: length, strokeDashoffset: length });

  if (!reduced) {
    gsap.to(path, {
      strokeDashoffset: 0,
      ease: 'none',
      scrollTrigger: {
        trigger: '.process-section',
        start: 'top 65%',
        end: 'bottom 70%',
        scrub: 1.2,
      },
    });
  } else {
    gsap.set(path, { strokeDashoffset: 0 });
  }
});

// Process nodes sequential reveal
const procNodes = ['#pn-1', '#pn-2', '#pn-3', '#pn-4', '#pn-5'];
procNodes.forEach((id, i) => {
  const node = document.querySelector(id);
  if (!node) return;

  if (!reduced) {
    gsap.to(node, {
      opacity: 1,
      scale: 1,
      duration: 0.5,
      ease: 'back.out(1.7)',
      scrollTrigger: {
        trigger: '.process-section',
        start: `top ${72 - i * 5}%`,
        toggleActions: 'play none none reverse',
      },
    });
    gsap.set(node, { scale: 0.7 });
  } else {
    gsap.set(node, { opacity: 1 });
  }
});

// ─── Results Counters (Demo 36 technique) ────────────────────────────────────
document.querySelectorAll('.result-card').forEach((card, i) => {
  const valEl = card.querySelector('.result-value');
  const target = parseFloat(card.dataset.target);
  const suffix = card.dataset.suffix || '';

  if (!reduced) {
    gsap.set(card, { opacity: 0, y: 40, scale: 0.9 });
    gsap.to(card, {
      opacity: 1,
      y: 0,
      scale: 1,
      duration: 0.8,
      ease: 'expo.out',
      delay: i * 0.1,
      scrollTrigger: { trigger: '.results-grid', start: 'top 75%', toggleActions: 'play none none reverse' },
    });

    ScrollTrigger.create({
      trigger: card,
      start: 'top 80%',
      end: 'top 25%',
      onUpdate: (self) => {
        const val = target * self.progress;
        const display = target % 1 !== 0 ? val.toFixed(1) : Math.round(val);
        valEl.textContent = display + suffix;
      },
    });
  } else {
    valEl.textContent = target + suffix;
  }
});

// ─── Testimonial Cards ───────────────────────────────────────────────────────
document.querySelectorAll('.tl-card').forEach((card, i) => {
  if (!reduced) {
    gsap.set(card, { opacity: 0, y: 30 });
    gsap.to(card, {
      opacity: 1,
      y: 0,
      duration: 0.8,
      ease: 'expo.out',
      delay: i * 0.12,
      scrollTrigger: { trigger: '#tl-grid', start: 'top 75%', toggleActions: 'play none none reverse' },
    });
  }
});

// ─── Section Headers ─────────────────────────────────────────────────────────
document.querySelectorAll('.section-header').forEach((header) => {
  if (!reduced) {
    gsap.set(header.children, { opacity: 0, y: 25 });
    gsap.to(header.children, {
      opacity: 1,
      y: 0,
      duration: 0.7,
      stagger: 0.1,
      ease: 'expo.out',
      scrollTrigger: { trigger: header, start: 'top 75%', toggleActions: 'play none none reverse' },
    });
  }
});

// ─── CTA ─────────────────────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.cta-section h2, .cta-section p, .cta-section a', { opacity: 0, y: 25 });
  gsap.to('.cta-section h2, .cta-section p, .cta-section a', {
    opacity: 1,
    y: 0,
    duration: 0.8,
    stagger: 0.12,
    ease: 'expo.out',
    scrollTrigger: { trigger: '.cta-section', start: 'top 75%', toggleActions: 'play none none reverse' },
  });
}

// ─── Motion preference ───────────────────────────────────────────────────────
window.addEventListener('motion-preference', (e) => {
  if (e.detail.reduced) {
    gsap.globalTimeline.paused(true);
  } else {
    gsap.globalTimeline.paused(false);
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Case Study — stealthisdesign</title>
  <link rel="stylesheet" href="style.css">
    <script type="importmap">{"imports":{"gsap":"/vendor/gsap/index.js","gsap/ScrollTrigger":"/vendor/gsap/ScrollTrigger.js","gsap/SplitText":"/vendor/gsap/SplitText.js","gsap/Flip":"/vendor/gsap/Flip.js","gsap/ScrambleTextPlugin":"/vendor/gsap/ScrambleTextPlugin.js","gsap/TextPlugin":"/vendor/gsap/TextPlugin.js","gsap/all":"/vendor/gsap/all.js","gsap/":"/vendor/gsap/","lenis":"/vendor/lenis/dist/lenis.mjs","three":"/vendor/three/build/three.module.js","three/addons/":"/vendor/three/examples/jsm/"}}</script>
  <style>html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}</style>
</head>
<body>

  <!-- Hero with parallax depth cards -->
  <section class="hero">
    <div class="hero-bg" aria-hidden="true">
      <div class="hero-card hc-1">Strategy</div>
      <div class="hero-card hc-2">Design</div>
      <div class="hero-card hc-3">Engineering</div>
      <div class="hero-card hc-4">Launch</div>
    </div>
    <div class="hero-content">
      <span class="eyebrow">Case Study — 2025</span>
      <h1>Redesigning a <br><em>$40M fintech</em> product</h1>
      <p class="hero-desc">How a 6-month design sprint turned a legacy banking app into a modern platform — without losing a single user.</p>
      <div class="hero-tags">
        <span>UX Research</span>
        <span>Product Design</span>
        <span>React</span>
        <span>Node.js</span>
        <span>View Transitions</span>
      </div>
    </div>
  </section>

  <!-- Challenge Section -->
  <section class="challenge-section">
    <div class="content">
      <div class="challenge-grid">
        <div class="challenge-text">
          <span class="section-tag">The Challenge</span>
          <h2>A product stuck in 2015</h2>
          <p>The client had a 40,000-user web app built in 2015 — reliable but rigid. Users complained about confusing navigation, slow load times, and a mobile experience that barely worked. Churn was climbing.</p>
          <p>Our task: redesign the entire product over 24 weeks without disrupting existing users or the underlying infrastructure.</p>
          <div class="quote-block">
            <blockquote>"We need this to feel like 2025, not like a spreadsheet from 2015."</blockquote>
            <cite>— Head of Product, Client Co.</cite>
          </div>
        </div>
        <div class="challenge-stats">
          <div class="stat-pill" data-target="62" data-suffix="%" data-label="Drop in task completion after login">
            <span class="stat-val">0%</span>
            <span class="stat-label">Task completion drop</span>
          </div>
          <div class="stat-pill" data-target="14" data-suffix="s" data-label="Average time to complete key action">
            <span class="stat-val">0s</span>
            <span class="stat-label">Avg. time-on-task</span>
          </div>
          <div class="stat-pill" data-target="3.1" data-suffix="★" data-label="App Store rating before redesign">
            <span class="stat-val">0★</span>
            <span class="stat-label">Store rating (before)</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- SVG Workflow — Process -->
  <section class="process-section">
    <div class="section-header">
      <span class="section-tag">Our Process</span>
      <h2>How we worked</h2>
      <p>A structured 6-phase process, scroll to see each phase draw in.</p>
    </div>
    <div class="svg-wrapper">
      <svg id="process-svg" viewBox="0 0 900 260" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
        <!-- Connector lines -->
        <path class="proc-line" d="M 80 130 L 210 130" fill="none" stroke="#263249" stroke-width="2"/>
        <path class="proc-line" d="M 290 130 L 420 130" fill="none" stroke="#263249" stroke-width="2"/>
        <path class="proc-line" d="M 500 130 L 630 130" fill="none" stroke="#263249" stroke-width="2"/>
        <path class="proc-line" d="M 710 130 L 820 130" fill="none" stroke="#263249" stroke-width="2"/>

        <!-- Phase nodes -->
        <g class="proc-node" id="pn-1" opacity="0">
          <circle cx="45" cy="130" r="32" fill="#121a2b" stroke="#86e8ff" stroke-width="2"/>
          <text x="45" y="126" text-anchor="middle" fill="#86e8ff" font-size="9" font-weight="700">DISCO</text>
          <text x="45" y="138" text-anchor="middle" fill="#86e8ff" font-size="9" font-weight="700">VER</text>
          <text x="45" y="175" text-anchor="middle" fill="#8a95a8" font-size="10">Wk 1–2</text>
        </g>
        <g class="proc-node" id="pn-2" opacity="0">
          <circle cx="255" cy="130" r="32" fill="#121a2b" stroke="#ae52ff" stroke-width="2"/>
          <text x="255" y="126" text-anchor="middle" fill="#ae52ff" font-size="9" font-weight="700">DEFIN</text>
          <text x="255" y="138" text-anchor="middle" fill="#ae52ff" font-size="9" font-weight="700">E</text>
          <text x="255" y="175" text-anchor="middle" fill="#8a95a8" font-size="10">Wk 3–5</text>
        </g>
        <g class="proc-node" id="pn-3" opacity="0">
          <circle cx="465" cy="130" r="32" fill="#121a2b" stroke="#ffcc66" stroke-width="2"/>
          <text x="465" y="126" text-anchor="middle" fill="#ffcc66" font-size="9" font-weight="700">DESI</text>
          <text x="465" y="138" text-anchor="middle" fill="#ffcc66" font-size="9" font-weight="700">GN</text>
          <text x="465" y="175" text-anchor="middle" fill="#8a95a8" font-size="10">Wk 6–12</text>
        </g>
        <g class="proc-node" id="pn-4" opacity="0">
          <circle cx="675" cy="130" r="32" fill="#121a2b" stroke="#ff40d6" stroke-width="2"/>
          <text x="675" y="126" text-anchor="middle" fill="#ff40d6" font-size="9" font-weight="700">BUILD</text>
          <text x="675" y="175" text-anchor="middle" fill="#8a95a8" font-size="10">Wk 13–22</text>
        </g>
        <g class="proc-node" id="pn-5" opacity="0">
          <circle cx="855" cy="130" r="32" fill="#121a2b" stroke="#86e8ff" stroke-width="2"/>
          <text x="855" y="126" text-anchor="middle" fill="#86e8ff" font-size="9" font-weight="700">LAUN</text>
          <text x="855" y="138" text-anchor="middle" fill="#86e8ff" font-size="9" font-weight="700">CH</text>
          <text x="855" y="175" text-anchor="middle" fill="#8a95a8" font-size="10">Wk 23–24</text>
        </g>
      </svg>
    </div>
  </section>

  <!-- Results / Counters Section -->
  <section class="results-section">
    <div class="section-header">
      <span class="section-tag">The Results</span>
      <h2>Numbers don't lie</h2>
    </div>
    <div class="results-grid">
      <div class="result-card" data-target="4.7" data-suffix="★">
        <div class="result-value">0★</div>
        <div class="result-label">App Store Rating</div>
        <div class="result-delta trend-up">↑ from 3.1</div>
      </div>
      <div class="result-card" data-target="89" data-suffix="%">
        <div class="result-value">0%</div>
        <div class="result-label">Task Completion Rate</div>
        <div class="result-delta trend-up">↑ from 38%</div>
      </div>
      <div class="result-card" data-target="3.2" data-suffix="s">
        <div class="result-value">0s</div>
        <div class="result-label">Avg. Time-on-Task</div>
        <div class="result-delta trend-up">↓ from 14s</div>
      </div>
      <div class="result-card" data-target="22" data-suffix="%">
        <div class="result-value">0%</div>
        <div class="result-label">Churn Reduction</div>
        <div class="result-delta trend-up">↓ YoY</div>
      </div>
    </div>
  </section>

  <!-- Testimonials (FLIP grid toggle) -->
  <section class="testimonials-section">
    <div class="section-header">
      <span class="section-tag">Client Voices</span>
      <h2>What they said</h2>
    </div>
    <div class="testimonials-grid" id="tl-grid">
      <div class="tl-card">
        <blockquote>"The new app feels like a completely different product. Our team actually enjoys using it now."</blockquote>
        <div class="tl-author">
          <div class="tl-avatar" style="--av-hue: 195">SL</div>
          <div><strong>Sarah Lin</strong><span>Head of Product</span></div>
        </div>
      </div>
      <div class="tl-card">
        <blockquote>"Response time concerns we had were handled immediately. The team is incredibly professional."</blockquote>
        <div class="tl-author">
          <div class="tl-avatar" style="--av-hue: 270">JM</div>
          <div><strong>James Malik</strong><span>CTO</span></div>
        </div>
      </div>
      <div class="tl-card">
        <blockquote>"Finally, we can recommend the app to clients without cringing. This was career-changing work."</blockquote>
        <div class="tl-author">
          <div class="tl-avatar" style="--av-hue: 45">AO</div>
          <div><strong>Amara Osei</strong><span>VP Customer Success</span></div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="cta-section">
    <div class="content">
      <h2>Ready to work together?</h2>
      <p>We take on 2–3 product design engagements per quarter.</p>
      <a href="/" class="btn-primary">Start a Conversation</a>
    </div>
  </section>

  <script type="module" src="script.js"></script>
</body>
</html>