Portal.view.home.parts.MainNeo: use component.MagicMoveText for the sub-headline #6481

Author: tobiu

apps/portal/view/home/parts/MainNeo.mjs

@@ -1,5 +1,6 @@
 import BaseContainer from './BaseContainer.mjs';
 import Button        from '../../../../../src/button/Base.mjs';
+import MagicMoveText from '../../../../../src/component/MagicMoveText.mjs';
 
 /**
  * @class Portal.view.home.parts.MainNeo
@@ -33,10 +34,17 @@ class MainNeo extends BaseContainer {
                 tag : 'h1'
             }]
         }, {
-            cls : ['neo-h2'],
-            flex: 'none',
-            html: 'Modern Enterprise-Ready JavaScript Framework',
-            tag : 'h2'
+            module   : MagicMoveText,
+            cls      : ['neo-h2'],
+            colorMove: '#3E63DD',
+            flex     : 'none',
+
+            cycleTexts: [
+                'Modern Enterprise-Ready JavaScript Framework',
+                'The Application Worker driven Frontend Framework',
+                'Extensibility',
+                'Scalability'
+            ]
         }, {
             cls : ['neo-h3'],
             flex: 'none',

examples/component/magicmovetext/MainContainer.mjs

@@ -74,6 +74,8 @@ class MainContainer extends ConfigurationViewport {
     createExampleComponent() {
         return {
             module: MagicMoveText,
+            height: 100,
+            width : 450,
 
             cycleTexts: [
                 'Magic Move',

resources/scss/src/apps/portal/home/parts/MainNeo.scss

@@ -27,6 +27,24 @@
         min-width       : 240px;
     }
 
+    .neo-magic-move-text {
+        background-color: transparent;
+        color           : #000;
+        font-size       : 2.5rem;
+        height          : 2em;
+        letter-spacing  : -0.02em;
+        line-height     : 1.2em;
+        width           : 90%;
+
+        .neo-content {
+            font-size: 2.5rem;
+        }
+
+        .neo-measure-element-wrapper {
+            letter-spacing: -0.02em;
+        }
+    }
+
     .neo-github {
         background-color: #fff;
     }

resources/scss/src/component/MagicMoveText.scss

@@ -26,7 +26,6 @@
 
     .neo-measure-element-wrapper {
         align-items    : center;
-        background-color: #000;
         display        : flex;
         justify-content: center;
         left           : -5000px;

src/component/MagicMoveText.mjs

@@ -226,7 +226,7 @@ class MagicMoveText extends Component {
                 me.chars.push({name: char});
 
                 if (char === ' ') {
-                    char = ' '
+                    char = ' '
                 }
 
                 measureElement.cn.push({tag: 'span', html: char})