kfeditor full panel

app/assets/styles/intro.css

@@ -16,9 +16,21 @@ body {
     transform-origin: right;
     animation: colorChange 5s linear infinite;
     animation: fadeaway 30s forwards; 
-    left: calc(50%);
     transform: translateX(-50%);
 }
+.glowing.lt {
+    left: 0%;
+    transform: rotate(-15deg);
+    top: -15%;
+}
+.glowing.ct {
+    left: 50%;
+}
+.glowing.rt {
+    left: 50%;
+    transform: rotate(15deg)
+}
+
 
 .glowing:nth-child(even) {
     transform-origin: left;
@@ -98,7 +110,7 @@ body {
     0% { transform: rotate(calc(180deg * var(--i))); scale:20%;}
     25% { transform: rotate(calc(90deg * var(--i))); scale:100%;}
     50% { transform: rotate(calc(0deg * var(--i)));  scale:80%;}
-    100% { transform: rotate(calc(360deg * var(--i))); scale:50%;}
+    100% { transform: rotate(calc(360deg * var(--i))); scale:10%;}
 }
 
 
@@ -106,7 +118,7 @@ body {
   0%   { transform: rotate(calc(135deg * var(--i))); scale:20%;}
   25%  { transform: rotate(calc(45deg * var(--i))); scale:100%;}
   50%  { transform: rotate(calc(-45deg * var(--i))); scale:80%;}
-  100% { transform: rotate(calc(315deg * var(--i))); scale:50%;}
+  100% { transform: rotate(calc(315deg * var(--i))); scale:10%;}
 }   
 
 

app/views/editors/KeyframeView.html

@@ -12,11 +12,21 @@
     .kf-editor article.agent-preview header { padding:0; }
     .kf-editor canvas[data-output="agentSampleCanvas"]{ width:100%; aspect-ratio: 1 / 1;} 
     .kf-editor canvas[data-output="kfArenaCanvas"]{ width:100%; height:100%; } 
-    .kf-editor article.agent-preview section, .kf-editor article.agent-properties section{
+    .kf-editor article.agent-preview section{
         display: grid;
-        grid-template-rows: 2em auto 2em;
-        height: 100%;
+        grid-template-rows: 2em auto;
+        overflow: visible; 
     }
+     .kf-editor article.agent-properties section{
+        display: grid;
+        grid-template-rows: 2em auto;
+        overflow: visible;
+        height:100%;
+    }
+    .kf-editor article.agent-preview section.selector{ padding: 0.5em .5em 1.5em .5em; }
+    .kf-editor article.agent-preview section.browser{ padding:0; }
+    .kf-editor article.agent-preview section.browser header { border-top: 1px solid #473; border-bottom: 1px solid #473;}
+    .kf-editor article.agent-preview section.browser header h1{ text-align: center; margin-top: .3em;}
     .kf-editor article.kfArena section{
         padding: 0;
         height: 100%;
@@ -35,7 +45,8 @@
         padding: 0 0 0 0;
         min-height: 1.2em;
     }
-    .kf-editor article.agent-properties section div.kf-actions button{
+    .kf-editor article.agent-properties section.kf-actions { border-top: 1px solid #473; padding: 3px 5px 3px 5px; height:3em;}
+    .kf-editor article.agent-properties section.kf-actions button{
         color: #DDD;
         padding: 0 0 0 0;
         min-height: 2em;
@@ -51,11 +62,11 @@
 <div class="kf-editor cols-3">
     <article eiccard class="agent-preview">
         <header><canvas data-output="agentSampleCanvas"></canvas></header>
-        <section>
-            <div>
+        <section class="selector">
             <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
-            </div>
-            <div></div>
+        </section>
+        <section class="browser">
+            <header><h1>Keyframes browser</h1></header>
         </section>
     </article>
     <article eiccard class="kfArena">
@@ -71,10 +82,10 @@
                 <button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove agent</button>
             </div>
             <div data-output="agentProperties"></div>
-            <div class="kf-actions cols-2">
+        </section>
+        <section class="kf-actions cols-2">
             <button eicbutton rounded data-output="btnSaveKF" data-trigger="onSaveKF">Save KF</button>
             <button eicbutton rounded data-output="btnResetKF" data-trigger="onResetKF">Reset KF</button>
-            </div>
         </section>
     </article>
     

index.html

@@ -9,17 +9,17 @@
 
 <body>
     
-    <div class="glowing">      
+    <div class="glowing lt">      
         <span style="--i:1;"></span>
         <span style="--i:2;"></span>
         <span style="--i:3;"></span>
     </div>    
-    <div class="glowing">
+    <div class="glowing ct">
         <span style="--i:4;"></span>
         <span style="--i:5;"></span>
         <span style="--i:6;"></span>
     </div>
-    <div class="glowing">
+    <div class="glowing rt">
         <span style="--i:5;"></span>
         <span style="--i:3;"></span>
         <span style="--i:1;"></span>