Vale.Rocks Demos Front-end experiments and code demos. https://vale.rocks/demos Fri, 23 Oct 2026 04:16:40 GMT &lt;audio&gt; with playing animation https://vale.rocks/demos/01a166ee-434c-71b3-8daa-0356a8a5e3f6 https://vale.rocks/demos/01a166ee-434c-71b3-8daa-0356a8a5e3f6 <p>An <code>&lt;audio&gt;</code> element with a border which marches around it when playing to showcase the media element pseudo-classes (specifically <code>:playing</code> in this case). This animation would be perfect to use for <code>:buffering</code>, but that is hard to showcase in a Pen.</p> 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.

]]> Tue, 20 Oct 2026 05:47:34 GMT Npmx Embed Web Component Demo https://vale.rocks/demos/01a157d4-ebe1-7899-93f0-ba7d67239792 https://vale.rocks/demos/01a157d4-ebe1-7899-93f0-ba7d67239792 <p>Demo of my npmx-embed web component which allows embedding details from an npm package on web pages.</p> <p><a href="https://tangled.org/vale.rocks/npmx-embed">https://tangled.org/vale.rocks/npmx-embed</a></p> Demo of my npmx-embed web component which allows embedding details from an npm package on web pages.

https://tangled.org/vale.rocks/npmx-embed

]]> Wed, 23 Sep 2026 04:05:55 GMT Simple Scroll Triggered Animation https://vale.rocks/demos/01a0cc71-09b7-71af-8773-568b96a6a7d5 https://vale.rocks/demos/01a0cc71-09b7-71af-8773-568b96a6a7d5

]]> Wed, 23 Sep 2026 03:54:02 GMT Simple Scroll Driven Animation https://vale.rocks/demos/01a0cc65-6860-7c5c-8967-fcd5180754b3 https://vale.rocks/demos/01a0cc65-6860-7c5c-8967-fcd5180754b3

]]> Wed, 23 Sep 2026 02:15:18 GMT Material You Dynamic Palette with color-mix() https://vale.rocks/demos/01a0cc08-ff54-7c40-a44f-41316eaf7a5a https://vale.rocks/demos/01a0cc08-ff54-7c40-a44f-41316eaf7a5a

]]> Wed, 19 Aug 2026 00:05:16 GMT Grouped VCA Faders-style Volume Slider https://vale.rocks/demos/01a01740-b88b-7a4b-8aff-9250ad37e4e7 https://vale.rocks/demos/01a01740-b88b-7a4b-8aff-9250ad37e4e7 <p>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.</p> <p>The master slider can be used to reduce the volume of all channels at once, so that you don&#8217;t need to individual scale down each channel&#8217;s volume just to increase one channel&#8217;s volume. The main place I can see such a system being applied is in video game settings interfaces.</p> 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.

The 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.

]]> Thu, 13 Aug 2026 04:57:59 GMT Blockquotes With The Cite Attribute https://vale.rocks/demos/019ff953-590a-7af0-8d5d-d8c93c03b7ec https://vale.rocks/demos/019ff953-590a-7af0-8d5d-d8c93c03b7ec <p>Using HTML&#8217;s <code>cite</code> attribute with the <code>::after</code> pseudo-element to display the source of a blockquote on a page without additional markup.</p> Using HTML’s cite attribute with the ::after pseudo-element to display the source of a blockquote on a page without additional markup.

]]> Mon, 10 Aug 2026 02:42:46 GMT Light/Dark/System Theme Setting https://vale.rocks/demos/019fe98c-2d9b-71e4-849d-726543589635 https://vale.rocks/demos/019fe98c-2d9b-71e4-849d-726543589635 <p>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.</p> <p>Further details on this approach: <a href="https://vale.rocks/micros/20260810-0330">https://vale.rocks/micros/20260810-0330</a></p> 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.

Further details on this approach: https://vale.rocks/micros/20260810-0330

]]> Thu, 06 Aug 2026 04:20:51 GMT :has next-sibling combinator demo https://vale.rocks/demos/JoExxRJ https://vale.rocks/demos/JoExxRJ

]]> Thu, 06 Aug 2026 01:55:21 GMT Simple Popover Demo https://vale.rocks/demos/pvRGqeQ https://vale.rocks/demos/pvRGqeQ <p>Simple demonstration of a basic popover.</p> Simple demonstration of a basic popover.

]]> Wed, 05 Aug 2026 07:49:03 GMT Simple @scope Demos https://vale.rocks/demos/PwWVOzP https://vale.rocks/demos/PwWVOzP

]]> Wed, 05 Aug 2026 05:26:19 GMT sibling-count() dynamic list spacing https://vale.rocks/demos/WbRPZvq https://vale.rocks/demos/WbRPZvq <p>Dynamically space out the items in a list using sibling-count()</p> Dynamically space out the items in a list using sibling-count()

]]> Thu, 16 Jul 2026 03:20:20 GMT text-box-trim Demo https://vale.rocks/demos/rajvbBd https://vale.rocks/demos/rajvbBd <p>A display of the various <code>text-box-trim</code> values.</p> A display of the various text-box-trim values.

]]> Wed, 01 Jul 2026 04:02:58 GMT FixCSS Demonstration https://vale.rocks/demos/019f1bb1-b2cc-7ad8-9dea-329cba5724d6 https://vale.rocks/demos/019f1bb1-b2cc-7ad8-9dea-329cba5724d6 <p>Demo of a library that fixes the mistakes the CSSWG have identified in the design of CSS to show what should have been.</p> <p><a href="https://tangled.org/vale.rocks/FixCSS">https://tangled.org/vale.rocks/FixCSS</a></p> Demo of a library that fixes the mistakes the CSSWG have identified in the design of CSS to show what should have been.

https://tangled.org/vale.rocks/FixCSS

]]> Sat, 20 Jun 2026 11:58:31 GMT 3D Globe (No JavaScript) https://vale.rocks/demos/ZYLeywa https://vale.rocks/demos/ZYLeywa

]]> Sat, 20 Jun 2026 09:04:55 GMT Ring Sphere (No JavaScript) https://vale.rocks/demos/BypWRox https://vale.rocks/demos/BypWRox <p>A rotating ring sphere made using only HTML and CSS.</p> A rotating ring sphere made using only HTML and CSS.

]]> Mon, 03 Nov 2025 03:09:42 GMT Blobby Navbar Blur https://vale.rocks/demos/emJQXOx https://vale.rocks/demos/emJQXOx <p>Isolated reproduction of the header effect seen at in the original version of the Google Flow website: <a href="https://web.archive.org/web/20250520174920/https://labs.google/flow/about">https://web.archive.org/web/20250520174920/https://labs.google/flow/about</a></p> <p>Could be authored cleaner, but this uses the same method as the original.</p> 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

Could be authored cleaner, but this uses the same method as the original.

]]> Fri, 31 Oct 2025 07:29:32 GMT Sci-Fi Clock https://vale.rocks/demos/WbrgqeL https://vale.rocks/demos/WbrgqeL <p>Follows normal people date order. HH:MM:SS, DD/MM/YYYY</p> Follows normal people date order. HH:MM:SS, DD/MM/YYYY

]]> Thu, 30 Oct 2025 06:30:05 GMT Dots Following Cursor https://vale.rocks/demos/NPxLjqX https://vale.rocks/demos/NPxLjqX <p>I&#8217;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.</p> 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.

]]> Wed, 29 Oct 2025 09:44:04 GMT Radio Button Checkboxes https://vale.rocks/demos/jEWpdeR https://vale.rocks/demos/jEWpdeR <p>Tune in next time for checkbox radio buttons&#8230;</p> Tune in next time for checkbox radio buttons…

]]> Tue, 28 Oct 2025 08:17:10 GMT Custom Styled Audio Element Without JavaScript https://vale.rocks/demos/myVjEPQ https://vale.rocks/demos/myVjEPQ <p>Unfortunately WebKit/Blink only due to the use of vendor prefixed CSS. Doesn&#8217;t work on Safari either, due to forced controls.</p> Unfortunately WebKit/Blink only due to the use of vendor prefixed CSS. Doesn’t work on Safari either, due to forced controls.

]]> Mon, 27 Oct 2025 11:49:09 GMT Tiny Colourful Canvas Animation https://vale.rocks/demos/ogbyaGw https://vale.rocks/demos/ogbyaGw <p>I made this as brutally small as I could as a bit of a challenge for myself.</p> I made this as brutally small as I could as a bit of a challenge for myself.

]]> Sun, 26 Oct 2025 07:38:34 GMT Two Finger Dial https://vale.rocks/demos/WbryGqa https://vale.rocks/demos/WbryGqa <p>A sorta dial system. My mind goes to the futuristic displays of Minority Report or Iron Man.</p> <p>One finger serves as an anchor, while the other rotates around it. Could be cool for volume control or whatsnot.</p> A sorta dial system. My mind goes to the futuristic displays of Minority Report or Iron Man.

One finger serves as an anchor, while the other rotates around it. Could be cool for volume control or whatsnot.

]]> Sat, 25 Oct 2025 08:42:08 GMT CRT Effect https://vale.rocks/demos/bNEMyPG https://vale.rocks/demos/bNEMyPG <p>A simple CRT-ish effect achieved in pure CSS.</p> A simple CRT-ish effect achieved in pure CSS.

]]> Fri, 24 Oct 2025 12:16:21 GMT Watercolour Sunset https://vale.rocks/demos/xbZjYPr https://vale.rocks/demos/xbZjYPr <p>A sunset with a slightly watercolour look achieved via an SVG filter.</p> A sunset with a slightly watercolour look achieved via an SVG filter.

]]> Thu, 23 Oct 2025 09:19:56 GMT Planet Clock New Tab Page https://vale.rocks/demos/OPMvGrw https://vale.rocks/demos/OPMvGrw <p>A procedural planet made using Three.js. A clock is also included, making it a fun new tab page in a browser..</p> <p>Spacebar generates a new and unique planet.</p> A procedural planet made using Three.js. A clock is also included, making it a fun new tab page in a browser..

Spacebar generates a new and unique planet.

]]> Wed, 22 Oct 2025 07:15:07 GMT Marquee Text Phasing Effect https://vale.rocks/demos/azdYZRg https://vale.rocks/demos/azdYZRg <p><code>&lt;marquee&gt;</code> truly is so much fun. This effect makes the text stay in place but dissappear and reappear.</p> <marquee> truly is so much fun. This effect makes the text stay in place but dissappear and reappear.

]]> Tue, 21 Oct 2025 07:24:19 GMT Play Stupid Grids, Win Stupid Prizes https://vale.rocks/demos/JoGpvER https://vale.rocks/demos/JoGpvER <p>Tables are fun. Odd table rendering stuff is funerer.</p> Tables are fun. Odd table rendering stuff is funerer.

]]> Mon, 20 Oct 2025 12:39:10 GMT Ruby Text Hover Effect https://vale.rocks/demos/vELdLMz https://vale.rocks/demos/vELdLMz <p>Excuse the poor Japanese.</p> Excuse the poor Japanese.

]]> Sun, 19 Oct 2025 06:13:06 GMT Abstract Table Art https://vale.rocks/demos/ogbpMvv https://vale.rocks/demos/ogbpMvv <p>Getting crazy with some table styling (and the ever loved <code>bgcolor</code> attribute) to make a cool, colourful, abstract, thingamabob.</p> Getting crazy with some table styling (and the ever loved bgcolor attribute) to make a cool, colourful, abstract, thingamabob.

]]>