@labcat2020/animation-lab 0.1.2 → 0.1.3

package/README.md

@@ -44,11 +44,22 @@ Layouts:
 ```astro
 import BaseLayout from '@labcat2020/animation-lab/layouts/BaseLayout.astro';
 import SketchLayout from '@labcat2020/animation-lab/layouts/SketchLayout.astro';
+---
+<SketchLayout title="My Sketch" showFps> <!-- bottom-right FPS badge -->
+  <script>import '@labcat2020/p5.audioreactive/p5.fps.js'</script>
+</SketchLayout>
 ```
 
+HUD labels (shared badge style, promoted from fractals `FractalBadge`):
+```astro
+import FpsIndicator from '@labcat2020/animation-lab/components/FpsIndicator.astro';
+<FpsIndicator /> <!-- or hidden={false} to show immediately -->
+```
+Styles in `styles/components/lab-label.scss` (`lab-label`, `lab-label--top-right`, `lab-label--bottom-right`, `lab-label--fps`) are auto-imported via `global.scss`; pair with `p.enableFpsIndicator()` from `@labcat2020/p5.audioreactive/p5.fps.js`.
+
 ## Dev helper
 
-Series repos linking local hub (sibling `../animations.labcat.nz`):
+Series repos linking the local lab (sibling `../animations.labcat.nz`):
 
 ```bash
 pnpm run postinstall # labcat-link-packages (symlinks packages/*)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labcat2020/animation-lab",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "description": "Shared Astro layouts, components, and styles for Animation Lab series sites",
   "exports": {
@@ -42,4 +42,4 @@
     "p5",
     "generative"
   ]
-}
+}

package/src/components/FpsIndicator.astro

@@ -0,0 +1,21 @@
+---
+// FpsIndicator — bottom-right FPS badge for audio-reactive sketches
+// Reuses shared .lab-label styles (global.scss → components/lab-label.scss).
+// The badge is hidden by default; call p.enableFpsIndicator() (from
+// @labcat2020/p5.audioreactive/p5.fps.js) to show and start updating.
+// When JS auto-creates the element it injects identical fallback styles.
+
+interface Props {
+  id?: string;
+  hidden?: boolean;
+}
+
+const { id = 'fps-indicator', hidden = true } = Astro.props;
+---
+
+<div
+  id={id}
+  class="lab-label lab-label--bottom-right lab-label--fps"
+  aria-live="polite"
+  hidden={hidden}
+></div>

package/src/layouts/SketchLayout.astro

@@ -1,8 +1,9 @@
 ---
 import BaseLayout from './BaseLayout.astro';
 import InstagramCTA from '../components/InstagramCTA.astro';
+import FpsIndicator from '../components/FpsIndicator.astro';
 
-const { title = 'Sketch', description = '' } = Astro.props;
+const { title = 'Sketch', description = '', showFps = false } = Astro.props;
 ---
 
 <BaseLayout title={title} description={description}>
@@ -46,4 +47,5 @@ const { title = 'Sketch', description = '' } = Astro.props;
   </svg>
 
   <!-- <InstagramCTA /> -->
+  <FpsIndicator hidden={!showFps} />
 </BaseLayout>

package/src/styles/components/lab-label.scss

@@ -0,0 +1,37 @@
+// lab-label — shared badge/label for HUD overlays (FractalBadge, FPS indicator, etc.)
+// Promoted from fractals/src/components/FractalBadge.astro visual style.
+// Usage: <div class="lab-label lab-label--top-right">…</div>
+//        <div class="lab-label lab-label--bottom-right lab-label--fps">60 FPS</div>
+
+.lab-label {
+  position: fixed;
+  z-index: 1000;
+  padding: 8px 12px;
+  background: var(--black);
+  font-family: 'Orbitron', monospace;
+  font-weight: 700;
+  color: var(--white);
+  pointer-events: none;
+  line-height: 1;
+  font-size: 14px;
+
+  &--top-right {
+    top: 10px;
+    right: 10px;
+  }
+
+  &--bottom-right {
+    bottom: 10px;
+    right: 10px;
+  }
+
+  &--fps {
+    min-width: 4.5em;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &[hidden] {
+    display: none !important;
+  }
+}

package/src/styles/global.scss

@@ -1,6 +1,7 @@
 // Import normalize.css for consistent base styling
 @import "./variables";
 @import "./mixins/breakpoints";
+@import "./components/lab-label";
 @import "normalize.css";
 
 $cursor-color: white;

package/src/vite.mjs

@@ -41,11 +41,12 @@ export function astroAnimationsViteConfig() {
         treeshake: {
           moduleSideEffects(id) {
             if (id.includes('p5.sound')) return true;
-            // Only the three side-effect entry files from p5.audioreactive; other helpers are tree-shakable
+            // Only the side-effect entry files from p5.audioreactive; other helpers are tree-shakable
             if (
               id.includes('p5.audioreactive/src/p5.audioReact.js') ||
               id.includes('p5.audioreactive/src/p5.soundBoot.js') ||
-              id.includes('p5.audioreactive/src/p5.setGlobalP5.js')
+              id.includes('p5.audioreactive/src/p5.setGlobalP5.js') ||
+              id.includes('p5.audioreactive/src/p5.fps.js')
             )
               return true;
             return undefined;