# Hover preview — effect catalogue Temporary page. The **base** below is what's currently live on the publications page: red title + red blinking cursor + animated glyph. Everything beneath adds **one extra effect** on top of that base so you can see what each one does in isolation. ## Base (currently live — for reference) <div class="pub-card"> <img class="pub-icon" src="logos/demo-glyph-a.svg" alt=""> <div class="pub-body"> ## <a href="#" style="color: inherit; text-decoration: inherit;">BEAUTY IN USE: AGENTIVE PHENOMENOLOGY AND THE AESTHETICS OF DESIGN</a> with Enrico Terrone <span class="journal">Ergo (forthcoming)</span> </div> </div> --- ## 1 · Card lift Whole card translates up 3px on hover — the "original" effect you already rejected. Shown for contrast. <div class="pub-card fx-lift"> <img class="pub-icon" src="logos/demo-glyph-b.svg" alt=""> <div class="pub-body"> ## <a href="#" style="color: inherit; text-decoration: inherit;">GROWING THE IMAGE: GENERATIVE AI AND THE MEDIUM OF GARDENING</a> with Enrico Terrone <span class="journal">Philosophical Quarterly (2025)</span> </div> </div> --- ## 2 · Border-left strip A 2px red strip fades in on the left edge of the card on hover. Runs the full card height. <div class="pub-card fx-border"> <img class="pub-icon" src="logos/demo-glyph-c.svg" alt=""> <div class="pub-body"> ## <a href="#" style="color: inherit; text-decoration: inherit;">AUDITION AND COMPOSITE SENSORY INDIVIDUALS</a> with Bence Nanay <span class="journal">Sensory Individuals — Oxford University Press (2023)</span> </div> </div> --- ## 3 · Spotlight (sibling dim) When you hover one card in the group, the others fade to 35% opacity. Focuses attention without moving anything. Needs a group of cards to see. <div class="fx-spotlight-group"> <div class="pub-card"> <img class="pub-icon" src="logos/demo-glyph-a.svg" alt=""> <div class="pub-body"> ## <a href="#" style="color: inherit; text-decoration: inherit;">AGENTS OF CHANGE</a> <span class="journal">Philosophical Studies (2022)</span> </div> </div> <div class="pub-card"> <img class="pub-icon" src="logos/demo-glyph-b.svg" alt=""> <div class="pub-body"> ## <a href="#" style="color: inherit; text-decoration: inherit;">SOUNDS AS PROPERTIES</a> <span class="journal">Thought: A Journal of Philosophy (2021)</span> </div> </div> <div class="pub-card"> <img class="pub-icon" src="logos/demo-glyph-c.svg" alt=""> <div class="pub-body"> ## <a href="#" style="color: inherit; text-decoration: inherit;">HEARING OBJECTS AND EVENTS</a> <span class="journal">Philosophical Studies (2018)</span> </div> </div> </div> --- ## 4 · Letter-spacing open Title letter-spacing expands from 0.04em → 0.12em on hover — the word literally breathes open. <div class="pub-card fx-letterspace"> <img class="pub-icon" src="logos/demo-glyph-a.svg" alt=""> <div class="pub-body"> ## <a href="#" style="color: inherit; text-decoration: inherit;">CAN MOVEMENT BE DEPICTED?</a> with Clotilde Calabi <span class="journal">Phenomenology and Mind (2018)</span> </div> </div> --- ## 5 · Underline sweep A thin gold underline fills in left-to-right beneath the title. <div class="pub-card fx-underline"> <img class="pub-icon" src="logos/demo-glyph-b.svg" alt=""> <div class="pub-body"> ## <a href="#" style="color: inherit; text-decoration: inherit;">HEARING SPACES</a> <span class="journal">Australasian Journal of Philosophy (2017)</span> </div> </div> --- ## 6 · Background wash Card background fades to a very slight teal tint on hover. Subtle "this block is active" cue. <div class="pub-card fx-wash"> <img class="pub-icon" src="logos/demo-glyph-c.svg" alt=""> <div class="pub-body"> ## <a href="#" style="color: inherit; text-decoration: inherit;">POINTING AND REPRESENTING: THREE OPTIONS</a> with Angelica Kaufmann and Bence Nanay <span class="journal">Humana Mente (2013)</span> </div> </div> --- ## 7 · Icon scale + glow The icon grows by 12% and gets a teal drop-shadow on hover — this was the "glow" effect on the homepage nav items that you also rejected. Shown for contrast. <div class="pub-card fx-iconscale"> <img class="pub-icon" src="logos/demo-glyph-a.svg" alt=""> <div class="pub-body"> ## <a href="#" style="color: inherit; text-decoration: inherit;">BEAUTY IN USE: AGENTIVE PHENOMENOLOGY</a> <span class="journal">Ergo (forthcoming)</span> </div> </div> --- ## 8 · Brackets (instead of caret) `[ TITLE ]` — red monospace brackets flank the title on hover. Replaces the blinking caret with a static bracket treatment. <div class="pub-card fx-brackets"> <img class="pub-icon" src="logos/demo-glyph-b.svg" alt=""> <div class="pub-body"> ## <a href="#" style="color: inherit; text-decoration: inherit;">GROWING THE IMAGE</a> <span class="journal">Philosophical Quarterly (2025)</span> </div> </div> --- Tell me which (if any) to add to the live publications page. They can stack — e.g. "border-left + spotlight" is fine. Or "none of these, the base is good".