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>