index.html

---
layout: default
title: Meemoo hackable web apps
---

<p id="secNav">
  <a href="#use"><img alt="use" src="css/img/useTitle.png"></a>
  <a href="#hack"><img alt="hack" src="css/img/hackTitle.png"></a>
  <a href="#build"><img alt="build" src="css/img/buildTitle.png"></a>
  <a href="#share"><img alt="share" src="css/img/shareTitle.png"></a><br />
  creative apps in the browser
</p>


<p>
  <div style="position:relative; height:400px;">
    <a href="http://meemoo.org/iframework/#example/cam2gif">
      <img src="images/Screen-shot-2012-12-25-cam2gif.jpg" width="1034" height="392" alt="meemoo screenshot" style="position:absolute; left:-142px; top:0px;" />
      <img src="images/turtle-wushu.gif" width="320" height="240" alt="turtle wushu" title="turtle wushu" style="position:absolute; left: 462px; top:48px;" />
    </a>
  </div>
  <a href="http://meemoo.org/iframework/#example/cam2gif">
    Demo: webcam &rarr; animated GIF
  </a>
</p>


<h2 id="use">use</h2>

<div style="margin: 0 -40px;">
  <a href="hack-our-apps/">
    <img style="float:left; border:none;" src="hack-our-apps/shots/intro.png" />
    <img style="float:left; border:none;" src="hack-our-apps/shots/palette.jpg" />
    <img style="float:left; border:none;" src="hack-our-apps/shots/abc.jpg" />
    <img style="float:left; border:none;" src="hack-our-apps/shots/circle-particle-trail.jpg" />
    <img style="float:left; border:none;" src="hack-our-apps/shots/particles-tile.jpg" />
    <img style="float:left; border:none;" src="hack-our-apps/shots/megacam.jpg" />
    <img style="float:left; border:none;" src="hack-our-apps/shots/monochrome.png" />
    <img style="float:left; border:none;" src="hack-our-apps/shots/recursive.png" />
  </a>
</div>

<p style="clear:both;">
  <a href="hack-our-apps/">Try the examples</a>, and hack them right in your browser.
</p>



<h2 id="hack">hack</h2>

<a href="images/meemoo-illo-by-jyri-pieniniemi.png"><img src="images/meemoo-illo-by-jyri-pieniniemi-400.png" alt="exploded electronics illustration" title="illustration by jyri pieniniemi" style="float:right;margin-left:10px;" width="400" height="474" /></a>

<p>
  When you think of an "app," do you think of something that you can open, hack, and change how it works? Meemoo wants to give you this freedom. If you can't open it, you don't own it. Meemoo is a framework that connects open-source modules, powered by any web technology. The way that the data flows from module to module is defined and visualized by colorful wires. If you can connect a video player to a TV, you can program a Meemoo app.
</p>



<h2 id="build">build</h2>

<p>
  Start from the <a href="http://meemoo.org/iframework/#gist/5110822">basic tutorial</a>, or with a <a href="http://meemoo.org/iframework/">blank canvas</a>.
</p>



<h2 id="share">share</h2>
<p>
  To share images or animations, drag them to the images menu. You can then export them to Facebook, Flickr, Dropbox, and lots of other services.
</p>
<p>
  To share your app, press "save public" to get a URL like: http://meemoo.org/iframework/#gist/5110822
</p>




<h2><a id="blog"></a>Blog Posts</h2>
<ul class="posts">
  {% for post in site.posts limit:5 %}
    <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
  <li><a href="blog">More...</a></li>
</ul>




<p style="text-align:center;">
  <img src="/images/meemoo-sketch-by-jyri-pieniniemi.jpg" width="500" height="411" alt="one meemoo mixing cupcakes" />
</p>