Skip to main content

Getting Started

Welcome to Egao, a CSS library to create kaomoji.

Installation​

You can install egao via npm.

npm install egao

Then you can import it css files.

@import url("node_modules/egao/dist/egao.css");

Basic Usage​

The kaomoji class will stack elements horizontally.

<div class="kaomoji">
  <div class="body-round-left"></div>
  <div class="arms-hugging"></div>
  <div class="face-happy"></div>
  <div class="body-round-right"></div>
  <div class="arms-hugging"></div>
</div>

Layering elements​

You can use the layer class to overlap elements.

<div class="kaomoji">
  <div class="body-round-left"></div>
  <div class="arms-hugging"></div>
  <div class="kaomoji">
    <div class="face-happy"></div>
    <div class="kaomoji layer">
      <div class="blush"></div>
      <div class="space-1"></div>
      <div class="blush"></div>
    </div>
  </div>
  <div class="body-round-right"></div>
  <div class="arms-hugging"></div>
</div>

Gouping elements​

kaomoji and layer can be combined to create animation groups.

<div class="kaomoji">
  <div id="face" class="kaomoji layer bounce">
    <div class="space-1"></div>
    <div class="face-happy"></div>
  </div>
  <div id="body" class="kaomoji layer bounce delay-50">
    <div class="body-round-left"></div>
    <div class="space-3"></div>
    <div class="space-0-5"></div>
    <div class="body-round-right"></div>
  </div>
  <div id="hands" class="kaomoji layer bounce delay-100">
    <div class="space-0-25"></div>
    <div class="arms-hugging"></div>
    <div class="space-2"></div>
    <div class="space-1"></div>
    <div class="arms-hugging"></div>
  </div>
</div>

Styling elements​

Of course you can style and animate individual elements as well.

<div class="kaomoji">
  <div class="body-round-left"></div>
  <div class="arms-hugging attack"></div>
  <div class="kaomoji">
    <div class="face-happy"></div>
    <div class="kaomoji layer">
      <div class="blush" style="color: salmon"></div>
      <div class="space-1"></div>
      <div class="blush" style="color: salmon"></div>
    </div>
  </div>
  <div class="body-round-right"></div>
  <div class="arms-hugging attack delay-70"></div>
  <div class="stagger">🥁</div>
</div>
🥁

Note this library doesn't provide styles or animations so you'll need to add your own.