show debug info only on dev environment

src/components/ScrollyVideo/ScrollyVideo.svelte

@@ -4,6 +4,7 @@
   import ScrollyVideo from './js/ScrollyVideo.js';
   import type { Snippet } from 'svelte';
   import { setContext } from 'svelte';
+  import { dev } from '$app/environment';
 
   /**
    * Props for the ScrollyVideo Svelte component.
@@ -178,13 +179,18 @@
     style="height: {heightChange}; width: 100%; min-height: 100svh;"
   >
     <div bind:this={scrollyVideoContainer} data-scrolly-container>
-      {#if showDebugInfo && scrollyVideo}
+      {#if scrollyVideo}
-        <p class="debug-info text-xxs font-sans">
+        {#if showDebugInfo && dev}
-          {@html JSON.stringify(flattenObject(scrollyVideo.componentState))
+          <div class="debug-info">
-            .replace(/[{}"]/g, '')
+            <p class="text-xxs font-sans font-bold title">FOR DEVS ONLY</p>
-            .split(',')
+            <p class="text-xxs font-sans">
-            .join('<br>')}
+              {@html JSON.stringify(flattenObject(scrollyVideo.componentState))
-        </p>
+                .replace(/[{}"]/g, '')
+                .split(',')
+                .join('<br>')}
+            </p>
+          </div>
+        {/if}
 
         <!-- renders foregrounds -->
         {#if children}
@@ -200,11 +206,22 @@
     position: absolute;
     top: 0;
     left: 0;
-    color: white;
+    background-color: rgba(0, 0, 0, 0.6);
-    background-color: rgba(0, 0, 0, 0.8);
     z-index: 3;
-    padding: 8px;
     margin: 0;
     min-width: 25vmin;
+
+    .title {
+      width: 100%;
+      padding: 4px 0 0 8px;
+      margin: 0;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    p {
+      color: white;
+      margin: 0;
+      padding: 4px 8px 8px 8px;
+    }
   }
 </style>

src/components/ScrollyVideo/demo/BasicTextBoxes.svelte

@@ -15,11 +15,12 @@
   <Foreground startTime={0} endTime={2}>
     <Headline
       class="custom-headline"
-      hed="ScrollyVideo inside ScrollerBase"
+      hed="The Alps"
-      dek="This is a demo of ScrollyVideo inside ScrollerBase component."
+      dek="Where better to start than with the Matterhorn?"
       section={'Reuters Graphics'}
       authors={['Jane Doe']}
       publishTime={new Date('2020-01-01').toISOString()}
+      hedSize="bigger"
     />
   </Foreground>
   <Foreground