338 lines
8.7 KiB
HTML
338 lines
8.7 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="es">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8"/>
|
||
|
|
<title>El Calor del Comal — Carlos Acosta</title>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--gulf-night: #0b0f14;
|
||
|
|
--comal-rust: #8b4513;
|
||
|
|
--chile-fire: #c41e3a;
|
||
|
|
--molcajete: #2d2d2d;
|
||
|
|
--steam-white: rgba(255,255,255,0.85);
|
||
|
|
}
|
||
|
|
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
background: var(--gulf-night);
|
||
|
|
color: var(--steam-white);
|
||
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root {
|
||
|
|
position: relative;
|
||
|
|
width: 1920px;
|
||
|
|
height: 1080px;
|
||
|
|
overflow: hidden;
|
||
|
|
background: linear-gradient(180deg, #0b0f14 0%, #1a1f29 50%, #0b0f14 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.clip {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
display: grid;
|
||
|
|
place-items: center;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.clip.active {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* SCENE 1: THE BURN */
|
||
|
|
#s1 .burn-mark {
|
||
|
|
position: absolute;
|
||
|
|
width: 600px;
|
||
|
|
height: 600px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, var(--chile-fire) 0%, transparent 70%);
|
||
|
|
filter: blur(60px);
|
||
|
|
animation: pulse-burn 4s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
#s1 .smoke {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 400px;
|
||
|
|
background: linear-gradient(0deg, rgba(139,69,19,0.4) 0%, transparent 100%);
|
||
|
|
filter: blur(40px);
|
||
|
|
}
|
||
|
|
|
||
|
|
#s1 h1 {
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
font-size: 96px;
|
||
|
|
font-weight: 700;
|
||
|
|
letter-spacing: 0.02em;
|
||
|
|
text-align: center;
|
||
|
|
color: var(--chile-fire);
|
||
|
|
text-shadow: 0 0 60px rgba(196,30,58,0.6);
|
||
|
|
margin: 0;
|
||
|
|
padding: 0 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#s1 .subtitle {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 120px;
|
||
|
|
font-size: 32px;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
color: var(--steam-white);
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* SCENE 2: THE GRIND */
|
||
|
|
#s2 .metate-bg {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
background-image: url('https://images.pexels.com/photos/17061967/pexels-photo-17061967.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920');
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
filter: sepia(0.3) contrast(1.2) brightness(0.7);
|
||
|
|
}
|
||
|
|
|
||
|
|
#s2 .stone-texture {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
background: repeating-linear-gradient(
|
||
|
|
45deg,
|
||
|
|
transparent,
|
||
|
|
transparent 20px,
|
||
|
|
rgba(45,45,45,0.3) 20px,
|
||
|
|
rgba(45,45,45,0.3) 40px
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
#s2 h1 {
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
font-size: 84px;
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: 0.03em;
|
||
|
|
text-align: center;
|
||
|
|
color: var(--steam-white);
|
||
|
|
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#s2 .chile-overlay {
|
||
|
|
position: absolute;
|
||
|
|
top: 10%;
|
||
|
|
right: 5%;
|
||
|
|
width: 400px;
|
||
|
|
height: 400px;
|
||
|
|
background-image: url('https://images.pexels.com/photos/34942789/pexels-photo-34942789.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
|
||
|
|
background-size: cover;
|
||
|
|
border-radius: 50%;
|
||
|
|
opacity: 0;
|
||
|
|
transform: rotate(-15deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
#s2 .cumin-dust {
|
||
|
|
position: absolute;
|
||
|
|
width: 800px;
|
||
|
|
height: 800px;
|
||
|
|
background: radial-gradient(circle, rgba(139,69,19,0.3) 0%, transparent 60%);
|
||
|
|
filter: blur(80px);
|
||
|
|
animation: drift-cumin 8s ease-in-out infinite alternate;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* SCENE 3: THE SEAM */
|
||
|
|
#s3 .table-bg {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
background-image: url('https://images.pexels.com/photos/29530030/pexels-photo-29530030.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920');
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
filter: contrast(1.1) saturation(1.2) brightness(0.9);
|
||
|
|
}
|
||
|
|
|
||
|
|
#s3 .mole-glow {
|
||
|
|
position: absolute;
|
||
|
|
width: 1000px;
|
||
|
|
height: 1000px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(139,69,19,0.5) 0%, transparent 70%);
|
||
|
|
filter: blur(100px);
|
||
|
|
animation: breathe-mole 12s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
#s3 h1 {
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
font-size: 108px;
|
||
|
|
font-weight: 800;
|
||
|
|
letter-spacing: 0.01em;
|
||
|
|
text-align: center;
|
||
|
|
background: linear-gradient(180deg, var(--steam-white) 0%, var(--comal-rust) 100%);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
text-shadow: 0 8px 60px rgba(139,69,19,0.6);
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#s3 .family-circle {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 80px;
|
||
|
|
font-size: 28px;
|
||
|
|
letter-spacing: 0.15em;
|
||
|
|
color: var(--steam-white);
|
||
|
|
opacity: 0.8;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ANIMATIONS */
|
||
|
|
@keyframes pulse-burn {
|
||
|
|
0%, 100% { transform: scale(1); opacity: 0.8; }
|
||
|
|
50% { transform: scale(1.15); opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes drift-cumin {
|
||
|
|
0% { transform: translate(-50px, -30px); }
|
||
|
|
100% { transform: translate(50px, 30px); }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes breathe-mole {
|
||
|
|
0%, 100% { transform: scale(1); opacity: 0.5; }
|
||
|
|
50% { transform: scale(1.2); opacity: 0.7; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* CAPTION TRACK */
|
||
|
|
.caption {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 60px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
font-size: 24px;
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
color: var(--steam-white);
|
||
|
|
background: rgba(0,0,0,0.6);
|
||
|
|
padding: 16px 32px;
|
||
|
|
border-radius: 8px;
|
||
|
|
max-width: 80%;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 1.4;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.caption.visible {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="el-calor-del-comal" data-start="0" data-width="1920" data-height="1080" data-duration="60">
|
||
|
|
|
||
|
|
<!-- AUDIO ELEMENTS (REQUIRED FOR RENDER) -->
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="20"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="40"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
||
|
|
|
||
|
|
<!-- SCENE 1: THE BURN (0-20s) -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="20" data-track-index="1">
|
||
|
|
<div class="burn-mark"></div>
|
||
|
|
<div class="smoke"></div>
|
||
|
|
<h1 id="s1-title">EL CALOR DEL COMAL</h1>
|
||
|
|
<div class="subtitle">Mi primer intento. Mi primera quemadura.</div>
|
||
|
|
<div class="caption" id="cap-s1">Mi abuela dijo: "El fuego no perdona al que tiene prisa."</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 2: THE GRIND (20-40s) -->
|
||
|
|
<section id="s2" class="clip" data-start="20" data-duration="20" data-track-index="1">
|
||
|
|
<div class="metate-bg"></div>
|
||
|
|
<div class="stone-texture"></div>
|
||
|
|
<div class="chile-overlay"></div>
|
||
|
|
<div class="cumin-dust"></div>
|
||
|
|
<h1 id="s2-title">LA PACIENCIA DE LA PIEDRA</h1>
|
||
|
|
<div class="caption" id="cap-s2">Cuarenta vueltas del mano sobre la piedra. El aroma del comino tostado.</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 3: THE SEAM (40-60s) -->
|
||
|
|
<section id="s3" class="clip" data-start="40" data-duration="20" data-track-index="1">
|
||
|
|
<div class="table-bg"></div>
|
||
|
|
<div class="mole-glow"></div>
|
||
|
|
<h1 id="s3-title">LA COSTURA QUE NOS UNE</h1>
|
||
|
|
<div class="family-circle">Corpus Christi • 1986 • 2026</div>
|
||
|
|
<div class="caption" id="cap-s3">Esta es la salsa que conecta las manos de mi abuela con las mías.</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// SCENE 1: FADE IN BURN
|
||
|
|
tl.to("#s1", { opacity: 1, duration: 2, ease: "power2.inOut" }, 0);
|
||
|
|
tl.to("#s1-title", {
|
||
|
|
opacity: 1,
|
||
|
|
y: 0,
|
||
|
|
duration: 3,
|
||
|
|
ease: "power3.out",
|
||
|
|
stagger: 0.1
|
||
|
|
}, 0.5);
|
||
|
|
tl.to(".burn-mark", {
|
||
|
|
scale: 1.3,
|
||
|
|
opacity: 0.6,
|
||
|
|
duration: 8,
|
||
|
|
ease: "sine.inOut"
|
||
|
|
}, 2);
|
||
|
|
tl.to("#cap-s1", { opacity: 1, y: 0, duration: 1.5 }, 3);
|
||
|
|
tl.to("#cap-s1", { opacity: 0, y: -20, duration: 1.5 }, 12);
|
||
|
|
tl.to("#s1", { opacity: 0, duration: 2 }, 18);
|
||
|
|
|
||
|
|
// SCENE 2: METATE REVEAL
|
||
|
|
tl.to("#s2", { opacity: 1, duration: 2.5 }, 20);
|
||
|
|
tl.to("#s2-title", {
|
||
|
|
opacity: 1,
|
||
|
|
scale: 1.05,
|
||
|
|
duration: 3,
|
||
|
|
ease: "expo.out"
|
||
|
|
}, 21);
|
||
|
|
tl.to(".chile-overlay", {
|
||
|
|
opacity: 0.9,
|
||
|
|
rotate: 0,
|
||
|
|
duration: 6,
|
||
|
|
ease: "power2.out"
|
||
|
|
}, 22);
|
||
|
|
tl.to(".cumin-dust", {
|
||
|
|
opacity: 1,
|
||
|
|
duration: 4,
|
||
|
|
ease: "power1.inOut"
|
||
|
|
}, 24);
|
||
|
|
tl.to("#cap-s2", { opacity: 1, y: 0, duration: 1.5 }, 25);
|
||
|
|
tl.to("#cap-s2", { opacity: 0, y: -20, duration: 1.5 }, 35);
|
||
|
|
tl.to("#s2", { opacity: 0, duration: 2 }, 38);
|
||
|
|
|
||
|
|
// SCENE 3: FAMILY TABLE
|
||
|
|
tl.to("#s3", { opacity: 1, duration: 3 }, 40);
|
||
|
|
tl.to("#s3-title", {
|
||
|
|
opacity: 1,
|
||
|
|
y: -30,
|
||
|
|
duration: 4,
|
||
|
|
ease: "power4.out"
|
||
|
|
}, 41);
|
||
|
|
tl.to(".mole-glow", {
|
||
|
|
scale: 1.4,
|
||
|
|
opacity: 0.8,
|
||
|
|
duration: 8,
|
||
|
|
ease: "sine.inOut"
|
||
|
|
}, 42);
|
||
|
|
tl.to("#cap-s3", { opacity: 1, y: 0, duration: 2 }, 44);
|
||
|
|
tl.to("#cap-s3", { opacity: 0, y: -20, duration: 2 }, 56);
|
||
|
|
tl.to("#s3", { opacity: 0, duration: 1 }, 59);
|
||
|
|
|
||
|
|
window.__timelines["el-calor-del-comal"] = tl;
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|