Actions

Work Header

AO3 Word Search Game

Summary:

A fully playable fandom-themed word search, built entirely in HTML and CSS. Twelve classic fandom words are hidden across the grid horizontally, vertically, and diagonally. Click the letters as you find them, mark off the word bank, and see if you can clear the board.

Notes:

This work uses custom HTML and CSS formatting. For the intended experience, please enable Creator's Style (or ensure workskins are turned on in your AO3 preferences). The word-search grid, selected letters, word bank, and completion banner are all part of the work itself.

This work is interactive — it isn't a fic you read passively, it's a game you play. It's built entirely out of HTML disclosure elements, with no JavaScript whatsoever. That means:

• It works in any browser, on desktop or mobile
• Your progress isn't saved — refreshing the page resets everything
• Words can appear horizontally, vertically, or diagonally
• Click each letter of a hidden word to mark it as found
• Find all twelve words to reveal the completion message

Twelve fandom staples, one grid, and however sharp your word-search skills happen to be. Good luck.

(See the end of the work for more notes.)

Work Text:

ღ AO3 / FANDOM WORD SEARCH ღ

Find the hidden fandom words. They can appear horizontally, vertically, or diagonally. Click each letter to mark your finds.

NBA
S
S
H
H
I
I
P
P
CGHQT
F
F
A
F
F
RG
P
P
WUWRNH
O
A
A
S
L
L
I
I
IZAYZF
T
T
K
K
W
N
N
N
N
U
U
C
C
A
A
N
N
O
O
N
N
N
R
R
K
U
U
I
I
F
F
I
F
F
EG
L
L
YK
O
O
D
N
N
D
D
C
I
I
M
F
F
D
O
O
LL
P
P
G
G
TI
O
O
Z
C
C
BX
R
R
O
O
O
E
E
RDMC
S
S
RJU
E
E
T
T
S
S
T
LSGW
T
T
CBVH
P
P
M
M
Y
JCH
A
A
DMIOUL
U
U
F
LL
G
G
GVIWVUC
T
T
T
U
S
S
FRX
A
A
N
N
G
G
S
S
T
T
HF

OTPOTP ✓FANFICFANFIC ✓SHIPSHIP ✓TAGSTAGS ✓TROPETROPE ✓CANONCANON ✓KUDOSKUDOS ✓LORELORE ✓PININGPINING ✓ANGSTANGST ✓FLUFFFLUFF ✓SMUTSMUT ✓

★ ALL WORDS FOUND! You found every fandom classic. ★

Notes:

Hope you enjoyed! I’ve wanted to try a proper clickable word search for a while, so here it is!

If you're curious how this works: HTML has a native element called details, which can toggle between open and closed when clicked. Every selectable letter in the puzzle is one of those elements. Once you click it, CSS detects that open state with :has() and swaps the plain letter for the highlighted version.

The filler letters aren't interactive at all, so only the letters that actually belong to hidden words can be selected. Each word in the word bank watches for all of its corresponding letters to be open at the same time. Once you've found the full word, its label changes to show that it's complete. The final banner does essentially the same thing on a much larger scale: it waits until every hidden word has been completed before revealing itself.

If this moved you, even a little, please consider leaving a kudos or some feedback. I’ve poured a lot of time, love, and late-night tinkering into this. It's part of a new fixation, and I would love to hear everyone's thoughts.

Lately, I’ve realized: I have free will. Which means I’ve been joyfully and chaotically experimenting with HTML formatting and custom workskins.

Please stay tuned for the next HTML piece! I will post/update something in this series weekly OR biweekly; if you want to stay updated on this HTML series, please consider subscribing or bookmarking.

You can find me on Bluesky ( @the_wild_poet25 ) and on Twitter (the_tamed_poet) if you want to connect. I'm also on Discord too!

The comment section also works—feel free to leave a comment! :)