Experiment with typing cycler

app/javascript/backend_typed.js

@@ -0,0 +1,13 @@
+const Typed = require('typed.js');
+document.addEventListener("turbolinks:load", function () {
+  new Typed('.backends-cycler', {
+    strings: ['Google Sheets', 'Airtable', 'Google Sheets', 'Airtable'], // smoother loops
+    loop: true,
+    typeSpeed: 100,
+    backSpeed: 40,
+    backDelay: 1400,
+    smartBackspace: true,
+    startDelay: 800,
+    onBegin: (typed) => { typed.currentElContent = typed.el.innerText; }
+  });
+});

app/javascript/packs/application.js

@@ -11,6 +11,7 @@ require("channels")
 require('burger_menu');
 require('tinyforms');
 require('demo');
+require('backend_typed');
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)

app/views/home/index.html.erb

@@ -2,10 +2,10 @@
   <div class="hero-body">
     <div class="container">
       <h1 class="title is-family-secondary has-text-weight-bold">
-        Welcome
+        Tinyforms - the form backend for designers and developers
       </h1>
       <p class="subtitle is-size-6 has-text-white">
-        Generate forms instantly
+        Link your online forms to <span class="backends-cycler">Google Sheets</span> and receive form submissions in your favorit spreadsheet.
       </p>
     </div>
   </div>

package.json

@@ -8,7 +8,8 @@
     "@rails/webpacker": "4.2.2",
     "bulma": "^0.8.1",
     "bulma-helpers": "^0.3.10",
-    "turbolinks": "^5.2.0"
+    "turbolinks": "^5.2.0",
+    "typed.js": "^2.0.11"
   },
   "version": "0.1.0",
   "devDependencies": {

yarn.lock

@@ -7053,6 +7053,11 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typed.js@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/typed.js/-/typed.js-2.0.11.tgz#d298a91f959f11a3803bf48b841a6fadd29640d9"
+  integrity sha512-1ZORHalEyLob34q738mqmwp0pT6syMigB1SZuTItqdhovWBKFIt7I5uVALXAGQZCg2MCtihCt6uqkoqPJK+9iQ==
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"