-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
232 lines (217 loc) · 9.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
<title>Alanis Morissette's "Ironic", Explained</title>
<meta name="description" content="A 3D immersive journey to help you understand the irony (and lack of irony) in Alanis Morissette's iconic "Ironic" song.">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="manifest" href="/favicons/site.webmanifest">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="theme-color" content="#ffffff">
<meta property="og:image" content="https://ironicalanis.com/assets/images/social/ironic-og.jpg">
<meta property="og:title" content="Alanis Morissette's "Ironic", Explained in 3D">
<!-- Loading styles (embedded to ensure they take effect immediately). -->
<style>
:where(.ironies) {
position: absolute;
right: -100vw;
width: 0;
}
video {
position: absolute;
z-index: -2;
}
body {
background: #000;
overflow: hidden;
}
.loading {
position: absolute;
color: #fff;
left: 50%;
top: 50%;
font-size: 15vw;
font-weight: bold;
transform: translate(-50%, -50%);
z-index: -1;
}
</style>
</head>
<body>
<section class="loading">
Loading...
</section>
<video playsinline loop>
<source src="assets/Alanis_Morissette_Ironic.mp4" type="video/mp4">
</video>
<section class="ironies">
<!-- Irony: Lottery Death. -->
<article class="irony irony--ironic" data-js-irony="money">
<h1><span class="sr-only">Lottery Death (Ironic)</span></h1>
<blockquote>
An old man turned 98.<br>
He won the lottery and died the next day.
</blockquote>
<p>
Since you would expect somebody who just won the lottery to enjoy their winnings for some amount of time,
it is unexpected and striking that instead he should die before getting the chance to,
making this lyric <strong>ironic</strong>.
</p>
<p>
The initial mention of the man being "old" and "98" does somewhat diminish the expectation,
but it could also be seen from the perspective that he finally got something good after waiting
patiently for so long, and thus could even be taken as ironic from this perspective.
</p>
</article>
<!-- Irony: Fly in Chardonnay. -->
<article class="irony irony--not-ironic" data-js-irony="drink">
<h1><span class="sr-only">Fly in Chardonnay (Not Ironic)</span></h1>
<blockquote>
It's a black fly in your Chardonnay.
</blockquote>
<p>
This is just an unfortunate occurrence that is somewhat common.
There is even a related cliché ("you catch more flies with honey than with vinegar"). <strong>Not ironic</strong>.
</p>
</article>
<!-- Irony: Death Row Pardon. -->
<article class="irony irony--ironic" data-js-irony="clock">
<h1><span class="sr-only">Death Row Pardon (Ironic)</span></h1>
<blockquote>
It's a death row pardon two minutes too late.
</blockquote>
<p>
Clearly <strong>ironic</strong>. You would expect a pardon to occur before the sentence is carried out.
The tragic consequences make it more striking.
</p>
</article>
<!-- Irony: Wedding Rain. -->
<article class="irony irony--not-ironic" data-js-irony="ring">
<h1><span class="sr-only">Rain on Your Wedding Day (Not Ironic)</span></h1>
<blockquote>
It's like Rainn on your wedding day.
</blockquote>
<p>
While some might see the juxtaposition of what should be your happiest day being ruined as ironic,
the truth is that rain on a wedding day is a commonplace occurrence, and so is more just unfortunate
and <strong>not ironic</strong>.
</p>
</article>
<!-- Irony: Free Ride. -->
<article class="irony irony--ironic" data-js-irony="coin">
<h1><span class="sr-only">Free Ride (Ironic)</span></h1>
<blockquote>
It's a free ride when you've already paid.
</blockquote>
<p>
This is technically <strong>ironic</strong>. A bit like being pardoned (aka, given a free ride) two minutes too late
(aka, already paid). That the stakes are so seemingly low is what makes this feel not ironic.
</p>
</article>
<!-- Irony: Good Advice. -->
<article class="irony irony--not-ironic" data-js-irony="advice">
<h1><span class="sr-only">Good Advice (Not Ironic)</span></h1>
<blockquote>
It's the good advice that you just didn't take.
</blockquote>
<p>
People often don’t take advice they are given, so this is just unfortunate. <strong>Not ironic</strong>.
</p>
</article>
<!-- Irony: No Smoking. -->
<article class="irony irony--not-ironic" data-js-irony="no">
<h1><span class="sr-only">No Smoking (Not Ironic)</span></h1>
<blockquote>
A no-smoking sign on your cigarette break.
</blockquote>
<p>
No-smoking signs are common and nothing here suggests we should have expected otherwise,
so this is just unfortunate and <strong>not ironic</strong>.
</p>
</article>
<!-- Irony: Plane Crash. -->
<article class="irony irony--ironic" data-js-irony="plane">
<h1><span class="sr-only">Plane Crash (Ironic)</span></h1>
<blockquote>
Mr. Play It Safe was afraid to fly.<br>
He packed his suitcase and kissed his kids goodbye.<br>
He waited his whole damn life to take that flight.<br>
And as the plane crashed down, he thought,<br>
"Well, isn't this nice?"
</blockquote>
<p>
Since they are mockingly referred to by a name that implies they are being overly cautious,
and you generally expect planes to not crash, it is <strong>ironic</strong> that somebody finally taking a flight
should be involved in a crash, especially given it was their first flight.
</p>
<p>
The last phrase is also an example of sarcasm, which is a type of verbal irony
(in contrast to the situational irony most of the song is seemingly incorporating).
</p>
</article>
<!-- Irony: Traffic Jam. -->
<article class="irony irony--not-ironic" data-js-irony="car">
<h1><span class="sr-only">Traffic Jam (Not Ironic)</span></h1>
<blockquote>
A traffic jam when you're already late.
</blockquote>
<p>
This is a common occurrence, so is generally expected. Given that it is not counter to expectations,
it is <strong>not ironic</strong>.
</p>
</article>
<!-- Irony: Spoon. -->
<article class="irony irony--ironic" data-js-irony="spoon">
<h1><span class="sr-only">10,000 Spoons (Ironic)</span></h1>
<blockquote>
It's like ten thousand spoons when all you need is a knife.
</blockquote>
<p>
This would generally be seen as <strong>ironic</strong>, as in most cases utensils of different types are mixed together,
so it is both unfortunate and surprising that there are so many spoons, and yet no knives in close proximity.
</p>
<p>
There could be exceptions, such as being at a spoon factory, and indeed,
it’s hard to imagine where else you would find so many spoons in one place.
Even so, the visual of how utensils are mixed will likely be more common.
</p>
</article>
<!-- Irony: Man of Dreams. -->
<article class="irony irony--not-ironic" data-js-irony="dreams">
<h1><span class="sr-only">Man of My Dreams (Not Ironic)</span></h1>
<blockquote>
It's meeting the man of my dreams.<br>
And then meeting his beautiful wife.
</blockquote>
<p>
Since it is common for people others find attractive to be partnered already, this seems more unfortunate than ironic.
</p>
<p>
It could be viewed as ironic given the connotations of "man of my dreams",
as this generally implies the man in question is available.
However, the subtlety of this connotation is counter to how irony is generally
a more stark contrast of expectations, making this <strong>not ironic</strong>.
</p>
</article>
<!-- "Click Me!" -->
<article class="irony" data-js-irony="click-me">
<h1>Clicking Ironies</h1>
<p>
Each irony that moves down the screen is clickable and explains why a portion of the song is
or isn't ironic.
</p>
<p>
The song loops, so click at your own pace.
</p>
</article>
</section>
<section class="author">
By <a title="Nicholas Westby's LinkedIn" class="author-link" href="https://www.linkedin.com/in/csharply/" target="_blank">Nick</a>
</section>
<script src="/src/main.ts" type="module"></script>
</body>
</html>