![\"\"](\"https://01a166ee-434c-71b3-8daa-0356a8a5e3f6.codepen.dev/.codepen/screenshots/475895d94571a535d4618e84ab86decc531decfc2e4b12e98526aea05853f49f/800.jpg\")
An <audio> element with a border which marches around it when playing to showcase the media element pseudo-classes (specifically :playing in this case). This animation would be perfect to use for :buffering, but that is hard to showcase in a Pen.
An <audio> element with a border which marches around it when playing to showcase the media element pseudo-classes (specifically :playing in this case). This animation would be perfect to use for :buffering, but that is hard to showcase in a Pen.
Demo of my npmx-embed web component which allows embedding details from an npm package on web pages.
\nhttps://tangled.org/vale.rocks/npmx-embed
\n\n\t\t\t![\"\"](\"https://01a157d4-ebe1-7899-93f0-ba7d67239792.codepen.dev/.codepen/screenshots/1d431be0f5edcc3503b4636b3667706685a799b54827d990c4b598cc10c00d5b/800.jpg\")
Demo of my npmx-embed web component which allows embedding details from an npm package on web pages.
\nhttps://tangled.org/vale.rocks/npmx-embed
\n", "date_published": "2026-10-20T05:47:34.129093Z", "date_modified": "2026-10-20T07:48:40.85071Z" }, { "id": "https://vale.rocks/demos/01a0cc71-09b7-71af-8773-568b96a6a7d5", "url": "https://vale.rocks/demos/01a0cc71-09b7-71af-8773-568b96a6a7d5", "title": "Simple Scroll Triggered Animation", "image": "https://01a0cc71-09b7-71af-8773-568b96a6a7d5.codepen.dev/.codepen/screenshots/dffe648c1845ff48ffa661743da19843c8c18524bd1738d9737ff94e7b22a060/1280.jpg", "content_html": "\n\t\t\t\n\t\t\t![\"\"](\"https://01a0cc71-09b7-71af-8773-568b96a6a7d5.codepen.dev/.codepen/screenshots/dffe648c1845ff48ffa661743da19843c8c18524bd1738d9737ff94e7b22a060/800.jpg\")
![\"\"](\"https://01a0cc65-6860-7c5c-8967-fcd5180754b3.codepen.dev/.codepen/screenshots/dab6d928466de7fdb15ff6fd33beed159ef34691916755028afd144c196a86a7/800.jpg\")
![\"\"](\"https://01a0cc08-ff54-7c40-a44f-41316eaf7a5a.codepen.dev/.codepen/screenshots/5a145dbdfeb9abdd3026dde8bad28c25261741f576b52a93da8cf9645ad8e4e2/800.jpg\")
Grouped VCA faders allow controlling multiple faders (audio sliders) simultaneously while maintaining the relative value of each slider. This is a pattern commonly seen on physical audio mixing desks.
\nThe master slider can be used to reduce the volume of all channels at once, so that you don’t need to individual scale down each channel’s volume just to increase one channel’s volume. The main place I can see such a system being applied is in video game settings interfaces.
\n\n\t\t\t![\"\"](\"https://01a01740-b88b-7a4b-8aff-9250ad37e4e7.codepen.dev/.codepen/screenshots/b8f8a59fbb729a4403b6fbbd14dbbba65c69419af62610a6252528d66bce26ea/800.jpg\")
Grouped VCA faders allow controlling multiple faders (audio sliders) simultaneously while maintaining the relative value of each slider. This is a pattern commonly seen on physical audio mixing desks.
\nThe master slider can be used to reduce the volume of all channels at once, so that you don’t need to individual scale down each channel’s volume just to increase one channel’s volume. The main place I can see such a system being applied is in video game settings interfaces.
\n", "date_published": "2026-08-19T00:05:16.857605Z", "date_modified": "2026-08-19T00:24:21.138801Z" }, { "id": "https://vale.rocks/demos/019ff953-590a-7af0-8d5d-d8c93c03b7ec", "url": "https://vale.rocks/demos/019ff953-590a-7af0-8d5d-d8c93c03b7ec", "title": "Blockquotes With The Cite Attribute", "image": "https://019ff953-590a-7af0-8d5d-d8c93c03b7ec.codepen.dev/.codepen/screenshots/a274bc24ff0fc8759d428c8d7bbf88dc445b08b9ba973fda207c1e68bfa9ce07/1280.jpg", "content_html": "\n\t\t\tUsing HTML’s cite attribute with the ::after pseudo-element to display the source of a blockquote on a page without additional markup.
![\"\"](\"https://019ff953-590a-7af0-8d5d-d8c93c03b7ec.codepen.dev/.codepen/screenshots/a274bc24ff0fc8759d428c8d7bbf88dc445b08b9ba973fda207c1e68bfa9ce07/800.jpg\")
Using HTML’s cite attribute with the ::after pseudo-element to display the source of a blockquote on a page without additional markup.
This is a light/dark theme switch with three states. It defaults to the system theme setting. Pressing light forces light mode. Pressing dark forces dark mode. Pressing the active setting again returns to the system preference.
\nFurther details on this approach: https://vale.rocks/micros/20260810-0330
\n\n\t\t\t![\"\"](\"https://019fe98c-2d9b-71e4-849d-726543589635.codepen.dev/.codepen/screenshots/a66b6d43ae51bacf46d0f63d0f8d1067b69fed939d75871845eaea9d5a99d21d/800.jpg\")
This is a light/dark theme switch with three states. It defaults to the system theme setting. Pressing light forces light mode. Pressing dark forces dark mode. Pressing the active setting again returns to the system preference.
\nFurther details on this approach: https://vale.rocks/micros/20260810-0330
\n", "date_published": "2026-08-10T02:42:46.285345Z", "date_modified": "2026-08-18T09:40:09.948604Z" }, { "id": "https://vale.rocks/demos/JoExxRJ", "url": "https://vale.rocks/demos/JoExxRJ", "title": ":has next-sibling combinator demo", "image": "https://shots.codepen.io/username/pen/JoExxRJ-1280.jpg?version=1785990082", "content_html": "\n\t\t\t\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/JoExxRJ-800.jpg?version=1785990082\")
Simple demonstration of a basic popover.
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/pvRGqeQ-800.jpg?version=1785983772\")
Simple demonstration of a basic popover.
\n", "date_published": "2026-08-06T01:55:21.49809Z", "date_modified": "2026-08-06T02:36:12.068397Z" }, { "id": "https://vale.rocks/demos/PwWVOzP", "url": "https://vale.rocks/demos/PwWVOzP", "title": "Simple @scope Demos", "image": "https://shots.codepen.io/username/pen/PwWVOzP-1280.jpg?version=1785916143", "content_html": "\n\t\t\t\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/PwWVOzP-800.jpg?version=1785916143\")
Dynamically space out the items in a list using sibling-count()
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/WbRPZvq-800.jpg?version=1785914841\")
Dynamically space out the items in a list using sibling-count()
\n", "date_published": "2026-08-05T05:26:19.262414Z", "date_modified": "2026-08-05T07:27:21.4196Z" }, { "id": "https://vale.rocks/demos/rajvbBd", "url": "https://vale.rocks/demos/rajvbBd", "title": "text-box-trim Demo", "image": "https://shots.codepen.io/username/pen/rajvbBd-1280.jpg?version=1785983064", "content_html": "\n\t\t\tA display of the various text-box-trim values.
![\"\"](\"https://shots.codepen.io/username/pen/rajvbBd-800.jpg?version=1785983064\")
A display of the various text-box-trim values.
Demo of a library that fixes the mistakes the CSSWG have identified in the design of CSS to show what should have been.
\nhttps://tangled.org/vale.rocks/FixCSS
\n\n\t\t\t![\"\"](\"https://019f1bb1-b2cc-7ad8-9dea-329cba5724d6.codepen.dev/.codepen/screenshots/608214817d32906e6248fc4dfe95251a49c994c215fe3b415c39bab89c5b17ae/800.jpg\")
Demo of a library that fixes the mistakes the CSSWG have identified in the design of CSS to show what should have been.
\nhttps://tangled.org/vale.rocks/FixCSS
\n", "date_published": "2026-07-01T04:02:58.68777Z", "date_modified": "2026-10-20T05:46:40.38843Z" }, { "id": "https://vale.rocks/demos/ZYLeywa", "url": "https://vale.rocks/demos/ZYLeywa", "title": "3D Globe (No JavaScript)", "image": "https://shots.codepen.io/username/pen/ZYLeywa-1280.jpg?version=1782019499", "content_html": "\n\t\t\t\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/ZYLeywa-800.jpg?version=1782019499\")
A rotating ring sphere made using only HTML and CSS.
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/BypWRox-800.jpg?version=1781947108\")
A rotating ring sphere made using only HTML and CSS.
\n", "date_published": "2026-06-20T09:04:55.39802Z", "date_modified": "2026-06-20T09:18:28.290847Z" }, { "id": "https://vale.rocks/demos/emJQXOx", "url": "https://vale.rocks/demos/emJQXOx", "title": "Blobby Navbar Blur", "image": "https://shots.codepen.io/username/pen/emJQXOx-1280.jpg?version=1793341241", "content_html": "\n\t\t\tIsolated reproduction of the header effect seen at in the original version of the Google Flow website: https://web.archive.org/web/20250520174920/https://labs.google/flow/about
\nCould be authored cleaner, but this uses the same method as the original.
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/emJQXOx-800.jpg?version=1793341241\")
Isolated reproduction of the header effect seen at in the original version of the Google Flow website: https://web.archive.org/web/20250520174920/https://labs.google/flow/about
\nCould be authored cleaner, but this uses the same method as the original.
\n", "date_published": "2025-11-03T03:09:42.150146Z", "date_modified": "2026-10-30T06:20:41.754583Z" }, { "id": "https://vale.rocks/demos/WbrgqeL", "url": "https://vale.rocks/demos/WbrgqeL", "title": "Sci-Fi Clock", "image": "https://shots.codepen.io/username/pen/WbrgqeL-1280.jpg?version=1761895792", "content_html": "\n\t\t\tFollows normal people date order. HH:MM:SS, DD/MM/YYYY
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/WbrgqeL-800.jpg?version=1761895792\")
Follows normal people date order. HH:MM:SS, DD/MM/YYYY
\n", "date_published": "2025-10-31T07:29:32.780592Z", "date_modified": "2025-10-31T07:29:52.988152Z" }, { "id": "https://vale.rocks/demos/NPxLjqX", "url": "https://vale.rocks/demos/NPxLjqX", "title": "Dots Following Cursor", "image": "https://shots.codepen.io/username/pen/NPxLjqX-1280.jpg?version=1761805977", "content_html": "\n\t\t\tI’m forever amazed by how much you can accomplish with so little code. The web is such a powerful platform and canvas is so much fun to experiment with.
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/NPxLjqX-800.jpg?version=1761805977\")
I’m forever amazed by how much you can accomplish with so little code. The web is such a powerful platform and canvas is so much fun to experiment with.
\n", "date_published": "2025-10-30T06:30:05.139178Z", "date_modified": "2025-10-30T06:32:57.285828Z" }, { "id": "https://vale.rocks/demos/jEWpdeR", "url": "https://vale.rocks/demos/jEWpdeR", "title": "Radio Button Checkboxes", "image": "https://shots.codepen.io/username/pen/jEWpdeR-1280.jpg?version=1761731044", "content_html": "\n\t\t\tTune in next time for checkbox radio buttons…
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/jEWpdeR-800.jpg?version=1761731044\")
Tune in next time for checkbox radio buttons…
\n", "date_published": "2025-10-29T09:44:04.459321Z", "date_modified": "2025-10-29T09:44:04.459321Z" }, { "id": "https://vale.rocks/demos/myVjEPQ", "url": "https://vale.rocks/demos/myVjEPQ", "title": "Custom Styled Audio Element Without JavaScript", "image": "https://shots.codepen.io/username/pen/myVjEPQ-1280.jpg?version=1792739693", "content_html": "\n\t\t\tUnfortunately WebKit/Blink only due to the use of vendor prefixed CSS. Doesn’t work on Safari either, due to forced controls.
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/myVjEPQ-800.jpg?version=1792739693\")
Unfortunately WebKit/Blink only due to the use of vendor prefixed CSS. Doesn’t work on Safari either, due to forced controls.
\n", "date_published": "2025-10-28T08:17:10.261655Z", "date_modified": "2026-10-23T07:14:53.070978Z" }, { "id": "https://vale.rocks/demos/ogbyaGw", "url": "https://vale.rocks/demos/ogbyaGw", "title": "Tiny Colourful Canvas Animation", "image": "https://shots.codepen.io/username/pen/ogbyaGw-1280.jpg?version=1761566428", "content_html": "\n\t\t\tI made this as brutally small as I could as a bit of a challenge for myself.
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/ogbyaGw-800.jpg?version=1761566428\")
I made this as brutally small as I could as a bit of a challenge for myself.
\n", "date_published": "2025-10-27T11:49:09.324448Z", "date_modified": "2025-10-27T12:00:28.928049Z" }, { "id": "https://vale.rocks/demos/WbryGqa", "url": "https://vale.rocks/demos/WbryGqa", "title": "Two Finger Dial", "image": "https://shots.codepen.io/username/pen/WbryGqa-1280.jpg?version=1761465052", "content_html": "\n\t\t\tA sorta dial system. My mind goes to the futuristic displays of Minority Report or Iron Man.
\nOne finger serves as an anchor, while the other rotates around it. Could be cool for volume control or whatsnot.
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/WbryGqa-800.jpg?version=1761465052\")
A sorta dial system. My mind goes to the futuristic displays of Minority Report or Iron Man.
\nOne finger serves as an anchor, while the other rotates around it. Could be cool for volume control or whatsnot.
\n", "date_published": "2025-10-26T07:38:34.795287Z", "date_modified": "2025-10-26T07:50:52.951075Z" }, { "id": "https://vale.rocks/demos/bNEMyPG", "url": "https://vale.rocks/demos/bNEMyPG", "title": "CRT Effect", "image": "https://shots.codepen.io/username/pen/bNEMyPG-1280.jpg?version=1761395343", "content_html": "\n\t\t\tA simple CRT-ish effect achieved in pure CSS.
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/bNEMyPG-800.jpg?version=1761395343\")
A simple CRT-ish effect achieved in pure CSS.
\n", "date_published": "2025-10-25T08:42:08.149456Z", "date_modified": "2025-10-25T12:29:03.962461Z" }, { "id": "https://vale.rocks/demos/xbZjYPr", "url": "https://vale.rocks/demos/xbZjYPr", "title": "Watercolour Sunset", "image": "https://shots.codepen.io/username/pen/xbZjYPr-1280.jpg?version=1785937482", "content_html": "\n\t\t\tA sunset with a slightly watercolour look achieved via an SVG filter.
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/xbZjYPr-800.jpg?version=1785937482\")
A sunset with a slightly watercolour look achieved via an SVG filter.
\n", "date_published": "2025-10-24T12:16:21.801732Z", "date_modified": "2026-08-05T13:44:42.621519Z" }, { "id": "https://vale.rocks/demos/OPMvGrw", "url": "https://vale.rocks/demos/OPMvGrw", "title": "Planet Clock New Tab Page", "image": "https://shots.codepen.io/username/pen/OPMvGrw-1280.jpg?version=1761211961", "content_html": "\n\t\t\tA procedural planet made using Three.js. A clock is also included, making it a fun new tab page in a browser..
\nSpacebar generates a new and unique planet.
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/OPMvGrw-800.jpg?version=1761211961\")
A procedural planet made using Three.js. A clock is also included, making it a fun new tab page in a browser..
\nSpacebar generates a new and unique planet.
\n", "date_published": "2025-10-23T09:19:56.893549Z", "date_modified": "2025-10-23T09:32:41.272444Z" }, { "id": "https://vale.rocks/demos/azdYZRg", "url": "https://vale.rocks/demos/azdYZRg", "title": "Marquee Text Phasing Effect", "image": "https://shots.codepen.io/username/pen/azdYZRg-1280.jpg?version=1761117860", "content_html": "\n\t\t\t<marquee> truly is so much fun. This effect makes the text stay in place but dissappear and reappear.
![\"\"](\"https://shots.codepen.io/username/pen/azdYZRg-800.jpg?version=1761117860\")
<marquee> truly is so much fun. This effect makes the text stay in place but dissappear and reappear.
Tables are fun. Odd table rendering stuff is funerer.
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/JoGpvER-800.jpg?version=1761031490\")
Tables are fun. Odd table rendering stuff is funerer.
\n", "date_published": "2025-10-21T07:24:19.814133Z", "date_modified": "2025-10-21T07:24:50.987026Z" }, { "id": "https://vale.rocks/demos/vELdLMz", "url": "https://vale.rocks/demos/vELdLMz", "title": "Ruby Text Hover Effect", "image": "https://shots.codepen.io/username/pen/vELdLMz-1280.jpg?version=1760963981", "content_html": "\n\t\t\tExcuse the poor Japanese.
\n\n\t\t\t![\"\"](\"https://shots.codepen.io/username/pen/vELdLMz-800.jpg?version=1760963981\")
Excuse the poor Japanese.
\n", "date_published": "2025-10-20T12:39:10.690283Z", "date_modified": "2025-10-20T12:39:41.886938Z" }, { "id": "https://vale.rocks/demos/ogbpMvv", "url": "https://vale.rocks/demos/ogbpMvv", "title": "Abstract Table Art", "image": "https://shots.codepen.io/username/pen/ogbpMvv-1280.jpg?version=1760854386", "content_html": "\n\t\t\tGetting crazy with some table styling (and the ever loved bgcolor attribute) to make a cool, colourful, abstract, thingamabob.
![\"\"](\"https://shots.codepen.io/username/pen/ogbpMvv-800.jpg?version=1760854386\")
Getting crazy with some table styling (and the ever loved bgcolor attribute) to make a cool, colourful, abstract, thingamabob.