rainbow-line sample

Sample page showing the rainbow-line web component in action

by spearwolf

HTML

<div class="sky">
  <rainbow-line class="first" slice-cycle-time="5"></rainbow-line>
  <rainbow-line class="second" slice-cycle-time="5"></rainbow-line>

  <div class="info">
    <h1>rainbow-line</h1>
    <p>This is a sample page showing the <em>web component</em> <code>&lt;rainbow-line/&gt;</code> in action.</p>
    <p>
      More information at:
      <a target="_blank" href="https://github.com/spearwolf/visual-fx-web-components/tree/main/packages/rainbow-line">
        github.com/spearwolf/visual-fx-web-components
        <rainbow-line class="third" slice-cycle-time="5" cycle-direction="left"></rainbow-line>
      </a>
    </p>
  </div>
</div>

<script async type="module" src="https://esm.sh/rainbow-line@latest"></script>

CSS

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: #212121;
  color: #f0f0f0;
}

.sky {
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
}

.first {
  height: 4px;
}

.second {
  height: 20px;
  opacity: 0.5;
  filter: blur(20px);
}

.third {
  height: 2px;
}

.info {
  max-width: 1000px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.info a {
  display: inline-block;
  text-decoration: none;
  color: #eef;
}

h1 {
  font-family: 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 66px;
  background: linear-gradient(180deg, #fff, #aaa), #f0f0f0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}