NSFW Calisthenics

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<nobr>> <style> #story { margin: 1rem; } #passages { margin: 0; max-width: 100%; } .passage { text-align: left; text-align: center; width: 100%; } a { display: block; line-height: 1; } h1 { color:black; background: #eee; border-radius: 0.5rem; margin: 1.5rem auto; margin-top: 0; width: fit-content; padding: 0.5rem; } h1 span { color: #c50064; } .wrapper { display: flex; align-items: center; justify-content: space-evenly; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .wrapper img { max-height: 50vh; max-width: 90vw; } #college { min-width: min(390px, 95vw); } #extra { display: none; } @media screen and (min-width: 1160px) { .passage { text-align: center; } #extra { display: block; transform: scaleX(-1); } } @media screen and (max-width: 814px) { .wrapper img { max-height: 40vw !important; } } </style> <h1><span>NSFW</span> Calisthenics</h1> <div class="wrapper"> <img class="exercise" src="exercises.jpg" alt="a woodcut drawing of a bunch of burly topless men doing gymnastics exercises" /> <img id="college" src="calisthenics_college.jpg" alt="another woodcut, this time of a group of women in some sort of exercise yard outside, talking and doing calisthenics. There's a caption that says: Calisthenic college for lady muscular christians" /> <img class="exercise" src="exercises.jpg" alt="the same manly woodcut as the first picture" id="extra" style="transform: scaleX(-1);"/> </div> [[Begin|Intro]] <</nobr>>

We live in an topsy-turvy world. Billionaires get rich making deepfake AI bots while queer game devs get deplatformed. In <<nobr>> <<cycle "_unused">> <<option "white">> <<option "cis">> <<option "patriarchal">> <<option "boring">> <</cycle>> spaces, sex sells and intimacy is [[forbidden]]. <</nobr>>

Don't believe me? <<nobr>> Try talking with friends about your sex life <<cycle "_unused">> <<option "at work">> <<option "at school">> <<option "in any public space">> <</cycle>>. <</nobr>> You're lucky if you just get looks. It's Not-Safe-For-Work after all. Hell, for people raised masc, talking about one's sex life in any context is alien and uncomfortable, unless it's couched in jokes and [[conquest]].

The dominant culture has silenced this part of being human. They've replaced it with objectifying ads and "locker room talk". We need to reclaim our eroticism. We need to [[fight back]].

Enter <a target="_blank" href="https://theanarchistlibrary.org/library/james-c-scott-two-cheers-for-anarchism#:~:text=It surprised me how much I had to screw">anarchist calisthenics</a>: “Every day or so break some trivial law that makes no sense, even if it’s only jaywalking. Use your own head to judge whether a law is just or reasonable. That way, you’ll keep trim—and when the big day comes, you’ll be ready.” Except, instead of jaywalking, you're going to be writing about [[sexy stuff]].

The goal here is to stretch your erotic muscles, to scrape off some of that prudishness caked on your joints. I'll remind you that everything you do here is private. It stays on your own computer and won't get sent anywhere. You can turn off your WiFI and clear your cookies after to be sure. Now take a breath, and let's warm up with something [[small]].

<script> $(document).one(':passagedisplay', () => { const linkReplace = document.querySelector('.macro-linkreplace'); linkReplace.addEventListener('click', () => { const cycles = document.querySelectorAll('.macro-cycle'); for(const cycle of cycles) { cycle.addEventListener('click', (e) => { if (!window.feeling) { const node = Array.from(document.querySelector('.word-grid').childNodes).filter(x => x.tagName !== 'A').filter(x => !!(x.textContent.trim())); if (node && node.length) { window.feeling = node[0].textContent; if (window.feeling === "want") { window.feeling = "much want" } if (window.feeling === "aching") { window.feeling = "much ache" } } console.log(window.feeling); } }); } }); }); </script>Think back to an initmate moment you had, or have dreamed about having, a moment with a crush, or with a friend, or with a lover. <<linkreplace "Thinking about it?" t8n>>Now, click on any words this memory makes you feel. There's no wrong answers: <<nobr>> <br /> <div class="word-grid"> <<cycle "_unused" once>> <<option "warm      ">> <<option "warm      ">> <</cycle>> <<cycle "_unused" once>> <<option "flush         ">> <<option "flush         ">> <</cycle>> <<cycle "_unused" once>> <<option "tingly ">> <<option "tingly ">> <</cycle>> <<cycle "_unused" once>> <<option "       tight   ">> <<option "       tight   ">> <</cycle>> <<cycle "_unused" once>> <<option "aching  ">> <<option "aching  ">> <</cycle>> <<cycle "_unused" once>> <<option "hungry                ">> <<option "hungry                ">> <</cycle>> <<cycle "_unused" once>> <<option "    dizzy               ">> <<option "    dizzy               ">> <</cycle>> <<cycle "_unused" once>> <<option "frantic    ">> <<option "frantic    ">> <</cycle>> <<cycle "_unused" once>> <<option "              want">> <<option "              want">> <</cycle>> </div> <</nobr>> [[continue|medium]] <</linkreplace>>

Focus on how you feel while we make this a little more interactive. Cycle the links below until the stories feel right: <<nobr>> You <<cycle "_unused">> <<option "hold">> <<option "pull">> <<option "hug">> <</cycle>> <<cycle "_unused">> <<option "him">> <<option "her">> <<option "them">> <</cycle>> close to your <<cycle "_unused">> <<option "chest">> <<option "breasts">> <<option "lap">> <</cycle>>. <</nobr>> <<nobr>> <<cycle "_unused">> <<option "She">> <<option "He">> <<option "They">> <</cycle>> <<cycle "_unused">> <<option "leans">> <<option "bends">> <<option "stretches">> <</cycle>> over and <<cycle "_unused">> <<option "lowers">> <<option "raises">> <</cycle>> <<cycle "_unused">> <<option "her">> <<option "his">> <<option "their">> <</cycle>> lips to yours. <</nobr>> <<nobr>> <span class="first"> <<cycle "$firstPronoun">> <<option "You">> <<option "They">> <<option "He">> <<option "She">> <</cycle>> </span> <span class="verb"> <<cycle "$verb">> <<option "moan">> <<option "whimper">> <<option "growl">> <</cycle>> </span> as <span class="second"> <<cycle "$secondPronoun">> <<option "your">> <<option "their">> <<option "his">> <<option "her">> <</cycle>> </span> hand reaches under <<cycle "$secondPronoun">> <<option "your">> <<option "their">> <<option "his">> <<option "her">> <</cycle>> shirt. <</nobr>> <<nobr>> <<script>> $(document).one(':passagedisplay', () => { const pronounCycle = document.querySelector("#cycle-firstpronoun"); const verbCycle = document.querySelector("#cycle-verb"); function updateVerb() { const verb = document.querySelector('.verb a'); const pronoun = pronounCycle.innerText; const shouldBePlural = pronoun === "He" || pronoun === "She"; const isPlural = verb.innerText[verb.innerText.length - 1] === "s"; if (shouldBePlural && !isPlural) { verb.innerText = verb.innerText + 's'; return; } if (!shouldBePlural && isPlural) { verb.innerText = verb.innerText.substring(0, verb.innerText.length - 1); return; } } pronounCycle.addEventListener('click', updateVerb); verbCycle.addEventListener('click', updateVerb); }) <</script>> <</nobr>> [[continue|large]]

How're you feeling now? <<cycle "_unused">> <<option "Good?">> <<option "Warm?">> <<option "Aroused?">> <</cycle>> If those stories weren't perfect, that's ok, we can work on that. Because this time you're going to write [[your own]].

<<nobr>> <style> #story { height: calc(100dvh - 5em); } #passages { height: 100%; } .passage { height: 100%; display: flex; flex-direction: column; } textarea { height: 50vh; color: #FF8CC6; border: 1px solid #FF8CC6; min-width: 0; max-width: 95vw; } textarea:hover, textarea:focus { border: 1px solid #FF8CC6 !important; background: #262626 !important; } </style> <style> .passage-out + .passage { opacity: 0; } .passage { opacity: 1; } .passage-out :not(.remain) { opacity: 0; transition: opacity 0.5s ease; } .passage-out .remain::after { content: " ;)"; } </style> <script> $(document).one(':passagedisplay', () => { if (window.SugarCube && window.SugarCube.Config && window.SugarCube.Config.passages) { window.SugarCube.Config.passages.transitionOut = 2000; } if (window.feeling) { document.querySelector('.feeling').innerText = window.feeling + " it "; } const continueLink = document.querySelector('[data-passage="finish"]'); continueLink.style.display='none'; continueLink.classList.add('remain'); const continueSpan = document.createElement('span'); continueSpan.classList.add('continueSpan'); continueSpan.innerText = "write something"; const passage = document.querySelector('.passage'); passage.appendChild(continueSpan.cloneNode(true)); const textarea = document.querySelector('textarea'); textarea.value = ''; let prev = false; textarea.addEventListener('input', () => { const current = !!(textarea.value.trim()); if (prev != current) { if (textarea.value) { document.querySelector('.continueSpan').remove(); continueLink.style.display='block'; } else { continueLink.style.display='none'; passage.appendChild(continueSpan.cloneNode(true)); } } prev = current; }); }); </script> <span> Think back to that perfect moment from earlier.<br><br> Remember how <span class="feeling">it</span> made you feel. Nobody can see you.<br><br> In this textbox here, or on a piece of paper, let it out.<br><br> </span> <textarea> </textarea> <br> [[finish]] <</nobr>>

<style> .title { color:black; background: #eee; border-radius: 0.5rem; margin: 1.5rem auto; margin-top: 0; width: fit-content; padding: 0.5rem; } .title span { color: #c50064; } </style>Thank you for doing <span class="title"><span>NSFW</span> Calisthenics</span> with me. I hope you enjoyed this experience as much as I enjoyed making it! It was inspired by the late and great Philly <a href="https://www.instagram.com/sluttypoemsnight" target="_blank">Slutty Poems Night</a>. I've never made anything like this before, but this sort of thing means a lot to me. It's both fun and a way to fight back against all the bullshit. Stay weird and safe out there. <3 <a href="https://ragman.net" target="_blank">- ragman</a>