Merge pull request #4 from com-480-data-visualization/v1

added wording changes to the website while also changing some of the intros

Author: charafkamel

src/scenes/climax.js

@@ -12,16 +12,14 @@ export function mountClimax(el, data) {
     <header class="scene__head">
       <h2 class="h1 fade-up delay-1">Your day spills from one barrel.</h2>
       <p class="lead fade-up delay-2">
-        Trace any of those ribbons far enough and it ends right here, in your
+        Follow any of those ribbons far enough and it ends right here, in your
         morning. The lid on your coffee. The road under the bus. The polyester in
         your jacket. The fuel that brought the jet down overhead. These aren&rsquo;t
-        metaphors: they are the cuts themselves, set down in the shapes of an
-        ordinary day. Sixteen of the things within arm&rsquo;s reach right now,
-        and every single one was poured from the same ${BARREL_LITRES} litres you
-        watched come out of the ground. Hover any object and a thread runs back to the cut it
-        was made from, until the whole grid reassembles into the one barrel it
-        always was. Your day looks fixed, settled, the same as ever, but the
-        barrel quietly feeding it has been changing all along.
+        metaphors: they are the cuts themselves, in the shape of an ordinary day.
+        Sixteen things within reach right now, and every one came from the same
+        ${BARREL_LITRES} litres you watched come out of the ground. Hover any
+        object and a thread runs back to the cut it was made from, until the whole
+        grid comes back together as the one barrel it always was.
       </p>
     </header>
 

src/scenes/counter.js

@@ -24,14 +24,14 @@ export function mountCounter(el, data) {
     <header class="scene__head">
       <h2 class="h1 fade-up delay-1">We burn it this fast.</h2>
       <p class="lead fade-up delay-2">
-        It isn&rsquo;t one barrel, of course. The slow tilt toward diesel happened across
-        a flood of them, and the flood never stops. While you&rsquo;ve been reading, the world
-        burned this many: <span class="num">${COUNTER_RATE_BPS.toLocaleString()}</span> barrels go up in flame
+        It isn&rsquo;t one barrel, of course. The slow shift toward diesel happened across
+        millions of them, and they keep coming. While you&rsquo;ve been reading, the world
+        kept burning: <span class="num">${COUNTER_RATE_BPS.toLocaleString()}</span> barrels
         <strong>every second</strong>, an Olympic pool every 13 seconds, a
         supertanker every 27 minutes. The counter below has been climbing since
-        the moment this page loaded, and it will not pause while you read on. Every
-        object you just traced back to its cut runs on the same supply chain: tankers
-        threading a few narrow straits. Which is exactly the chain that broke in 2026.
+        the moment this page loaded, and it won&rsquo;t stop while you read. Every
+        object you just traced runs on the same supply chain: tankers passing
+        through a few narrow straits. That is exactly the chain that broke in 2026.
       </p>
     </header>
 

src/scenes/crisis.js

@@ -37,12 +37,12 @@ export function mountCrisis(el, data) {
     <header class="scene__head">
       <h2 class="h1 fade-up delay-1">The line forks. <em>Three futures.</em></h2>
       <p class="lead fade-up delay-2">
-        All that demand rides on tankers funnelling through a handful of narrow
-        channels, and the narrowest is the Strait of Hormuz. On
-        <strong>28 February 2026</strong>, Iran closed it, triggering the biggest
+        All that demand moves on tankers passing through a few narrow channels,
+        and the narrowest is the Strait of Hormuz. On
+        <strong>28 February 2026</strong>, Iran closed it, setting off the biggest
         oil-market shock since COVID. Up to that point, history is a single line.
-        From the fork, it splits into <strong>three</strong>: the IEA expects the year to
-        contract, OPEC insists the boom rolls on, and the EIA threads the gap between them.
+        After the fork, it splits into <strong>three</strong>: the IEA expects the year to
+        shrink, OPEC says the growth continues, and the EIA sits between them.
         Hover a forecast, follow it to 2027, and pick whichever future you believe.
       </p>
     </header>
@@ -66,11 +66,11 @@ export function mountCrisis(el, data) {
       </div>
       <p class="s-crisis__takeaway fade-up delay-4">
         Here is the quiet part. Three agencies pulling in three directions, and all
-        three forecasts together span just <strong>1.6%</strong> of world demand,
-        about <em>five times smaller</em> than the silent
-        <strong>${DIESEL_DELTA_PP.toFixed(1)}-point</strong> drift diesel made over three
-        decades, the slow tilt hidden in the barrel you scrubbed through earlier.
-        The dramatic crisis barely moves the barrel; the slow drift quietly remade it.
+        three forecasts together cover just <strong>1.6%</strong> of world demand,
+        about <em>five times smaller</em> than the quiet
+        <strong>${DIESEL_DELTA_PP.toFixed(1)}-point</strong> shift diesel made over three
+        decades, the slow change hidden in the barrel you scrubbed through earlier.
+        The crisis barely moves the barrel; the slow shift is what remade it.
         The chart forks. <strong>Your day doesn&rsquo;t.</strong>
         Whichever future wins, the next barrel is already on a tanker,
         and every cut still has your name on it.

src/scenes/extraction.js

@@ -21,16 +21,15 @@ export function mountExtraction(el, _data, scrollToScene) {
     <header class="scene__head">
       <h2 class="h1 fade-up delay-1">First, <em>lift it out of the ground</em>.</h2>
       <p class="lead fade-up delay-2">
-        Before it is fuel, before it is anything, the barrel is just crude,
-        thick, sulphur-dark oil locked in porous rock a kilometre and a half down,
-        pressed there over millions of years. It does not gush out on its own. A
-        pump-jack nods day and night, leaning into the well and lifting only a few
-        litres with every patient stroke, and a pipeline ferries the catch across
-        the dark to the refinery waiting on the horizon. Lean on it yourself: about
+        Before it is fuel, before it is anything, the barrel is just crude oil:
+        thick and dark, trapped in rock about a kilometre and a half underground
+        for millions of years. It does not come up on its own. A pump works the
+        well day and night, lifting only a few litres at a time, and a pipeline
+        carries it to the refinery. Try it yourself: about
         <span class="num">${STROKES_TO_UNLOCK}</span> strokes fill the tank,
         roughly one barrel, <span class="num">${BARREL_LITRES}</span> litres of
-        raw oil. That is the whole of what you have. Now send it down the line, to
-        the heat that will split it apart.
+        raw oil. That is everything you have to work with. Now send it down the
+        line, to the heat that splits it apart.
       </p>
     </header>
 

src/scenes/refinery.js

@@ -15,15 +15,13 @@ export function mountRefinery(el, data) {
     <header class="scene__head">
       <h2 class="h1 fade-up delay-1">Heat <em>splits</em> the barrel.</h2>
       <p class="lead fade-up delay-2">
-        The crude you just lifted arrives here as one dark, undivided liquid,
-        and the refinery&rsquo;s job is to take it apart. Heat the barrel to
-        <span class="num">370 °C</span> and it stops being a single thing. The
-        lightest molecules boil off first and float to the top of the column; the
-        heaviest never lift at all and settle as residue at the bottom. Crack even
-        that residue back into lighter fuel and you gain volume on the way through:
+        The crude you just lifted arrives as one dark liquid, and the refinery
+        takes it apart. Heat it to <span class="num">370 °C</span> and it stops
+        being a single thing: the lightest molecules boil off first and rise to
+        the top of the column, while the heaviest stay at the bottom as residue.
+        Crack that residue back into lighter fuel and you even gain a little
+        volume on the way through:
         <strong>100 litres in leave as ${(100 + PROCESSING_GAIN_PCT).toFixed(1)}</strong>.
-        Ten distinct cuts now wait at ten different heights, and each one is
-        about to go its own way.
       </p>
     </header>
 

src/scenes/sankey.js

@@ -125,17 +125,16 @@ export function mountSankey(el, data) {
     <header class="scene__head">
       <h2 class="h1 fade-up delay-1">Most of your barrel becomes a road.</h2>
       <p class="lead fade-up delay-2">
-        Now the barrel is ten separate cuts, and each one leaves through a
-        different door. Watch where they go: the heaviest current runs straight
-        into the ground beneath you, because road transport alone swallows
-        <strong id="sankeyRoadPct">${roadPctAt(initialYear).toFixed(0)}%</strong> of refined output,
-        fuel for the cars, trucks and buses, plus the asphalt they roll on.
-        Aviation, shipping and industry split most of what is left, and a quiet
-        trickle peels off toward plastics and lubricants. Every ribbon below is
-        one cut feeding one use, drawn exactly as thick as the slice of the
-        barrel it carries. And the split isn&rsquo;t frozen:
+        Now the barrel is ten separate cuts, and each one goes somewhere
+        different. Most of it ends up under your feet: road transport alone takes
+        <strong id="sankeyRoadPct">${roadPctAt(initialYear).toFixed(0)}%</strong> of what the refinery makes,
+        the fuel for cars, trucks and buses, plus the asphalt they drive on.
+        Aviation, shipping and industry share most of the rest, and a small part
+        goes to plastics and lubricants. Each ribbon below is one cut feeding one
+        use, drawn as thick as the share of the barrel it carries. And the split
+        changes over time:
         <strong>drag the year back to ${startYear}</strong> and watch the diesel
-        ribbon thin while the rest of the barrel rearranges around it.
+        ribbon get thinner as the rest of the barrel shifts around it.
       </p>
     </header>
     <div class="scene__chart">