An interactive web experiment combining a springy-baseline hover effect with a variable font whose glyphs can flex to match the baseline’s curvature:
https://hex.xyz/Shop_Sans/boing/
The CSS code is based on demos from nprofile1qy2hwumn8ghj7un9d3shjtnyd968gmewwp6kyqpq6mupqs08pvwk8crlddfd8wuag79ldtqss09gslalvwksne2u6r0qwrdd9w (nprofile…dd9w) with tips from nprofile1qy2hwumn8ghj7un9d3shjtnyd968gmewwp6kyqpq7cs0awnjg84w085zneqyvpzynpr75l5z47r9hjrhkcgetnzgvsmqf9tm79 (nprofile…tm79) yesterday:
https://front-end.social/@css/116006138838064149
The variable font is Shop Sans, which I made for exactly these kinds of curved-baseline situations:
https://www.futurefonts.com/hex/shop-sans
It’s just CSS with a variable web font (no JavaScript involved) and would have been impossible until fairly recently.
HEX Projects
npub15x…t8y8z
2026-02-04 10:22:43 UTC
Author Public Key
npub15xt4ff7u24vvk4r3036w68vcl0stedd06sct8k4pez36anufa8dsct8y8zPublished at
2026-02-04 10:22:43 UTCEvent JSON
{
"id": "33eabd398916f15c106ed370edc719ea0c22e6f680fbff71bd65a9aa9e0a186d",
"pubkey": "a19754a7dc5558cb54717c74ed1d98fbe0bcb5afd430b3daa1c8a3aecf89e9db",
"created_at": 1770200563,
"kind": 1,
"tags": [
[
"p",
"d6f81041e70b1d63e07f6b52d3bb9d478bf6ac1083ca887fbf63ad09e55cd0de",
"wss://relay.ditto.pub"
],
[
"p",
"f620feba7241eae79e829e404604449847ea7e82af865bc877b61195cc486436",
"wss://relay.ditto.pub"
],
[
"p",
"714c2ce1e17b3904303c8ba064d418df7cb5a9d611e52521351cd929c2851319",
"wss://relay.ditto.pub"
],
[
"p",
"1ea5c2d0e935fb9fa76516688fbe2515d64704ee93ac3abf4198b15a125376e6",
"wss://relay.ditto.pub"
],
[
"imeta",
"url https://typo.social/system/media_attachments/files/116/011/626/236/207/639/original/0829b40a0017eacb.mp4",
"m video/mp4",
"dim 600x780",
"blurhash ULP%O.t7_3xuRjayt7ay~qofD%ayM{j[xuof"
],
[
"proxy",
"https://typo.social/users/HEX/statuses/116011864126726175",
"activitypub"
],
[
"client",
"Mostr",
"31990:6be38f8c63df7dbf84db7ec4a6e6fbbd8d19dca3b980efad18585c46f04b26f9:mostr",
"wss://relay.ditto.pub"
]
],
"content": "An interactive web experiment combining a springy-baseline hover effect with a variable font whose glyphs can flex to match the baseline’s curvature:\nhttps://hex.xyz/Shop_Sans/boing/\n\nThe CSS code is based on demos from nostr:nprofile1qy2hwumn8ghj7un9d3shjtnyd968gmewwp6kyqpq6mupqs08pvwk8crlddfd8wuag79ldtqss09gslalvwksne2u6r0qwrdd9w with tips from nostr:nprofile1qy2hwumn8ghj7un9d3shjtnyd968gmewwp6kyqpq7cs0awnjg84w085zneqyvpzynpr75l5z47r9hjrhkcgetnzgvsmqf9tm79 yesterday:\nhttps://front-end.social/@css/116006138838064149\n\nThe variable font is Shop Sans, which I made for exactly these kinds of curved-baseline situations:\nhttps://www.futurefonts.com/hex/shop-sans\n\nIt’s just CSS with a variable web font (no JavaScript involved) and would have been impossible until fairly recently.\n\nhttps://typo.social/system/media_attachments/files/116/011/626/236/207/639/original/0829b40a0017eacb.mp4",
"sig": "32d0872263a589dec65708488135911f497f39542ed7a4ba9cc0c870cd59e2e88d5e7ee380d7ca30fd5b036d20b480e1ab95910a343fcd5b93e5c0a64a1dffc6"
}