Pages Hard

Documentary Film — Terra Incognita

Cinematic documentary film site with deep charcoal/rust palette, Libre Baskerville serif, animated Canvas grain overlay, clip-path word reveal for hero title, chapter timeline, CSS film stills with scratch marks, credits reveal, and festival badges.

Open in Lab

gsap scrolltrigger lenis canvas-2d clip-path libre-baskerville

Targets: JS HTML

Code

/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #0a0a0a;
  --surface: #131210;
  --text: #f2ede8;
  --muted: #8a8078;
  --rust: #c4622d;
  --amber: #d4843a;
  --border: #2a2520;
  --font-display: "Libre Baskerville", Georgia, serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── Grain Canvas ──────────────────────────────────────────────────────────── */
#grain-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.04;
  mix-blend-mode: overlay;
}

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--text);
  font-weight: 500;
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--text);
}

.nav-watch {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  text-decoration: none;
  border: 1px solid var(--rust);
  padding: 7px 18px;
  transition: background 0.2s, color 0.2s;
}
.nav-watch:hover {
  background: var(--rust);
  color: var(--bg);
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 48px 80px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.hero-inner {
  max-width: 900px;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.hero-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}

.hero-director {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--rust);
  text-transform: uppercase;
}

.hero-h1 {
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  overflow: hidden;
}

.h1-word {
  display: block;
  clip-path: inset(0 0 0 0);
}

.h1-word--accent {
  color: var(--rust);
  font-style: italic;
}

.hero-details {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.hd-item {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.hd-sep {
  color: var(--border);
}

.hero-tagline {
  font-style: italic;
  font-size: 1.125rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.hero-scroll span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}

.scroll-line {
  width: 1px;
  height: 48px;
  background: var(--muted);
  transform-origin: top;
  animation: scroll-grow 1.5s ease-in-out infinite alternate;
}

@keyframes scroll-grow {
  from {
    transform: scaleY(0.3);
    opacity: 0.4;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* ── Section Labels ────────────────────────────────────────────────────────── */
.section-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--rust);
}

.section-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-left: 12px;
}

/* ── Synopsis ──────────────────────────────────────────────────────────────── */
.synopsis-section {
  padding: 120px 48px;
  border-bottom: 1px solid var(--border);
}

.synopsis-inner {
  max-width: 860px;
  margin: 0 auto;
}

.synopsis-label {
  display: flex;
  align-items: center;
  margin-bottom: 64px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.synopsis-quote {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--text);
  border-left: 3px solid var(--rust);
  padding-left: 32px;
  margin-bottom: 48px;
}

.synopsis-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 640px;
}
.synopsis-text p + p {
  margin-top: 20px;
}

/* ── Chapters ──────────────────────────────────────────────────────────────── */
.chapters-section {
  padding: 120px 48px;
  border-bottom: 1px solid var(--border);
}

.chapters-header {
  display: flex;
  align-items: center;
  margin-bottom: 64px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.chapter-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 32px;
  padding: 40px 0;
  position: relative;
}

.ch-num {
  font-size: 3rem;
  font-weight: 700;
  font-style: italic;
  color: var(--border);
  line-height: 1;
  padding-top: 4px;
}

.ch-content {
  padding-bottom: 32px;
}

.ch-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.ch-runtime {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--rust);
  display: block;
  margin-bottom: 16px;
}

.ch-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 580px;
}

.ch-rule {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border);
}

/* ── Film Stills ───────────────────────────────────────────────────────────── */
.stills-section {
  padding: 120px 48px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.stills-header {
  display: flex;
  align-items: center;
  margin-bottom: 64px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.stills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 220px 220px;
  gap: 12px;
}

.still-item {
  position: relative;
  overflow: hidden;
}

.still-item--tall {
  grid-row: span 2;
}
.still-item--wide {
  grid-column: span 2;
}

.si-frame {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Film still color treatments */
.si-frame--1 {
  background: #2a1f15;
}
.si-frame--2 {
  background: #0d0d12;
}
.si-frame--3 {
  background: #141d1f;
}
.si-frame--4 {
  background: #1a160f;
}
.si-frame--5 {
  background: #0a0d0a;
}
.si-frame--6 {
  background: #12181e;
}

/* Film scratch marks via pseudo */
.si-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0%,
    transparent 48%,
    rgba(255, 255, 255, 0.015) 48%,
    rgba(255, 255, 255, 0.015) 50%,
    transparent 50%
  );
}

.si-frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 38px 0 0 rgba(255, 255, 255, 0.025), 72px 0 0 rgba(255, 255, 255, 0.015);
}

/* Vignette on frames */
.si-frame--1::before {
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7);
}

.still-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: rgba(242, 237, 232, 0.5);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  text-transform: uppercase;
}

/* ── Credits ───────────────────────────────────────────────────────────────── */
.credits-section {
  padding: 120px 48px;
  border-bottom: 1px solid var(--border);
}

.credits-inner {
  max-width: 720px;
}

.credits-label {
  display: flex;
  align-items: center;
  margin-bottom: 64px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.credits-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.credit-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.cr-role {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  flex-shrink: 0;
  width: 200px;
}

.cr-name {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text);
  text-align: right;
}

/* ── Festivals ─────────────────────────────────────────────────────────────── */
.festivals-section {
  padding: 120px 48px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.festivals-inner {
  max-width: 1100px;
}

.festivals-label {
  display: flex;
  align-items: center;
  margin-bottom: 64px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.festivals-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.festival-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 32px;
  border: 1px solid var(--border);
  flex: 1;
  min-width: 140px;
}

.festival-badge--winner {
  border-color: var(--rust);
}

.fb-name {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text);
}

.fb-award {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
  text-align: center;
}

.festival-badge--winner .fb-award {
  color: var(--rust);
}

.fb-year {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Watch / CTA ───────────────────────────────────────────────────────────── */
.watch-section {
  padding: 120px 48px;
  border-bottom: 1px solid var(--border);
}

.watch-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1100px;
  align-items: start;
}

.watch-h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  font-weight: 700;
  margin-bottom: 20px;
}

.watch-h2 em {
  font-style: italic;
  color: var(--rust);
}

.watch-text > p {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 40px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.watch-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-film {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  background: var(--rust);
  color: var(--bg);
  transition: background 0.2s, color 0.2s;
  display: inline-block;
}
.btn-film:hover {
  background: var(--amber);
}

.btn-film--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-film--outline:hover {
  border-color: var(--rust);
  color: var(--rust);
  background: transparent;
}

/* Watch Terminal */
.watch-terminal {
  background: #0d0d0d;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
}

.wt-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.wt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block;
}

.wt-title {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-left: 8px;
}

.wt-body {
  padding: 20px 20px 24px;
}

.wt-body p {
  font-size: 0.7rem;
  line-height: 2;
  color: var(--muted);
}

.wt-loc {
  color: var(--rust);
  margin-right: 8px;
  font-weight: 500;
}

.wt-stream {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.wt-live {
  color: #5fba47;
  margin-right: 6px;
  animation: blink 1.2s ease-in-out infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.footer {
  padding: 32px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */
.reduced-motion .scroll-line {
  animation: none;
}

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 Lenis from "lenis";

gsap.registerPlugin(ScrollTrigger);

initDemoShell({
  title: "Terra Incognita — Documentary Film",
  category: "pages",
  tech: ["gsap", "scroll-trigger", "lenis", "canvas-2d", "clip-path", "libre-baskerville"],
});

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

// ── Lenis smooth scroll ────────────────────────────────────────────────────
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);

// ── Grain Canvas ───────────────────────────────────────────────────────────
const grainCanvas = document.getElementById("grain-canvas");
const gctx = grainCanvas.getContext("2d");
let grainW = 0,
  grainH = 0;

function resizeGrain() {
  grainW = grainCanvas.width = window.innerWidth;
  grainH = grainCanvas.height = window.innerHeight;
}
resizeGrain();
window.addEventListener("resize", resizeGrain);

function drawGrain() {
  const imageData = gctx.createImageData(grainW, grainH);
  const buf = imageData.data;
  for (let i = 0; i < buf.length; i += 4) {
    const v = (Math.random() * 255) | 0;
    buf[i] = buf[i + 1] = buf[i + 2] = v;
    buf[i + 3] = 255;
  }
  gctx.putImageData(imageData, 0, 0);
  requestAnimationFrame(drawGrain);
}
drawGrain();

// ── Hero entrance ──────────────────────────────────────────────────────────
if (!reduced) {
  gsap.set(".hero-meta", { opacity: 0, y: 16 });
  gsap.set(".h1-word", { clipPath: "inset(100% 0 0 0)" });
  gsap.set(".hero-details", { opacity: 0 });
  gsap.set(".hero-tagline", { opacity: 0, y: 12 });
  gsap.set(".hero-scroll", { opacity: 0 });

  gsap
    .timeline({ delay: 0.4, defaults: { ease: "expo.out" } })
    .to(".hero-meta", { opacity: 1, y: 0, duration: 0.6 })
    .to(
      ".h1-word",
      { clipPath: "inset(0% 0 0 0)", duration: 1.1, stagger: 0.15, ease: "expo.out" },
      "-=0.3"
    )
    .to(".hero-details", { opacity: 1, duration: 0.6 }, "-=0.4")
    .to(".hero-tagline", { opacity: 1, y: 0, duration: 0.6 }, "-=0.3")
    .to(".hero-scroll", { opacity: 1, duration: 0.6 }, "-=0.2");
}

// ── Synopsis reveal ────────────────────────────────────────────────────────
if (!reduced) {
  gsap.set(".synopsis-quote", { opacity: 0, y: 30 });
  gsap.set(".synopsis-text p", { opacity: 0, y: 20 });

  ScrollTrigger.create({
    trigger: ".synopsis-section",
    start: "top 70%",
    onEnter: () => {
      gsap.to(".synopsis-quote", { opacity: 1, y: 0, duration: 1, ease: "expo.out" });
      gsap.to(".synopsis-text p", {
        opacity: 1,
        y: 0,
        duration: 0.8,
        stagger: 0.15,
        ease: "expo.out",
        delay: 0.3,
      });
    },
  });
}

// ── Chapters reveal ────────────────────────────────────────────────────────
if (!reduced) {
  document.querySelectorAll(".chapter-item").forEach((item, i) => {
    gsap.set(item, { opacity: 0, x: -40 });
    gsap.to(item, {
      opacity: 1,
      x: 0,
      duration: 0.8,
      ease: "expo.out",
      delay: i * 0.1,
      scrollTrigger: {
        trigger: ".chapters-list",
        start: "top 75%",
        toggleActions: "play none none reverse",
      },
    });
  });
}

// ── Film stills reveal ─────────────────────────────────────────────────────
if (!reduced) {
  document.querySelectorAll(".still-item").forEach((item, i) => {
    gsap.set(item, { opacity: 0, scale: 0.97 });
    gsap.to(item, {
      opacity: 1,
      scale: 1,
      duration: 0.9,
      ease: "expo.out",
      delay: i * 0.08,
      scrollTrigger: {
        trigger: ".stills-grid",
        start: "top 75%",
        toggleActions: "play none none reverse",
      },
    });
  });
}

// ── Credits reveal ─────────────────────────────────────────────────────────
if (!reduced) {
  document.querySelectorAll(".credit-row").forEach((row, i) => {
    gsap.set(row, { opacity: 0, y: 20 });
    gsap.to(row, {
      opacity: 1,
      y: 0,
      duration: 0.7,
      ease: "expo.out",
      delay: i * 0.06,
      scrollTrigger: {
        trigger: ".credits-list",
        start: "top 75%",
        toggleActions: "play none none reverse",
      },
    });
  });
}

// ── Festival badges reveal ─────────────────────────────────────────────────
if (!reduced) {
  gsap.set(".festival-badge", { opacity: 0, scale: 0.85 });
  gsap.to(".festival-badge", {
    opacity: 1,
    scale: 1,
    duration: 0.6,
    stagger: 0.07,
    ease: "back.out(1.5)",
    scrollTrigger: {
      trigger: ".festivals-row",
      start: "top 80%",
      toggleActions: "play none none reverse",
    },
  });
}

// ── Watch section reveal ───────────────────────────────────────────────────
if (!reduced) {
  gsap.set([".watch-h2", ".watch-text > p", ".watch-btns"], { opacity: 0, y: 24 });
  gsap.set(".watch-terminal", { opacity: 0, x: 30 });

  ScrollTrigger.create({
    trigger: ".watch-section",
    start: "top 70%",
    onEnter: () => {
      gsap.to([".watch-h2", ".watch-text > p", ".watch-btns"], {
        opacity: 1,
        y: 0,
        duration: 0.8,
        stagger: 0.1,
        ease: "expo.out",
      });
      gsap.to(".watch-terminal", {
        opacity: 1,
        x: 0,
        duration: 1,
        ease: "expo.out",
        delay: 0.3,
      });
    },
  });
}

// ── Nav scroll state ───────────────────────────────────────────────────────
ScrollTrigger.create({
  start: "top -80",
  onUpdate: (self) => {
    document.getElementById("nav").classList.toggle("nav--scrolled", self.scroll() > 80);
  },
});

// ── Motion toggle ──────────────────────────────────────────────────────────
window.addEventListener("motion-preference", (e) => {
  gsap.globalTimeline.paused(e.detail.reduced);
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Terra Incognita — Documentary</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Mono:wght@300;400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
    <script type="importmap">{"imports":{"gsap":"https://esm.sh/gsap@3.13.0","gsap/ScrollTrigger":"https://esm.sh/gsap@3.13.0/ScrollTrigger","gsap/SplitText":"https://esm.sh/gsap@3.13.0/SplitText","gsap/Flip":"https://esm.sh/gsap@3.13.0/Flip","gsap/ScrambleTextPlugin":"https://esm.sh/gsap@3.13.0/ScrambleTextPlugin","gsap/TextPlugin":"https://esm.sh/gsap@3.13.0/TextPlugin","gsap/all":"https://esm.sh/gsap@3.13.0/all","gsap/":"https://esm.sh/gsap@3.13.0/","lenis":"https://esm.sh/lenis@1.1.13/dist/lenis.mjs","three":"https://esm.sh/three@0.171.0","three/addons/":"https://esm.sh/three@0.171.0/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>

  <!-- Grain overlay -->
  <canvas id="grain-canvas" aria-hidden="true"></canvas>

  <!-- Nav -->
  <nav class="nav" id="nav">
    <span class="nav-logo">TERRA INCOGNITA</span>
    <ul class="nav-links">
      <li><a href="#synopsis">Story</a></li>
      <li><a href="#chapters">Chapters</a></li>
      <li><a href="#stills">Stills</a></li>
      <li><a href="#team">Credits</a></li>
    </ul>
    <a href="#watch" class="nav-watch">Watch Film</a>
  </nav>

  <!-- Hero -->
  <section class="hero" id="hero">
    <div class="hero-inner">
      <div class="hero-meta">
        <span class="hero-label">A Film by</span>
        <span class="hero-director">Mara Solano</span>
      </div>
      <h1 class="hero-h1">
        <span class="h1-word">TERRA</span>
        <span class="h1-word h1-word--accent">INCOGNITA</span>
      </h1>
      <div class="hero-details">
        <span class="hd-item">2024</span>
        <span class="hd-sep">—</span>
        <span class="hd-item">128 min</span>
        <span class="hd-sep">—</span>
        <span class="hd-item">4K / Dolby Atmos</span>
      </div>
      <p class="hero-tagline">Into the unmapped. Beyond the known.</p>
    </div>
    <div class="hero-scroll">
      <span>Scroll to explore</span>
      <div class="scroll-line"></div>
    </div>
  </section>

  <!-- Synopsis -->
  <section class="synopsis-section" id="synopsis">
    <div class="synopsis-inner">
      <div class="synopsis-label">
        <span class="section-num">01</span>
        <span class="section-title">The Story</span>
      </div>
      <blockquote class="synopsis-quote">
        "There are still places on Earth no human has ever stood."
      </blockquote>
      <div class="synopsis-text">
        <p>Over four years, filmmaker Mara Solano and her crew of seven ventured into three of Earth's least-documented territories — the interior highlands of Papua New Guinea, the deep cave systems of the Movile Plateau, and a previously unmapped archipelago in the far North Atlantic.</p>
        <p>Terra Incognita is not an adventure film. It is a meditation on what it means to witness something that has never been witnessed before — and the weight of being the first.</p>
      </div>
    </div>
  </section>

  <!-- Chapters -->
  <section class="chapters-section" id="chapters">
    <div class="chapters-header">
      <span class="section-num">02</span>
      <span class="section-title">Chapters</span>
    </div>
    <div class="chapters-list">
      <div class="chapter-item" data-num="I">
        <span class="ch-num">I</span>
        <div class="ch-content">
          <h3 class="ch-title">The Approach</h3>
          <span class="ch-runtime">00:00 — 22:14</span>
          <p class="ch-desc">The logistics of reaching nowhere. Three teams, three continents, six months of preparation for a combined 47 days in the field.</p>
        </div>
        <div class="ch-rule"></div>
      </div>
      <div class="chapter-item" data-num="II">
        <span class="ch-num">II</span>
        <div class="ch-content">
          <h3 class="ch-title">Papua Highlands</h3>
          <span class="ch-runtime">22:14 — 48:37</span>
          <p class="ch-desc">A week above the clouds in a valley that cartographers have labeled simply "interior — unknown." The first long-form documentation of a ritual fire-walk ceremony.</p>
        </div>
        <div class="ch-rule"></div>
      </div>
      <div class="chapter-item" data-num="III">
        <span class="ch-num">III</span>
        <div class="ch-content">
          <h3 class="ch-title">Below the Plateau</h3>
          <span class="ch-runtime">48:37 — 78:00</span>
          <p class="ch-desc">The Movile Cave system supports 48 species found nowhere else on Earth, all evolved in complete darkness. A 72-hour descent into a world without light.</p>
        </div>
        <div class="ch-rule"></div>
      </div>
      <div class="chapter-item" data-num="IV">
        <span class="ch-num">IV</span>
        <div class="ch-content">
          <h3 class="ch-title">The Unnamed Archipelago</h3>
          <span class="ch-runtime">78:00 — 108:22</span>
          <p class="ch-desc">Seven islands in the North Atlantic, last visited by a fishing vessel in 1934. Arriving by research vessel in January. Sub-zero temperatures. Extraordinary bird colonies.</p>
        </div>
        <div class="ch-rule"></div>
      </div>
      <div class="chapter-item" data-num="V">
        <span class="ch-num">V</span>
        <div class="ch-content">
          <h3 class="ch-title">The Return</h3>
          <span class="ch-runtime">108:22 — 128:00</span>
          <p class="ch-desc">What does it mean to document a place and then leave it? An essay on the ethics of witnessing — and whether showing the world the unknown makes it less unknown.</p>
        </div>
        <div class="ch-rule"></div>
      </div>
    </div>
  </section>

  <!-- Film Stills -->
  <section class="stills-section" id="stills">
    <div class="stills-header">
      <span class="section-num">03</span>
      <span class="section-title">Cinematography</span>
    </div>
    <div class="stills-grid">
      <figure class="still-item still-item--tall" data-location="Papua Highlands, PNG">
        <div class="si-frame si-frame--1"></div>
        <figcaption>Papua Highlands, PNG</figcaption>
      </figure>
      <figure class="still-item" data-location="Movile Cave, Romania">
        <div class="si-frame si-frame--2"></div>
        <figcaption>Movile Cave, Romania</figcaption>
      </figure>
      <figure class="still-item" data-location="North Atlantic, 71°N">
        <div class="si-frame si-frame--3"></div>
        <figcaption>North Atlantic, 71°N</figcaption>
      </figure>
      <figure class="still-item still-item--wide" data-location="Interior Valley — unnamed">
        <div class="si-frame si-frame--4"></div>
        <figcaption>Interior Valley — unnamed</figcaption>
      </figure>
      <figure class="still-item" data-location="Cave Entrance, Day 1">
        <div class="si-frame si-frame--5"></div>
        <figcaption>Cave Entrance, Day 1</figcaption>
      </figure>
      <figure class="still-item" data-location="Archipelago, January 2024">
        <div class="si-frame si-frame--6"></div>
        <figcaption>Archipelago, January 2024</figcaption>
      </figure>
    </div>
  </section>

  <!-- Credits -->
  <section class="credits-section" id="team">
    <div class="credits-inner">
      <div class="credits-label">
        <span class="section-num">04</span>
        <span class="section-title">Credits</span>
      </div>
      <div class="credits-list">
        <div class="credit-row">
          <span class="cr-role">Directed by</span>
          <span class="cr-name">Mara Solano</span>
        </div>
        <div class="credit-row">
          <span class="cr-role">Cinematography</span>
          <span class="cr-name">Jesper Lindqvist</span>
        </div>
        <div class="credit-row">
          <span class="cr-role">Edited by</span>
          <span class="cr-name">Nadia Okonkwo</span>
        </div>
        <div class="credit-row">
          <span class="cr-role">Original Score</span>
          <span class="cr-name">Ólafur Sigurðsson</span>
        </div>
        <div class="credit-row">
          <span class="cr-role">Sound Design</span>
          <span class="cr-name">Tomás Ferreira</span>
        </div>
        <div class="credit-row">
          <span class="cr-role">Executive Producers</span>
          <span class="cr-name">Annika Björk · Daniel Levi · Ruth Achebe</span>
        </div>
        <div class="credit-row">
          <span class="cr-role">Production</span>
          <span class="cr-name">Deep Field Films · Arte Documentary</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Festivals -->
  <section class="festivals-section" id="festivals">
    <div class="festivals-inner">
      <div class="festivals-label">
        <span class="section-num">05</span>
        <span class="section-title">Film Festivals</span>
      </div>
      <div class="festivals-row">
        <div class="festival-badge">
          <span class="fb-name">Sundance</span>
          <span class="fb-award">World Premiere</span>
          <span class="fb-year">2024</span>
        </div>
        <div class="festival-badge festival-badge--winner">
          <span class="fb-name">TIFF</span>
          <span class="fb-award">Best Documentary</span>
          <span class="fb-year">2024</span>
        </div>
        <div class="festival-badge">
          <span class="fb-name">Cannes</span>
          <span class="fb-award">Official Selection</span>
          <span class="fb-year">2024</span>
        </div>
        <div class="festival-badge festival-badge--winner">
          <span class="fb-name">Hot Docs</span>
          <span class="fb-award">Grand Jury Prize</span>
          <span class="fb-year">2024</span>
        </div>
        <div class="festival-badge">
          <span class="fb-name">IDFA</span>
          <span class="fb-award">Official Selection</span>
          <span class="fb-year">2024</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Watch / CTA -->
  <section class="watch-section" id="watch">
    <div class="watch-inner">
      <div class="watch-text">
        <h2 class="watch-h2">
          See it<br>
          <em>in the dark.</em>
        </h2>
        <p>Available in cinemas and streaming globally.</p>
        <div class="watch-btns">
          <a href="#" class="btn-film">Stream Now</a>
          <a href="#" class="btn-film btn-film--outline">Find Screenings</a>
        </div>
      </div>
      <div class="watch-terminal">
        <div class="wt-bar">
          <span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot"></span>
          <span class="wt-title">screenings.log</span>
        </div>
        <div class="wt-body">
          <p><span class="wt-loc">NEW YORK</span> IFC Center · Jan 15–Feb 28</p>
          <p><span class="wt-loc">LONDON</span> Curzon Soho · Jan 19–Mar 15</p>
          <p><span class="wt-loc">BERLIN</span> Babylon · Jan 22–Feb 20</p>
          <p><span class="wt-loc">TOKYO</span> Human Trust Cinema · Feb 1–Mar 1</p>
          <p><span class="wt-loc">SYDNEY</span> Dendy Newtown · Feb 8–Mar 8</p>
          <p class="wt-stream"><span class="wt-live">●</span> Streaming — MUBI · DocPlay</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <span>Terra Incognita © 2024 Deep Field Films</span>
    <span>All rights reserved · Distributed by Arte Documentary</span>
  </footer>

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

Documentary Film — Terra Incognita

Source

Repository: libs-genclaude
Original demo id: 56-documentary-film

Code

Documentary Film — Terra Incognita

Source

Notes