A short visual essay on texture and patience, photographed across two winters in northern light.
// Mechanisme: gallery-clip-wipe-grid-editorial import gsap from 'https://esm.sh/[email protected]'; import { ScrollTrigger } from 'https://esm.sh/[email protected]/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; gsap.set('.cwe-tile', { clipPath: 'inset(0 0 0 100%)' }); ScrollTrigger.batch('.cwe-tile', { start: 'top 92%', onEnter: batch => gsap.to(batch, { clipPath: 'inset(0 0 0 0)', duration: 1.4, ease: 'expo.out', stagger: 0.1 }), });
<!-- Skeleton: gallery-clip-wipe-grid-editorial -->
<section class="cwe">
<div class="cwe__intro">
<span class="cwe__chap">— Chapter III</span>
<h2 class="cwe__title">Quiet <em>materials</em></h2>
<p class="cwe__lede">A short visual essay...</p>
</div>
<div class="cwe__grid">
<figure class="cwe-tile cwe-tile--lg">
<div class="cwe-tile__img"></div>
<figcaption><em>Atelier Nord</em> — March</figcaption>
</figure>
</div>
</section> /* Styling: gallery-clip-wipe-grid-editorial */
:root {
--cwe-paper: #F4F1EB;
--cwe-ink: #1B1A17;
}
.cwe { background: var(--cwe-paper); font-family: 'Fraunces', serif; }
.cwe__title em { font-style: italic; font-weight: 300; }
.cwe-tile figcaption { font-style: italic; }