jasonals/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Famous App</title>
    <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Famous/famous/master/core/famous.css">

    <script src="https://cdn.rawgit.com/Famous/polyfills/master/classList.js"></script>
    <script src="https://cdn.rawgit.com/Famous/polyfills/master/functionPrototypeBind.js"></script>
    <script src="https://cdn.rawgit.com/Famous/polyfills/master/requestAnimationFrame.js"></script>

    <script src="https://cdn.rawgit.com/jrburke/requirejs/master/require.js"></script>

    <script src="https://cdn.rawgit.com/Famous/famous/master/dist/famous.min.js"></script>

    <script type="text/javascript">require(['main']);</script>
  <style id="jsbin-css">
html {
  background: #fff;
}

.double-sided {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.double-font {
    font-size: 2em;
}

</style>
</head>
  <body class='famous-root'>

  <script id="jsbin-javascript">
define('main', function (require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Modifier = require('famous/core/Modifier');

  var Splash = require('Splash');

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

  var splash = new Splash({
    content:'Famo.us rocks!'
  });

  mainContext.add(splash);

});
define('Splash', function(require, exports, module) {
  var RenderNode = require('famous/core/RenderNode');
  var OptionsManager = require('famous/core/OptionsManager');
  var Utility = require('famous/utilities/Utility');
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var Transform = require('famous/core/Transform');
  var ImageSurface = require('famous/surfaces/ImageSurface');

  /**
     * A class to show the logo and title of the app
     *   at a single point in the render tree
     *
     * @class Splash
     * @constructor
     */
  function Splash(options) {
    this._node = new RenderNode();

    this.options = this.constructor.DEFAULT_OPTIONS;
    this._optionsManager = new OptionsManager(this.options);

    if (options) this.setOptions(options);

    var logo = new ImageSurface({
      size: [200, 200],
      content: this.options.imagePath || 'http://code.famo.us/assets/famous_logo.svg',
      classes: ['double-sided']
    });
    logo.mod = new Modifier({
      transform: Transform.translate(0, 0, 0)
    });

    var desc = new Surface({
      size: [200, 20],
      content: this.options.content || 'Title',
      classes: ['double-sided', 'double-font'],
      properties: {
        textAlign: 'center',
        lineHeight: '80px',
        backgroundColor: 'rgba(76,8,30,1)'
      }
    });

    desc.mod = new Modifier({
      transform: Transform.translate(0, 110, 50)
    });

    var initialTime = Date.now();
    var centerSpinModifier = new Modifier({
      origin: [0.5, 0.5],
      transform: function() {
        return Transform.rotateY(0.002 * (Date.now() - initialTime));
      }
    });

    this.renderNode = new RenderNode();
    this.renderNode.add(logo.mod).add(logo);
    this.renderNode.add(desc.mod).add(desc);

    this._node.add(centerSpinModifier).add(this.renderNode);
  }

  Splash.DEFAULT_OPTIONS = {}; // no defaults

  /**
     * Look up options value by key
     * @method getOptions
     *
     * @param {string} key key
     * @return {Object} associated object
     */
  Splash.prototype.getOptions = function getOptions() {
    return this._optionsManager.value();
  };

  /*
     *  Set internal options.
     *  No defaults options are set in View.
     *
     *  @method setOptions
     *  @param {Object} options
     */
  Splash.prototype.setOptions = function setOptions(options) {
    this._optionsManager.patch(options);
  };

  /**
     * Generate a render spec from the contents of this component.
     *
     * @private
     * @method render
     * @return {number} Render spec for this component
     */
  Splash.prototype.render = function render() {
    return this._node.render();
  };

  module.exports = Splash;
});

</script>


</body>
</html>

## jsbin.tejay.css
html {
  background: #fff;
}

.double-sided {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.double-font {
    font-size: 2em;
}

## jsbin.tejay.js
define('main', function (require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Modifier = require('famous/core/Modifier');

  var Splash = require('Splash');

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

  var splash = new Splash({
    content:'Famo.us rocks!'
  });

  mainContext.add(splash);

});
define('Splash', function(require, exports, module) {
  var RenderNode = require('famous/core/RenderNode');
  var OptionsManager = require('famous/core/OptionsManager');
  var Utility = require('famous/utilities/Utility');
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var Transform = require('famous/core/Transform');
  var ImageSurface = require('famous/surfaces/ImageSurface');

  /**
     * A class to show the logo and title of the app
     *   at a single point in the render tree
     *
     * @class Splash
     * @constructor
     */
  function Splash(options) {
    this._node = new RenderNode();

    this.options = this.constructor.DEFAULT_OPTIONS;
    this._optionsManager = new OptionsManager(this.options);

    if (options) this.setOptions(options);

    var logo = new ImageSurface({
      size: [200, 200],
      content: this.options.imagePath || 'http://code.famo.us/assets/famous_logo.svg',
      classes: ['double-sided']
    });
    logo.mod = new Modifier({
      transform: Transform.translate(0, 0, 0)
    });

    var desc = new Surface({
      size: [200, 20],
      content: this.options.content || 'Title',
      classes: ['double-sided', 'double-font'],
      properties: {
        textAlign: 'center',
        lineHeight: '80px',
        backgroundColor: 'rgba(76,8,30,1)'
      }
    });

    desc.mod = new Modifier({
      transform: Transform.translate(0, 110, 50)
    });

    var initialTime = Date.now();
    var centerSpinModifier = new Modifier({
      origin: [0.5, 0.5],
      transform: function() {
        return Transform.rotateY(0.002 * (Date.now() - initialTime));
      }
    });

    this.renderNode = new RenderNode();
    this.renderNode.add(logo.mod).add(logo);
    this.renderNode.add(desc.mod).add(desc);

    this._node.add(centerSpinModifier).add(this.renderNode);
  }

  Splash.DEFAULT_OPTIONS = {}; // no defaults

  /**
     * Look up options value by key
     * @method getOptions
     *
     * @param {string} key key
     * @return {Object} associated object
     */
  Splash.prototype.getOptions = function getOptions() {
    return this._optionsManager.value();
  };

  /*
     *  Set internal options.
     *  No defaults options are set in View.
     *
     *  @method setOptions
     *  @param {Object} options
     */
  Splash.prototype.setOptions = function setOptions(options) {
    this._optionsManager.patch(options);
  };

  /**
     * Generate a render spec from the contents of this component.
     *
     * @private
     * @method render
     * @return {number} Render spec for this component
     */
  Splash.prototype.render = function render() {
    return this._node.render();
  };

  module.exports = Splash;
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Famous App</title>
	<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
	<meta name="mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Famous/famous/master/core/famous.css">

	<script src="https://cdn.rawgit.com/Famous/polyfills/master/classList.js"></script>
	<script src="https://cdn.rawgit.com/Famous/polyfills/master/functionPrototypeBind.js"></script>
	<script src="https://cdn.rawgit.com/Famous/polyfills/master/requestAnimationFrame.js"></script>

	<script src="https://cdn.rawgit.com/jrburke/requirejs/master/require.js"></script>

	<script src="https://cdn.rawgit.com/Famous/famous/master/dist/famous.min.js"></script>

	<script type="text/javascript">require(['main']);</script>
	<style id="jsbin-css">
	html {
	background: #fff;
	}

	.double-sided {
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	}

	.double-font {
	font-size: 2em;
	}

	</style>
	</head>
	<body class='famous-root'>

	<script id="jsbin-javascript">
	define('main', function (require, exports, module) {
	var Engine = require('famous/core/Engine');
	var Modifier = require('famous/core/Modifier');

	var Splash = require('Splash');

	var mainContext = Engine.createContext();
	mainContext.setPerspective(1000);

	var splash = new Splash({
	content:'Famo.us rocks!'
	});

	mainContext.add(splash);

	});
	define('Splash', function(require, exports, module) {
	var RenderNode = require('famous/core/RenderNode');
	var OptionsManager = require('famous/core/OptionsManager');
	var Utility = require('famous/utilities/Utility');
	var Surface = require('famous/core/Surface');
	var Modifier = require('famous/core/Modifier');
	var Transform = require('famous/core/Transform');
	var ImageSurface = require('famous/surfaces/ImageSurface');

	/**
	* A class to show the logo and title of the app
	* at a single point in the render tree
	*
	* @class Splash
	* @constructor
	*/
	function Splash(options) {
	this._node = new RenderNode();

	this.options = this.constructor.DEFAULT_OPTIONS;
	this._optionsManager = new OptionsManager(this.options);

	if (options) this.setOptions(options);

	var logo = new ImageSurface({
	size: [200, 200],
	content: this.options.imagePath \|\| 'http://code.famo.us/assets/famous_logo.svg',
	classes: ['double-sided']
	});
	logo.mod = new Modifier({
	transform: Transform.translate(0, 0, 0)
	});

	var desc = new Surface({
	size: [200, 20],
	content: this.options.content \|\| 'Title',
	classes: ['double-sided', 'double-font'],
	properties: {
	textAlign: 'center',
	lineHeight: '80px',
	backgroundColor: 'rgba(76,8,30,1)'
	}
	});

	desc.mod = new Modifier({
	transform: Transform.translate(0, 110, 50)
	});

	var initialTime = Date.now();
	var centerSpinModifier = new Modifier({
	origin: [0.5, 0.5],
	transform: function() {
	return Transform.rotateY(0.002 * (Date.now() - initialTime));
	}
	});

	this.renderNode = new RenderNode();
	this.renderNode.add(logo.mod).add(logo);
	this.renderNode.add(desc.mod).add(desc);

	this._node.add(centerSpinModifier).add(this.renderNode);
	}

	Splash.DEFAULT_OPTIONS = {}; // no defaults

	/**
	* Look up options value by key
	* @method getOptions
	*
	* @param {string} key key
	* @return {Object} associated object
	*/
	Splash.prototype.getOptions = function getOptions() {
	return this._optionsManager.value();
	};

	/*
	* Set internal options.
	* No defaults options are set in View.
	*
	* @method setOptions
	* @param {Object} options
	*/
	Splash.prototype.setOptions = function setOptions(options) {
	this._optionsManager.patch(options);
	};

	/**
	* Generate a render spec from the contents of this component.
	*
	* @private
	* @method render
	* @return {number} Render spec for this component
	*/
	Splash.prototype.render = function render() {
	return this._node.render();
	};

	module.exports = Splash;
	});

	</script>


	</body>
	</html>