Welcome to project Axiom!

Project Axiom is a web component set which aims to combine good part of Fluent Design System and Material Design to a single design language.

This repo contains code of Reveal Highlight effect of Fluent design System.

General Button

In order to use this component, we need to prepare some HTML:

<ax-reveal-provider>
  <ax-reveal-bound class="my-reveal-container">
      <ax-reveal>
        <button class="ax-reveal-button">Reveal</button>
      </ax-reveal>
      <ax-reveal>
        <button class="ax-reveal-button">To</button>
      </ax-reveal>
    </div>
  </ax-reveal-bound>
</ax-reveal-provider>

Round Corner

.my-reveal-container{
  --reveal-border-decoration-type: round;
  --reveal-border-decoration-size: 4px;
}

Custom border radius

.my-reveal-container{
  --reveal-border-decoration-type: round;
  --reveal-border-decoration-top-left-radius: 0;
  --reveal-border-decoration-top-right-radius: 10px;
  --reveal-border-decoration-bottom-left-radius: 20px;
  --reveal-border-decoration-bottom-right-radius: 0;
}

Even more fancy

.my-reveal-container{
  --reveal-border-decoration-type: bevel;
  --reveal-border-decoration-size: 16px;
}

Opacity

.my-reveal-container{
  --reveal-opacity: 1.0;
}

Colored Button

.my-reveal-container{
  --reveal-color: red;
}

Border Width

.my-reveal-container{
  --reveal-border-width: 3px;
}

Fill Radius

.my-reveal-container{
  --reveal-fill-radius: 0.2;
}

Hold animation

.my-reveal-container{
  --reveal-animate-speed: 8000;
}

Release animation

.my-reveal-container{
  --reveal-released-accelerate-rate: 20;
}

List style

.my-reveal-container{
  --reveal-border-style: half;
}

No diffuse

.my-reveal-container{
  --reveal-border-style: half;
  --reveal-diffuse: false;
}

Benchmark (100 Items)

🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎