alison-wood/alison-wood-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
4d53264767
alison-wood-site/films/the-wash/index.html
alison-wood 4d53264767 publish: watercolor-guide
2026-08-17 22:58:16 +00:00

132 lines
8.0 KiB
HTML
Raw Blame History

<!doctype html>
<html><head>
<meta name="description" content="In early childhood education, we don't paint over what's already there. We let the wash settle."><meta charset="UTF-8"/>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&display=swap');
body{margin:0;background:#f5f0e8;font-family:'Cormorant Garamond',Georgia,serif}
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#faf6ef}
.clip{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px}
/* Paper texture overlay */
#root::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:10}
.wash{position:absolute;inset:0;opacity:0}
.text-layer{position:relative;z-index:5;text-align:center;max-width:900px}
.narration{font-size:42px;font-weight:300;line-height:1.6;color:#3a3530;letter-spacing:0.01em}
.scene-label{position:absolute;bottom:60px;left:80px;font-size:14px;color:#b0a898;letter-spacing:0.12em;text-transform:uppercase;z-index:5}
/* Scene 1 — pale blue wash */
#s1 .wash-bg{background:radial-gradient(ellipse at 30% 40%, rgba(176,196,222,0.35) 0%, transparent 60%), radial-gradient(ellipse at 70% 60%, rgba(210,185,170,0.2) 0%, transparent 50%)}
/* Scene 2 — warm rose wash */
#s2 .wash-bg{background:radial-gradient(ellipse at 40% 30%, rgba(222,176,180,0.3) 0%, transparent 55%), radial-gradient(ellipse at 65% 70%, rgba(190,200,220,0.25) 0%, transparent 50%)}
/* Scene 3 — green-gold wash */
#s3 .wash-bg{background:radial-gradient(ellipse at 50% 40%, rgba(180,200,170,0.3) 0%, transparent 60%), radial-gradient(ellipse at 30% 70%, rgba(220,200,160,0.25) 0%, transparent 45%)}
/* Scene 4 — deep violet wash */
#s4 .wash-bg{background:radial-gradient(ellipse at 45% 35%, rgba(170,160,200,0.35) 0%, transparent 55%), radial-gradient(ellipse at 70% 65%, rgba(200,180,190,0.2) 0%, transparent 50%)}
/* Scene 5 — full palette convergence */
#s5 .wash-bg{background:radial-gradient(ellipse at 35% 40%, rgba(176,196,222,0.25) 0%, transparent 50%), radial-gradient(ellipse at 60% 55%, rgba(222,176,180,0.2) 0%, transparent 45%), radial-gradient(ellipse at 50% 30%, rgba(180,200,170,0.2) 0%, transparent 50%)}
.brush-stroke{position:absolute;height:3px;border-radius:2px;opacity:0;z-index:4}
</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="main" data-start="0" data-width="1920" data-height="1080" data-duration="37">
<!-- Audio references -->
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
<audio id="voice-s2" src="audio/s2.wav" data-start="7"></audio>
<audio id="voice-s3" src="audio/s3.wav" data-start="15"></audio>
<audio id="voice-s4" src="audio/s4.wav" data-start="24"></audio>
<audio id="voice-s5" src="audio/s5.wav" data-start="32"></audio>
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
<!-- Scene 1 -->
<section id="s1" class="clip" data-start="0" data-duration="7" data-track-index="1">
<div class="wash wash-bg"></div>
<div class="brush-stroke stroke-1a" style="top:25%;left:10%;width:300px;background:rgba(176,196,222,0.4)"></div>
<div class="brush-stroke stroke-1b" style="top:60%;right:15%;width:250px;background:rgba(210,185,170,0.3)"></div>
<div class="text-layer">
<p class="narration">In early childhood education,<br/>we don't paint over what's already there.<br/><em>We let the wash settle.</em></p>
</div>
<span class="scene-label">I — The First Layer</span>
</section>
<!-- Scene 2 -->
<section id="s2" class="clip" data-start="7" data-duration="8" data-track-index="1">
<div class="wash wash-bg"></div>
<div class="brush-stroke stroke-2a" style="top:30%;left:20%;width:400px;background:rgba(222,176,180,0.35)"></div>
<div class="text-layer">
<p class="narration">Wet-on-wet watercolor teaches us<br/>that the first layer is never final.<br/><em>It breathes beneath everything that follows.</em></p>
</div>
<span class="scene-label">II — Wet on Wet</span>
</section>
<!-- Scene 3 -->
<section id="s3" class="clip" data-start="15" data-duration="9" data-track-index="1">
<div class="wash wash-bg"></div>
<div class="brush-stroke stroke-3a" style="top:20%;right:10%;width:350px;background:rgba(180,200,170,0.3)"></div>
<div class="text-layer">
<p class="narration">When a child tells their first story in circle,<br/>we listen like paper takes pigment —<br/><em>with an open surface, no corrections yet.</em></p>
</div>
<span class="scene-label">III — The Circle</span>
</section>
<!-- Scene 4 -->
<section id="s4" class="clip" data-start="24" data-duration="8" data-track-index="1">
<div class="wash wash-bg"></div>
<div class="brush-stroke stroke-4a" style="top:35%;left:15%;width:300px;background:rgba(170,160,200,0.3)"></div>
<div class="text-layer">
<p class="narration">The second wash deepens what the first revealed.<br/>In our classrooms,<br/><em>that's the question asked after the answer given.</em></p>
</div>
<span class="scene-label">IV — The Second Wash</span>
</section>
<!-- Scene 5 -->
<section id="s5" class="clip" data-start="32" data-duration="5" data-track-index="1">
<div class="wash wash-bg"></div>
<div class="text-layer">
<p class="narration"><em>Trust the paper. Trust the child.</em><br/>Let it dry before you add more.</p>
</div>
<span class="scene-label">V — Let It Dry</span>
</section>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// Scene 1 (0-7s)
tl.from("#s1 .wash-bg", { opacity: 0, duration: 3, ease: "power2.out" }, 0);
tl.to("#s1 .narration", { opacity: 1, y: 0, duration: 1.5, ease: "power2.out" }, 0.8);
tl.from(".stroke-1a", { x: -60, opacity: 0, duration: 2, ease: "power1.out" }, 0.3);
tl.from(".stroke-1b", { x: 60, opacity: 0, duration: 2, ease: "power1.out" }, 0.5);
// Scene 2 (7-15s)
tl.to("#s1 .narration", { opacity: 0, y: -20, duration: 0.8, ease: "power2.in" }, 6.2);
tl.from("#s2 .wash-bg", { opacity: 0, duration: 2.5, ease: "power2.out" }, 7);
tl.to("#s2 .narration", { opacity: 1, y: 0, duration: 1.5, ease: "power2.out" }, 7.8);
tl.from(".stroke-2a", { x: -80, opacity: 0, duration: 2.5, ease: "power1.out" }, 7.3);
// Scene 3 (15-24s)
tl.to("#s2 .narration", { opacity: 0, y: -20, duration: 0.8, ease: "power2.in" }, 14.2);
tl.from("#s3 .wash-bg", { opacity: 0, duration: 2.5, ease: "power2.out" }, 15);
tl.to("#s3 .narration", { opacity: 1, y: 0, duration: 1.5, ease: "power2.out" }, 15.8);
tl.from(".stroke-3a", { x: 80, opacity: 0, duration: 2.5, ease: "power1.out" }, 15.3);
// Scene 4 (24-32s)
tl.to("#s3 .narration", { opacity: 0, y: -20, duration: 0.8, ease: "power2.in" }, 23.2);
tl.from("#s4 .wash-bg", { opacity: 0, duration: 2.5, ease: "power2.out" }, 24);
tl.to("#s4 .narration", { opacity: 1, y: 0, duration: 1.5, ease: "power2.out" }, 24.8);
tl.from(".stroke-4a", { x: -60, opacity: 0, duration: 2, ease: "power1.out" }, 24.3);
// Scene 5 (32-37s)
tl.to("#s4 .narration", { opacity: 0, y: -20, duration: 0.8, ease: "power2.in" }, 31.2);
tl.from("#s5 .wash-bg", { opacity: 0, duration: 2, ease: "power2.out" }, 32);
tl.to("#s5 .narration", { opacity: 1, y: 0, duration: 1.5, ease: "power2.out" }, 32.8);
window.__timelines["main"] = tl;
</script>
</div>
</body></html>
Reference in New Issue View Git Blame Copy Permalink