diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 43150673..37d9284d 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -34,7 +34,7 @@
 
         <!-- app code -->
         <script type="text/javascript">
-            //require.config({baseUrl: '/assets/src/'});
+            require.config({baseUrl: '/famous/'});
             require(['main']);
         </script>
 </head>
diff --git a/public/famous/main.js b/public/famous/main.js
new file mode 100644
index 00000000..05f5e160
--- /dev/null
+++ b/public/famous/main.js
@@ -0,0 +1,205 @@
+define(function(require, exports, module) {
+    // import dependencies
+    var Engine = require('famous/core/Engine');
+    var Modifier = require('famous/core/Modifier');
+    var Transform = require('famous/core/Transform');
+    var Surface = require('famous/core/Surface');
+    var Timer = require('famous/utilities/Timer');
+
+    var templates = require('templates');
+
+    // create the main context
+    var famous = document.getElementById('famousOverlay');
+
+    Metamaps.Famous = {};
+    var f = Metamaps.Famous;
+
+    f.mainContext = Engine.createContext(famous);
+
+
+    // INFOVIS
+    f.viz = {};
+    f.viz.surf = new Surface({
+        size: [undefined, undefined],
+        classes: [],
+        properties: {
+            display: 'none'
+        }
+    });
+    var prepare = function () {
+            f.viz.show();
+            Metamaps.JIT.prepareVizData();
+            f.viz.surf.removeListener('deploy',prepare);
+    };
+    if (Metamaps.currentSection === "map") {
+        f.viz.surf.on('deploy', prepare);
+    }
+    f.viz.mod = new Modifier({
+        origin: [0.5, 0.5],
+        opacity: 0
+    });
+    f.viz.show = function () {
+        f.viz.surf.setProperties({ "display":"block" });
+        f.viz.mod.setOpacity(
+            1,
+            { duration: 300 }
+        );
+    };
+    f.viz.hide = function () {
+        f.viz.mod.setOpacity(
+            0, 
+            { duration: 300 }, 
+            function() {
+                f.viz.surf.setProperties({"display": "none"});
+            }
+        );
+    };
+    f.mainContext.add(f.viz.mod).add(f.viz.surf);
+
+    
+    // CONTENT / OTHER PAGES
+    f.yield = {};
+    f.yield.surf = new Surface({
+        size: [true, true],
+        classes: [],
+        properties: {
+            display: 'none'
+        }
+    });
+    var loadYield = function () {
+            f.loadYield();
+            f.yield.surf.removeListener('deploy',loadYield);
+    };
+    if (!(Metamaps.currentSection === "map" ||
+            Metamaps.currentSection === "explore" ||
+            (Metamaps.currentSection === "" && Metamaps.Active.Mapper) )) {
+        f.yield.surf.on('deploy', loadYield);
+    }
+    f.yield.mod = new Modifier({
+        origin: [0.5, 0.5],
+        opacity: 0
+    });
+    f.yield.show = function () {
+        f.yield.surf.setProperties({ "display":"block" });
+        f.yield.mod.setOpacity(
+            1,
+            { duration: 300 }
+        );
+    };
+    f.yield.hide = function () {
+        f.yield.mod.setOpacity(
+            0, 
+            { duration: 300 }, 
+            function() {
+                f.yield.surf.setProperties({"display": "none"});
+            }
+        );
+    };
+    f.mainContext.add(f.yield.mod).add(f.yield.surf);
+    
+    f.loadYield = function () {
+        Metamaps.Loading.loader.hide();
+        var yield = document.getElementById('yield').innerHTML;
+        f.yield.surf.setContent(yield);
+        f.yield.surf.deploy(f.yield.surf._currTarget);
+        f.yield.show();
+    };
+    
+    
+    // EXPLORE MAPS BAR
+    f.explore = {};
+    f.explore.surf = new Surface({
+        size: [undefined, 94],
+        content: templates.mineContent,
+        classes: ['exploreMapsBar', 'exploreElement']
+    });
+    f.explore.mod = new Modifier({
+        origin: [0.5, 0],
+        transform: Transform.translate(0, -94, 0)
+    });
+    f.explore.show = function () {
+        f.explore.mod.setTransform(
+            Transform.translate(0, 0, 0), 
+            { duration: 300, curve: 'easeOut' }
+        );
+    };
+    f.explore.hide = function () {
+        f.explore.mod.setTransform(
+            Transform.translate(0, -94, 0), 
+            { duration: 300, curve: 'easeIn' }
+        );
+    };
+    f.explore.set = function (section) {
+        var loggedIn = Metamaps.Active.Mapper ? 'Auth' : '';
+        f.explore.surf.setContent(templates[section + loggedIn + 'Content']);
+    };
+    f.mainContext.add(f.explore.mod).add(f.explore.surf);
+
+    // LOGO
+    f.logo = {};
+    f.logo.surf = new Surface({
+        size: [258, 56],
+        content: templates.logoContent,
+        classes: []
+    });
+
+    f.logo.mod = new Modifier({
+        origin: [0.5, 1],
+        transform: Transform.translate(0, 56, 0)
+    });
+    f.logo.show = function () {
+        f.logo.mod.setTransform(
+            Transform.translate(0, 0, 0), 
+            { duration: 300, curve: 'easeOut' }
+        );
+    };
+    f.logo.hide = function () {
+        f.logo.mod.setTransform(
+            Transform.translate(0, 56, 0), 
+            { duration: 300, curve: 'easeIn' }
+        );
+    };
+    f.mainContext.add(f.logo.mod).add(f.logo.surf);
+    
+
+    // TOAST
+    f.toast = {};
+    f.toast.surf = new Surface({
+        size: [true, 42],
+        content: '',
+        classes: ['toast']
+    });
+    f.toast.mod = new Modifier({
+        origin: [0, 1],
+        opacity: 0,
+        transform: Transform.translate(24, -24, 0)
+    });
+    f.toast.show = function () {
+        f.toast.mod.setOpacity(
+            1, 
+            { duration: 300 }
+        );
+    };
+    f.toast.hide = function () {
+        f.toast.mod.setOpacity(
+            0, 
+            { duration: 300 }
+        );
+    };
+    f.mainContext.add(f.toast.mod).add(f.toast.surf);
+
+    f.logo.show();
+    if (Metamaps.currentSection === "explore") {
+        Metamaps.Loading.loader.hide();
+        f.explore.set(Metamaps.currentPage);
+        f.explore.show();
+    }
+    else if (Metamaps.currentSection === "") {
+        Metamaps.Loading.loader.hide();
+        if (Metamaps.Active.Mapper) {
+            f.explore.set('mine');
+            f.explore.show();
+        }
+        else f.explore.set('featured');
+    }
+});
\ No newline at end of file
diff --git a/public/famous/templates.js b/public/famous/templates.js
new file mode 100644
index 00000000..c3649711
--- /dev/null
+++ b/public/famous/templates.js
@@ -0,0 +1,86 @@
+define(function(require, exports, module) {
+    
+var t = {};
+
+t.logoContent = '<div class="logo">METAMAPS</div>';
+t.logoContent += '<ul class="bottomLinks">';
+t.logoContent += '<li class="openLightbox" data-open="about">About /&nbsp;</li>';
+t.logoContent += '<li><a href="/maps/blank">Terms of Use /&nbsp;</a></li>';
+t.logoContent += '<li class="openLightbox" data-open="colophon">Colophon /&nbsp;</li>';
+t.logoContent += '<li class="openLightbox" data-open="getInvolved">Get Involved!</li>';
+t.logoContent += '</ul>';
+
+/* logged out explore maps bars */
+t.activeContent = '<div class="exploreMapsMenu">';
+  t.activeContent += '<div class="exploreMapsCenter">';
+        t.activeContent += '<a href="/">My Maps</a>';
+        t.activeContent += '<a href="/explore/active" class="active">Recently Active</a>';
+        t.activeContent += '<a href="/explore/featured">Featured</a>';
+        t.activeContent += '<a href="/explore/new">New</a>';
+        t.activeContent += '<div class="clearfloat"></div>';
+  t.activeContent += '</div';
+t.activeContent += '</div>';
+
+t.featuredContent = '<div class="exploreMapsMenu">';
+  t.featuredContent += '<div class="exploreMapsCenter">';
+        t.featuredContent += '<a href="/">My Maps</a>';
+        t.featuredContent += '<a href="/explore/active">Recently Active</a>';
+        t.featuredContent += '<a href="/explore/featured" class="active">Featured</a>';
+        t.featuredContent += '<a href="/explore/new">New</a>';
+        t.featuredContent += '<div class="clearfloat"></div>';
+  t.featuredContent += '</div';
+t.featuredContent += '</div>';
+
+t.newContent = '<div class="exploreMapsMenu">';
+  t.newContent += '<div class="exploreMapsCenter">';
+        t.newContent += '<a href="/">My Maps</a>';
+        t.newContent += '<a href="/explore/active">Recently Active</a>';
+        t.newContent += '<a href="/explore/featured">Featured</a>';
+        t.newContent += '<a href="/explore/new" class="active">New</a>';
+        t.newContent += '<div class="clearfloat"></div>';
+  t.newContent += '</div';
+t.newContent += '</div>';
+
+/* logged in explore maps bars */
+t.mineAuthContent = '<div class="exploreMapsMenu">';
+  t.mineAuthContent += '<div class="exploreMapsCenter">';
+        t.mineAuthContent += '<a href="/" class="active">My Maps</a>';
+        t.mineAuthContent += '<a href="/explore/active">Recently Active</a>';
+        t.mineAuthContent += '<a href="/explore/featured">Featured</a>';
+        t.mineAuthContent += '<a href="/explore/new">New</a>';
+        t.mineAuthContent += '<div class="clearfloat"></div>';
+  t.mineAuthContent += '</div';
+t.mineAuthContent += '</div>';
+
+t.activeAuthContent = '<div class="exploreMapsMenu">';
+  t.activeAuthContent += '<div class="exploreMapsCenter">';
+        t.activeAuthContent += '<a href="/">My Maps</a>';
+        t.activeAuthContent += '<a href="/explore/active" class="active">Recently Active</a>';
+        t.activeAuthContent += '<a href="/explore/featured">Featured</a>';
+        t.activeAuthContent += '<a href="/explore/new">New</a>';
+        t.activeAuthContent += '<div class="clearfloat"></div>';
+  t.activeAuthContent += '</div';
+t.activeAuthContent += '</div>';
+
+t.featuredAuthContent = '<div class="exploreMapsMenu">';
+  t.featuredAuthContent += '<div class="exploreMapsCenter">';
+        t.featuredAuthContent += '<a href="/">My Maps</a>';
+        t.featuredAuthContent += '<a href="/explore/active">Recently Active</a>';
+        t.featuredAuthContent += '<a href="/explore/featured" class="active">Featured</a>';
+        t.featuredAuthContent += '<a href="/explore/new">New</a>';
+        t.featuredAuthContent += '<div class="clearfloat"></div>';
+  t.featuredAuthContent += '</div';
+t.featuredAuthContent += '</div>';
+
+t.newAuthContent = '<div class="exploreMapsMenu">';
+  t.newAuthContent += '<div class="exploreMapsCenter">';
+        t.newAuthContent += '<a href="/">My Maps</a>';
+        t.newAuthContent += '<a href="/explore/active">Recently Active</a>';
+        t.newAuthContent += '<a href="/explore/featured">Featured</a>';
+        t.newAuthContent += '<a href="/explore/new" class="active">New</a>';
+        t.newAuthContent += '<div class="clearfloat"></div>';
+  t.newAuthContent += '</div';
+t.newAuthContent += '</div>';
+
+    module.exports = t;
+});
\ No newline at end of file