<article>
  <h1>Scroll Contextual Conic Gradient Text</h1>
  <p>text mask revealing "fixed to viewport" background gradient</p>
</article>

article {
  /*  leverage cascade for cross-browser gradients  */
  background: radial-gradient(
    hsl(100 100% 60%), 
    hsl(200 100% 60%) 
  ) fixed;
  background: conic-gradient(
    hsl(100 100% 60%), 
    hsl(200 100% 60%), 
    hsl(100 100% 60%) 
  ) fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
} 

body {
  background: hsl(204 100% 5%);
/*   background: conic-gradient(
    hsl(100 100% 60%), 
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  ) fixed; */
  color: white;
  min-block-size: 200vh;
  min-inline-size: 100%;
  padding: 5vmin;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  font-family: system-ui;
  font-size: min(200%, 5vmin);
}

h1, p, body {
  margin: 0;
}

h1 {
  font-size: 10vmin;
  line-height: 1.1;
  max-inline-size: 15ch;
  margin: auto;
}

p {
  font-family: "Dank Mono", ui-monospace, monospace;
  margin-top: 1ch;
  line-height: 1.35;
  max-inline-size: 40ch;
  margin: auto;
}

html {
  block-size: 100%;
  inline-size: 100%;
  text-align: center;
}