diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
   },
   "scripts": {
     "test": "webpack  --mode development && npm start",
-    "start": "node dist/rosmaro.js",
+    "start": "node dist/rosmaro.js init --url url -b=b -c c",
+    "build": "webpack  --mode production",
     "prepublish": "npm run build"
   },
   "engines": {
@@ -20,8 +21,15 @@
   },
   "babel": {
     "presets": [
-      "env",
       "stage-2"
+    ],
+    "plugins": [
+      [
+        "transform-react-jsx",
+        {
+          "pragma": "h"
+        }
+      ]
     ]
   },
   "keywords": [
@@ -38,9 +46,20 @@
   "devDependencies": {
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-env": "^1.6.1",
     "babel-preset-stage-2": "^6.24.1",
     "webpack": "^4.5.0",
     "webpack-cli": "^2.0.14"
+  },
+  "dependencies": {
+    "fs-extra": "^5.0.0",
+    "ink": "^0.4.1",
+    "ink-big-text": "^0.2.0",
+    "ink-gradient": "^0.1.1",
+    "ink-text-animation": "^0.1.0",
+    "rosmaro": "^0.7.2",
+    "rosmaro-in-memory-storage": "^1.2.0",
+    "rosmaro-process-wide-lock": "^1.2.0"
   }
 }
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,20 @@
+import { h, render, Component, Text } from 'ink'
+import argParser from 'yargs-parser'
+import RosmaroBigText from './RosmaroBigText'
+
+class App extends Component {
+
+    render() {
+        return (
+            <div>
+                <RosmaroBigText name="rainbow" />
+            </div>
+        )
+    }
+}
+
+App.defaultProps = {
+    args: argParser(process.argv.slice(2))
+}
+
+export default App
diff --git a/src/RosmaroBigText.js b/src/RosmaroBigText.js
@@ -0,0 +1,16 @@
+import { h, Text } from 'ink'
+import TextAnimation from 'ink-text-animation'
+
+
+export default ({ name = "glitch" }) => (
+    <div>
+        <TextAnimation name={name} >
+            <Text>
+                <div>  _ __ ___  ___ _ __ ___   __ _ _ __ ___ </div>
+                <div> | '__/ _ \/ __| '_ ` _ \ / _` | '__/ _ \ </div>
+                <div> | | | (_) \__ \ | | | | | (_| | | | (_) |</div>
+                <div> |_|  \___/|___/_| |_| |_|\__,_|_|  \___/ </div>
+            </Text>
+        </TextAnimation>
+    </div>
+)
diff --git a/src/RosmaroInk.js b/src/RosmaroInk.js
@@ -0,0 +1,39 @@
+import { h, Component } from "ink";
+import rosmaro from 'rosmaro';
+import makeStorage from 'rosmaro-in-memory-storage';
+import makeLock from 'rosmaro-process-wide-lock';
+
+class RosmaroInk extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            view: null
+        }
+        this.refreshView = () => Promise.resolve(this.model.render())
+            .then(view => this.setState({ view }));
+
+        this.model = rosmaro(Object.assign({}, this.props, {
+            afterTransition: () => {
+                this.props.afterTransition();
+                this.refreshView();
+            }
+        }));
+    }
+
+    componentDidMount() {
+        this.refreshView();
+    }
+
+    render() {
+        return this.state.view;
+    }
+}
+
+RosmaroInk.defaultProps = {
+    storage: makeStorage(),
+    lock: makeLock(),
+    afterTransition: () => { }
+}
+
+
+export default RosmaroInk
diff --git a/src/rosmaro.js b/src/rosmaro.js
@@ -1,7 +1,15 @@
 'use strict'
 
-const a = () => {
-    console.log("hi im from mars");
-}
+import { h, render} from 'ink'
+import App from './App'
 
-a()
+const unmount = render(<App />);
+
+/**
+|--------------------------------------------------
+| its for now!!!
+| usually use process.exit() instead
+| add a rosmaro leaf with this functionality
+|--------------------------------------------------
+*/
+setTimeout(() => unmount(), 5000)
diff --git a/webpack.config.js b/webpack.config.js
@@ -14,5 +14,8 @@ module.exports = {
                 }
             }
         ]
+    },
+    resolve: {
+        alias: {"tinycolor": "tinycolor2"},
     }
 }
diff --git a/yarn.lock b/yarn.lock