index.html

---
permalink: "/index"
layout: home
---

<script src="/assets/js/FreeOpenCloud_Animation.js"></script>
<script>
  var canvas,
    stage,
    exportRoot,
    anim_container,
    dom_overlay_container,
    fnStartAnimation;
  function init() {
    canvas = document.getElementById("canvas");
    anim_container = document.getElementById("animation_container");
    dom_overlay_container = document.getElementById("dom_overlay_container");
    var comp = AdobeAn.getComposition("9350E8E32CF4DC4BB343EB1DF619EF11");
    var lib = comp.getLibrary();
    handleComplete({}, comp);
    let callback = (entries, observer) => {
      handleComplete({}, comp);
    };
    let observer = new IntersectionObserver(callback, { threshold: 0.5 });
    let target = document.querySelector("#animation_container");
    observer.observe(target);
  }
  function handleComplete(evt, comp) {
    //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
    var lib = comp.getLibrary();
    var ss = comp.getSpriteSheet();
    exportRoot = new lib.FreeOpenCloud_Animation();
    stage = new lib.Stage(canvas);
    //Registers the "tick" event listener.
    fnStartAnimation = function () {
      stage.addChild(exportRoot);
      createjs.Ticker.framerate = lib.properties.fps;
      createjs.Ticker.addEventListener("tick", stage);
    };
    //Code to support hidpi screens and responsive scaling.
    makeResponsive(lib, true, "width", true, 1, [
      canvas,
      anim_container,
      dom_overlay_container,
    ]);
    AdobeAn.compositionLoaded(lib.properties.id);
    fnStartAnimation();
  }
  document.addEventListener("DOMContentLoaded", init);

  function makeResponsive(
    lib,
    isResp,
    respDim,
    isScale,
    scaleType,
    domContainers
  ) {
    var lastW,
      lastH,
      lastS = 1;
    window.addEventListener("resize", resizeCanvas);
    function resizeCanvas() {
      var parent = document.getElementsByClassName("wrapper_animation")[0];
      var w = lib.properties.width,
        h = lib.properties.height;
      var iw = parent.clientWidth,
        ih = parent.clientHeight;
      var pRatio = window.devicePixelRatio || 1;
      var xRatio = iw / w,
        yRatio = ih / h,
        sRatio = 1;
      // console.log("pw", iw, "ph", ih, lastW, lastH, xRatio, yRatio, 'last', lastS);
      if (isResp) {
        sRatio = xRatio;
      }
      domContainers[0].width = w * pRatio * sRatio;
      domContainers[0].height = h * pRatio * sRatio;

      domContainers.forEach(function (container) {
        container.style.width = w * sRatio + "px";
        container.style.height = h * sRatio + "px";
      });
      stage.scaleX = pRatio * sRatio;
      stage.scaleY = pRatio * sRatio;
      lastW = iw;
      lastH = ih;
      lastS = sRatio;
      stage.tickOnUpdate = false;
      stage.update();
      stage.tickOnUpdate = true;
    }
    resizeCanvas();
  }
</script>

<script src="https://unpkg.com/ityped@1.0.3"></script>

<style>
  @import url("https://unpkg.com/aos@2.3.1/dist/aos.css");
</style>

<div class="da-gradient">
  <section class="section new-hero">
    <div class="columns has-text-centered has-vcentered-child">
      <div class="column pt-7-mobile">
        <div>
          <h1 class="has-text-white">Building a Free<br />and Open Cloud</h1>
          <div
            id="ityped"
            class="has-text-white is-size-5-mobile is-size-4 pt-2 mt-3"
          ></div>
        </div>
      </div>
    </div>
  </section>

  <script>
    window.ityped.init("#ityped", {
      strings: ["one deployment at a time..."],
      startDelay: 200,
      loop: false,
      disableBackTyping: true,
      showCursor: false,
    });
  </script>

  <section class="section header">
    <div class="container">
      <div class="columns px-6">
        <div class="header-content column is-three-fifths is-left">
          <h1 class="py-4 has-text-centered-mobile is-size-1-mobile has-text-white has-text-weight-bold">
            Introducing Unfurl Cloud
          </h1>
          <p class="is-size-2 has-text-centered-mobile is-size-4-mobile is-size-3-tablet has-text-white pt-4">
            The first free and open cloud platform!
          </p>
          <div class="buttons py-6">
            <a class="button button-primary has-background-primary-light has-text-grey-darker is-uppercase"
              href="https://www.unfurl.cloud/">
              <strong>Learn More</strong>
            </a>
          </div>
        </div>
        <div class="column">
          <a class="sample-img"></a>
        </div>
      </div>
    </div>
  </section>
  <section
    class="section animation-section"
    onclick="location.href='https://www.unfurl.cloud/'"
  >
    <div style="" class="container wrapper_animation">
      <div id="animation_container" class="container" style="width: 1000px">
        <canvas style="width: 1000px" id="canvas"></canvas>
        <div style="width: 1000px" id="dom_overlay_container"></div>
      </div>
    </div>
    <div
      class="container animation-title"
      data-aos="zoom-in"
      data-aos-delay="4000"
    >
      <span>Open source cloud services you control.</span>
      <div class="is-hidden-tablet">
        <button class="button outlined has-text-weight-bold btn-blue">
          <a href="open-cloud-services">Learn More</a>
        </button>
      </div>
    </div>
  </section>

  <section class="section section-title has-text-centered is-vcentered">
    <h2 class="is-size-1 has-text-white">The Plan</h2>
  </section>
  <section class="section numbered-section has-up-down-connector">
    <div class="columns is-variable is-8 is-tablet is-vcentered">
      <div class="column is-hidden-tablet has-vcentered-child">
        <img width="350" src="images/rocket_deploy.svg" />
      </div>
      <div class="column has-vcentered-child margin-mobile margin-l">
        <div class="box inner-box">
          <h2 class="is-size-4 is-size-6-mobile">
            <span class="box-number">1</span>
            Make it incredibly easy to deploy and run open source applications.
          </h2>
        </div>
      </div>
      <div class="column is-hidden-touch has-vcentered-child">
        <img width="350" src="images/rocket_deploy.svg" />
      </div>
    </div>
  </section>

  <section class="section numbered-section has-down-up-connector">
    <div class="columns is-variable is-8 is-tablet is-vcentered">
      <div class="column is-hidden-tablet-only has-vcentered-child">
        <img width="315" src="images/cloudfunding_web_white.svg" />
      </div>

      <div class="column has-vcentered-child margin-mobile">
        <div class="box inner-box">
          <h2 class="is-size-4 is-size-6-mobile">
            <span class="box-number">2</span>
            A small percentage of hosting costs funds open source cloud
            services.
          </h2>
        </div>
      </div>
    </div>
  </section>

  <section class="section numbered-section">
    <div class="columns is-variable is-8 is-tablet is-vcentered">
      <div class="column is-hidden-tablet has-vcentered-child">
        <img src="images/two_clouds.svg" />
      </div>
      <div class="column has-vcentered-child margin-mobile margin-l">
        <div class="box inner-box">
          <h2 class="is-size-4 is-size-6-mobile">
            <span class="box-number">3</span>
            Share, <b>fork</b> and combine these open cloud services to form a
            <b>free and open cloud</b>.
          </h2>
        </div>
      </div>
      <div class="column is-hidden-touch has-vcentered-child">
        <img src="images/two_clouds.svg" />
      </div>
    </div>
  </section>

  <!-- 
  <section class="section section-title has-text-centered is-vcentered">
    <h2 class="for-section-title">For App Developers:</h2>
  </section>

  <section class="section for-app-dev">
    <div class="container has-text-centered">
      <div class="centered headline is-size-4 has-text-weight-semibold">
        Clone, fork, and deploy cloud services as easy as cloning and building
        code from git.
      </div>
      <div class="centered">
        <div class="columns is-centered">
          <div class="column">
            <div class="centered">
              <figure class="threeup-image image">
                <img src="./images/simplicity.svg" alt="a cloud with nodes" />
              </figure>
            </div>
            <div class="threeup-title">Simplicity</div>
            <div class="threeup-content">
              Hide complexity, no need to be a DevOps guru.
            </div>
          </div>
          <div class="column">
            <div class="centered">
              <figure class="threeup-image image">
                <img src="./images/flexibility.svg" alt="a cloud with nodes" />
              </figure>
            </div>
            <div class="threeup-title">Flexibility</div>
            <div class="threeup-content">
              Easily update as your needs change and grow.
            </div>
          </div>
          <div class="column">
            <div class="centered">
              <figure class="threeup-image image">
                <img src="./images/no-lock-in.svg" alt="a cloud with nodes" />
              </figure>
            </div>
            <div class="threeup-title">No Lock-in</div>
            <ul class="threeup-content">
              <li>‣ Open source</li>
              <li>‣ All data stored in Git</li>
              <li>‣ Your own cloud accounts</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="centered pt-3">
        <button class="button outlined has-text-weight-bold btn-blue">
          <a href="https://www.unfurl.cloud">Learn More</a>
        </button>
      </div>
    </div>
  </section>

  <section class="section section-title has-text-centered is-vcentered">
    <h2 class="for-section-title">For Open Source Developers:</h2>
  </section>

  <section class="section for-app-dev">
    <div class="container has-text-centered">
      <div class="centered headline is-size-4 has-text-weight-semibold">
        We’re making open source software as easy to use and deploy as a SaaS.
      </div>
      <div class="centered">
        <div class="columns is-centered">
          <div class="column">
            <div class="centered">
              <figure class="threeup-image image" style="width: 230px">
                <img
                  style="width: 230px"
                  src="./images/deploy_badge.svg"
                  alt="deploy badge"
                />
              </figure>
            </div>
            <div class="threeup-title">Easy To Deploy</div>
            <div class="threeup-content">
              New users are just a few clicks away with our deployment button.
            </div>
          </div>
          <div class="column">
            <div class="centered">
              <figure class="threeup-image image">
                <img src="./images/metrics.svg" alt="metrics" />
              </figure>
            </div>
            <div class="threeup-title">Unique Metrics</div>
            <div class="threeup-content">
              Track how your software is being deployed and used.
            </div>
          </div>
          <div class="column">
            <div class="">
              <figure class="centered threeup-image image">
                <img
                  src="./images/cloudfunding_small.svg"
                  alt="a cloud with nodes"
                />
              </figure>
            </div>
            <div class="threeup-title">Cloud Funding</div>
            <div class="threeup-content">
              New opportunities to fund development.
            </div>
          </div>
        </div>
      </div>
      <div class="centered pt-3">
        <button class="button outlined has-text-weight-bold btn-blue">
          <a href="cloudfunding">Learn More</a>
        </button>
      </div>
    </div>
  </section>

-->
  
  <section class="section whyneed">
    <h3 class="why-title  is-size-3-mobile has-text-weight-bold has-text-centered">
      Why we need a free and open cloud</h3>
    <div class="columns is-centered margin-centered mt-6 pb-6" style="max-width: 1000px">
      <div class="column mb-6">
        <div class="is-size-5 ml-6 has-text-weight-semibold">
          <div class="pb-6 mx-6 why-slide">
            <strong>Next level</strong> open-source -- Don't just share code, share live services!
          </div>
          <div class="pb-6 mx-6 why-slide">
            Avoid <strong>lock-in</strong> with proprietary cloud providers.
          </div>
          <div class="pb-6 mx-6 why-slide">
            <strong>Transparency</strong> and <strong>trust</strong> -- know what you are connecting to.
          </div>
          <div class="pb-6 mx-6 why-slide">
            Critical cloud infrastructure should be <strong>public goods</strong>, not dependent on the whims of
            proprietary entities.
          </div>
          <div class="pb-6 mx-6 why-slide"">
          Let's make it <strong>easy</strong> and <strong>cheap</strong> for anyone build and run open source cloud applications.
        </div>
        <div class=" pb-6 mx-6 why-slide"">
            Make open-source development <strong>sustainable</strong> through
            <strong><a href="https://onecommons.org/cloudfunding">Cloud Funding</a></strong>.
          </div>
          <div class="is-hidden pb-6 mx-6 why-slide"">
          Goes great with <a href="">Web3</a>
        </div>
      </div>
    </div>
  </div>
  </section>
  
  <section class="section section-title has-text-centered is-vcentered">
    <h2 class="for-section-title">For A Better Internet:</h2>
  </section>
</div>
<!-- end gradient -->

<section class="section bottom">
  <div class="container is-vcentered">
    <div class="container has-vcentered-child">
      <div>
        <div class="has-vcentered-child">
          <img src="images/no_evil.svg" />
        </div>
        <div class="has-text-centered is-size-5 pt-6" style="max-width: 455px">
          <a href="https://www.unfurl.cloud/blog/the-free-and-open-cloud">Learn</a> how a transparent, open-source
          cloud guarantees our freedom and privacy.
        </div>
      </div>
    </div>
  </div>
</section>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init({
    duration: 800, // values from 0 to 3000, with step 50ms
  });
</script>