Capitolium

A launch site for a co-branded football and rugby jersey, told as a guided visit through a city hall. A full-screen entry gate over aerial footage opens onto a pinned facade that shrinks into a frame, then three chapters (arcades, council room, gallery) where arched windows grow to fill the screen. The look is museum-formal: cream marble, gold wide-tracked serif, slate panels and a calligraphic script for the motto.

Rebuild: design-inspiration-rebuilds/culture-education/capitolium (fictional content, generated images, open-source fonts; installed with the optional design-inspiration-rebuilds skill). Run it with npm install && npm run dev.

Design Tokens

:root {
  --cream: #f0e3cf; --gold: #c3a677; --slate: #58595b; --ink: #1d1a17;
  --ease: cubic-bezier(.65, .05, 0, 1);
}

• Type: a condensed uppercase grotesque for headings (-0.02em tracking, ~100px mega, 24px subheads), a wide-tracked high-contrast serif for the wordmark (.26em, gold), a text serif for body, and a formal copperplate script for the motto (original: Edwardian Script; substitute: Pinyon Script). Small labels are uppercase at .16em tracking.
• Surfaces: cream marble texture on light sections, flat slate and near-black on dark ones, a thin gold frame around slate blocks. Arched tops (border-radius: 999px 999px 0 0) on every photo.
• Wordmark band: a sticky double-ruled strip with the site name and the chapter name on both sides.

Motion Spec

Key excerpts

Entry gate lift: src/gate.js

gsap.timeline({ defaults: { ease: 'cubic-bezier(.65,.05,0,1)' } })
  .to('.gate__inner', { opacity: 0, y: -40, duration: 0.7 })
  .to(gate, { yPercent: -100, duration: 1.4 }, 0.15)
  .add(() => {
    document.body.classList.remove('locked');
    lenis?.start();
    onEnter();
  }, '>-0.2');

Facade shrinks into a frame: src/intro.js

const tl = gsap.timeline({ defaults: { ease: 'none' },
  scrollTrigger: { trigger: '.intro', start: 'top top', end: 'bottom bottom', scrub: 0.6 } });
tl.fromTo('#introTxt', { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.22 })
  .to('#introTxt', { opacity: 0, duration: 0.15 }, 0.5)
  .fromTo('#introImg', { clipPath: 'inset(0% 0% 0% 0%)' },
    { clipPath: 'inset(22% 30% 22% 30%)', ease: 'power2.inOut', duration: 0.4 }, 0.45);

Arch grows to fill the screen: src/chapter1.js

gsap.timeline({ defaults: { ease: 'power2.inOut' }, scrollTrigger: {
  trigger: '#arches', start: () => `top ${bandH()}`, end: '+=140%', pin: true, scrub: 0.8 } })
  .to('.arch--l', { xPercent: -160, opacity: 0, duration: 1 }, 0)
  .to('.arch--r', { xPercent: 160, opacity: 0, duration: 1 }, 0)
  .to(c, { scale: () => (innerWidth * 0.94) / c.offsetWidth,
           transformOrigin: '50% 100%', duration: 1.2 }, 0)
  .fromTo('#giant', { opacity: 0, yPercent: 60 }, { opacity: 1, yPercent: 0, duration: 0.8 }, 0.9);

Pinned horizontal track: src/chapter1.js

gsap.to(track, { x: () => -(track.scrollWidth - innerWidth), ease: 'none', scrollTrigger: {
  trigger: track, start: () => `top ${bandH()}`,
  end: () => '+=' + (track.scrollWidth - innerWidth),
  pin: true, scrub: 0.8, invalidateOnRefresh: true } });

Line-mask text reveal: src/reveals.js

SplitText.create(el, { type: 'lines', mask: 'lines', autoSplit: true, onSplit: (s) =>
  gsap.from(s.lines, { yPercent: 105, duration: 1.1, ease: 'power3.out', stagger: 0.1,
    scrollTrigger: { trigger: el, start: 'top 88%', once: true } }) });

prefers-reduced-motion: smooth scroll, pins, reveals and the backdrop drift are off; the gate is a plain button and the horizontal track stacks vertically.

Why Award-Worthy

1. A ritual entrance. The gate frames the site as a place you enter, not a page you land on, and sets the formal tone before any content appears.
2. One shape repeated. The arch is the photo frame, the card mask and the grow transition, so a single motif ties architecture, product and motion together.
3. Restrained palette, rich type. Cream, gold and slate only; the wide serif, condensed grotesque and script each have one job.
4. Chapters as navigation. The sticky wordmark band and the bottom pill always say where you are in the story.
5. Product as monument. Jerseys stand on plinths like exhibits, which justifies the museum tone.

Anti-patterns it avoids: no carousels, no parallax confetti, no bright accent colours, no generic fade-up reveals; scroll-driven moments always end on a readable resting frame.

Credits

• Original: collabcapitolium.fr by Supercolor. Design and content are the intellectual property of their creators.
• Recognition: Awwwards Site of the Day, Developer Award.
• This study is an independent clean-room analysis. The rebuild uses fictional clubs, AI-generated images and open-source fonts; it contains no original code, assets or copy.