Copy updates for demo/README

Author: Brandon Dail

README.md

@@ -1,18 +1,18 @@
-# react-effects
+# react-animations
 
 
-A collection of animations for CSS-in-JS libraries. react-effects implements all animations from [animate.css](https://daneden.github.io/animate.css/), allowing you to use them in any project that uses JavaScript for style management.
+A collection of animations for CSS-in-JS libraries. react-animations implements all animations from [animate.css](https://daneden.github.io/animate.css/), allowing you to use them in any project that uses JavaScript for style management.
 ### Usage
 
-These animations can be used with Radium, Aphordite, or any other CSS-in-JS library--with or without React. Just import the animation from the package
+These animations can be used with Radium, Aphordite, or any other CSS-in-JS library that supports using objects to define keyframes. Just import the animation from the package
 and include it in your style definition. Below are some examples using a few
 popular styling libraries.
 
 
 ### Radium
 
 ```js
-import { bounce } from 'react-effects';
+import { bounce } from 'react-animations';
 import Radium from 'radium';
 
 const styles = {
@@ -26,7 +26,7 @@ const styles = {
 ### Aphrodite
 
 ```js
-import { bounce } from 'react-effects';
+import { bounce } from 'react-animations';
 import { StyleSheet, css } from 'aphrodite';
 
 const styles = StyleSheet.create({
@@ -120,11 +120,11 @@ Below is a list of all available animations
 
 ## Merge
 
-react-effects also exports a `merge` function that takes two animations and returns a new animation that combines the transforms from both. This is experimental and wont work (well) with animations that have conflicting transforms, such as `fadeIn` and `fadeOut`.
+react-animations also exports a `merge` function that takes two animations and returns a new animation that combines the transforms from both. This is experimental and wont work (well) with animations that have conflicting transforms, such as `fadeIn` and `fadeOut`. The merged animation can be used just like any of the imported animations.
 
 
 ```js
 
-import { merge, tada, flip } from 'react-effects';
+import { merge, tada, flip } from 'react-animations';
 const tadaFlip = merge(tada, flip);
 ```

demo/app.jsx

@@ -21,9 +21,11 @@ const styles = {
       transform: 'translate3d(0, 0, 0)',
    },
    p: {
-     margin: 0
+     margin: 0,
+     color: '#242121'
    },
    select: {
+     backgroundColor: '#e7e5e3',
      border: 'none',
      height: 35,
      fontSize: 15,
@@ -32,13 +34,15 @@ const styles = {
      fontWeight: 'bold',
    },
    input: {
+     backgroundColor: '#e7e5e3',
      height: 35,
      border: 'none',
      padding: '0px 5px',
      borderRadius: 6,
      fontFamily: 'inherit'
    },
    button: {
+     backgroundColor: '#e7e5e3',
      outline: 'none',
      backgroundColor: 'white',
      height: 35,

demo/description.jsx

@@ -10,23 +10,26 @@ const Demo = ({ styles, duration, animation }) => {
     width: 500,
     fontSize: 60,
     margin: '30px auto',
+    color: '#c43a31'
   };
   const descriptionStyle = {
     ...styles.fadeInUp,
     animationDuration: '2s',
     fontSize: 16,
   }
 
-  // I'm so sorry.
+  // Render a bunch of empty spans so that each keyframe
+  // will be available in the DOM.
   let dummies = Object.keys(styles).map(
     key => <span key={key} style={styles[key]} />
   );
 
   return (
     <div>
     {dummies}
-    <h1 key={animation} style={headerStyle}>react-effects</h1>
-    <span style={descriptionStyle}>A collection of animations for CSS-in-JS libraries </span>
+    <h1 key={animation} style={headerStyle}>react-animations</h1>
+    <p style={descriptionStyle}>A collection of animations for CSS-in-JS libraries </p>
+    <a href='https://github.com/FormidableLabs/react-animations'>View on Github</a>
     </div>
   )
 }

package.json

@@ -1,12 +1,13 @@
 {
-  "name": "react-effects",
-  "version": "0.1.0",
-  "description": "animation library for Radium",
-  "main": "index.js",
+  "name": "react-animations",
+  "version": "0.0.1",
+  "description": "A collection of animations for inline styles",
+  "main": "lib/index.js",
   "scripts": {
     "flow": "flow",
     "test": "jest",
     "build": "builder run build",
+    "prepublish": "npm run build",
     "demo": "npm run build && builder run hot"
   },
   "keywords": [
@@ -25,6 +26,7 @@
     "radium": "^0.18.1"
   },
   "dependencies": {
+    "builder": "^3.0.0",
     "builder-radium-component": "^2.1.2",
     "builder-victory-component": "^2.5.0"
   }

src/index.js

@@ -1,6 +1,3 @@
-/* Utilities */
-export merge from './merge';
-
 /* Attention seekers */
 export bounce from './components/bounce';
 export flash from './components/flash';
@@ -20,7 +17,7 @@ export bounceInLeft from './components/bounceInLeft';
 export bounceInRight from './components/bounceInRight';
 export bounceInUp from './components/bounceInUp';
 
-/* Bouncing exits */
+/* Bouncing  exits */
 export bounceOut from './components/bouceOut';
 export bounceOutDown from './components/bounceOutDown';
 export bounceOutLeft from './components/bounceOutLeft';

src/merge.js

@@ -26,7 +26,7 @@ const defaultNormalizedFrames: FrameMap = {
  * that are clearly opposites (fadeIn and fadeOut).
  *
  * @example
- * import { merge, tada, flip } from 'react-effects';
+ * import { merge, tada, flip } from 'react-animations';
  * const tadaFlip = merge(tada, flip);
  */
 export default function merge(