The inaugural HTML Tryhard 2026 Fanfiction Event Week has come to a close. Thanks to all who participated! All entries for this event can be found on the AO3 collection. (If you haven't checked it out already, now's your chance!)
We had an amazing turn-out this year, with a total of 36 works spanning 28 fandoms. That's 69% (nice) more entries than last year! It's been so cool to see both new and returning participants.
We had about the same fandom overlap as last year - which is to say, extremely little. The biggest overlap for any fandom was two fics, one of was… the Metamorphoses fandom?
By two entirely separate people…? Maybe you should be friends.
Once again, a majority of entries were the only entry for their fandom. We're less surprised by it this year than we were last year.
We don't have any stats on this, but the number of "playable games on AO3" was up this year, by a lot. Here's some of the top tags used in this year's entries:
You "reader-interactive" writers scare us a little.
The event collection will close tomorrow (3/2/2026), but if you have any last minute entries just let us know.
Your dating sim was fucking incredible. Would you be willing to give a breakdown on how you made it?
(referring to the dating sim i wrote for the HTML Tryhard 2026 event)
ive been sitting on this while i struggled with the best way to answer/how much information to give, but ill just say whatever comes to mind and you/others can ask follow up questions if it's not clear enough.
to start, you need three pieces:
1) the main view
2) the coding logic to make things happen
3) the fanfic/script itself
we're going to be talking about the first two. (i'm also half answering other questions ive gotten about "how would i make my own similar fic" rather than precisely "how did you make this fic", but i hope this still answers your question)
1) the main view
you need to first make a view for your user/reader to interact with. this can be whatever you want, depending on what you're trying to do either you can mock up an existing view (like me with the hundred line) or if your media doesn't have a VN style, you can just make it up.
i don't know how much detail to go into here, but basically. everything is a box. some boxes hold text or images. some boxes hold more boxes. for any given mock-up using html/css, start off by deciding what boxes you need approximately where they should go and then making classes/placeholders for them, top to bottom.
here's a diagram of all the boxes in the dating sim fic:
there's a lot of extra shiny stuff on the end result that took ages of tweaking, but i coded the main structure of it in a single weekend. back then, it looked like this:
note things like: the sizes/placements are different, the text box is less fancy, takumi doesn't have a background image yet, the icons are simplistic placeholders. honestly i could have stayed with that format and it would have been fine.
you don't NEED a super fancy text box or a functioning clock. you don't NEED lore accurate icons. just get something vaguely working and go from there, you can decide to be unwell about it later if you want but only AFTER you've got the base down. you NEED: character A, character B, name boxes, a text box, and maybe a background image. you just need to get the point across.
my advice is to not get bogged down by small details until after you have a functioning proof of concept to work with.
the code for the above looks something like:
<div class="main-box">
<div class="location-box"></div>
<div class="clock-box"></div>
<div class="character-box"></div>
<div class="takumi-box"></div>
<div class="text-box">
<div class="character-name-box">Yugamu</div>
<div class="takumi-name-box">Takumi</div>
<div class="text">
H-hey, Yugamu. Actually, I… had something I wanted to talk to you about.
</div>
</div> //end of text-box
</div> //end of main-box
extremely unsure if that's helpful at all.
the various elements are held together mostly with string and superglue, but they rely on a few different layout properties. primarily: relative/absolute positioning, and flexbox. there might also be a single float in there... im not proud.
"absolute" lets you put things anywhere you want and ignores all elements that might be in the way. the clock is absolute'd, takumi's box is absolute'd, etc. they're things in odd places (not top to bottom, left to right) and they stay there forever regardless of the things around them.
i think flexbox was mostly used in the text box area, it's honestly a blur at this point. but flexbox is great for aligning things that are variable in any way but you still need them to be in a specific place relative to those other things.
another thing to note is that any movement you see within the view is handled by transform (or transition), not by animations. ao3 doesn't allow the animation property, so you have to get tricky with transform or transition instead.
not sure if anyone noticed that the clock moves lol, but the clock moves. the second hand is a separate image laid on top of the main clock image (using absolute) and then when the user clicks on the first dialogue box the clock is told to start a rotation transform that lasts for... 166 hours. it originally used the "steps" timing function and it ticked like a proper clock, but ao3 doesn't allow steps :(( now it's just on whatever the default is (ease-in, i think?) and gets wonky if you leave it for too long. maybe some day ill figure out how to make that not happen, but it's pretty low on the list of my priorities.
(if you REALLY want to hear me lose my mind, ask about the polygon surrounding takumi. the clock was a fun silly challenge! the takumi polygon was out for my life and led to much late-night rage quitting. i think greenbean_paste was the one who helped me get a working prototype.)
2) the coding logic
there's a few different ways you can go about "making things happen" or "making things move" using only html and css, and none of them are what i'd call fun.
you can use :target as described by gifbot here, which can allow for rudimentary choices to be selected. you can do a similar thing and move to different chapters for each choice (i seriously considered this, especially when i thought the dating sim code might be getting too big for a single chapter). you can use :hover or :active to achieve different effects, and by messing with the transition-duration timing you can do some neat/hack-y stuff. there's several active/hover tricks in use within the dating sim fic, though most of them aren't vital, just window dressing.
the most modern way (and by modern i mean, ao3 added support semi-recently and it's expanded what's possible by a lot) and the way that the crux of the dating sim works, is details/summary.
a few things make details/summary really convenient: 1) built in functionality to show/hide things, meaning you don't have to do any transition hacking. 2) the ability to see if a details is [open] or not. most of the more recent super cool html fics you might see on ao3 are using details/summary and a bunch of horrible combinator logic to make everything happen.
(see: this insane mock up of windows 98 or this functional game with a squid.)
the logic in the dating sim is a lot of "is it takumi's turn to speak? show his name box and hide the other name box" and "did the user click the first dialogue? start the clock" and "did the user open the last line of dialogue in this scene? show the view for the next scene (and hide this current view)". it's a mess. would not recommend for your first, or even your second project. it all came together in the end but it did fully take me... many months and much help from my more insane html friends. i also REALLY wanted to get the character images to move like they do in the game, bouncing up and down or flashing etc. and tldr, it's possible! just insane. maybe next time.
anyway, hope anything i just said is at all parse-able by human minds unpoisoned by coding on ao3
my second entry for the @html-tryhard 2026 event: a hundred line dating sim, fully playable within ao3
this fic starts on the 25th day of the Romance Route and has three "romance" options to choose from and seven total endings. i wanted to add more routes and endings but i ran out of time...
why did i do this? i've asked myself that same question every day for the last two months. how did i do this? with a lot of crying and banging my head against the wall. how long did this take? i do not know. too long. a very long time. still, it turned out pretty slick! im mostly proud of it.
and if you don't know my name maybe we could be something
Rated: T
Pairing: Tim Drake/Jason Todd
Summary:
Jason works alone, he doesn't need help. He doesn't need Tim butting in on his cases and he especially doesn't need some unknown number telling him what to do.
An Archive of Our Own, a project of the Organization for Transformative Works
This was written for the @html-tryhard fanfic event week!! I had a lot of fun writing this fic and figuring out (a little bit) how HTML works! Make sure to check out the other fics in the collection!
its the same entry from last year lol chapter two of my genshin fic!! if you don't pay attention to the year, it's like i only took a month to update :)
this chapter is from collei's pov! she is having A Time.
Hello! I'm asking on a throwaway account to allow a private answer. I think your event is really cool, thank you for organizing it! I have a workskin I made that I'm proud of, which I would include, but I made it with help from an AI/LLM, and I do not want to put it in an event that would not want it. I did not see it in your rules/faq/answers; would you prefer I not participate in your event with this work and skin?
Thanks for your interest!
In order to be respectful to the other fan-creators, we'd like to keep this a GenAI free event.
