Squarespace Hardcover Flipbook (Free Code)

3 Jun

This version uses a Squarespace Auto Layout section configured as a Simple List, with images, titles, and descriptions managed directly through the section content.

1. Copy Section ID

Add this as the Section ID for your Auto Layout section:

hardcover

2. Copy CSS

Add the following CSS to:

Website → Website Tools → Custom CSS

/* HARDCOVER FLIPBOOK - #hardcover  (book fits its lane, even padding, no overflow) */
#hardcover {
  --hardcover-scroll-height: 360vh;
  position: relative !important;
  height: var(--hardcover-scroll-height) !important;
  min-height: var(--hardcover-scroll-height) !important;
  padding: 0 !important; margin: 0 !important;
  background: transparent !important; overflow: visible !important;
}
#hardcover, #hardcover > .content-wrapper, #hardcover .content {
  padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
}
#hardcover > .content-wrapper, #hardcover .content {
  width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; overflow: visible !important;
}
#hardcover.hardcover-ready .user-items-list { display: none !important; }
#hardcover .hc-generated {
  position: sticky; top: 0;
  height: 100vh !important; min-height: 100vh !important;
  display: grid;
  grid-template-columns: minmax(150px, 0.2fr) minmax(0, 0.8fr);
  align-items: center !important;
  gap: clamp(20px, 2.5vw, 40px);
  padding: 0 clamp(40px, 4.5vw, 72px) !important;
  overflow: hidden; perspective: 1900px; box-sizing: border-box !important;
  background: transparent; color: inherit; transform: none !important;
}
#hardcover .hc-copy {
  max-width: 560px; position: relative; z-index: 5; color: inherit;
  justify-self: start; transform: none !important;
}
#hardcover .hc-kicker {
  font-family: var(--body-font-font-family, system-ui, -apple-system, sans-serif);
  font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: currentColor; color: color-mix(in srgb, currentColor 42%, transparent); margin-bottom: 20px;
}
#hardcover .hc-heading {
  font-family: var(--heading-font-font-family, Georgia, "Times New Roman", serif);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.9; color: currentColor; margin: 0;
}
#hardcover .hc-note {
  font-family: var(--body-font-font-family, system-ui, -apple-system, sans-serif);
  margin-top: 24px; font-size: 0.86rem; text-transform: uppercase;
  color: currentColor; color: color-mix(in srgb, currentColor 50%, transparent);
}
#hardcover .hc-progress { position: relative !important; margin-top: 18px !important; display: flex; gap: 11px; z-index: 10; }
#hardcover .hc-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: currentColor; background: color-mix(in srgb, currentColor 24%, transparent);
  transition: transform 0.25s ease, background 0.25s ease;
}
#hardcover .hc-dot.is-active {
  background: currentColor; background: color-mix(in srgb, currentColor 64%, transparent); transform: scale(1.25);
}
#hardcover .hc-stage {
  position: relative;
  width: min(100%, calc(100vh * 1.5)) !important;
  max-height: 100vh !important;
  aspect-ratio: 1.5 / 1;
  justify-self: center !important;
  transform-style: preserve-3d; overflow: visible; transform: none !important;
}
#hardcover .hc-book { position: absolute; inset: 0; transform-style: preserve-3d; overflow: visible; }
#hardcover .hc-spread { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; transform-style: preserve-3d; overflow: visible; }
#hardcover .hc-page {
  position: relative; width: 100%; height: 100%; box-sizing: border-box; padding: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,0.04), transparent 12%, transparent 88%, rgba(0,0,0,0.04)), #fbf6eb;
  border: 1px solid rgba(255,255,255,0.9); overflow: hidden;
}
#hardcover .hc-left { border-radius: 24px 4px 4px 24px; }
#hardcover .hc-right { border-radius: 4px 24px 24px 4px; }
#hardcover .hc-image { position: absolute; inset: 8px; width: auto; height: auto; overflow: hidden; border-radius: 14px; background: #eee; }
#hardcover .hc-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
#hardcover .hc-text {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; text-align: left;
  padding: 18px 18px 16px; border-radius: 0 0 14px 14px; background: linear-gradient(transparent, rgba(0,0,0,0.62));
}
#hardcover .hc-title {
  font-family: var(--heading-font-font-family, Georgia, "Times New Roman", serif);
  font-size: clamp(1.4rem, 2.4vw, 2.6rem); line-height: 0.98; color: #fff; margin: 0; text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
#hardcover .hc-description {
  font-family: var(--body-font-font-family, system-ui, -apple-system, sans-serif);
  font-size: 0.62rem; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.82); margin-top: 5px;
}
#hardcover .hc-description p { margin: 0; }
#hardcover .hc-spine {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 16px; transform: translateX(-50%);
  z-index: 18; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.045), rgba(255,255,255,0.72), rgba(0,0,0,0.095));
}
#hardcover .hc-turning-page {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d; z-index: 30; will-change: transform, opacity;
}
#hardcover .hc-turn-face {
  position: absolute; inset: 0; padding: 8px; box-sizing: border-box; border-radius: 4px 24px 24px 4px;
  background: #FAF3EB; border: 1px solid rgba(255,255,255,0.9); overflow: visible;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: -7px 12px 22px rgba(0,0,0,0.09);
}
#hardcover .hc-turn-face .hc-image { position: absolute; inset: 8px; height: auto; }
#hardcover .hc-turn-back { transform: rotateY(180deg); border-radius: 24px 4px 4px 24px; }
#hardcover .hc-book::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: -14px; height: 24px;
  border-radius: 999px; background: rgba(0,0,0,0.08); filter: blur(20px); z-index: -1;
}

@media (max-width: 900px) {
  #hardcover .hc-generated {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: center !important;
    gap: 14px;
    padding: 10px 8px !important;
    transform: none !important;
  }
  #hardcover .hc-copy {
    justify-self: center;
    text-align: center;
    max-width: 92vw;
    transform: none !important;
  }
  #hardcover .hc-heading { font-size: clamp(2rem, 9vw, 3.2rem); }
  #hardcover .hc-note { margin-top: 8px; font-size: 0.7rem; }
  #hardcover .hc-progress { margin-top: 12px !important; justify-content: center !important; }

  #hardcover .hc-stage {
    width: 100% !important;
    aspect-ratio: 1.25 / 1 !important;
    max-height: 76vh !important;
    align-self: center !important;
    justify-self: center !important;
    transform: none !important;
  }

  #hardcover .hc-page, #hardcover .hc-turn-face { padding: 6px; }
  #hardcover .hc-image, #hardcover .hc-turn-face .hc-image { inset: 6px; }
  #hardcover .hc-text { left: 6px; right: 6px; bottom: 6px; padding: 12px; }
  #hardcover .hc-title { font-size: clamp(1.25rem, 6.5vw, 2rem); }
  #hardcover .hc-description { font-size: 0.52rem; }
}

@media screen and (min-width:767px) {
  #polo {
    .slide {
      background: rgb(131,58,180);
      background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
      align-items:stretch !important;
      .slide-media-container {
        width:50% !important;
        left:initial !important;
        right:0;
      }
      .slide-content {
        width:60% !important;
        background-color:#ccc;
        padding:2rem;
        display:flex;
        flex-direction:column;
        justify-content:center;
      }
    }
  }
}
@media screen and (max-width:767px) {
  #polo {
    .slide {
      background-color:yellow;
      display:flex;
      padding:0 !important;
      flex-direction:column;
      .slide-media-container {
        position:relative;
        height:300px;
      }
    }
  }
}

3. Copy JavaScript

Add the following code to:

Website → Website Tools → Code Injection → Footer

<script>
(function () {
  const SECTION_SELECTOR = "#hardcover";
  function clamp(v,min,max){ return Math.max(min, Math.min(max, v)); }
  function cleanText(t){ return (t||"").replace(/\s+/g," ").trim(); }
  function ease(t){ return t<0.5 ? 2*t*t : 1 - Math.pow(-2*t+2,2)/2; }
  function upgradeImage(url){
    if(!url) return "";
    if(!url.includes("images.squarespace-cdn.com")) return url;
    url=url.replace(/[?&]format=\d+w/g,"");
    return url + (url.includes("?")?"&":"?") + "format=2500w";
  }
  function getImageUrl(item){
    const img=item.querySelector("img"); if(!img) return "";
    return upgradeImage(img.getAttribute("data-image")||img.getAttribute("data-src")||img.currentSrc||img.src||"");
  }
  function titleElement(section){
    const els=section.querySelectorAll('h1,h2,h3,h4,[class*="title"]');
    for(let i=0;i<els.length;i++){ const el=els[i];
      if(el.closest(".list-item")||el.closest(".hc-generated")) continue;
      if(cleanText(el.textContent)) return el;
    }
    return null;
  }
  function descriptionText(section){
    const els=section.querySelectorAll('[class*="description"], .sqsrte p, p');
    for(let i=0;i<els.length;i++){ const el=els[i];
      if(el.closest(".list-item")||el.closest(".hc-generated")) continue;
      const t=cleanText(el.textContent); if(t) return t;
    }
    return "";
  }
  function getCards(section){
    return Array.from(section.querySelectorAll(".user-items-list-item-container > .list-item")).map(function(item){
      return {
        title: cleanText(item.querySelector(".list-item-content__title")?.textContent) || "",
        description: cleanText(item.querySelector(".list-item-content__description")?.textContent) || "",
        image: getImageUrl(item)
      };
    }).filter(function(c){ return c.image; });
  }
  function pageMarkup(cls){
    return `<article class="hc-page ${cls}"><div class="hc-image"><img alt=""></div>
      <div class="hc-text"><h3 class="hc-title"></h3><div class="hc-description"></div></div></article>`;
  }
  function turnFaceMarkup(cls){
    return `<div class="hc-turn-face ${cls}"><div class="hc-image"><img alt=""></div>
      <div class="hc-text"><h3 class="hc-title"></h3><div class="hc-description"></div></div></div>`;
  }
  function setPage(page, card){
    if(!page||!card) return;
    const img=page.querySelector("img"), title=page.querySelector(".hc-title"), desc=page.querySelector(".hc-description");
    if(img){ img.src=card.image; img.alt=card.title; }
    if(title) title.textContent=card.title;
    if(desc) desc.textContent=card.description;
  }
  function build(section, cards, spreads, heading, note){
    const old=section.querySelector(".hc-generated"); if(old) old.remove();
    const html = `
      <div class="hc-generated">
        <div class="hc-copy">
          <h2 class="hc-heading">${heading}</h2>
          <div class="hc-note">${note}</div>
          <div class="hc-progress">
            ${Array.from({length:spreads}).map(function(_,i){ return `<span class="hc-dot ${i===0?"is-active":""}"></span>`; }).join("")}
          </div>
        </div>
        <div class="hc-stage">
          <div class="hc-book">
            <div class="hc-spread">${pageMarkup("hc-left")}${pageMarkup("hc-right")}</div>
            <article class="hc-turning-page">${turnFaceMarkup("hc-turn-front")}${turnFaceMarkup("hc-turn-back")}</article>
            <div class="hc-spine"></div>
          </div>
        </div>
      </div>`;
    const content=section.querySelector(".content")||section;
    content.insertAdjacentHTML("beforeend", html);
    return section.querySelector(".hc-generated");
  }
  function initHardcover(){
    const section=document.querySelector(SECTION_SELECTOR); if(!section) return false;
    const cards=getCards(section); if(cards.length<2) return false;
    section.classList.add("hardcover-ready");

    const titleEl = titleElement(section);
    const heading = titleEl ? cleanText(titleEl.textContent) : "Meet the team";
    const note = descriptionText(section) || "Scroll to open the book.";

    const L=cards.length;
    const spreads=Math.ceil(L/2);
    const flips=Math.max(spreads-1,1);
    section.style.setProperty("--hardcover-scroll-height", `calc(100vh + ${flips*80}vh)`, "important");

    const c=build(section, cards, spreads, heading, note);
    const headingNode=c.querySelector(".hc-heading");
    const leftPage=c.querySelector(".hc-left"), rightPage=c.querySelector(".hc-right");
    const turningPage=c.querySelector(".hc-turning-page");
    const turnFront=c.querySelector(".hc-turn-front"), turnBack=c.querySelector(".hc-turn-back");
    const dots=Array.from(c.querySelectorAll(".hc-dot"));
    const at=function(i){ return cards[clamp(i,0,L-1)]; };

    function syncHeadingSize(){
      if(!titleEl||!headingNode) return;
      const cs=getComputedStyle(titleEl);
      if(cs.fontSize && cs.fontSize!=="0px") headingNode.style.fontSize=cs.fontSize;
      if(cs.lineHeight && cs.lineHeight!=="normal") headingNode.style.lineHeight=cs.lineHeight;
    }
    syncHeadingSize();

    function draw(exact){
      exact=clamp(exact,0,flips);
      const s=Math.min(flips-1, Math.floor(exact));
      const local=exact - s;
      setPage(leftPage,  at(2*s));
      setPage(rightPage, at(2*s+3));
      setPage(turnFront, at(2*s+1));
      setPage(turnBack,  at(2*s+2));
      if(exact>=flips){
        setPage(leftPage, at(2*flips));
        setPage(rightPage, at(2*flips+1));
        turningPage.style.opacity="0";
        turningPage.style.transform="rotateY(-180deg)";
      } else {
        turningPage.style.opacity="1";
        turningPage.style.transform=`rotateY(${-ease(local)*180}deg)`;
      }
      const active=clamp(Math.round(exact),0,spreads-1);
      dots.forEach(function(d,i){ d.classList.toggle("is-active", i===active); });
    }
    function update(){
      const rect=section.getBoundingClientRect();
      const travel=Math.max(rect.height - window.innerHeight, 1);
      const progress=clamp(-rect.top/travel,0,1);
      draw(progress*flips);
    }
    update();
    window.addEventListener("scroll", update, {passive:true});
    window.addEventListener("resize", function(){ syncHeadingSize(); update(); });
    return true;
  }
  let tries=0;
  const timer=setInterval(function(){ tries++; if(initHardcover()||tries>30) clearInterval(timer); }, 300);
})();
</script>

How To Edit The Flipbook

Content (Images, Names & Descriptions)

The flipbook pulls content directly from an Auto Layout Section configured as a Simple List.

To update:

Open the page editor.
Select the Auto Layout section.
Edit, add, or remove list items.
Update the image, title, and description for each item.

These changes will automatically update the flipbook.

Heading Text

The large heading text ("Meet the Team") and supporting text are controlled inside the JavaScript.

Look for:

<div class="hc-kicker">Our People</div>

<h2 class="hc-heading">
  Meet<br>the team
</h2>

<div class="hc-note">
  Scroll to open the book.
</div>

Replace the text with your own wording.

Styling

Enjoy, and feel free to customize it for your own Squarespace projects.

Love Ajayi

Founder of Novule

Squarespace Developer • AI Workflows

──────────────────────────

Every tutorial is built from real client projects and tested before it reaches MY toolkit.

https://www.novule.com