# 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 (now hidden at rest, revealed on card hover). Everything beneath adds **one extra effect** on top of that base so you can see what each one does in isolation. ## Colour options for the glyphs Same glyph (pub-beauty) rendered in five palette-valid colours. Current is orange. <div style="display:flex; gap:2em; align-items:flex-end; flex-wrap:wrap; margin:1.5em 0 2.5em;"> <div style="text-align:center; font-size:0.85em; color:#878580;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48"><rect width="60" height="60" fill="#100F0F"/><polygon points="30,16 44,40 16,40" fill="none" stroke="#DA702C" stroke-width="0.75" opacity="0.28"/><circle cx="30" cy="16" r="2.5" fill="#DA702C"><animate attributeName="opacity" values="1;0.25;0.25;1" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle><circle cx="44" cy="40" r="2.5" fill="#DA702C"><animate attributeName="opacity" values="0.25;1;0.25;0.25" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle><circle cx="16" cy="40" r="2.5" fill="#DA702C"><animate attributeName="opacity" values="0.25;0.25;1;0.25" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle></svg> <div style="margin-top:0.4em;">orange<br><code style="font-size:0.85em;">#DA702C</code></div> </div> <div style="text-align:center; font-size:0.85em; color:#878580;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48"><rect width="60" height="60" fill="#100F0F"/><polygon points="30,16 44,40 16,40" fill="none" stroke="#66800C" stroke-width="0.75" opacity="0.28"/><circle cx="30" cy="16" r="2.5" fill="#66800C"><animate attributeName="opacity" values="1;0.25;0.25;1" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle><circle cx="44" cy="40" r="2.5" fill="#66800C"><animate attributeName="opacity" values="0.25;1;0.25;0.25" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle><circle cx="16" cy="40" r="2.5" fill="#66800C"><animate attributeName="opacity" values="0.25;0.25;1;0.25" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle></svg> <div style="margin-top:0.4em;">green<br><code style="font-size:0.85em;">#66800C</code></div> </div> <div style="text-align:center; font-size:0.85em; color:#878580;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48"><rect width="60" height="60" fill="#100F0F"/><polygon points="30,16 44,40 16,40" fill="none" stroke="#CE5D97" stroke-width="0.75" opacity="0.28"/><circle cx="30" cy="16" r="2.5" fill="#CE5D97"><animate attributeName="opacity" values="1;0.25;0.25;1" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle><circle cx="44" cy="40" r="2.5" fill="#CE5D97"><animate attributeName="opacity" values="0.25;1;0.25;0.25" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle><circle cx="16" cy="40" r="2.5" fill="#CE5D97"><animate attributeName="opacity" values="0.25;0.25;1;0.25" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle></svg> <div style="margin-top:0.4em;">magenta<br><code style="font-size:0.85em;">#CE5D97</code></div> </div> <div style="text-align:center; font-size:0.85em; color:#878580;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48"><rect width="60" height="60" fill="#100F0F"/><polygon points="30,16 44,40 16,40" fill="none" stroke="#5E409D" stroke-width="0.75" opacity="0.28"/><circle cx="30" cy="16" r="2.5" fill="#5E409D"><animate attributeName="opacity" values="1;0.25;0.25;1" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle><circle cx="44" cy="40" r="2.5" fill="#5E409D"><animate attributeName="opacity" values="0.25;1;0.25;0.25" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle><circle cx="16" cy="40" r="2.5" fill="#5E409D"><animate attributeName="opacity" values="0.25;0.25;1;0.25" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle></svg> <div style="margin-top:0.4em;">purple<br><code style="font-size:0.85em;">#5E409D</code></div> </div> <div style="text-align:center; font-size:0.85em; color:#878580;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48"><rect width="60" height="60" fill="#100F0F"/><polygon points="30,16 44,40 16,40" fill="none" stroke="#AD8301" stroke-width="0.75" opacity="0.28"/><circle cx="30" cy="16" r="2.5" fill="#AD8301"><animate attributeName="opacity" values="1;0.25;0.25;1" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle><circle cx="44" cy="40" r="2.5" fill="#AD8301"><animate attributeName="opacity" values="0.25;1;0.25;0.25" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle><circle cx="16" cy="40" r="2.5" fill="#AD8301"><animate attributeName="opacity" values="0.25;0.25;1;0.25" keyTimes="0;0.33;0.66;1" dur="5s" repeatCount="indefinite"/></circle></svg> <div style="margin-top:0.4em;">gold-dark<br><code style="font-size:0.85em;">#AD8301</code></div> </div> </div> Tell me which colour to switch all nine glyphs to (or "keep orange"). --- ## 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".