index.html

---
title: MasqueradeJS - Puppeteer Bot Development Framework
layout: default
permalink: /
---
<div class="dsn-slider" data-dsn-header="project" id="intro">
  <div class="dsn-root-slider" id="dsn-hero-parallax-img">
    <div class="slide-inner">
      <div class="swiper-wrapper">
        <div class="slide-item swiper-slide">

          <div class="slide-content">
            <div class="slide-content-inner">
              <div class="project-metas">
                <div class="project-meta-box project-work cat">
                  <span>Bot Development Framework</span>
                </div>
              </div>

              <div class="title-text-header">
                <div class="title-text-header-inner">
                  <a href="#" class="effect-ajax" data-dsn-ajax="slider">
                    MasqueradeJS
                  </a>
                </div>
              </div>

              <p class="fw500">Compose rock-solid automation performances on
                the stage your <strong>Puppeteer</strong> actor deserves.</p>

              <div class="link-custom">
                <a href="https://docs.masqueradejs.com" class="image-zoom effect-ajax" data-dsn="parallax"
                   data-dsn-ajax="slider"
                >
                  <span>View Documentation</span>
                </a>
              </div>

            </div>
          </div>
          <div class="image-container">
            <div class="image-bg cover-bg" data-image-src="{{ site.baseurl }}/assets/img/hero.jpg"
                 data-overlay="0"
            >
              <img src="{{ site.baseurl }}/assets/img/hero.jpg" alt="">
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <div class="dsn-slider-content"></div>

  <div class="nav-slider">
    <div class="swiper-wrapper" role="navigation">
      <div class="swiper-slide">
        <div class="image-container">
          <div class="image-bg cover-bg" data-image-src=""
               data-overlay="2"
          >
          </div>
        </div>
        <div class="content">
          <p>01</p>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="wrapper">

  <section class="intro-about section-margin" id="about">
    <div class="container">
      <div class="row">
        <div class="col-lg-6">
          <div class="intro-content-text">

            <h2 data-dsn-grid="move-section" data-dsn-move="-30"
                data-dsn-duration="100%" data-dsn-opacity="1.2"
                data-dsn-responsive="tablet"
            >
              When stealth &amp; stability matters
            </h2>

            <p data-dsn-animate="text">
              MasqueradeJS is an opinionated, TypeScript-native bot
              development framework for master Puppeteer
              composers.</p>

            <h6 data-dsn-animate="text">Automation-Extra</h6>
            <small data-dsn-animate="text">Stealth Plugin Enabled</small>

            <div class="exper">
              <div class="numb-ex">
                <span class="word" data-dsn-animate="text">16</span>
              </div>

              <h4 data-dsn-animate="up">cutting edge evasions available<br>
                via <a href="https://github.com/berstend/puppeteer-extra">
                  Automation-Extra</a>
              </h4>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="background-mask">
      <div class="background-mask-bg"></div>
      <div class="img-box">
        <div class="img-cent" data-dsn-grid="move-up">
          <div class="img-container">
            <!--
            <img data-dsn-y="30%" src="{{ site.baseurl }}/assets/img/intro.jpg"
                 alt="MasqueradeJS Bot Development Framework"
            >-->
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="our-services-2 section-margin" id="benefits">
    <div class="container">
      <div class="one-title" data-dsn-animate="up">
        <div class="title-sub-container">
          <p class="title-sub">Build With Masquerade</p>
        </div>
        <h2 class="title-main">Why Masquerade?</h2>
      </div>

      <div class="row">

        {% for item in site.data.benefits %}
        <div class="col-md-4">
          <div class="services-item">
            <div class="corner corner-top"></div>
            <div class="corner corner-bottom"></div>
            <div class="icon">
              <img src="{{ site.baseurl }}{{ item.icon }}" class="svg-icon"
                   alt="{{ item.title }}"
              >
            </div>
            <div class="services-header">
              <h3>{{ item.title }}</h3>
            </div>
            <p>{{ item.content }}</p>
          </div>
        </div>
        {% endfor %}

      </div>
    </div>
  </section>

  <div class="box-seat" id="video">
    <div class="dsn-v-text">
      <div class="container-fluid">
        <div class="box-middle-text">
          <h2 data-dsn-animate="text">Compose complex bots in minutes.</h2>
          <p data-dsn-animate="text">Watch how quickly a Masquerade performance
            comes together.</p>
          <a href="https://www.youtube.com/embed/EPnZH4u7KDc" class="vid">
            <div class="play-button">
              <div class="play-btn">
                <i class="fas fa-play"></i>
              </div>
            </div>
          </a>
        </div>
        <div class="inner-img" data-dsn-grid="move-up" data-overlay="9">
          <img class="has-top-bottom"
               src="{{ site.baseurl }}/assets/img/video.jpg"
               alt="MasqueradeJS in 12 Minutes"
          >
        </div>
      </div>
    </div>
  </div>


  <section class="our-services section-margin" id="features">
    <div class="container">
      <div class="one-title">
        <div class="title-sub-container">
          <p class="title-sub">Framework Features</p>
        </div>
        <h2 class="title-main">What's in the box?</h2>
      </div>

      <div class="row">
        {% for item in site.data.features %}
        <div class="col-lg-6">
          <div class="services-item">
            <div class="line-before"></div>
            <h4 class="subtitle">{{ item.title }}</h4>
            <p>{{ item.content }}</p>
          </div>
        </div>
        {% endfor %}
      </div>

    </div>
  </section>

  <div class="box-seat box-seat-full section-margin" id="community">
    <div class="container-fluid">
      <div class="inner-img" data-dsn-grid="move-up">
        <img data-dsn-scale="1" data-dsn-y="30%"
             src="{{ site.baseurl }}/assets/img/community.jpg"
             alt="MasqueradeJS Botting Community"
        >
      </div>
      <div class="pro-text">
        <h3>Join the <br> community</h3>
        <p>Enter the Masquerade party and connect with hundreds of like-minded
          developers on the <span class="fw500">Automation-Extra</span> Discord.
        </p>
        <div class="link-custom">
          <a class="image-zoom effect-ajax" href="https://discord.masqueradejs.com" data-dsn="parallax">
            <span>Join on Discord</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <section class="brand-client section-margin" id="dependencies">
    <div class="container">
      <div class="one-title" data-dsn-animate="up">
        <div class="title-sub-container">
          <p class="title-sub">Stable dependencies</p>
        </div>
        <h2 class="title-main">Built on solid foundations</h2>
      </div>

      <div class="wrapper-client">
        {% for item in site.data.dependencies %}
        <div class="logo-box">
          <img src="{{ site.baseurl }}{{ item.logo }}" alt="{{ item.title }}">
          <div class="info">
            <div class="content">
              <div class="icon">
                <i class="fas fa-plus"></i>
              </div>
              <div class="entry">
                <div>
                  <h5>{{ item.title }}</h5>
                  <a href="{{ item.url }}">{{ item.domain }}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}

      </div>
    </div>
  </section>


  <div
    class="box-gallery-vertical box-gallery-vertical-order section-margin section-padding" id="contribute">
    <div class="mask-bg"></div>
    <div class="container">
      <div class="row align-items-center h-100">
        <div class="col-lg-6">
          <div class="box-im" data-dsn-grid="move-up">
            <!--
            <img class="has-top-bottom"
                 src="{{ site.baseurl }}/assets/img/contributing.jpg"
                 alt="Contributing to MasqueradeJS bot framework"
                 data-dsn-move="20%"
            >-->
          </div>
        </div>

        <div class="col-lg-6">


          <div class="box-info">

            <div class="vertical-title" data-dsn-animate="up">
              <h2>Contribute</h2>
            </div>

            <h6 data-dsn-animate="up">Masquerade is a fast-moving framework and
              encourages contributions in any form.</h6>

            <p data-dsn-animate="up">We understand everyone has different
              talents, so we appreciate anything from clean code to the core
              framework, to plugin development,
              documentation/translation, or supporting the Issue Tracker.</p>

            <div class="link-custom" data-dsn-animate="up">
              <a class="image-zoom effect-ajax"
                 href="https://github.com/masqueradejs/masquerade/CONTRIBUTING.md" data-dsn="parallax"
              >
                <span>Contributing Guide</span>
              </a>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>


  {% include cta.liquid %}

</div>