Websites that make your small business look like the biggest name in town.

import { gsap } from 'gsap';

export function mount(root: HTMLElement) {
  const btn = root.querySelector<HTMLButtonElement>('[data-mb-btn]')!;
  const label = root.querySelector<HTMLElement>('[data-mb-label]')!;
  const cursor = root.querySelector<HTMLElement>('[data-mb-cursor]')!;
  const fine = matchMedia('(pointer: fine)').matches;
  // With reduced motion the button stays where it is and the label simply changes.
  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;

  // quickTo reuses one tween per property, so following the pointer stays cheap.
  const bx = gsap.quickTo(btn, 'x', { duration: 0.5, ease: 'power3.out' });
  const by = gsap.quickTo(btn, 'y', { duration: 0.5, ease: 'power3.out' });
  const lx = gsap.quickTo(label, 'x', { duration: 0.5, ease: 'power3.out' });
  const ly = gsap.quickTo(label, 'y', { duration: 0.5, ease: 'power3.out' });
  const cx = gsap.quickTo(cursor, 'x', { duration: 0.25, ease: 'power3.out' });
  const cy = gsap.quickTo(cursor, 'y', { duration: 0.25, ease: 'power3.out' });

  const radius = 150;
  root.addEventListener('pointermove', (e) => {
    const r = root.getBoundingClientRect();
    if (fine) {
      cursor.style.opacity = '1';
      cx(e.clientX - r.left);
      cy(e.clientY - r.top);
    }
    const b = btn.getBoundingClientRect();
    const dx = e.clientX - (b.left + b.width / 2 - (gsap.getProperty(btn, 'x') as number));
    const dy = e.clientY - (b.top + b.height / 2 - (gsap.getProperty(btn, 'y') as number));
    const near = Math.hypot(dx, dy) < radius;
    cursor.classList.toggle('is-near', near);
    if (reduced) return;
    bx(near ? dx * 0.35 : 0);
    by(near ? dy * 0.35 : 0);
    lx(near ? dx * 0.12 : 0);
    ly(near ? dy * 0.12 : 0);
  });
  root.addEventListener('pointerleave', () => {
    bx(0); by(0); lx(0); ly(0);
    cursor.style.opacity = '0';
  });

  btn.addEventListener('click', (e) => {
    if (reduced) {
      if (btn.dataset.done) return;
      btn.dataset.done = 'true';
      label.textContent = 'Table booked';
      setTimeout(() => {
        label.textContent = 'Book a table';
        delete btn.dataset.done;
      }, 2200);
      return;
    }
    const b = btn.getBoundingClientRect();
    const ripple = document.createElement('span');
    ripple.className = 'mb__ripple';
    ripple.style.left = `${(e.clientX || b.left + b.width / 2) - b.left}px`;
    ripple.style.top = `${(e.clientY || b.top + b.height / 2) - b.top}px`;
    btn.append(ripple);
    gsap.fromTo(ripple, { scale: 0, opacity: 0.5 }, { scale: 6, opacity: 0, duration: 0.8, ease: 'power2.out', onComplete: () => ripple.remove() });

    if (btn.dataset.done) return;
    btn.dataset.done = 'true';
    gsap.timeline()
      .to(label, { yPercent: -120, duration: 0.25, ease: 'power2.in' })
      .add(() => (label.textContent = 'Table booked'))
      .fromTo(label, { yPercent: 120 }, { yPercent: 0, duration: 0.4, ease: 'back.out(2)' })
      .to(label, { yPercent: -120, duration: 0.25, ease: 'power2.in', delay: 1.8 })
      .add(() => {
        label.textContent = 'Book a table';
        delete btn.dataset.done;
      })
      .fromTo(label, { yPercent: 120 }, { yPercent: 0, duration: 0.4, ease: 'back.out(2)' });
  });
}

import { gsap } from 'gsap';
import { ScrambleTextPlugin } from 'gsap/ScrambleTextPlugin';

gsap.registerPlugin(ScrambleTextPlugin);

// Each set is one "board" of today's specials; the board scrambles from one set to the next.
const boards = [
  [['Soup', 'Tomato basil', '£6'], ['Toastie', 'Ham & cheddar', '£9'], ['Cake', 'Lemon drizzle', '£4']],
  [['Coffee', 'Oat flat white', '£5'], ['Bagel', 'Smoked salmon', '£11'], ['Pastry', 'Almond croissant', '£4']],
  [['Salad', 'Roast squash', '£10'], ['Pie', 'Steak & ale', '£12'], ['Tart', 'Salted caramel', '£5']],
];

export function mount(root: HTMLElement) {
  const cells = [...root.querySelectorAll<HTMLElement>('[data-sb-cell]')];
  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
  let index = 0;

  const say = root.querySelector<HTMLElement>('[data-sb-say]');

  const show = (n: number, instant = false) => {
    // Kill any half-finished scramble so quick clicks always land on clean text.
    gsap.killTweensOf(cells);
    boards[n].flat().forEach((text, i) => {
      if (instant) cells[i].textContent = text;
      else gsap.to(cells[i], { duration: 1.1, delay: i * 0.06, scrambleText: { text, chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ£0123456789', speed: 0.6 }, ease: 'none' });
    });
  };

  const next = () => {
    index = (index + 1) % boards.length;
    show(index, reduced);
  };

  // The board turns over by itself only while it's properly on screen, and not once the visitor has paused it.
  let timer = 0;
  let visible = false;
  let paused = false;
  const rotate = () => {
    clearInterval(timer);
    if (visible && !reduced && !paused) timer = window.setInterval(next, 4000);
  };

  const pause = root.querySelector<HTMLButtonElement>('[data-sb-pause]');
  pause?.addEventListener('click', () => {
    paused = !paused;
    pause.textContent = paused ? 'Play' : 'Pause';
    root.toggleAttribute('data-paused', paused);
    rotate();
  });

  root.querySelector('[data-sb-next]')?.addEventListener('click', () => {
    next();
    // Screen readers hear the new board once, in plain words, never the scramble.
    if (say) say.textContent = boards[index].map(([dish, name, price]) => `${dish}, ${name.toLowerCase().replace('&', 'and')}, ${price}.`).join(' ');
    // Restart the clock so the visitor has time to read the board they picked (a paused board stays put).
    rotate();
  });

  if (reduced) return;
  new IntersectionObserver(([e]) => {
    const was = visible;
    visible = e.intersectionRatio >= 0.4;
    // Coming into view, the board shuffles once so the effect is seen.
    if (visible && !was && !paused) show(index);
    rotate();
  }, { threshold: 0.4 }).observe(root);
}

import { gsap } from 'gsap';

export function mount(root: HTMLElement) {
  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
  const rows = [...root.querySelectorAll<HTMLElement>('[data-rm-row]')];

  const loops = rows.map((row, i) => {
    // Duplicate the reviews so the strip can loop with no visible seam.
    row.append(...[...row.children].map((c) => {
      const copy = c.cloneNode(true) as HTMLElement;
      copy.setAttribute('aria-hidden', 'true');
      return copy;
    }));
    const dir = i % 2 ? 1 : -1;
    return gsap.fromTo(row, { xPercent: dir < 0 ? 0 : -50 }, { xPercent: dir < 0 ? -50 : 0, duration: 28 + i * 6, ease: 'none', repeat: -1, paused: reduced });
  });

  // Slow right down on hover so a review can be read.
  const speed = (s: number) => loops.forEach((l) => gsap.to(l, { timeScale: s, duration: 0.6, ease: 'power2.out' }));
  root.addEventListener('pointerenter', () => speed(0.15));
  root.addEventListener('pointerleave', () => speed(1));

  // Keyboard and touch visitors can stop the wall outright (with reduced motion it never moves, and the button is hidden).
  const pause = root.querySelector<HTMLButtonElement>('[data-rm-pause]');
  if (pause && !reduced) {
    pause.addEventListener('click', () => {
      const p = !loops[0].paused();
      loops.forEach((l) => l.paused(p));
      pause.textContent = p ? 'Play' : 'Pause';
    });
  }
}

import { gsap } from 'gsap';
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';

gsap.registerPlugin(DrawSVGPlugin);

export function mount(root: HTMLElement) {
  const numbers = [...root.querySelectorAll<HTMLElement>('[data-count]')];
  const line = root.querySelector<SVGPathElement>('[data-sc-line]')!;
  const area = root.querySelector<SVGPathElement>('[data-sc-area]')!;
  const dot = root.querySelector<SVGCircleElement>('[data-sc-dot]')!;
  const replay = root.querySelector<HTMLButtonElement>('[data-sc-replay]')!;

  const tl = gsap.timeline({ paused: true });
  numbers.forEach((el, i) => {
    const end = Number(el.dataset.count);
    const decimals = Number(el.dataset.decimals ?? 0);
    const counter = { v: 0 };
    tl.to(
      counter,
      {
        v: end,
        duration: 1.6,
        ease: 'power2.out',
        onUpdate: () => {
          el.textContent = counter.v.toLocaleString('en-GB', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
        },
      },
      i * 0.15,
    );
  });
  tl.fromTo(line, { drawSVG: '0%' }, { drawSVG: '100%', duration: 1.6, ease: 'power2.inOut' }, 0.2)
    .fromTo(area, { opacity: 0 }, { opacity: 1, duration: 0.8 }, 1)
    .fromTo(dot, { scale: 0, transformOrigin: '50% 50%' }, { scale: 1, duration: 0.5, ease: 'back.out(3)' }, 1.7);

  replay.addEventListener('click', () => tl.restart());

  // With reduced motion, show the finished chart straight away (Replay still animates it on request).
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
    tl.progress(1);
    return;
  }
  // Play once the card is properly in view, so the visitor sees it happen.
  const io = new IntersectionObserver(
    ([entry]) => {
      if (entry.isIntersecting) {
        tl.restart();
        io.disconnect();
      }
    },
    { threshold: 0.6 },
  );
  io.observe(root);
}

import { gsap } from 'gsap';
import { Flip } from 'gsap/Flip';

gsap.registerPlugin(Flip);

export function mount(root: HTMLElement) {
  const tiles = [...root.querySelectorAll<HTMLButtonElement>('[data-pt-tile]')];
  const grid = root.querySelector<HTMLElement>('.pt__grid')!;
  const detail = root.querySelector<HTMLElement>('[data-pt-detail]')!;
  const slot = root.querySelector<HTMLElement>('[data-pt-slot]')!;
  const back = root.querySelector<HTMLButtonElement>('[data-pt-back]')!;
  const title = root.querySelector<HTMLElement>('[data-pt-title]')!;
  const price = root.querySelector<HTMLElement>('[data-pt-price]')!;
  const add = root.querySelector<HTMLButtonElement>('.pt__buy');
  const fades = detail.querySelectorAll<HTMLElement>('[data-pt-fade]');
  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
  let open: HTMLButtonElement | null = null;
  let closing = false;
  let home: Element | null = null;
  let addTimer = 0;

  // Flip records where the photo is, moves it in the page, then animates the difference.
  const move = (art: HTMLElement, into: Element, done?: () => void) => {
    const state = Flip.getState(art);
    into.append(art);
    Flip.from(state, {
      duration: 0.7,
      ease: 'power3.inOut',
      absolute: true,
      zIndex: 5,
      onComplete: () => {
        gsap.set(art, { clearProps: 'all' });
        done?.();
      },
    });
  };

  const resetAdd = () => {
    clearTimeout(addTimer);
    if (!add?.dataset.label) return;
    add.textContent = add.dataset.label;
    add.style.minWidth = '';
  };

  tiles.forEach((tile) =>
    tile.addEventListener('click', () => {
      if (open || closing) return;
      open = tile;
      const art = tile.querySelector<HTMLElement>('[data-pt-art]')!;
      home = art.parentElement;
      title.textContent = tile.dataset.name!;
      price.textContent = tile.dataset.price!;
      resetAdd();
      detail.hidden = false;
      // The shop's tiles are hidden behind the product page, so keyboard focus must not wander onto them.
      grid.inert = true;
      if (reduced) {
        // Reduced motion: the product page simply fades in over the shop.
        slot.append(art);
        gsap.fromTo(detail, { opacity: 0 }, { opacity: 1, duration: 0.3 });
      } else {
        move(art, slot);
        gsap.fromTo(fades, { y: 16, opacity: 0 }, { y: 0, opacity: 1, stagger: 0.06, delay: 0.35, duration: 0.4 });
        gsap.to(tiles, { opacity: 0, duration: 0.25 });
      }
      back.focus({ preventScroll: true });
    }),
  );

  back.addEventListener('click', () => {
    if (!open || !home || closing) return;
    const art = slot.querySelector<HTMLElement>('[data-pt-art]')!;
    const tile = open;
    closing = true;
    resetAdd();
    const finish = () => {
      detail.hidden = true;
      gsap.set(detail, { clearProps: 'opacity,backgroundColor,pointerEvents' });
      open = null;
      closing = false;
    };
    grid.inert = false;
    tile.focus({ preventScroll: true });
    if (reduced) {
      home.append(art);
      gsap.to(detail, { opacity: 0, duration: 0.3, onComplete: finish });
      return;
    }
    // Let the shop show through while the photo glides back into its own tile.
    gsap.set(detail, { backgroundColor: 'transparent', pointerEvents: 'none' });
    // Back can come while the opening fades are still running; stop them so none finishes later.
    gsap.killTweensOf(fades, 'y,opacity');
    gsap.to(fades, { opacity: 0, duration: 0.2 });
    gsap.set(tile, { opacity: 1, overwrite: true });
    gsap.to(tiles.filter((t) => t !== tile), { opacity: 1, duration: 0.35, delay: 0.15, overwrite: true });
    move(art, home, finish);
  });

  // A small confirmation, like a real shop gives.
  add?.addEventListener('click', () => {
    add.dataset.label ??= add.textContent ?? '';
    // Hold the button's width so the shorter label doesn't make it shrink.
    add.style.minWidth = `${add.offsetWidth}px`;
    add.textContent = 'Added ✓';
    if (!reduced) gsap.fromTo(add, { scale: 0.92 }, { scale: 1, duration: 0.5, ease: 'back.out(3)' });
    clearTimeout(addTimer);
    addTimer = window.setTimeout(resetAdd, 1500);
  });
}

import { gsap } from 'gsap';
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';
import { MotionPathPlugin } from 'gsap/MotionPathPlugin';
import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin';

gsap.registerPlugin(DrawSVGPlugin, MotionPathPlugin, MorphSVGPlugin);

export function mount(root: HTMLElement) {
  const route = root.querySelector<SVGPathElement>('[data-dm-route]')!;
  const van = root.querySelector<SVGGElement>('[data-dm-van]')!;
  const pin = root.querySelector<SVGGElement>('[data-dm-pin]')!;
  const icon = root.querySelector<SVGPathElement>('[data-dm-icon]')!;
  const status = root.querySelector<HTMLElement>('[data-dm-status]')!;
  const button = root.querySelector<HTMLButtonElement>('[data-dm-go]')!;
  const box = icon.getAttribute('d')!;
  const tick = root.querySelector<SVGPathElement>('[data-dm-tick]')!.getAttribute('d')!;

  const tl = gsap.timeline({ paused: true })
    .add(() => (status.textContent = 'Out for delivery'))
    .set(icon, { morphSVG: box })
    .fromTo(route, { drawSVG: '0%' }, { drawSVG: '100%', duration: 1.2, ease: 'power1.inOut' })
    .fromTo(pin, { y: -30, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5, ease: 'bounce.out' }, 0.9)
    .to(van, { motionPath: { path: route, align: route, alignOrigin: [0.5, 0.5], autoRotate: true }, duration: 2.4, ease: 'power1.inOut' }, 1.2)
    .add(() => (status.textContent = 'Delivered'))
    .to(icon, { morphSVG: tick, duration: 0.5, ease: 'back.out(2)' });

  button.addEventListener('click', () => tl.restart());
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        tl.restart();
        io.disconnect();
      }
    }, { threshold: 0.6 });
    io.observe(root);
  } else {
    // Reduced motion: show the delivered state straight away.
    tl.progress(1);
  }
}

import { gsap } from 'gsap';

export function mount(root: HTMLElement) {
  const card = root.querySelector<HTMLElement>('[data-tc-card]')!;
  const glare = root.querySelector<HTMLElement>('[data-tc-glare]')!;
  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
  const rx = gsap.quickTo(card, 'rotationX', { duration: 0.6, ease: 'power3.out' });
  const ry = gsap.quickTo(card, 'rotationY', { duration: 0.6, ease: 'power3.out' });
  gsap.set(card, { transformPerspective: 900 });

  // One rotation drives both the tilt and the turn, so neither cancels the other.
  let turned = false;
  let lx = 0;
  let ly = 0;
  // Turned over, the card's up and down are mirrored, so the vertical tilt flips with it.
  const tilt = () => {
    ry((turned ? 180 : 0) + lx * 30);
    rx((turned ? 1 : -1) * ly * 24);
  };

  // Tilt toward the pointer and slide a highlight across, like light on a real card.
  root.addEventListener('pointermove', (e) => {
    if (e.pointerType === 'touch' || reduced) return;
    const r = root.getBoundingClientRect();
    lx = (e.clientX - r.left) / r.width - 0.5;
    ly = (e.clientY - r.top) / r.height - 0.5;
    tilt();
    glare.style.setProperty('--gx', `${(lx + 0.5) * 100}%`);
    glare.style.setProperty('--gy', `${(ly + 0.5) * 100}%`);
    glare.style.opacity = '1';
  });
  root.addEventListener('pointerleave', () => {
    if (reduced) return;
    lx = 0;
    ly = 0;
    tilt();
    glare.style.opacity = '0';
  });

  // A click or tap spins the card to show its back.
  card.addEventListener('click', () => {
    turned = !turned;
    if (!reduced) return tilt();
    // Reduced motion: a quick fade swaps the faces instead of a spin.
    gsap.timeline()
      .to(card, { opacity: 0, duration: 0.15 })
      .set(card, { rotationY: turned ? 180 : 0 })
      .to(card, { opacity: 1, duration: 0.15 });
  });

  if (reduced) return;
  // The card swings into place once it's properly on screen, so the visitor sees it arrive.
  // The swing itself goes through the tilt setters, so a hover or tap part-way through just takes over.
  gsap.set(card, { rotationY: -35, rotationX: 15, y: 30, opacity: 0 });
  const io = new IntersectionObserver(
    ([entry]) => {
      if (!entry.isIntersecting) return;
      io.disconnect();
      gsap.to(card, { y: 0, opacity: 1, duration: 1, ease: 'power3.out' });
      tilt();
    },
    { threshold: 0.5 },
  );
  io.observe(root);
}

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export function mount(root: HTMLElement) {
  const replay = root.querySelector<HTMLButtonElement>('[data-pr-replay]');
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
    // The photos simply show; there's nothing to replay.
    replay?.setAttribute('hidden', '');
    return;
  }
  const frames = root.querySelectorAll<HTMLElement>('[data-pr-frame]');
  const images = root.querySelectorAll<HTMLElement>('[data-pr-img]');
  const words = root.querySelectorAll<HTMLElement>('[data-pr-word]');

  // The reveal: photos unmask from the bottom while the image inside settles in.
  const reveal = gsap.timeline({ paused: true })
    .fromTo(frames, { clipPath: 'inset(100% 0% 0% 0% round 12px)' }, { clipPath: 'inset(0% 0% 0% 0% round 12px)', duration: 1.1, stagger: 0.18, ease: 'expo.inOut' }, 0)
    .fromTo(images, { scale: 1.4 }, { scale: 1.08, duration: 1.6, stagger: 0.18, ease: 'expo.out' }, 0.1)
    .fromTo(words, { yPercent: 110 }, { yPercent: 0, duration: 0.8, stagger: 0.07, ease: 'power3.out' }, 0.3);
  reveal.progress(0);

  // It plays the moment the card is properly on screen.
  const io = new IntersectionObserver(([e]) => {
    if (!e.isIntersecting) return;
    reveal.restart();
    io.disconnect();
  }, { threshold: 0.55 });
  io.observe(root);
  replay?.addEventListener('click', () => reveal.restart());

  // While you scroll, the photos drift inside their frames for a sense of depth.
  images.forEach((img, i) =>
    gsap.fromTo(img, { yPercent: -6 - i * 2 }, {
      yPercent: 6 + i * 2,
      ease: 'none',
      scrollTrigger: { trigger: root, start: 'top bottom', end: 'bottom top', scrub: true },
    }),
  );

  // Cards above this one can change height after it loads, so re-measure when the page does.
  // Never mid-scroll though: a refresh during a smooth scroll to a link sends it to the wrong place.
  let timer = 0;
  const refresh = () => {
    clearTimeout(timer);
    timer = window.setTimeout(() => (ScrollTrigger.isScrolling() ? refresh() : ScrollTrigger.refresh()), 250);
  };
  let lastHeight = document.body.offsetHeight;
  new ResizeObserver(() => {
    const h = document.body.offsetHeight;
    if (h === lastHeight) return;
    lastHeight = h;
    refresh();
  }).observe(document.body);
}