Archive of Our Own ^beta

 ワ0ﾊ"ナ  d↋́テ4̀   ‹ц 
 DON'T  DÉJÀ   VU 

“Your scientists were so preoccupied with whether they could, they didn't stop to think if they should.”

— Ian Malcolm, Jurassic Park, 1993

Preamble  ^{Contents ↑}

As mentioned in the Summary, a dynamic font could be faked nicely with .gifs, but you can't (by TOS) use Java on AO3, so an actually dynamic font seems a little out of reach for now.  (And yes: AO3 can run Doom, complete with a phenomenal soundtrack, if you hit the little speaker icon in it!  [audio wasn't working on 01 Oct 2023, and the source URL showed a message stating “The item is not available due to issues with the item's content.”, though comment history indicates that it had still been running in May; still same on 04 Oct, so I left a comment for the author.  Soundtrack is G2G again].  NB: due to traffic rates, the game can be a bit slow sometimes, so you might need to try again later.)  OTOH, for those of you interested for research or anywhere that does permit Java (etc.), there are some animated forms' info available out there (e.g.: a nice one on github with a whole bunch of related ones, a generic char set and one that rains Cyrillic, another that might use “random Chinese characters” (it seems incomplete with that section being only var text = english[Math.floor(Math.random()*english.length)]; [cf. ~1/6 down ycombinator 32950408], which suspicion seems backed up by a case in CodePen, but I don't speak Java), and there are others, of course.

Four nights back, I got to messing a little with Zalgo, for a friend's fic — Ella, I'm looking at you and your Amigops / Fleshbirds (subscribers needn't worry: I had already finished the offline material for the upcoming overwrite of the Peach/Zelda & Sonic I am Legion, and was toying with the idea of a tiny splash of Zalgo anyway for one of the later Snoopy Presents fics [yes, this one would be the  Night of the Living Dead  episode {correction: The Thing},  two  three fics after the upcoming Nightmare on Elm Street episode, but... ADHD — and I promise that I'm already working on that one, not ignoring it]).  Yes, Zalgo can be copied and pasted into an AO3 fic, but no, Zalgo isn't an actual font in the usual sense.  It's a bunch of diacritics piled above and/or below whatever you write, and can reach into the thousands; this is usually done with an online generator (and there are many at the drop of a hat by a Google search, not to mention places through which to de-obfuscate the Zalgo mess in order to read whatever it says beneath the ascending / descending pile(s) of diacritics), but with some finagling, you could do the same thing manually (though please trust me: diacritics can be... touchy sometimes).  Nonetheless, I got hyperfocused and pursued the question of using the Zalgo concept to generate the Green Rain symbols from The Matrix — could was a given, and I didn't bother asking myself if I should...

In case you've never seen Zalgo before, here's an example:

  Z̶̮̮͖̰̪͖̦̖̎̑̚͜a̷̡̠̥̟͉̦͍̥̥̞͓̖̤̬̔̀̔̊̈́l̷̡̪̤̩̪̥̗̘͖̥͑̌̑̋͌̐͐͌̔͛͝͝ğ̸̳͖̞͕̳͖̟͕̜͆̌̔͘͘͠o̷̬͇̗̘͕͎̗̎̅̇͒̃̕͝

Funny thing about Zalgo... if used in comments, as in this instance over in R3DLEMONADE's testing fonts/colours/text, it can (if one uses tall enough ascending and descending piles of diacritics) extend into the other comments above and below the one in which it was used (and even on up into the edit field, though I haven't experimented with ways to cause it to be in front of the footer).
  The [bottom] pile disappears behind the grey-backgrounded comments below it (the top pile goes in front of all comments above it), whether they're yours or someone else's (depending upon viewing the thread that the comment is part of vs. viewing all comment threads) when zoomed out to a low enough zoom percentage (depending upon how long the pile is).  I wonder if I could do something with that, applying a z-index from #workskin ~ #feedback or some declaration in a rule like #workskin [title='zalgo_index'], so that the diacritic pile would then remain visible in front of the footer; it does cross in front of the comments in the regular non-replying view, but if it were the 20th reply to the 20th comment, then any further comments or replies would necessarily appear on their own continued-thread page, and so the z-index could then remain visibly in front of the footer... maybe.

Comparison pics  ^{Contents ↑}

So, we know what the goal is, and I have to say that my execution falls a bit short in practice, but it does show proof of concept, so I'm happy.  Maybe you can do some CSS magic and make it really shine, or it could be of use as-is as just a little touch in the header of a fic (with only a little modification, it could be turned ASCII art of tassels, holiday decorations, ticker tape and confetti, etc., esp. if using a dogpile of diacritics, Zalgo-style [not to be confused with Gangnam style or Klingon style]).

You've never... watched... The Matrix?  OK... so... TL;DR: cool cyberpunk f/x, shown below (attributed by Wikipedia to CC0 Public Domain):

(open image in new tab to zoom)

My rather less ambitious STATIC rendition appears below (if you have creator's style turned on, then you can already see the DYNAMIC update's results behind what you're reading right now):

(open image in new tab to zoom)

Being a bit primitive in this form, it's perhaps best for a simple decorative touch at the top of a chapter.

CSS work skin rules  ^{Contents ↑}

Here's the code for the STATIC first run (and if you don't know what to do with this, I have you covered in my tutorial: just click here and you'll be in the section of my fonts tutorial where you can learn what to do with a work skin rule) — the DYNAMIC update has its own section at the end:

#workskin .matrix-trail {
  background-color: #ececec99;
  /* See final thoughts' second item re. adjusting this to a more-Matrix-like gradient */
}

#workskin .matrix-3 {
  color: rgb(1, 132, 1);
}

#workskin .matrix-2 {
  color: rgb(0, 246, 0);
}

#workskin .matrix-1 {
  color: rgb(104, 252, 104);
}

#workskin .matrix-start {
  color: rgb(157, 219, 255);
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.9);
}

Making it all work  ^{Contents ↑}

Now for the “fun” part: that's not a magical wand.  It won't make a bunch of symbols show up beneath (or above) some words.  You could make it do so, but each case would be so strongly a custom situation that there would be no point.

The official Green Rain is a random bunch of letters, numbers, hiragana, katakana, kanji, mirrored half-glyphs, etc..  I kept it simple and chose just to write a few real words in my example (easier than random glyphs, more appealing to me conceptually, avoids risk of inadvertently writing anything offensive... and I get to indulge in some limited food porn there).

You'll notice that in my picture, the first one shows grey streaks above the falling words?  I figure that it's a safer choice than forcing the page to go black (cute effect, but possibly too high a risk of readers disabling the style).  You might also notice that there are three pics there: the first one (L/H/S) shows how it should come out, if the Gremlins permit it; the second (center) shows what happens if webkit fails; the third (R/H/S) shows the results with creator's style turned off (the bold face of the bottommost glyphs was just standard HTML <b> bold tagging, not part of the CSS, so that it would remain even if all else failed — it's intended to draw the eye as a cue to start reading from those upward, in case the bright-yellowtrailers aren't enough of a hint).

Read the work skin rules there; notice their names? .matrix-trail, .matrix-3, .matrix-2, .matrix-1, and .matrix-start.  Since the glyphs are meant to rain downward and leave a trail behind/above them, I put the rules in reverse order (which has zero effect on their execution) of what you might normally think of (where you'd probably start with the one named “start”).  The rules' names are meant to be intuitive:

• the trailers trail along behind the falling glyphs (leaving a trace, but that term is too ambiguous);
• the numbered rules, from 3 through 1, are for the glyphs in the middle;
• the start rule is for the glyph that starts your string of falling glyphs, the one at the bottom.

From the starter glyph, you read upward to the 1, 2, and 3 rules and apply them to the starting glyph [of each column], and then to the first following glyph(s), then the next [few] after that, and finally the last [one or more]; rinse and repeat for all other columns.  I don't apply any color to the leading empty space, but the trailing blanks are filled with  s (in order to keep the empty space the same width as the other glyphs), so I spanned them [in the fic's HTML editing window] with the trailing rule's CSS selector thus: <span class="matrix-trail">&emsp;</span>.

Now you just need to pick some glyphs and arrange them in vertical strings.  I chose sushi, in keeping with the green rain's partly apocryphal origin story (granted, risotto was atypical of the sushi joints that I haunted in Japan, but cappuccino  was usually   sometimes available  could be had in some places; sake... not so much unless you were at a karaoke place that happened to have sushi on the menu):

ikura いくら
nishin [herring] ニシン
risotto リゾット
cappuccino カプチーノ
osake お酒
unagi うなぎ

but that list turned out to be too wide — although that's six words, to match the six letters of “Matrix” (simply because I used that word as my example; a longer or shorter word would obviously have other than six letters in it, and so I'd've chosen other than six words... only to find the same basic problem), those glyphs are about one   wide, so I opted to keep only the ikura, unagi, and osake.

I'm writing in English, which is left-to-right, not vertical.  Whether you choose to write top-to-bottom (the usual way) or bottom-to-top (as I did, though only in order to reflect that the beginning of the word is the raindrop, as it were), you'll need to play around with the arrangement some:

1. first, number your glyphs, so that you don't lose track while you transfer them (unless you can read your glyphs well enough not to need this);
2. second, get the glyphs arranged vertically, period;
3. third, move them down however far you wish per column, and replace the now-missing glyphs with  ;

For demonstration purposes, I'll use the original list of six items, to make each step's results clearer (with the top row boldfaced only to draw attention to the mechanic when we go to the next illustration, rather than being part of the actual rainfall):

Sい1く2ら
Sニ1シ2ン
Sリ1ゾ2ッ3ト
Sカ1プ2チ3ー3ノ
Sお1酒
Sう1な2ぎ

Next, we'll rotate the matrix one quarter turn counterclockwise (and for once, the mathematically valid term “matrix” is used unironically in context of the movie series), so that the rows become columns and start with the last glyph first (seriously, this was so much easier to do in a spreadsheet!), with what had been the boldfaced top row now becoming a boldfaced left-hand column (again, boldfacing here only to draw attention to the mechanic, and not intended to be part of the actual rainfall):

2ら 2ン 3ト 3ノ 1酒 2ぎ
1く 1シ 2ッ 3ー Sお 1な
Sい Sニ 1ゾ 2チ .  Sう
.  .   Sリ 1プ .  .
.  .  .   Sカ .  .

Alright, I'll leave the blockquote version there, for those who prefer it, since that's how that same vertical arrangement might reasonably look if you were writing it out by hand on paper, or scribbling it in a .txt or .doc/.odt, but here's a more user-friendly layout, as it would appear in .xls (within the limitations of simple HTML, since I really don't want to go OTT):

...and here's a .png of the way that I did it much more quickly in my actual spreadsheet.  The top matrix is just a left-to-right reading of the hiragana.  I colored in the top row (ikura) in order to make it obvious when you see it as the left column in the bottom matrix.  Notice how that first glyph is in blue instead of green, in the top one?  When I pasted the cells into their new arrangement, I started by copying each row from right to left and pasting them from top to bottom, so that top matrix's top row's first glyph in blue is now the bottom matrix's left column's last (bottom-most) glyph.  Once you've done this, it's a simple matter of just shifting each column down a cell or three to add the different length trailers of grey:

(open image in new tab to zoom)

Adding the rules (no spaces between the glyph columns in this example [though please note that in this case, I've introduced some blank rows to what you're shown in order make clear where each line of HTML and CSS ends before beginning the next one, since it could otherwise be a jumbled mess trying to read it if you're on a small screen]), we get...

Matrix<br />
 
<span class="matrix-2">らン</span><span class="matrix-3">トノ</span><span class="matrix-1">酒</span><span class="matrix-2">ぎ</span><br />
 
<span class="matrix-1">くシ</span><span class="matrix-2">ッ</span><span class="matrix-3">ー</span><span class="matrix-start">お</span><span class="matrix-1">な</span><br />
 
<span class="matrix-start">いニ</span><span class="matrix-1">ゾ</span><span class="matrix-2">チ</span>&emsp;<span class="matrix-start">う</span><br />
 
&emsp;&emsp;<span class="matrix-start">リ</span><span class="matrix-1">プ</span>&emsp;&emsp;<br />
 
&emsp;&emsp;&emsp;<span class="matrix-start">カ</span>&emsp;&emsp;

I'm not thrilled with some of the effects (color 3 might need to be a bit lighter, and possibly softer, and I think that the exact shades of colors 1 and 2 are too similar [1 should be lighter, 2 darker, maybe a little of each]), but here's what you get with that:

Matrix
らントノ酒ぎ
くシッーおな
いニゾチ う
  リプ  
   カ  

Or the shorter (and I think prettier) version that I used in the pic, where the green rain was the same width as the header, but this time (where the glyphs' CSS selectors might not clutter things so badly that the trails' CSS selectors get lost in the shuffle) with the grey trailers added — first just a blockquote of the raw HTML with the spaces' CSS selectors included, and then the execution of the same, to show it in action:

Matrix<br />
 
<span class="matrix-trail">&emsp;</span><span class="matrix-2">ぎ</span><span class="matrix-trail">&emsp;</span><br />
 
<span class="matrix-2">ら</span><span class="matrix-1">な</span><span class="matrix-trail">&emsp;</span><br />
 
<span class="matrix-1">く</span><b><span class="matrix-start">う</span></b><span class="matrix-trail">&emsp;</span><br />
 
<b><span class="matrix-start">い</span></b>&emsp;<span class="matrix-1">酒</span><br />
 
&emsp;&emsp;<b><span class="matrix-start">お</span></b>

Matrix
 ぎ 
らな 
くう 
い 酒
  お

NB:  If the work skin [for this fic or any other] was stripped by downloading so that you can't see either of the above examples, then please see my fonts tutorial's sub-section on re-inserting rules (tutorial also covers how to view fics' work skin rules and more).

Matrix glitch  ^{Contents ↑}

KEYNOTE, if you get a glitch in your Matrix:

What was really perplexing was that if you leave out the bold <b> HTML tag, you get a very different result.  OK, actually, the exact result is still perplexing to me, since I imagine that leaving it out should look a little different from the way that it actually does, but the point is that I had goofed and left them out in that first (wider) example, which brings to my attention (and hence yours, too, now) that sometimes a little glitch can go very oddly.

Here's the planned sequence of fails:

1. With the webkit declarations in place in your matrix-start rule, and the bold tag around your glyph's span, you get the intended clean and crisp hollow glyph with a shadow around it, as you saw in the demonstration above: カ.
2. Assuming webkit failure, but permitting creator's style (the remaining CSS), and keeping the bold tag, the glyph gets blurry, indistinct: カ.
   
3. Removing creator's style (no CSS at all), leaving only the bold HTML: カ.
   

Now for un-planned failures:

1. With the webkit declarations in place in your matrix-start rule, but now forgetting the bold tags around the glyph, we find a filled-in looking glyph (even though the webkit rule is still there, and the glyph is still hollow, it looks filled unless you're zoomed-in), as shown here: カ;
   • note that this fail, at least, can be minimized by including in your CSS rule (for starting glyphs, the actual raindrops themselves) an automatic boldfacing to the effect of font-weight: bold; (though you'll still want to hardcode the boldfacing into the HTML against events of CSS failure, of course).
     
2. Assuming webkit failure again, in addition to having forgotten the bold tag, though with creator's style still enabled (the remaining CSS), the glyph is the same blurry and indistinct thing again (though I think that it appears to be very slightly different from the earlier case, at least on my browser, side-by-side zoomed-in views make it clear that there's no difference): カ.
   
3. Removing creator's style (no CSS at all) and forgetting the bold HTML, the glyph is rendered normally: カ.
   

(open image in new tab to zoom)

Always read each tiny bit of code as if it's your first time.  Had I gone looking to fix this by way of shotgun maintenance from the hip, I'd've figured it to be a problem with the shadow CSS, for sure, and then maybe with the outline webkitting, but surely nothing to do with the bold tag (or lack thereof).

Thoughts  ^{Contents ↑}

Final thoughts: maybe it could be improved upon, aside from just cosmetically?

• Cosmetically, changing the glyphs' font size to something tiny (or maybe several different sizes, in which case maybe also have several different brightnesses) might be prettier than full-sized glyphs, though you'd want a conditional to fall back on for when there's no CSS in play (disabled in whatever fashion, or missing due to download) — hell, for that matter, maybe there's some CSS to trick the browser into treating your raining glyphs as if they were diacritics à la Zalgo (and diacritics ¹ can be rendered in a color other than that of their parent glyph (NB 01 Mar: I figured out how to do this yesterday...), though the CSS for it might get scrubbed by AO3's parser, and/or it might work in some browsers and not others), in which case they would then garble the background of the words above and/or below the parent-word, but maybe dropping their opacity and giving them some color (presumably that bright lime green spectrum?) could reduce the visual agita... and since AO3's parser  scrubs  used to scrub (ruby, rt, and rp tags are now allowed as of 31 Mar 2023, just 2 days after I wrote this up! [Glad I found out the day before posting, rather than who knows when...]) the <ruby> tag, there are a few endeavoring souls out there who've taken it upon themselves to write furigana work skins, which might be adaptable to all of this;
• also cosmetically, the trailing line might be better served in a bit greener hue (checking W3's color picker... oh, say... #c6ecd9, or so?  #006700 might be more appropriate, granted.), but more importantly a blurred transparency gradient from center to edges could help, maybe in some polka dot fashion to give it a bit of static-like fuzziness (I've seen CSS do a plaid background, so it's certainly possible) — this might require pairs of mirrored  s (roughly half of the width of an  ) so that each pair has a gradient of left-to-right darkening toward the Y-axis and then left-to-right lightening from the Y-axis (and there are tons of CSS gradient generators available online), these pairs thus giving the columns the appearance of a single deep-ish trail with fading edges... wait, I  think that I have  thought that I had it just now, and without resorting to splitting the  s into mirrored   pairs (though maybe one could sharpen the result by using this on a single   that's braced with a normal un-CSSed background   to each side...), but  the computer says no...  the parser told me “The background property in #workskin .matrix-trail cannot have the value linear-gradient (to left, #FFFFFF 0%, #006700 50%, #FFFFFF 100%), sorry!”:

  background: #FFFFFF;
background: linear-gradient (to left, #FFFFFF 0%, #006700 50%, #FFFFFF 100%);

• more significantly, if you try putting the green rain into a paragraph, you'll just break up the paragraph, but maybe there's some way to keep it all together without disrupting the rest of the paragraph (z-index: -1; comes to mind [and set the opacities to 0.5 or something], but this is beyond the CSS that I've had need for, so I really am just shooting in the dark here);
  • NB: I tried setting the .gif as the background image to this tutorial, using a <div> with low opacity and a negative z-index individually and in combination, but that came out only as one might expect, making the entire contents fade away; I then set everything in the tutorial itself within a second <div> with regular opacity: 1 and z-index: 0, but no dice (same with z-index: auto):

    #workskin .matrix-background {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/cc/Digital_rain_animation_medium_letters_shine.gif") !important;
  width: 100%;
  opacity: 0.2;
  z-index: -1;
}
 
#workskin .matrix-midground {
  opacity: 1;
  z-index: 0;
}


     
    

    <div class="matrix-background">
    <div class="matrix-midground">
    [ Jurassic Park quote, etc.]
    </div>
    </div>
    

  • I also tried a work skin and HTML combo of:

    #workskin background {
  background: url("https://upload.wikimedia.org/wikipedia/commons/c/cc/Digital_rain_animation_medium_letters_shine.gif") !important;
  border: 2px solid black;
}

#workskin .transparentbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

#workskin .transparentbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

    
    

    <div class="background">
    <div class="transparentbox">
    [ Jurassic Park quote, etc.]
    </div>
    </div>
    

    ...which obviously worked oh-so-bloody-well </sarcasm>.
      Beginning to wonder if somehow the fact of it being a .gif were an issue (I know, I know, but I've seen stranger [even impossible] things happen [just ask me about a non-macro'd spreadsheets adding cells that I input the addresses for, and their doing completely unrelated things instead; yeah, I know all about Gremlins]), I tried a simple .jpg, but still no love. 😞
  • There is some hope, of course, if one were to use background-blend-mode (see Mozilla Developer Network [MDN Web Docs], W3Schools, and CSS-Tricks for details) in the work skin... and assuming that it's supported by AO3's parser... and allowing for the fact that it's not supported on IE (which some people do still use).  I didn't go so far as to try it myself, but it might be worth looking into.  There's a good starting point on StackExchange, if you're feeling froggy.
• running with that idea, I suppose that one could then pre-gen a large array of just such green rain, set the borders to truncate (e.g.: CSS-tricks' solution [and there are others], since AO3's parser allows flex [I thought not, but I tested flex just now, and it didn't get scrubbed; I didn't take the test any further to see about truncation]) rather than wraparound (so that it would fill the screen's display real estate [to wit: regular monitors and widescreen HDTVs, since not everyone lives on a 'phone] but not cause the page to grow any longer than the fic's actual contents), and set it as the background (a CSS background, rather than an image background: it would still be static, so might as well just use an image, and would be lost in downloads [though the downloading person can re-insert the CSS] making it more a project of love than of direct practical use), with maybe several different font sizes (esp. smaller ones?); if you go the route of different font sizes, then you might want to consider my findings on font size methods.

FIAT MOTUS  ^{Contents ↑}

27 Nov 2023 update:  As you can see, I finally lucked out... to an extent.  Looking for a way to make a glyph blink on AO3, I dug around, got distracted (three cheers for ADHD!) by some unrelated CSS, and managed a workaround for a dynamic background.  (NB:  One could simply plunk in a work skin rule of

#workskin {
  opacity: 0.9;
  background: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/Digital_rain_animation_medium_letters_shine.gif');
}

  and it'll work, even extending the image a little extra to the sides beyond where the work contents themselves are, but also reducing the actual written text's opacity. 😞)  10 Mar 2025 edit:  Cf. this subsection of Targeting specific AO3 work sections (not site) with CSS effects for a simple fix on adjusting the .gif's gamma and a different work skin rule to drop it into your fic's background.
  CAVEAT:  I just discovered (01 Dec 2023) that the .gif background goes away when I resize my browser to about half of my monitor's width, making me suspect that this thing of beauty is utterly insensible to those with tiny devices.  This is, to state the obvious, less than optimal.

Cribbing a note from the bottom half of InfinitysWraith's CSS in Testing, ch. 10 [i.e.: tutorial 1, Bleed Gold ], I ended up modifying things slightly (I had been so close, and yet so far!), with the final result of:

#workskin .bggif {
  position: absolute;
  top: 0;
  opacity: 9%; /* opacity 8%-10% seem OK; less than 8 is a bit too washed out [under the conditions of my monitor, browser settings, etc.], and over 10 feels too distractingly present to be able to read smoothly. */
  width: 99% /* Odd choice? Going to 100% width causes the contents to go out of bounds by maybe a pixel, hence kicking in an automatic scroll bar at the bottom of the work. */;
  height: 100%;
  z-index: -1 !important;
  -webkit-user-select: none; /* Seemingly useless (even changing user agents), but will keep it in, just in case. */
  -ms-user-select: none; /* Seemingly useless (even changing user agents), but will keep it in, just in case. */
  -o-user-select: none; /* Seemingly useless (even changing user agents), but will keep it in, just in case. */
  -moz-user-select: none; /* Seemingly useless (even changing user agents), but will keep it in, just in case. */
  user-select: none; /* Seemingly useless (even changing user agents), but will keep it in, just in case. */
  background-size: cover; /* Useless (several variations, no effect within current set of rules). */
  background-repeat: repeat-y; /* Useless. */
  background-attachment: scroll; /* I mucked with scroll vs. fixed, but no dice. */
}
 
#workskin .borderinvis {
  border: 0px;
  width: 99%;
}

Then I did the same as we saw in Bleed Gold (with what turned out to be almost the same container/wrapper:

1. wrapped the entire work with <div class="borderinvis"> at the very top (and its paired </div> at the very bottom of the page; this keeps your text from edging out past the side of your image);
2. plunked <img class="bggif" src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Digital_rain_animation_medium_letters_shine.gif" width="1" /> right beneath it (the location is convenient for the wrapper, and position: absolute; makes its placement irrelevant [and if creator's style is off, then the image that would have been in the background won't appear anyway]);
3. then left the rest of this tutorial as it had already been (written beneath that new section with the div and image at the top of the edit field).

The resulting HTML is set up like this (though width="1" seems to be unnecessary):

<div class="borderinvis">
 
<p>
<img class="bggif" src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Digital_rain_animation_medium_letters_shine.gif" width="1" />
</p>
 
[Insert your work's regular narration, HTML, CSS, etc. here]
 
</div>

I tested the parameters and found that you can stick another <div class="borderinvis"> and <img class="bggif" src="Your_URL_Here" width="1" /> above / below the first set, but a new div is unnecessary (I tested it with just the one div [which is there to keep the text contained within the image] and three .gifs at once, and they all came through without need of the new div nor of different z-indices... though I would suggest perhaps lowering their opacities if you choose to apply several .gifs at once in the background).  I happened to test this first by adding InfinitysWraith's original rain .gif (which I could see somewhat clearly), and then swapped that with Wiki's small and clear Matrix .gif (which darkened things, and either caused a slight rain-on-window smudge at points, or made an already present effect a little more evident), tried it with the original and both the clear Matrix and the new-rain (where I could reasonably still see the new-rain), and finally added a distinctly different Matrix .gif from DeviantArt (“matrix digital rain trans flag” by blinkies-cafe), which came together as a lovely and surprisingly mild neon rain that made me think more of Blade Runner than The Matrix (it didn't seem to matter whether new-rain was in there [it seemed to have been swallowed in the noise], but the clear matrix seemed to improve the composition) — that test was written as follows, if you're curious:

<div class="borderinvis">
 
<p>
<img class="bggif" src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Digital_rain_animation_medium_letters_shine.gif" width="1" />
</p>
 
<img class="bggif" src="https://upload.wikimedia.org/wikipedia/commons/1/17/Digital_rain_animation_small_letters_clear.gif" width="1" />
</p>
 
<img class="bggif" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7ba60889-62e3-480b-b1a4-3b7f949fe0cb/df5py0l-22160cb0-c8ec-42e6-bfde-1a59b802a4f7.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdiYTYwODg5LTYyZTMtNDgwYi1iMWE0LTNiN2Y5NDlmZTBjYlwvZGY1cHkwbC0yMjE2MGNiMC1jOGVjLTQyZTYtYmZkZS0xYTU5YjgwMmE0ZjcuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.zms6ZP6ZHL_iTEFXMI8fDLozRmgGRWNRHKWK66R3YB4" width="1" />
</p>
 
[Insert your work's regular narration, HTML, CSS, etc. here]
 
</div>

I also (belatedly) added a white background note rule for the small examples that didn't show up well against the pale grey background of the green rain .gif, and a simple white highlighting for those glyphs in the planned and unplanned failure cascades:

#workskin .notewhite {
  width: 20%;
  text-align: center;
  background: white;
  min-width: 15em;
}
 
#workskin .highlight-white {
  background-color: white;
}

Being a .gif limits things with the glyphs' relative size and the image's aspect ratio.  Maybe there's a way to have it display the results of a potentially more useful Java-based image (and yes, I tried — which, now that I think about it, I can only hope wasn't a breach of TOS), so that the glyphs are the right size and shape, etc., but that's a project for another day.

I'm halfway mucking with some material to put glyphs as regular text (and lot of empty space between them) in CSS only (so that they don't turn the regular material to gibberish when CSS fails or is turned off) with a z-index -1 (bumping the .gif to -2) with a low-middling opacity, and that part's easy, but I'm still trying to get them to appear behind the regular text (only planning to later adjust random glyphs' individual iterations' font-size, <sub>/<sup>, furigana, text-shadow, specific color, etc.)... because I'm a glutton for punishment (right now it's just Latin letters, to test with, though at least some Matrix glyphs seem accessible, e.g.: Buginese Letter a/ᨕ, reversed Tifinagh letter yaq/ⵇ, Osmanya letter ba/𐒁).  Will add another section when/if I ever succeed (and you'll know, since those glyphs will be floating in the background if it looks any good, and assuming that your browser/etc. permit)! 🙂

With that said, unless some official .ttf is ever released and adopted as a web safe standard font option in most OSs (or maybe placing individual glyph images instead of text glyphs, or if AO3 eventually permits embedding of fonts)... using fairly universally available font-family declarations for work skin rules tailored per glyph subset is about the best that we can hope for, and aiming at canon glyphs per Googledoc glyph database link or Rezmason's info below (or even those of a more modest canon subset, such as those in, Carl Newton's analysis of the Matrix rain [cf. similar at dafont], or this StackExhange thread), which I'm quoting [verbatim and in toto] only because I can't guarantee that this r/matrix thread will forever be available and Wayback saves only the OP and not the comment thread (NB: the Fleay interview mentioned has some material in that subreddit thread, but here's the video link just in case; also, the named languages' alphabet links' site has gone bye-byes, so I've taken the liberty of modifying the exact quote by using the Wayback copies' URLs here):

Floating motes  ^{Contents ↑}

  ↓  Initial, buggy code
  ↓  Shiny, happy version

 
 
/* Just touching base with you guys, in case this is of use to you somehow,  or if you can spot a fix for it,  but otherwise DO NOT USE THE CODE DIRECTLY BELOW: IT'S BUGGY (and not in some flashy One Piece sense)!!! */
 
See next subsection for functioning version!  (Inop. / malf. ver. kept for reference)
 
 

02 Dec 2023 update: as you can't see (even if your creator's style is turned on), I worked out a little more: this will put glyphs all over your fic!  It still has some kinks (the glyphs don't fall like rain [not technically correct: they don't sit there while the next glyph down comes into existence directly below them to draw your attention there as if it were the original one in an apparently continuous downward translation] and marquee is deprecated as a workaround (though it does show up in the skins-creating page, which names marquee-direction, marquee-play-count, marquee-speed, and marquee-style, exactly as gifbot pointed out, so although not all future [or present] browsers will support it, it's still allowed by the AO3 parser [though that's either old information, or my browser no longer recognizes that CSS {except that it very definitely does}... or just maybe I simply fat-fingered something 😅; hell, I don't remember for sure, so maybe I tested it as an HTML tag by old habit, since I come from before the semantic separation of the two]), or blink [I still need that for another work], or transform from one to another) — but as for bold, sub/sup, furigana, etc., at least one can simply drop the HTML tags around the spans (or write a few extra classes for the various effects)...
  ...except for one itsy-bitsy teency-weency [green glyph, not yellow polka dot] tiny little flaw...
    ...it might... sort of... kinda make just about everything (though not quite actually absolutely everything-everything) below the start of the glyphs' CSS on the page becomes unable to be highlighted by cursor for copying or CTRL-F'ing and such (unless you click outside of the container width and drag vertically) 😅 — unless that's a feature for you, and not a bug, in which case by all means: knock yourself out! 🙂 ❤️

Another problem (which I have to figure out, for sure) is that the glyphs seem to be in front of images (even when setting the images to z-index 1 and opacity 100% and display block) and can be seen through (or maybe(?) more likely: on top of ) the .gif (same test) and .png (didn't bother testing).

So, here we go: borrowing again from InfinitysWraith — here's the original overlapping text in InfinitysWraith's work, and the style disabled view, though I found it to make a lot more sense when I went through the actual source code afterward view-source:https://archiveofourown.to/works/25174384/chapters/87420256 — I found that if I were to use the overlap (I left the top rule alone, which is needed here solely to act as a box in which to wrap the background divs, but I upped the opacity [maybe too much, maybe too little] on the background rule and added some unnecessary extras... and found that for the Matrix rain purposes, we need something like an overflow: scroll declaration [useless if one flakes and uses a string of uninterrupted &emsp;, though I left it in for twiddling]: you have to alternate between regular collapsing spaces and non-breaking spaces [pair after pair of one-of-each] between the hidden glyphs, or else it will overflow right and you'll have one long-ass scroll bar at the bottom with no real presence of glyphs dotting your fic... that'll make more sense when we get there, I promise).

#workskin .overlappingtexttop { /* when we do the HTML, YOU MUST start the container div with this one */
  position: relative;
}
 
#workskin .overlappingtextbackground { /* when we do the HTML, this is the one that will be contained, and cause the magical glyphs to float all over the regular text */
  position: absolute;
  opacity: 50%;
  overflow: auto; /* Useless for our purposes, and unnecessary anyway (as long as you alternate your   with regular spacebar spaces). */
  -webkit-user-select: none; /* yes, I tried it with all of these stripped; nichevo, macht nichts. */
  -ms-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
 
#workskin .paragraph1words:after { /* these “paragraph”s are what cause the text to appear on the page, without being part of the actual text; you MUST have the :after there, or else they won't appear at all */
  content: "  ⵇ                    z     ᨕ         ↋              ⵇ                       ⵇ                                           ⵇ                                                                                              1                                 0                        日         ⵇ                     ¦              ᨕ       𐒁                                               *        ⵇ                              :                                                     日           ⵇ                                                                 ᨕ             ''                                                          ⵇ                       |             4                 Z                ᨕ               ⵇ   ⵇ ";
  z-index: -5 !important;
}
 
#workskin .paragraph2words:after {
  content: " ⵇ                       ⵇ                                           𐒁             ᨕ            8       ﾊ            ⵇ           ⵇ                             ''       ⟨       ⵇ                               ᨕ                       7        ⵇ                         ⵇ           :      ﾊ             ↋             ⵇ                  ¦         ᨕ                Z        ⵇ ";
  z-index: -4 !important; /* it turned out that assigning different z-indices didn't permit them to overlap each other, but they do still need to be behind the main text (default z = 0) and in front of the .gif if it's used (any z that's more negative than the glyphs are, though AO3 maxes out at z = ±9, IIRC); these could easily just a single glyph long, too, and have other selectors attached to the spans when you put in the HTML */
  font-size: 200%;
}
 
#workskin .paragraph3words:after {
  content: " ⵇ                       ⵇ                                      ⟩     𐒁                   +        ᨕ                      ﾊ         ⵇ           ⵇ                     |           ''           ⵇ                      _                   ᨕ           ⟨                    ⵇ ";
z-index: -3 !important;
  font-size: 300%;
}
 
#workskin .paragraph4words:after {
  content: " ⵇ                       ⵇ         *                            日                                                 ⵇ             ᨕ               ⟩                ⵇ ";
  z-index: -2 !important;
  font-size: 400%;
}
 
#workskin .paragraph5words:after { /* using z-indices of default [0] implicit to the regular text and -1 through -5 explicitly in the CSS, I hoped to achieve a palimpsest effect */
  content: "     𐒁                 ";
  z-index: -1 !important;
  font-size: 500%;
}
 
#workskin .green { /* one of the font colors already in my work skin */
  color: #27b300;
}
 
#workskin .matrix-2 { /* one of the font colors from the original purely static proof of concept Green Rain execution */
  color: rgb(0, 246, 0);
}
 
#workskin .matrix-1 { /* one of the font colors from the original purely static proof of concept Green Rain execution */
  color: rgb(104, 252, 104);
}

That's the CSS.  I didn't try to get terribly creative, just run a proof of concept, so some of the glyphs are Matrix canon (I didn't check which movie(s)), and some might not be (unless you count the games); the transliterative angle brackets ⟨⟩ and single straight apostrophes ' aren't, for example, but the work skin parser bitched about the less-than/greater-than <> symbols (and even the HTML entities of &lt; and &gt;, though I checked [belatedly] just now and it didn't mind the single guillemets ‹›) and I couldn't use the straight quotation marks " since those were delineating the CSS quoted material, hence the pairs of single apostrophes '' (but why not try the same {Greek psili  ̕ + U+2060 word joiner &#8288; + &hairsp; (better than thinsp) + &#8288; + Latin É =  ̕ É} trick as I used in Seize the Deity, ch. 29, so that we get {' + U+2060 word joiner &#8288; + | | (there's a tiny gap between the pipes there, highlighted in blue because it's too thin for the bright yellow to appear more than a pale nothing thinner than &thinsp;, but you have to copy this and paste it where you need it, because the &hairsp; code no longer works on AO3) + &#8288; + ' ≈ "}, you ask?  Well, it turns out that although the trick works here with regular HTML in this tutorial [i.e.: ' ' ≈ " ≠ ''] and the CSS parser actually does keep the psili  ̕ joined to the É [I checked it that way first], it doesn't keep the apostrophe joined to the apostrophe for some reason [NB: if you choose to use this trick in your HTML, and then later edit that chapter, then be ready to probably, though not always, have to re-code the joiner-hairsp-joiner, because AO3 likes to drop it with edits for some reason — same w/ &zwj;, though I don't know about no-break HTML nobr /nobr — so if/when I later edit this tutorial and either or both of those aren't joined... I forgot or didn't bother]).  Once I had it worked out, I added a few more glyphs because it was a bit sparse (and seems now too dense), but since the &emsp; and spacebar spaces were already there and all paired-up, I didn't worry too much about sandwiching every single new glyph between two regular spaces (which is only necessary to ensure pretty margins for blocks of text, and minimize whitespace in justified text).

And here's the HTML, crammed in above the <img class="bggif"..., in order to cover as much real estate as possible:

<div class="borderinvis">
  <div class="overlappingtexttop"> /* this is the wrapper to permit the magic to work */
    <div class="overlappingtextbackground"> /* this is the one that does the magic itself */
 
<p>
<span class="green paragraph1words"></span>   <span class="matrix-1 paragraph2words">>/span>   <span class="matrix-2 paragraph1words"></span>   <span class="green paragraph3words"></span>   <span class="matrix-1 paragraph1words"></span>   <span class="matrix-2 paragraph3words"></span>   <span class="green paragraph1words"></span>   <span class="matrix-1 paragraph4words"></span>   <span class="matrix-2 paragraph2words"></span>   <span class="green paragraph1words"></span>   <span class="matrix-1 paragraph3words"></span>   <span class="matrix-2 paragraph1words"></span>   <span class="green paragraph2words"></span>   <span class="matrix-1 paragraph1words"></span>   <span class="matrix-2 paragraph5words"></span>   <span class="green paragraph1words"></span>   <span class="matrix-1 paragraph2words"></span>   <span class="matrix-2 paragraph1words"></span>   <span class="green paragraph3words"></span>   <span class="matrix-1 paragraph1words"></span>   <span class="matrix-2 paragraph3words"></span>   <span class="green paragraph1words"></span>   <span class="matrix-1 paragraph4words"></span>   <span class="matrix-2 paragraph2words"></span>   <span class="green paragraph1words"></span>   <span class="matrix-1 paragraph3words"></span>   <span class="matrix-2 paragraph1words"></span>   <span class="green paragraph2words"></span>   <span class="matrix-1 paragraph1words"></span>   <span class="matrix-2 paragraph1words"></span>   <span class="green paragraph3words"></span>   <span class="matrix-1 paragraph1words"></span>   <span class="matrix-2 paragraph3words"></span>   <span class="green paragraph1words"></span>   <span class="matrix-1 paragraph4words"></span>   <span class="matrix-2 paragraph2words"></span>   <span class="green paragraph1words"></span>   <span class="matrix-1 paragraph3words"></span>   <span class="matrix-2 paragraph1words"></span>   <span class="green paragraph2words"></span>   <span class="matrix-1 paragraph1words"></span>   <span class="matrix-2 paragraph5words"></span>   <span class="green paragraph1words"></span>   <span class="matrix-1 paragraph2words"></span>   <span class="matrix-2 paragraph1words"></span>   <span class="green paragraph3words"></span>   <span class="matrix-1 paragraph1words"></span>   <span class="matrix-2 paragraph3words"></span>   <span class="green paragraph1words"></span>   <span class="matrix-1 paragraph4words"></span>   <span class="matrix-2 paragraph2words"></span>   <span class="green paragraph1words"></span>   <span class="matrix-1 paragraph3words"></span>   <span class="matrix-2 paragraph1words"></span>   <span class="green paragraph2words"></span>   <span class="matrix-1 paragraph1words"></span>
</p> /* toss in as many spans as you need, and remember that you can use HTML tags and CSS selectors on the spans' classes, for effects like bold, shadow, etc. (though I would suggest that if so, then use them on a span of only one or two glyphs at a time, with longer spans of normal glyphs in between) */
</div>
  </div> /* closing both divs now */
 
<p> /* and this is where the rest of this tutorial's regular source code begins */
<img class="bggif" src="https://web.archive.org/web/20230930224042if_/https://upload.wikimedia.org/wikipedia/commons/c/cc/Digital_rain_animation_medium_letters_shine.gif" width="1" />
</p>
 
<div align="justify">

The regular font-size glyphs (paragraph1words) have the most glyphs in their paragraph and a lot of &emsp;-spacebar pairs, with fewer of either as we work up to the 500%-size paragraph with a single glyph and a few space-pairs to either side, so I opted to try to mix them up: I simply put the paragraphs in a sequence that might distribute them well enough without being too obviously repetitive (and particularly not the near-seeming big ones), {1213121 4 1213121 5 1213121 4 1213121}, and rotated straight through the three green font-colors, for a little variety (31 spans isn't quite an integer multiple of 3, I know, but... meh).

  Top of buggy code subsection  ↑

Look ma, no hands!
  OR: How to un-fuck that code

10 Dec 2023 update:  I can't believe that it had been staring me in the face the whole time... (and if you don't see a bunch of floating green Matrix glyphs in the background of this work, then please let me know)

I had the epiphany this morning, just a few hours ago: I had the z-indices on the CSS paragraphs, and they needed to be on individualized containers (and I removed the indices from the paragraphs simply to clean up unnecessary extra code).

#workskin .overlappingtextbackground1 {
  position: absolute;
  width: 98%;
  z-index: -5 !important;
  opacity: 50%;
  overflow: auto;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
 
#workskin .overlappingtextbackground2 {
  position: absolute;
  width: 98%;
  z-index: -4 !important;
  opacity: 50%;
  overflow: auto;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
 
#workskin .overlappingtextbackground3 {
  position: absolute;
  width: 98%;
  z-index: -3 !important;
  opacity: 50%;
  overflow: auto;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
 
#workskin .overlappingtextbackground4 {
  position: absolute;
  width: 98%;
  z-index: -2 !important;
  opacity: 50%;
  overflow: auto;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
 
#workskin .overlappingtextbackground5 {
  position: absolute;
  width: 98%;
  z-index: -1 !important;
  opacity: 50%;
  overflow: auto;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

And the HTML for it is as follows (and no, the overlappingtexttop div isn't missing by accident, it's no longer relevant with the z-indices fixed):

<div class="overlappingtextbackground1"><span class="green paragraph1words"></span>
    </div>
<div class="overlappingtextbackground2"><span class="matrix-1 paragraph2words"></span>
    </div>
<div class="overlappingtextbackground3"><span class="green paragraph3words"></span>
    </div>
<div class="overlappingtextbackground4"><span class="matrix-1 paragraph4words"></span>
    </div>
<div class="overlappingtextbackground5"><span class="matrix-2 paragraph5words"></span>
    </div>

You just plunk this block of divs (or just a couple of the divs) wherever you want, see how it looks, and plunk some more somewhere after the end of those glyphs.
  NB:  It gets weird and adds an untouchable vertical scroll bar when you plunk them into a blockquote or a list, so... maybe don't do that.

I still wish to:

• make the glyphs fall like rain (well, make them sit there while the next glyph down comes into existence beneath them);
• make them blink (not really ever supported much, and deprecated now, and the Java and @ workarounds are verboten on AO3);
• make them transform from one to another;
• clean up my test set and toss in bold, sub/sup, furigana, etc. HTML tags around handfuls of onesy-twosy symbol-spans (or write a few extra classes for the various effects)... though this is never gonna happen since it's just a proof of concept;

But hey, at least they're no longer in front of images or the actual text! 🙂

  Top of functional code subsection  ↑

...a-a-and that's all, folks!

OK.  That's it.  Now go do that voodoo that you do so well! ❤️

Also in this series (itself part of the CSS Abuse and HTML Tryhard collection):

• Part 1 — How to AO3
    (general info. for newb.s, but includes tips and information that years-long veterans often don't know)
• Part 2 — How to make and fix a series on AO3
    (plus unrelated tips re. Wayback, different spaces and dashes, TTS problems)
• Part 3 — Analyzing AO3 reader traffic flow
    (one's own fics' reader traffic)
• Part 4 — A year-long AO3 overall traffic analysis
    (when do people upload, read, comment, kudos, and bookmark?  Reader and new-upload traffic in general, across all of AO3⁠ ⁠)
• Part 5 — Fonts, and colors, and work skins, oh my!
    (change your letters and ink color, see others' work skin secrets, etc.)
• Part 6 — Chess puzzle extravaganza
    (256 randomly selected preconfigured chess puzzles, a new one with every refresh
    [secret message-reveal from BBEG, because of course];
    no JS: just HTML and some CSS)
• Part 7 — Bubble-pop! game
    (More RNG fun;
    playable bubble-popping;
    no offsite JS: just CSS and some HTML;
    caution re. volume;
    full code included.)
• Part 8 — Targeting specific AO3 work sections (not site) with CSS effects
    (wanna put some color into your CSS-verboten summary?  Maybe drop an image below your series link, or style your comments section? 😉)
• Part 9 — Inside, Outside, Upside-down
    (a showpiece of fun that one can have with CSS — a challenge puzzle, rather than a tutorial;
    incl. CSS on a single paragraph within the work summary, among other things;
    try to navigate it, work out its little puzzles, and work out how it was all done;
    caution re. volume in ch. 1, and flashing lights on :hover in ch. 2;
    NB:  must be in single-chapter view, not entire-work)
• Part 10 — Green Rain font, from The Matrix
    (several ways to drop Green Rain into your background, simulating the digital rain effect)
• Part 11 — Building ConLangs, with a concrete example
    (going about constructing one's own invented language: words, grammar, writing, etc.)

NB:  For simplicity, I've collected those and later CSS-heavy works and [playable] games (such as the Bubble-Pop! game, or the point-and-click CYOA Hunt the Wumpus, for example) together in the CSS Abuse and HTML Tryhard collection.

NB:  If the work skin [for this piece or any other] was stripped by downloading, so that you can't see any red ink or yellow highlighting or any other special effect, then please see my fonts tutorial's sub-section on re-inserting rules.