ページ 難しい
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.
Labで開く
MCP
gsap scrolltrigger lenis canvas-2d clip-path libre-baskerville
ターゲット: JS HTML
コード
/* ── 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/[email protected]","gsap/ScrollTrigger":"https://esm.sh/[email protected]/ScrollTrigger","gsap/SplitText":"https://esm.sh/[email protected]/SplitText","gsap/Flip":"https://esm.sh/[email protected]/Flip","gsap/ScrambleTextPlugin":"https://esm.sh/[email protected]/ScrambleTextPlugin","gsap/TextPlugin":"https://esm.sh/[email protected]/TextPlugin","gsap/all":"https://esm.sh/[email protected]/all","gsap/":"https://esm.sh/[email protected]/","lenis":"https://esm.sh/[email protected]/dist/lenis.mjs","three":"https://esm.sh/[email protected]","three/addons/":"https://esm.sh/[email protected]/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
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.
Source
- Repository:
libs-genclaude - Original demo id:
56-documentary-film
Notes
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.