diff --git a/components/builder-bar.js b/components/builder-bar.js
index b127b04..afb935c 100644
--- a/components/builder-bar.js
+++ b/components/builder-bar.js
@@ -20,6 +20,7 @@ export default class extends React.Component {
           size={(inputSize || placeholder.length) + 1}
           placeholder={placeholder}
           onChange={this.onChange}
+          onFocus={this.props.onFocus}
           value={badgeURL}
         />
         <style jsx>{`
diff --git a/components/builder-preview.js b/components/builder-preview.js
index 716d6d7..3950866 100644
--- a/components/builder-preview.js
+++ b/components/builder-preview.js
@@ -1,24 +1,76 @@
 import debounceRender from './libs/debounce-render.js'
 
-const BadgePreview = ({ host = 'https://badgen.net/', badgeURL }) => {
+const BadgePreview = ({ host = 'https://badgen.net/', badgeURL, focus }) => {
   return (
-    <div>
-      <img src={genBadgeSrc(host, badgeURL)} />
+    <div className='wrapper'>
+      <div className={'title' + (focus ? ' focus' : '')}>
+        <h1><img src='/static/badgen-logo.svg' /> Badgen</h1>
+        <p>Fast badge generating service</p>
+      </div>
+      <div className={'preview' + (focus ? ' focus' : '')}>
+        <PreviewBadge host={host} url={badgeURL} />
+      </div>
       <style jsx>{`
-        div {
-          height: calc(50vh - 160px);
+        .wrapper {
+          height: calc(50vh - 100px);
+          width: 100%;
           min-height: 100px;
+          position: relative;
+        }
+        .title, .preview {
+          position: absolute;
+          width: 100%;
+          height: 100%;
           display: flex;
+          flex-direction: column;
+          justify-content: center;
           align-items: center;
         }
-        img {
-          height: 30px;
+        .title.focus {
+          opacity: 0;
+          transform: translateY(-20px);
+          transition: all 200ms ease-out;
+        }
+        .title img {
+          height: 44px;
+          width: 44px;
+          vertical-align: top;
+          margin-top: 2px;
+        }
+        .title h1 {
+          margin: 1.5rem 0 0 0;
+          font: 52px/52px Merriweather, serif;
+          font-weight: 700;
+          color: #555;
+          height: 52px;
+          width: 256px;
+        }
+        .title p {
+          font: 18px/32px Merriweather, serif;
+          font-weight: 300;
+          letter-spacing: 0.3px;
+          color: #555;
+        }
+        .preview {
+          pointer-events: none;
+          opacity: 0;
+          transform: translateY(30px);
+          transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
+          transition-delay: 200ms;
+        }
+        .preview.focus {
+          opacity: 1;
+          transform: translateY(0);
         }
       `}</style>
     </div>
   )
 }
 
+const PreviewBadge = debounceRender(({ host, url }) => {
+  return <img style={{ height: '30px' }} src={genBadgeSrc(host, url)} />
+}, 400)
+
 const genBadgeSrc = (host, url) => {
   if (url === '') {
     return host + 'badge///blue'
@@ -30,4 +82,4 @@ const genBadgeSrc = (host, url) => {
   }
 }
 
-export default debounceRender(BadgePreview, 400)
+export default BadgePreview
diff --git a/package-lock.json b/package-lock.json
index e1dfdca..d301944 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2171,7 +2171,7 @@
     },
     "browserify-aes": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
       "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
       "dev": true,
       "requires": {
@@ -2208,7 +2208,7 @@
     },
     "browserify-rsa": {
       "version": "4.0.1",
-      "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
       "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
       "dev": true,
       "requires": {
@@ -2859,7 +2859,7 @@
     },
     "create-hash": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
       "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
       "dev": true,
       "requires": {
@@ -2872,7 +2872,7 @@
     },
     "create-hmac": {
       "version": "1.1.7",
-      "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
       "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
       "dev": true,
       "requires": {
@@ -3150,7 +3150,7 @@
     },
     "diffie-hellman": {
       "version": "5.0.3",
-      "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
       "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
       "dev": true,
       "requires": {
@@ -4213,8 +4213,7 @@
           "version": "2.1.1",
           "resolved": false,
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4238,15 +4237,13 @@
           "version": "1.0.0",
           "resolved": false,
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4263,22 +4260,19 @@
           "version": "1.1.0",
           "resolved": false,
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": false,
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": false,
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4409,8 +4403,7 @@
           "version": "2.0.3",
           "resolved": false,
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4424,7 +4417,6 @@
           "resolved": false,
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4441,7 +4433,6 @@
           "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4450,15 +4441,13 @@
           "version": "0.0.8",
           "resolved": false,
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "resolved": false,
           "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4479,7 +4468,6 @@
           "resolved": false,
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4568,8 +4556,7 @@
           "version": "1.0.1",
           "resolved": false,
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4583,7 +4570,6 @@
           "resolved": false,
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4679,8 +4665,7 @@
           "version": "5.1.1",
           "resolved": false,
           "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4722,7 +4707,6 @@
           "resolved": false,
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4744,7 +4728,6 @@
           "resolved": false,
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4793,15 +4776,13 @@
           "version": "1.0.2",
           "resolved": false,
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.2",
           "resolved": false,
           "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -6695,7 +6676,6 @@
           "resolved": false,
           "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
           "dev": true,
-          "optional": true,
           "requires": {
             "kind-of": "^3.0.2",
             "longest": "^1.0.1",
@@ -8029,8 +8009,7 @@
           "version": "1.0.1",
           "resolved": false,
           "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "loose-envify": {
           "version": "1.3.1",
@@ -9852,7 +9831,7 @@
     },
     "parse-asn1": {
       "version": "5.1.1",
-      "resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
       "integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
       "dev": true,
       "requires": {
@@ -10185,7 +10164,7 @@
     },
     "public-encrypt": {
       "version": "4.0.2",
-      "resolved": "http://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
       "integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==",
       "dev": true,
       "requires": {
@@ -10910,7 +10889,7 @@
     },
     "sha.js": {
       "version": "2.4.11",
-      "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
       "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
       "dev": true,
       "requires": {
diff --git a/pages/_app.js b/pages/_app.js
index c3b0aae..d1a2988 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -10,6 +10,8 @@ export default class MyApp extends App {
         <Head>
           <link rel='icon' type='image/png' href='/static/favicon.png' />
           <meta name='viewport' content='initial-scale=1.0, width=device-width' />
+          <link rel='stylesheet'
+            href='https://fonts.googleapis.com/css?family=Merriweather:700,300' />
         </Head>
         <Component {...pageProps} />
         <style jsx global>{`
diff --git a/pages/builder.js b/pages/builder.js
index c2213ab..1707ebb 100644
--- a/pages/builder.js
+++ b/pages/builder.js
@@ -7,9 +7,11 @@ export default class BuilderPage extends React.Component {
   state = {
     host: undefined,
     badgeURL: '',
-    placeholder: ''
+    placeholder: '',
+    focus: false
   }
 
+  setFocus = () => this.state.focus || this.setState({ focus: true })
   setBadgeURL = badgeURL => this.setState({ badgeURL })
   selectExample = exampleURL => this.setState({ badgeURL: exampleURL })
 
@@ -25,16 +27,17 @@ export default class BuilderPage extends React.Component {
   }
 
   render () {
-    const { host, placeholder, badgeURL } = this.state
+    const { host, placeholder, badgeURL, focus } = this.state
 
     return (
       <div>
-        <Preview host={host} badgeURL={badgeURL} />
+        <Preview host={host} badgeURL={badgeURL} focus={focus} />
         <Bar
           host={host}
           badgeURL={badgeURL}
           placeholder={placeholder}
-          onChange={this.setBadgeURL} />
+          onChange={this.setBadgeURL}
+          onFocus={this.setFocus} />
         <Helper host={host} badgeURL={badgeURL} onSelect={this.selectExample} />
         <style jsx>{`
           div {