A famous UI library.
The following sample workflows show possible ways to install and start using motor. These examples will refer to the snippets at the end of the README.
Install nodejs, then create package.json for your
project.
npm init # creates package.json
Install browserify globally.
npm install -g browserify
Install motor along with famous, famousify, and cssify into your project.
npm install motor famous famousify cssify --save
Add the the famousify and cssify transforms to your package.json so it looks similar to the following.
{
"dependencies": {
"cssify": "^0.6.0",
"famous": "^0.3.4",
"famousify": "^0.1.5",
"motor": "^0.0.15"
},
"browserify": {
"transform": [
"famousify",
"cssify"
]
}
}
Suppose you have src/app.js containing Snippet 1 and
public/index.html containing Snippet 2. Compile a bundle for
production.
browserify src/app.js -o public/app.js
Alternatively, use watchify to watch the filesystem for changes and re-compile automatically.
watchify src/app.js -o public/app.js
Install serve globally.
npm install -g serve
Serve the contents of the public folder.
serve public
Visit localhost:3000 in your browser.
Install nodejs, then create package.json for your
project.
npm init # creates package.json
Install webpack globally.
npm install -g webpack
Install motor along with famous, webpack, css-loader, and style-loader into your project.
npm install motor webpack famous css-loader style-loader --save
Create webpack.config.js to configure webpack.
var webpack = require('webpack')
module.exports = {
entry: "./src/app.js",
output: {
path: './public',
filename: "app.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
},
resolve: {
alias: {
// add this alias only for famous <0.3.5
famous: 'famous/src'
}
}
}
Suppose you have src/app.js containing Snippet 1 and
public/index.html containing Snippet 2. Compile a bundle for
production.
webpack
Alternatively, watch the filesystem for changes and re-compile automatically.
webpack --watch
Install serve globally.
npm install -g serve
Serve the contents of the public folder.
serve public
Visit localhost:3000 in your browser.
Install nodejs, then create package.json for your
project.
npm init # creates package.json
Install jspm globally.
npm install -g jspm
Set jspm.directories.baseURL in your package.json to "src", similar to the
following.
{
"jspm": {
"directories": {
"baseURL": "src"
}
}
}
Install motor along with famous and css into your project.
jspm install -y motor famous css
Suppose you have src/app.js containing Snippet 3 and
src/index.html containing Snippet 4. Install serve globally.
npm install -g serve
Serve the contents of the src folder.
serve src
Visit localhost:3000 in your browser.
var style = require('famous/core/famous.css') // needed by famous
var Plane = require('motor/Plane')
var contextWithPerspective = require('motor/utils').contextWithPerspective
var ctx = contextWithPerspective(1000)
var square = new Plane({
size: [200,200],
content: 'Hello.',
properties: {
backfaceVisibility: 'visible',
background: 'pink',
padding: '5px'
}
})
ctx.add(square)
square.transform.setRotate([0,2*Math.PI,0], {duration: 5000, curve: 'easeInOut'})
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Project with motor</title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript" charset="utf-8" src="app.js"></script>
</body>
</html>
import 'famous/core/famous.css!'
import Plane from 'motor/Plane'
import {contextWithPerspective} from 'motor/utils'
var ctx = contextWithPerspective(1000)
var square = new Plane({
size: [200,200],
content: 'Hello.',
properties: {
backfaceVisibility: 'visible',
background: 'pink',
padding: '5px'
}
})
ctx.add(square)
square.transform.setRotate([0,2*Math.PI,0], {duration: 5000, curve: 'easeInOut'})
<!DOCTYPE html>
<html>
<head>
<title>Project with motor</title>
<meta charset="utf-8" />
</head>
<body>
<script src='jspm_packages/system.src.js'></script>
<script src='config.js'></script>
<script type="module">
System.import('app');
</script>
</body>
</html>
FAQs
A UI library.
The npm package motor receives a total of 8 weekly downloads. As such, motor popularity was classified as not popular.
We found that motor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.