site: brainstorm retro hover styles for text links

[decepulis]

Summary

Test page at /hover-styles with 8 link hover style proposals for #810. The site has an 80s/90s VHS vibe, so the options range from practical to full retro.

Proposals

#	Style	Description
0	Current	Underline disappears on hover (the problem)
1	Underline Color Shift	Underline stays, turns gold on hover
2	Thick Underline	Underline thickens + turns gold
3	VHS Chromatic Aberration	Cyan/magenta text-shadow offset like bad tracking
4	Scanline Highlight	Striped CRT scanline background overlay
5	Color Inversion	Foreground/background swap (teletext style)
6	Underline Slide-In	Underline animates left-to-right (tape rewind)
7	VCR Bracket Markers	[ brackets ] slide in on hover
8	Combo	Gold + thicker underline together

How to review

Run pnpm dev and visit http://localhost:4321/hover-styles/

https://claude.ai/code/session_01Bde6SETLP8nGm6mFVeednB

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Mar 27, 2026 4:32pm

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	f29f1ba
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69c6b11631624b00081bfb3d
😎 Deploy Preview	https://deploy-preview-1149--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html — no changes

Presets (7)

Entry	Size
/video (default)	23.67 kB
/video (default + hls)	154.49 kB
/video (minimal)	23.55 kB
/video (minimal + hls)	154.28 kB
/audio (default)	21.80 kB
/audio (minimal)	21.86 kB
/background	6.80 kB

Media (6)

Entry	Size
/media/background-video	1.03 kB
/media/container	1.59 kB
/media/dash-video	236.18 kB
/media/hls-video	132.24 kB
/media/mux-video	154.89 kB
/media/simple-hls-video	12.63 kB

Players (3)

Entry	Size
/video/player	6.52 kB
/audio/player	6.51 kB
/background/player	6.50 kB

Skins (16)

Entry	Type	Size
/video/minimal-skin.css	css	3.25 kB
/video/skin.css	css	3.31 kB
/video/minimal-skin	js	22.73 kB
/video/minimal-skin.tailwind	js	23.20 kB
/video/skin	js	22.88 kB
/video/skin.tailwind	js	23.13 kB
/audio/minimal-skin.css	css	2.37 kB
/audio/skin.css	css	2.37 kB
/audio/minimal-skin	js	21.05 kB
/audio/minimal-skin.tailwind	js	21.38 kB
/audio/skin	js	21.01 kB
/audio/skin.tailwind	js	21.34 kB
/background/skin.css	css	117 B
/background/skin	js	1.13 kB
/base.css	css	157 B
/shared.css	css	86 B

UI Components (21)

Entry	Size
/ui/alert-dialog	1.89 kB
/ui/alert-dialog-close	1.72 kB
/ui/alert-dialog-description	1.61 kB
/ui/alert-dialog-title	1.61 kB
/ui/buffering-indicator	1.70 kB
/ui/captions-button	1.87 kB
/ui/controls	1.69 kB
/ui/fullscreen-button	1.90 kB
/ui/mute-button	1.94 kB
/ui/pip-button	1.87 kB
/ui/play-button	1.89 kB
/ui/playback-rate-button	1.92 kB
/ui/popover	2.58 kB
/ui/poster	1.59 kB
/ui/seek-button	1.87 kB
/ui/slider	2.10 kB
/ui/thumbnail	1.94 kB
/ui/time	1.70 kB
/ui/time-slider	2.16 kB
/ui/tooltip	2.15 kB
/ui/volume-slider	2.30 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Size
/video (default)	19.29 kB
/video (default + hls)	150.23 kB
/video (minimal)	19.30 kB
/video (minimal + hls)	150.34 kB
/audio (default)	16.10 kB
/audio (minimal)	16.16 kB
/background	3.13 kB

Media (5)

Entry	Size
/media/background-video	476 B
/media/dash-video	236.27 kB
/media/hls-video	132.21 kB
/media/mux-video	154.87 kB
/media/simple-hls-video	12.61 kB

Skins (14)

Entry	Type	Size
/video/minimal-skin.css	css	3.25 kB
/video/skin.css	css	3.31 kB
/video/minimal-skin	js	19.22 kB
/video/minimal-skin.tailwind	js	22.45 kB
/video/skin	js	19.20 kB
/video/skin.tailwind	js	22.44 kB
/audio/minimal-skin.css	css	2.37 kB
/audio/skin.css	css	2.37 kB
/audio/minimal-skin	js	16.06 kB
/audio/minimal-skin.tailwind	js	18.48 kB
/audio/skin	js	16.00 kB
/audio/skin.tailwind	js	18.40 kB
/background/skin.css	css	90 B
/background/skin	js	272 B

UI Components (18)

Entry	Size
/ui/alert-dialog	2.28 kB
/ui/buffering-indicator	1.89 kB
/ui/captions-button	2.30 kB
/ui/controls	1.88 kB
/ui/fullscreen-button	2.30 kB
/ui/mute-button	2.29 kB
/ui/pip-button	2.31 kB
/ui/play-button	2.35 kB
/ui/playback-rate-button	2.30 kB
/ui/popover	2.90 kB
/ui/poster	1.77 kB
/ui/seek-button	2.33 kB
/ui/slider	3.16 kB
/ui/thumbnail	2.07 kB
/ui/time	1.93 kB
/ui/time-slider	2.73 kB
/ui/tooltip	2.74 kB
/ui/volume-slider	2.65 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (7)

Entry	Size
.	4.97 kB
/dom	8.74 kB
/dom/media/custom-media-element	1.81 kB
/dom/media/dash	235.71 kB
/dom/media/hls	131.49 kB
/dom/media/mux	154.27 kB
/dom/media/simple-hls	12.02 kB

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	999 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Size
.	1.38 kB
/html	700 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Size
/array	104 B
/dom	1.25 kB
/events	319 B
/function	261 B
/object	119 B
/predicate	265 B
/string	148 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf — no changes

Entries (3)

Entry	Size
.	40 B
/dom	10.22 kB
/playback-engine	10.12 kB

---

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.