Digital Writing

<div id="content-container" style="position: relative; height: 100vh; overflow: hidden;"> <div id="buttery-smooth-paragraph" style="position: absolute; font-size: 20px; line-height: 1.8; color: #3C3633; padding: 20px; left: 10%; width: 80%; top: 20px; will-change: transform; transform: translateY(0); transform-style: preserve-3d; backface-visibility: hidden;"> <span style="display: block; margin-bottom: 15px;">On the first night in Calabria there is vomit. Before the vomit she talks at you in the language you have pretended to understand since the morning at the train station where they picked you up and tossed your bags into the back.</span> <span style="display: block; margin-bottom: 15px;">The couch is made of wooden pellets, covered in thin foam. Foam bubbles up and coats your tongue.</span> <span style="display: block; margin-bottom: 15px;">Before talk there is *sugo* and *melone* and *formaggio* sliced thinly and a bottle of homemade red wine.</span> <span style="display: block; margin-bottom: 15px;">You decline. You retract. You are drunk.</span> <span style="display: block; margin-bottom: 15px;">A woman working in the bar corrects your sentences. You repeat after her. Swirl the words around your mouth. Chew on them, swallow, but they come rising back up.</span> <span style="display: block; margin-bottom: 15px; text-align: center;">[[Bile tainted with red underlines.]]</span> </div> </div> <script> // FORCE prevent scrolling with high specificity document.body.style.setProperty('overflow', 'hidden', 'important'); document.documentElement.style.setProperty('overflow', 'hidden', 'important'); // Override passage-specific CSS that might interfere var passage = document.querySelector('tw-passage'); passage.style.setProperty('overflow', 'hidden', 'important'); passage.style.setProperty('padding-bottom', '0', 'important'); passage.style.setProperty('height', '100vh', 'important'); // Simply set background just for this passage document.querySelector('tw-story').style.backgroundImage = "url('images/sky2.jpg')"; document.querySelector('tw-story').style.backgroundSize = "cover"; document.querySelector('tw-story').style.backgroundPosition = "center"; document.querySelector('tw-story').style.backgroundAttachment = "fixed"; // Make sure passage has transparent background passage.style.backgroundColor = "transparent"; // Animation code - Use CSS animation instead of JavaScript var paragraph = document.getElementById('buttery-smooth-paragraph'); // Create CSS animation dynamically - much slower var style = document.createElement('style'); style.textContent = ` @keyframes slowRiseUp { 0% { transform: translateY(0px); } 100% { transform: translateY(-${window.innerHeight + 1500}px); } } #buttery-smooth-paragraph { animation: slowRiseUp 300s linear forwards !important; } `; document.head.appendChild(style); // Optional: Clean up scroll prevention when leaving passage window.addEventListener('beforeunload', function() { document.body.style.overflow = ''; document.documentElement.style.overflow = ''; }); </script>

(after: 5s)[(goto: "Intro")]