Spinning famo.us logo atop a background

main.js

define(function(require, exports, module) {
    'use strict';
    // 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 ImageSurface = require('famous/surfaces/ImageSurface');
    var View = require('famous/core/View');
    var StateModifier = require('famous/modifiers/StateModifier');
    var RenderController = require('famous/views/RenderController');

    // create the main context
    var mainContext = Engine.createContext();

    var logo = new ImageSurface({
        size: [200, 200],
        content: 'http://learnfamo.us/assets/images/famous_logo.png',
        classes: ['backfaceVisibility']
    });

    var initialTime = Date.now();
    var centerSpinModifier = new Modifier({
        origin: [0.5, 0.5],
        transform : function() {
            return Transform.rotateY(.002 * (Date.now() - initialTime));
        }
    });
    // creates an iPhone 5-type frame
    var viewSize = [320, 568];

    var view = new View();

    var centerTopModifier = new StateModifier({
      origin: [0.5, 0.5]
    });

    mainContext.add(centerTopModifier).add(view);

    var sizeModifier = new StateModifier({
      size: viewSize
    });

    // creating a reference node in the view
    var sizeNode = view.add(sizeModifier);
        var background = new Surface({
        properties: {
        fontSize: '1.5em',
        lineHeight: '50px',
        textAlign: 'center',
        borderWidth: '3px',
        borderStyle: 'solid',
        backgroundColor: '#f9fffe',
        borderColor: '#fa5caf'
      }
    });

    var backModifier = new StateModifier({
      // positions the background behind the logo surface
        transform: Transform.translate(0,0,-100)
    });

    sizeNode.add(backModifier).add(background);

    // add modifier and logo to a view, which RenderController can work with
    var logoView = new View();
    logoView.add(centerSpinModifier).add(logo);
    var renderController = new RenderController();
    renderController.show(logoView, {duration: 0, curve: 'linear'});

    mainContext.add(renderController);
});