```
### assets/style.css
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--black: #0a0a0a;
--paper: #f4f1e8;
--muted: #aaa79f;
--line: #353535;
--lime: #c8ff00;
--orange: #ff6b2c;
--cyan: #22d3ee;
--accent: var(--lime);
color-scheme: dark;
}
html,
body {
min-height: 100%;
}
html {
background: var(--black);
scroll-behavior: auto;
}
body {
min-height: 100svh;
overflow-x: hidden;
background: var(--black);
color: var(--paper);
font-family: 'Space Grotesk', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
::selection {
background: var(--accent);
color: var(--black);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--black);
}
::-webkit-scrollbar-thumb {
border: 2px solid var(--black);
border-radius: 999px;
background: #454545;
}
.showcase-shell {
width: 100%;
min-height: 100svh;
display: grid;
grid-template-rows: auto 1fr;
padding: clamp(0.75rem, 2vw, 1.5rem);
}
.showcase-toolbar {
display: flex;
align-items: center;
min-height: 2rem;
padding-bottom: clamp(0.65rem, 1.5vw, 1rem);
}
.showcase-prompt {
display: flex;
align-items: center;
gap: 0.65rem;
color: var(--muted);
font-family: 'JetBrains Mono', monospace;
font-size: clamp(0.58rem, 0.85vw, 0.7rem);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.showcase-prompt strong {
color: var(--paper);
font-weight: 600;
}
.showcase-prompt__dot {
width: 0.45rem;
aspect-ratio: 1;
border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 0 4px rgb(200 255 0 / 12%);
}
.programme {
--active-color: var(--line);
min-height: 0;
display: grid;
grid-template-rows: auto 1fr auto;
border: 1px solid var(--line);
background:
linear-gradient(90deg, transparent 49.9%, rgb(255 255 255 / 3%) 50%, transparent 50.1%),
var(--black);
transition: border-color 0.3s ease;
}
.programme.is-active {
border-color: var(--active-color);
}
.programme__masthead,
.programme__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: clamp(0.7rem, 1.5vw, 1rem) clamp(0.85rem, 2.2vw, 1.75rem);
color: var(--muted);
font-family: 'JetBrains Mono', monospace;
font-size: clamp(0.56rem, 0.85vw, 0.72rem);
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
}
.programme__masthead {
border-bottom: 1px solid var(--line);
}
.programme__footer {
border-top: 1px solid var(--line);
}
.programme__masthead span {
margin-inline: 0.35rem;
color: var(--paper);
}
.programme__nav {
min-height: 0;
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
background:
linear-gradient(var(--line), var(--line)) 0 33.333% / 100% 1px no-repeat,
linear-gradient(var(--line), var(--line)) 0 66.666% / 100% 1px no-repeat;
}
.programme__nav > a {
--hu-color: var(--lime);
position: relative;
min-width: 0;
align-self: center;
display: inline-block;
width: fit-content;
max-width: calc(100% - clamp(1.7rem, 4.4vw, 3.5rem));
margin-left: clamp(0.85rem, 2.2vw, 1.75rem);
color: var(--paper);
font-family: 'Syne', system-ui, sans-serif;
font-size: clamp(2.8rem, 8.3vw, 6.6rem);
font-weight: 700;
line-height: 0.88;
letter-spacing: -0.065em;
text-decoration-color: var(--hu-color);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.12em;
white-space: nowrap;
isolation: isolate;
}
.programme__nav > a:nth-child(2) {
--hu-color: var(--orange);
}
.programme__nav > a:nth-child(3) {
--hu-color: var(--cyan);
}
.programme__nav > a::after {
content: '0' counter(programme-link);
counter-increment: programme-link;
position: absolute;
left: calc(100% + 0.7rem);
top: 50%;
color: var(--muted);
font-family: 'JetBrains Mono', monospace;
font-size: clamp(0.52rem, 0.8vw, 0.68rem);
font-weight: 500;
letter-spacing: 0;
opacity: 0.65;
transform: translateY(-50%);
}
.programme__nav {
counter-reset: programme-link;
}
.programme__nav > a.hu-ready {
text-decoration: none;
}
.programme__nav > a:focus-visible {
outline: 2px solid var(--hu-color);
outline-offset: 0.22em;
}
.hu-line,
.hu-fill,
.hu-wave {
position: absolute;
left: 0;
width: 100%;
color: var(--hu-color);
pointer-events: none;
}
.hu-line {
bottom: -0.04em;
height: 0.075em;
overflow: hidden;
}
.hu-line__track {
display: block;
width: 100%;
height: 100%;
background: var(--hu-color);
}
.hu-fill {
bottom: -0.07em;
height: 0.19em;
z-index: 0;
background: var(--hu-color);
clip-path: polygon(0 25%, 7% 12%, 19% 24%, 34% 8%, 49% 22%, 63% 10%, 79% 20%, 91% 5%, 100% 22%, 99% 88%, 84% 74%, 67% 93%, 52% 77%, 36% 91%, 18% 76%, 0 90%);
}
.hu-wave {
bottom: -0.105em;
height: 0.13em;
min-height: 8px;
overflow: visible;
}
.programme-index {
display: flex;
align-items: baseline;
min-width: 4.3em;
justify-content: flex-end;
color: var(--muted);
font-size: clamp(0.7rem, 1.1vw, 0.9rem);
overflow: hidden;
}
.programme-index [data-active-index] {
display: inline-block;
color: var(--active-color);
font-size: 1.55em;
font-weight: 700;
transition: color 0.25s ease;
}
@media (max-width: 600px) {
.showcase-shell {
padding: 0.65rem;
}
.showcase-prompt span:last-child {
display: none;
}
.programme {
background: var(--black);
}
.programme__masthead p:last-child {
display: none;
}
.programme__nav > a {
max-width: calc(100% - 1.5rem);
margin-left: 0.75rem;
font-size: clamp(2.35rem, 12vw, 3.35rem);
white-space: normal;
}
.programme__nav > a::after {
left: auto;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.programme__footer {
padding-inline: 0.75rem;
}
.programme__footer > p:first-child {
max-width: 12rem;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
a[data-underline] {
color: var(--paper);
text-decoration-line: underline;
text-decoration-color: var(--hu-color, var(--lime));
text-decoration-thickness: 0.08em;
text-underline-offset: 0.12em;
transform: none !important;
}
.hu-line,
.hu-fill,
.hu-wave {
display: none !important;
}
}
```
### assets/script.js
```js
/**
* Hover Underline
*
* Three material underline treatments for semantic links: an exit-through
* line, a marker sweep, and a hand-drawn SVG wave. GSAP core only.
*/
(function onReady(init) {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})(function initHoverUnderline() {
if (typeof gsap === 'undefined') return;
const SVG_NS = 'http://www.w3.org/2000/svg';
const WAVE_PATH = 'M1 6 C 9 1, 16 8, 25 4 S 41 7, 51 3 S 68 8, 78 4 S 91 2, 99 5';
const ctx = gsap.context(function gsapContextCallback() {
const mm = gsap.matchMedia();
mm.add({
isMotion: '(prefers-reduced-motion: no-preference)',
isReduced: '(prefers-reduced-motion: reduce)'
}, function matchMediaCallback(context) {
const links = Array.from(document.querySelectorAll('a[data-underline]'));
const originalColors = new Map();
links.forEach(function applyLinkColor(link) {
originalColors.set(link, link.style.getPropertyValue('--hu-color'));
if (link.dataset.underlineColor) {
link.style.setProperty('--hu-color', link.dataset.underlineColor);
}
});
// CSS keeps every link visibly underlined when motion is reduced.
if (!context.conditions.isMotion) {
return function reducedCleanup() {
originalColors.forEach(function restoreColor(value, link) {
if (value) link.style.setProperty('--hu-color', value);
else link.style.removeProperty('--hu-color');
});
};
}
const handlers = new Map();
const pairs = new Map();
const injected = [];
const touchTimers = new Map();
const stageCurrent = new Map();
const stageIndexText = new Map();
const stages = new Set();
function registerNode(node) {
node.setAttribute('aria-hidden', 'true');
injected.push(node);
return node;
}
function buildSlide(link) {
const shell = registerNode(document.createElement('span'));
shell.className = 'hu-line';
const track = document.createElement('span');
track.className = 'hu-line__track';
shell.appendChild(track);
link.appendChild(shell);
gsap.set(track, { xPercent: -105 });
return {
targets: [track],
enter: function slideEnter() {
gsap.killTweensOf(track);
gsap.fromTo(track, { xPercent: -105 }, {
xPercent: 0,
duration: 0.48,
ease: 'power4.out'
});
},
leave: function slideLeave() {
gsap.killTweensOf(track);
gsap.to(track, {
xPercent: 105,
duration: 0.34,
ease: 'power3.in'
});
}
};
}
function buildFill(link) {
const fill = registerNode(document.createElement('span'));
fill.className = 'hu-fill';
link.appendChild(fill);
gsap.set(fill, { scaleX: 0, rotation: -1.5, transformOrigin: 'left center' });
return {
targets: [fill],
enter: function fillEnter() {
gsap.killTweensOf(fill);
gsap.set(fill, { transformOrigin: 'left center' });
gsap.fromTo(fill, { scaleX: 0, rotation: -1.5 }, {
scaleX: 1,
rotation: 0.5,
duration: 0.42,
ease: 'power3.out'
});
},
leave: function fillLeave() {
gsap.killTweensOf(fill);
gsap.set(fill, { transformOrigin: 'right center' });
gsap.to(fill, {
scaleX: 0,
rotation: 1.5,
duration: 0.3,
ease: 'power2.inOut'
});
}
};
}
function buildWave(link) {
const svg = registerNode(document.createElementNS(SVG_NS, 'svg'));
svg.setAttribute('class', 'hu-wave');
svg.setAttribute('viewBox', '0 0 100 10');
svg.setAttribute('preserveAspectRatio', 'none');
const path = document.createElementNS(SVG_NS, 'path');
path.setAttribute('d', WAVE_PATH);
path.setAttribute('fill', 'none');
path.setAttribute('stroke', 'currentColor');
path.setAttribute('stroke-width', '2.4');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'round');
svg.appendChild(path);
link.appendChild(svg);
const length = path.getTotalLength();
gsap.set(path, { strokeDasharray: length, strokeDashoffset: length });
return {
targets: [path, svg],
enter: function waveEnter() {
gsap.killTweensOf([path, svg]);
gsap.fromTo(path, { strokeDashoffset: length }, {
strokeDashoffset: 0,
duration: 0.56,
ease: 'power2.out'
});
gsap.fromTo(svg, { y: 3, scaleY: 1.7 }, {
y: 0,
scaleY: 1,
duration: 0.72,
ease: 'elastic.out(1, 0.38)',
transformOrigin: 'center center'
});
},
leave: function waveLeave() {
gsap.killTweensOf([path, svg]);
gsap.to(path, {
strokeDashoffset: -length,
duration: 0.38,
ease: 'power2.in'
});
gsap.to(svg, { y: 0, scaleY: 1, duration: 0.2 });
}
};
}
function updateIndex(stage, link) {
if (!stage || !stage.isConnected) return;
const display = stage.querySelector('[data-active-index]');
const stageLinks = Array.from(stage.querySelectorAll('a[data-underline]'));
const number = link ? String(stageLinks.indexOf(link) + 1).padStart(2, '0') : '00';
const color = link ? getComputedStyle(link).getPropertyValue('--hu-color').trim() : '';
stage.classList.toggle('is-active', Boolean(link));
if (color) stage.style.setProperty('--active-color', color);
else stage.style.removeProperty('--active-color');
if (display && display.textContent !== number) {
display.textContent = number;
gsap.killTweensOf(display);
gsap.fromTo(display, { yPercent: link ? 70 : -35, opacity: 0 }, {
yPercent: 0,
opacity: 1,
duration: 0.34,
ease: 'power3.out'
});
}
}
function enterLink(link) {
if (!link.isConnected) return;
const pair = pairs.get(link);
const stage = link.closest('[data-underline-stage]');
const previous = stage && stageCurrent.get(stage);
if (previous && previous !== link) {
const previousPair = pairs.get(previous);
if (previousPair) previousPair.leave();
gsap.to(previous, {
x: 0,
color: previous.dataset.huRestColor,
duration: 0.28,
ease: 'power2.out',
overwrite: true
});
}
if (stage) stageCurrent.set(stage, link);
pair.enter();
gsap.to(link, {
x: 10,
color: getComputedStyle(link).getPropertyValue('--hu-color').trim(),
duration: 0.36,
ease: 'power3.out',
overwrite: true
});
updateIndex(stage, link);
}
function leaveLink(link) {
if (!link.isConnected) return;
const pair = pairs.get(link);
const stage = link.closest('[data-underline-stage]');
pair.leave();
gsap.to(link, {
x: 0,
color: link.dataset.huRestColor,
duration: 0.34,
ease: 'power3.out',
overwrite: true
});
if (stage && stageCurrent.get(stage) === link) {
stageCurrent.delete(stage);
updateIndex(stage, null);
}
}
links.forEach(function initLink(link) {
const variant = link.dataset.underline || 'slide';
const stage = link.closest('[data-underline-stage]');
const restColor = getComputedStyle(link).color;
let pair;
link.dataset.huRestColor = restColor;
link.classList.add('hu-link', 'hu-ready');
if (stage) {
stages.add(stage);
const display = stage.querySelector('[data-active-index]');
if (display && !stageIndexText.has(display)) {
stageIndexText.set(display, display.textContent);
}
}
if (variant === 'fill') pair = buildFill(link);
else if (variant === 'wave') pair = buildWave(link);
else pair = buildSlide(link);
pairs.set(link, pair);
const enter = function enter() { enterLink(link); };
const leave = function leave() { leaveLink(link); };
const pointerDown = function pointerDown(event) {
if (event.pointerType === 'mouse') return;
window.clearTimeout(touchTimers.get(link));
enterLink(link);
touchTimers.set(link, window.setTimeout(function touchSettle() {
if (document.activeElement !== link) leaveLink(link);
}, 850));
};
link.addEventListener('mouseenter', enter);
link.addEventListener('mouseleave', leave);
link.addEventListener('focus', enter);
link.addEventListener('blur', leave);
link.addEventListener('pointerdown', pointerDown);
handlers.set(link, {
mouseenter: enter,
mouseleave: leave,
focus: enter,
blur: leave,
pointerdown: pointerDown
});
});
stages.forEach(function initialiseStage(stage) {
updateIndex(stage, null);
});
return function cleanup() {
handlers.forEach(function removeHandlers(handlerObject, link) {
Object.keys(handlerObject).forEach(function removeHandler(type) {
link.removeEventListener(type, handlerObject[type]);
});
});
touchTimers.forEach(window.clearTimeout);
pairs.forEach(function killPair(pair) {
gsap.killTweensOf(pair.targets);
});
links.forEach(function restoreLink(link) {
gsap.killTweensOf(link);
link.classList.remove('hu-link', 'hu-ready');
delete link.dataset.huRestColor;
const value = originalColors.get(link);
if (value) link.style.setProperty('--hu-color', value);
else link.style.removeProperty('--hu-color');
});
injected.forEach(function removeNode(node) { node.remove(); });
stages.forEach(function restoreStage(stage) {
stage.classList.remove('is-active');
stage.style.removeProperty('--active-color');
});
stageIndexText.forEach(function restoreIndex(value, display) {
display.textContent = value;
});
handlers.clear();
pairs.clear();
touchTimers.clear();
stageCurrent.clear();
stageIndexText.clear();
injected.length = 0;
};
});
});
window.gsapContext = ctx;
});
```
---
From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt