@labcat2020/animation-lab

Shared Astro layouts, components, styles, and Vite helpers for Animation Lab (formerly animations.labcat.nz) series sites — e.g. triangles, donuts.

Renamed from @labcat2020/astro-animations → @labcat2020/animation-lab (Sep 2026). Now published to npm (was GitHub Packages).

Install

pnpm add @labcat2020/animation-lab
# peer deps required in host Astro app:
pnpm add astro sass-embedded

Exports

{
  "./layouts/*": "./src/layouts/*",
  "./components/*": "./src/components/*",
  "./styles/*": "./src/styles/*",
  "./vite": "./src/vite.mjs"
}

Usage (Astro)

astro.config.mjs:

import { defineConfig } from 'astro/config';
import { astroAnimationsViteConfig, astroAnimationsViteAliases, astroAnimationsScssPrepend } from '@labcat2020/animation-lab/vite';

export default defineConfig({
  vite: {
    ...astroAnimationsViteConfig(),
    resolve: { alias: { ...astroAnimationsViteAliases(), '@': '/src' } },
    css: { preprocessorOptions: { scss: { additionalData: astroAnimationsScssPrepend() } } }
  }
});

• astroAnimationsViteConfig() — injects p5.sound preamble (binds global p5 before p5.sound IIFE) + marks audio-react side-effects as non-tree-shakable.
• astroAnimationsViteAliases() — @lib → @labcat2020/p5.audioreactive (legacy series import path).
• astroAnimationsScssPrepend() — prepends styles/mixins/breakpoints.scss.

Layouts:

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):

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

Preview the components on their own:

cd packages/animation-lab
pnpm dev   # astro dev --root dev → http://localhost:4321

dev/ renders SketchLayout with the header + control panel. Play/pause and FPS are simulated — the lab package has no audio.

Series repos linking the local lab (sibling ../animations.labcat.nz):

pnpm run postinstall # labcat-link-packages (symlinks packages/*)
# or
npx labcat-link-packages

License

MIT — LABCAT