<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<audio "bg" volume 0.40>><<audio "mood" loop play>><style>
img {
max-width: 75%;
max-height: 75%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 30%;
position: absolute;
}
</style>
<div class="container">
<div>[img[https://clogosphere.neocities.org/if/motm/alchemist-bw1.gif][magic]]</div>
<div>[img[https://clogosphere.neocities.org/if/motm/alchemist-bw2.gif][ants]]</div>
<div>[img[https://clogosphere.neocities.org/if/motm/alchemist-bw3.gif][yeast]]</div>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<audio "intro" volume 0.75 fadeout>>
<<audio bg loop play>>
<style>
{
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
img {
border-radius: 2000px;
max-width: 75%;
max-height: 75%;
}
h1 {
position: absolute;
text-align: center;
height: 100%;
top: 40%;
width: 100%;
margin: 0 auto;
}
</style>
<div class="container">
<img src="https://clogosphere.neocities.org/if/motm/dim-chandelier.gif">
<h1><<cycle "$first">>
<<option "the chandelier" 2>>
<<option " in my parents' dining room" 3>>
<<option "carries a charmed memory" 4>>
<<option "it was salvaged" 5>>
<<option "by my father" 6>>
<<option "from the tiny apartment" 7>>
<<option "that he was forced to vacate" 8>>
<<option "in the late 1960s" 9>>
<<option "when" 10>>
<<option "as he liked to say"11>>
<<option "<em>[[the city urban-renewed me->dining]]</em>" 12>>
<</cycle>> </h1>
</div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@900&display=swap" rel="stylesheet">
Images can be put into cycles and other markup with proper formatting. This allows for new rhythms and visual interests alternating between text and image.
ex
[img[https://clogosphere.neocities.org/if/motm/chandelier-loop.gif]]
Think with Links! Text doesn't need to all be delivered at once. It is not automated alwasy, like cinema/animation and it doesn't need to be all at once like a book. It is interactive and if hooked thte invested reader will click along, participating in the rhythms that unfurl!!
--
poetics of links. pause different. Text interactive and on side column, a changing gif?
with linkreplace on text, and timed on gif
use css grid to put gif onto gif?
--
Credits plan-a:
<style>
.container {
display: flex;
justify-content: center;
position: relative;
top: auto;
}
img {
border-radius: 2000px;
}
</style>
<div class="container">
[img[https://clogosphere.neocities.org/if/motm/moon.gif][salvage]]</div>
<<endif>>
---
https://www.w3schools.com/cssref/tryit.php?filename=trycss_text-orientation
--
position on page in Twine is effected by space. Keep google fonts at bottom to not take up space on displayed passage
hasVisited useful for negotiating multiple choices<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
justify-content: center;
}
.item1 {
padding: 1em;
flex-basis: 75%;
}
.item2 {
padding: 1.2em;
flex-grow: 1;
}
.item3 {
flex-grow;
padding: 1em;
}
body {
margin: 0;
font-family: 'Sofia Sans', sans-serif;
font-size: 1em;
}
h1 {
font-size: 1.5em;
color: goldenrod;
}
</style>
<div class="container">
<div class="item1">[img["https://clogosphere.neocities.org/if/motm/gridle0.gif"]]</div>
<div class="item2"><<if not hasVisited ("choice")>><h1><<type 60ms>><b><em>Less culinary knowledge than chance operations, anything within view shimmered with possibility...</em></b><</type>></h1><<else>><h1><<type 60ms>><b><em>Prithee another?</em></b><</type>></h1><</if>></div>
<div class="item3">
<<if not hasVisited ("choice")>><<timed 7s t8n>>1) Type of Flavoring:
<<textbox "$item" "">>
2) Type of Beverage:
<<textbox "$item2" "">>
3) Type of Grain:
<<textbox "$item3" "">>
4) Type of Fruit:
<<textbox "$item4" "">>
When you're ready <b>[[mix these together|choice]]</b><</timed>><<else>><<timed 3s t8n>>1) Type of Flavoring:
<<textbox "$item" "">>
2) Type of Beverage:
<<textbox "$item2" "">>
3) Type of Grain:
<<textbox "$item3" "">>
4) Type of Fruit:
<<textbox "$item4" "">>
When you're ready <b>[[mix these together|choice]]</b><</timed>><</if>>
</div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@900&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
{
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
}
</style>
<div class="container">
<<timed 2s t8n>>A dollop of $item ?
<<next>> <em>ooh! interesting </em>
<<next>>a splash of $item2 ?
<<next 3s t8n>> <em>that's an idea!</em>
<<next>>a pinch of $item3 ?
<<next 3s t8n>> <em>hmm...</em>
<<next>> a handful of $item4 ?
<<next 4s t8n>> <em>curious and curiouser..</em>
<<next>><<if not hasVisited("ants")>>
<<goto "ants">>
<<elseif not hasVisited("magic")>>
<<goto "magic">>
<<elseif not hasVisited("yeast")>>
<<goto "yeast">>
<<elseif hasVisited("magic", "ants","yeast")>>
<<goto "trophy">>
<</if>>
<</timed>>
</div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@900&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<audio "mood" volume 0.40>><<audio bg loop play>><<set $with_history to 1>>
<style>
{
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
img {
border-radius: 2000px;
max-width: 75%;
max-height: 75%;
}
h1 {
position: absolute;
text-align: center;
height: 100%;
top: 20%;
width: 100%;
margin: 0 auto;
}
</style>
<div class="container">
<img src="https://clogosphere.neocities.org/if/motm/dim-chandelier.gif">
<h1><<set $with_history to 1>>
<<cycle "$first">>
<<option "with guests assembled" 3>>
<<option "we raise our glasses" 4>>
<<option "in anticipation" 5>>
<<option "of" 6>>
<<option "the customary incantation:" 7>>
<<option "<em>eat diehl pancakes</em>" 8>>
<<option "<em>then die</em>" 9>>
<<option "<em>life has nothing more for you</em>" 10>>
<<option "<<goto [[credits]]>>" 11>>
<</cycle>></h1>
</div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@900&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<audio "bg" stop>><style>
{
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
}
p {
position: absolute;
text-align: center;
height: 75%;
width: 75%;
margin: auto;
}
</style>
<div class="container">
<img src="https://clogosphere.neocities.org/if/motm/pamix2.gif"><p>
<<type 60ms start 2s>>Unlike the published histories and public spectacles of other conjurors in my family, my father was a private magician, an amateur alchemist who performed poetic rites in the kitchen. The pancake was his philosopher’s stone, a substance believed to wield great power for those who could master it.
Faithfully he relied on buckwheat to produce a rich texture and flavor.
[[He would also experiment->possibility]]<</type>></p>
</div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@900&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<audio "bg" stop>><style>
{
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
}
p {
position: absolute;
text-align: center;
height: 75%;
width: 75%;
margin: auto;
}
</style>
<div class="container">
<img src="https://clogosphere.neocities.org/if/motm/conjectures1.gif">
<p><<type 60ms start 2s>>That a pancake should never be twice flipped might solicit a demonstration. That pancakes should be served for dinner would be decried or defended
depending on the Germanophiles at the table.
When a syrup container was discovered to have been
occupied by a small colony of ants
suddenly tumbling to their fate on a hot stack of pancakes,
hearsay and conjecture
[[spread like wildfire.->possibility]]<</type>>
</p>
</div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@900&display=swap" rel="stylesheet">
<<audio "intro" play>>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<if $with_history eq 1>><h1><em>Mornings of the Magician</em> was written, designed, animated by Carl Diehl in 2017, then adapted for the web in 2023.</h1><p>Sources / Sorcerers:
<ul>
<li><em>The Pancake Bakery</em>, Pieter Aertsen (1560)</li>
<li><em>The PancakeCook</em>, Adriaan de Lelie, (c.1790-1810)</li>
<li><em>Trouble Comes to the Alchemist</em>, unknown, (17thc.)</li>
<li><em>The Pancake Maker</em>, Jan Miese Molenaar (1645)</li>
<li><em> An Alchemist in his Laboratory, </em>David Teniers (1660-70)</li>
<li><em>Woman Holding a Pancake</em>, Jan Van Bijlert (17thc.)</li>
<li><em>A Venetian Carnival Scene</em>, Frederik Van Valckenborch (17thc)</li>
<li>Ken Albala, <em> Pancakes: A Global History,</em> London, Reaktion, 2008</li>
<li>Carl Diehl & Nat Hawks audio-video mix at Signal Culture, 2015</li>
<li>Ed Diehl making pancakes, recorded by Carl Diehl, 2021</li>
<li>Margrit Diehl, interviewed by Carl Diehl, 2017</li>
<li>Heidi Diehl, interviewed by Carl Diehl, 2017</li>
</ul>In memory of John Dornfeld Diehl </p>
<a href="https://www.electronicelsewhere.com"> www.electronicelsewhere.com</a>
<style> p {
font-size: 16px;
color: wheat;
}
h1 {
font-size: 22px;
color: goldenrod;
}
a {
color: tan;
}
</style>
<<else>>
<style>
.container {
display: flex;
justify-content: center;
}
img {
border-radius: 2000px;
}
img {
opacity: 0.1;
}
img:hover {
opacity: 1.0;
}
</style>
<div class="container">
[img[https://clogosphere.neocities.org/if/motm/moon.gif][salvage]]</div>
<<endif>>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@900&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<audio "bg" stop>><style>
{
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
}
p {
position: absolute;
text-align: center;
height: 75%;
width: 75%;
margin: auto;
}
</style>
<div class="container">
<img src="https://clogosphere.neocities.org/if/motm/btr.gif">
<p><<type 60ms start 2s>>On Saturday mornings, my father worked out his secret formulas. With outlandish ingredients he managed to temporarily transmute his argumentative tenor into socially acceptable forms of puzzle and exchange.
Infamously, he once included a handful of brewer’s yeast in his recipe.
He revelled in delight as my mother, sister and I failed to determine that
he had included a dietary powder for house pets as
his [[secret ingredient->possibility]]<</type>>
</p>
</div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@900&display=swap" rel="stylesheet">
<<set $task to either("<em>ooh! interesting</em>", "<em>eureka!</em>","<em>hmm</em>", "<em>why not?</em>", "<em>splendid!</em>", "<em>that's an idea!</em>")>>
<<print $task>>
<table style="width: 838px;" border="0">
<tbody>
<tr>
<th colspan="2">
<h1><b><em>Mornings of the Magician</em> was written, designed, animated, and adapted for the web by Carl Diehl in 2017/2023.</b></h1></th>
<td style="width: 554.812px;">
<p> </p>
</td>
</tr>
<tr>
<td style="width: 268.388px;">Sources / Sorcerers:
<em>The Pancake Bakery</em>, Pieter Aertsen (1560)
<em>The PancakeCook</em>, Adriaan de Lelie, (c.1790-1810)
<em>Trouble Comes to the Alchemist</em>, unknown, (17thc.)
<em>The Pancake Maker</em>, Jan Miese Molenaar (1645)
<em> An Alchemist in his Laboratory, </em>David Teniers (1660-70)
<em>Woman Holding a Pancake</em>, Jan Van Bijlert (17thc.)
<em>A Venetian Carnival Scene</em>, Frederik Van Valckenborch (17thc)
Ken Albala, <em> Pancakes: A Global History, London, Reaktion, 2008
Carl Diehl & Nat Hawks audio-video mix at Signal Culture, 2015
Ed Diehl making pancakes, recorded by Carl Diehl, 2021
Margrit Diehl, interviewed by Carl Diehl, 2017
Heidi Diehl, interviewed by Carl Diehl, 2017
In memory of John Dornfeld Diehl</td>
<td style="width: 554.812px;">
<p>[img["https://clogosphere.neocities.org/if/motm/triangle.gif"]]</p>
</td>
</tr>
<tr>
<td style="width: 268.388px;">
<p> </p>
</td>
<td style="width: 554.812px;">
<p> </p>
</td>
</tr>
</tbody>
</table>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Sofia Sans', sans-serif;
font-size: 18px;
}
h1 {
font-size: 27px;
color: goldenrod;
}
</style>
<style>
text-align: left
</style>
<<else>>
<style>
.container {
display: flex;
justify-content: center;
}
img {
border-radius: 2000px;
}
</style>
<div class="container">
[img[https://clogosphere.neocities.org/if/motm/moon.gif][salvage]]</div>
<<endif>>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@900&display=swap" rel="stylesheet">
<<cacheaudio "intro" "https://ia902600.us.archive.org/16/items/motm-mood/motm-intro.mp3">>
<<cacheaudio "mood" "https://ia902600.us.archive.org/16/items/motm-mood/motm-mood.mp3">>
<<cacheaudio "bg" "https://ia902600.us.archive.org/16/items/motm-mood/motm-bg.mp3">>