@labcat2020/animation-lab 0.1.2

package/README.md

@@ -0,0 +1,61 @@
+# @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
+```bash
+pnpm add @labcat2020/animation-lab
+# peer deps required in host Astro app:
+pnpm add astro sass-embedded
+```
+
+## Exports
+```json
+{
+  "./layouts/*": "./src/layouts/*",
+  "./components/*": "./src/components/*",
+  "./styles/*": "./src/styles/*",
+  "./vite": "./src/vite.mjs"
+}
+```
+
+## Usage (Astro)
+
+`astro.config.mjs`:
+```js
+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:
+```astro
+import BaseLayout from '@labcat2020/animation-lab/layouts/BaseLayout.astro';
+import SketchLayout from '@labcat2020/animation-lab/layouts/SketchLayout.astro';
+```
+
+## Dev helper
+
+Series repos linking local hub (sibling `../animations.labcat.nz`):
+
+```bash
+pnpm run postinstall # labcat-link-packages (symlinks packages/*)
+# or
+npx labcat-link-packages
+```
+
+## License
+
+MIT — LABCAT

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@labcat2020/animation-lab",
+  "version": "0.1.2",
+  "type": "module",
+  "description": "Shared Astro layouts, components, and styles for Animation Lab series sites",
+  "exports": {
+    "./layouts/*": "./src/layouts/*",
+    "./components/*": "./src/components/*",
+    "./styles/*": "./src/styles/*",
+    "./vite": "./src/vite.mjs"
+  },
+  "bin": {
+    "labcat-link": "./scripts/link-packages.mjs",
+    "labcat-link-packages": "./scripts/link-packages.mjs"
+  },
+  "files": [
+    "src",
+    "scripts",
+    "templates"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "normalize.css": "^8.0.1"
+  },
+  "peerDependencies": {
+    "astro": "^6.0.8",
+    "sass-embedded": "^1.98.0"
+  },
+  "license": "MIT",
+  "author": "LABCAT (labcat.nz)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LABCAT/animations.labcat.nz.git",
+    "directory": "packages/animation-lab"
+  },
+  "keywords": [
+    "astro",
+    "animation",
+    "labcat",
+    "p5",
+    "generative"
+  ]
+}

package/scripts/link-packages.mjs

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+import { access, mkdir, readdir, rm, symlink } from 'node:fs/promises';
+import path from 'node:path';
+
+const seriesRoot = process.cwd();
+const labcatPackages =
+  process.env.LABCAT_PACKAGES ??
+  path.resolve(seriesRoot, '../animations.labcat.nz/packages');
+const linkDir =
+  process.env.LABCAT_LINK_DIR ?? path.join(seriesRoot, 'packages');
+
+try {
+  await access(labcatPackages);
+} catch {
+  console.warn(`[link] @labcat packages not found at ${labcatPackages}`);
+  process.exit(1);
+}
+
+const entries = await readdir(labcatPackages, { withFileTypes: true });
+const packageNames = entries.filter((e) => e.isDirectory()).map((e) => e.name);
+
+if (packageNames.length === 0) {
+  console.warn('[link] No @labcat packages found.');
+  process.exit(1);
+}
+
+await mkdir(linkDir, { recursive: true });
+
+for (const name of packageNames) {
+  const target = path.join(labcatPackages, name);
+  const link = path.join(linkDir, name);
+  await rm(link, { recursive: true, force: true });
+  await symlink(target, link, process.platform === 'win32' ? 'junction' : 'dir');
+}
+
+console.log(`[link] packages/ → ${labcatPackages} (${packageNames.join(', ')})`);

package/src/components/InstagramCTA.astro

@@ -0,0 +1,99 @@
+---
+// InstagramCTA component with BEM structure
+---
+
+<div class="instagram-cta">
+  <a
+    href="https://www.instagram.com/labcat2020/"
+    class="instagram-cta__link"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <svg
+      class="instagram-cta__icon"
+      viewBox="0 0 169.06 169.06"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M122.406,0H46.654C20.929,0,0,20.93,0,46.655v75.752c0,25.726,20.929,46.655,46.654,46.655h75.752   c25.727,0,46.656-20.93,46.656-46.655V46.655C169.063,20.93,148.133,0,122.406,0z M154.063,122.407   c0,17.455-14.201,31.655-31.656,31.655H46.654C29.2,154.063,15,139.862,15,122.407V46.655C15,29.201,29.2,15,46.654,15h75.752   c17.455,0,31.656,14.201,31.656,31.655V122.407z"
+      ></path>
+      <path
+        d="m84.531 40.97c-24.021 0-43.563 19.542-43.563 43.563 0 24.02 19.542 43.561 43.563 43.561s43.563-19.541 43.563-43.561c0-24.021-19.542-43.563-43.563-43.563zm0 72.123c-15.749 0-28.563-12.812-28.563-28.561 0-15.75 12.813-28.563 28.563-28.563s28.563 12.813 28.563 28.563c0 15.749-12.814 28.561-28.563 28.561z"
+      ></path>
+      <path
+        d="m129.92 28.251c-2.89 0-5.729 1.17-7.77 3.22-2.051 2.04-3.23 4.88-3.23 7.78 0 2.891 1.18 5.73 3.23 7.78 2.04 2.04 4.88 3.22 7.77 3.22 2.9 0 5.73-1.18 7.78-3.22 2.05-2.05 3.22-4.89 3.22-7.78 0-2.9-1.17-5.74-3.22-7.78-2.04-2.05-4.88-3.22-7.78-3.22z"
+      ></path>
+    </svg>
+    <span class="instagram-cta__text">
+      <span class="instagram-cta__action">Follow</span>
+      @labcat2020
+    </span>
+  </a>
+</div>
+
+<style lang="scss">
+  @import '../styles/mixins/breakpoints.scss';
+
+  .instagram-cta {
+    --shadow-colour: var(--cyan);
+    position: fixed;
+    bottom: 10px;
+    left: 10px;
+    z-index: 1000;
+    background: var(--black);
+    border-radius: 8px;
+
+    &__link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 8px;
+      backdrop-filter: blur(10px);
+      transition: all 0.5s;
+      color: var(--white);
+      font-weight: 700;
+      text-decoration: none;
+      box-shadow:
+        0 0 24px var(--shadow-colour),
+        0 0 12px var(--shadow-colour),
+        0 0 6px var(--shadow-colour),
+        0 0 3px var(--shadow-colour);
+
+      &:hover {
+        --shadow-colour: var(--pink);
+      }
+    }
+
+    &__icon {
+      --size: 22px;
+      width: var(--size);
+      height: var(--size);
+      border-radius: 8px;
+      fill: currentColor;
+      transition: all 0.5s;
+
+      @include media-breakpoint-up(md) {
+        --size: 24px;
+      }
+    }
+
+    &__text {
+      --size: 16px;
+      font-size: var(--size);
+      -webkit-text-stroke: 1px var(--black);
+
+      @include media-breakpoint-up(md) {
+        --size: 18px;
+      }
+    }
+
+    &__action {
+      display: none;
+
+      @include media-breakpoint-up(md) {
+        display: inline;
+      }
+    }
+  }
+</style>

package/src/layouts/BaseLayout.astro

@@ -0,0 +1,25 @@
+---
+import '../styles/global.scss';
+
+const { title = 'Sketchbook', description = '' } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+    {description && <meta name="description" content={description} />}
+    <link rel="manifest" href="manifest.json"/>
+    <link rel="icon" href="https://labcat.nz/favicon.ico" sizes="any"/>
+    <link rel="icon" type="image/svg+xml" href="https://labcat.nz/icon.svg"/>
+    <link rel="apple-touch-icon" href="https://labcat.nz/apple-touch-icon.png"/>
+    <link rel="dns-prefetch" href="//fonts.googleapis.com"/>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;800;900&amp;family=Teko:wght@700&amp;display=swap" id="fonts">
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>

package/src/layouts/SketchLayout.astro

@@ -0,0 +1,49 @@
+---
+import BaseLayout from './BaseLayout.astro';
+import InstagramCTA from '../components/InstagramCTA.astro';
+
+const { title = 'Sketch', description = '' } = Astro.props;
+---
+
+<BaseLayout title={title} description={description}>
+  <slot />
+  <div id="p5_loading"></div>
+  <div id="loader" class="loading">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <path
+        fill="none"
+        stroke-width="8"
+        stroke-dasharray="42.76482137044271 42.76482137044271"
+        d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
+        stroke-linecap="round"
+        style="transform:scale(0.8);transform-origin:50px 50px"
+      >
+        <animate
+          attributeName="stroke-dashoffset"
+          repeatCount="indefinite"
+          dur="1s"
+          keyTimes="0;1"
+          values="0;256.58892822265625"></animate>
+      </path>
+    </svg>
+  </div>
+  <main id="sketch-canvas"></main>
+  <!-- Play Icon -->
+  <svg
+    id="play-icon"
+    tabindex="0"
+    role="button"
+    xmlns="http://www.w3.org/2000/svg"
+    height="120"
+    width="120"
+    viewBox="0 0 24 24"
+    class="play-icon"
+  >
+    <path d="M0 0h24v24H0z" fill="none"></path>
+    <path
+      d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+    ></path>
+  </svg>
+
+  <!-- <InstagramCTA /> -->
+</BaseLayout>

package/src/styles/global.scss

@@ -0,0 +1,79 @@
+// Import normalize.css for consistent base styling
+@import "./variables";
+@import "./mixins/breakpoints";
+@import "normalize.css";
+
+$cursor-color: white;
+
+body {
+    overflow: hidden;
+    font-family: Orbitron,sans-serif;
+}
+
+.loading {
+    display: flex;
+    align-items: center;
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    background: var(--gradient-bg);
+    background-blend-mode: var(--gradient-blend-mode);
+    transform: rotate(-180deg);
+    transition: opacity 3s;
+    opacity: 1;
+
+    &--complete {
+        opacity: 0;
+    }
+
+    svg {
+        margin: auto;
+        width: 10rem;
+        height: 10rem;
+        background: transparent;
+        shape-rendering: auto;
+    }
+
+    path {
+        fill: none;
+        stroke: #ff0cb8;
+        transform: scale(0.8);
+        transform-origin: 50px 50px;
+    }
+}
+
+.p5Canvas,
+#defaultCanvas0 {
+    position: relative;
+    z-index: 1;
+    background: var(--canvas-complex-bg);
+    background-blend-mode: var(--canvas-complex-blend-mode);
+}
+
+.p5Canvas--cursor-play {
+  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><polygon points='8,6 26,16 8,26' fill='#{$cursor-color}'/></svg>") 8 8, pointer;
+}
+
+.p5Canvas--cursor-pause {
+  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><rect x='8' y='6' width='4' height='20' fill='#{$cursor-color}'/><rect x='20' y='6' width='4' height='20' fill='#{$cursor-color}'/></svg>") 8 8, pointer;
+}
+
+#play-icon {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    width: 120px;
+    height: 120px;
+    fill: var(--play-icon-color);
+    visibility: hidden;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 1s;
+    cursor: pointer;
+
+    &.fade-in {
+        opacity: 1;
+        visibility: visible;
+        z-index: 2;
+    }
+}

package/src/styles/mixins/breakpoints.scss

@@ -0,0 +1,65 @@
+// Grid breakpoints
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  xxl: 1440px,
+);
+
+// Helper function to get minimum breakpoint value
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @if $min != 0 {
+    @return $min;
+  }
+  @return null;
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: map-get($breakpoints, $name) - 0.02;
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: map-get($breakpoints, $upper) - 0.02;
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}

package/src/styles/variables.scss

@@ -0,0 +1,20 @@
+// Brand Colors
+:root {
+  --cyan: #0cdbf5;
+  --pink: #ff0cb8;
+  --white: #fff;
+  --black: #000;
+  --gradient-bg: linear-gradient(0deg,
+                rgba(0, 0, 0, 1) -8.35%,
+                rgba(29, 22, 87, 1) -5.1%,
+                rgba(51, 65, 174, 1) 28.53%,
+                rgba(59, 82, 208, 1) 43.72%,
+                rgba(53, 100, 213, 1) 51.31%,
+                rgba(37, 146, 225, 1) 67.59%,
+                rgba(12, 219, 245, 1) 89.28%,
+                rgba(0, 255, 255, 1) 100.13%);
+  --play-icon-color: white;
+  --canvas-bg: transparent;
+  --canvas-complex-bg: none;
+  --canvas-complex-blend-mode: normal;
+}

package/src/vite.mjs

@@ -0,0 +1,64 @@
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+
+const packageRoot = fileURLToPath(new URL('.', import.meta.url));
+
+/** Bind p5 before p5.sound's IIFE — bare global `p5` is tree-shaken in production otherwise. */
+function p5SoundPreamblePlugin() {
+  return {
+    name: 'labcat-p5-sound-preamble',
+    enforce: 'pre',
+    transform(code, id) {
+      const normalized = id.replace(/\\/g, '/');
+      if (!normalized.includes('p5.sound/dist/p5.sound.js')) return null;
+      if (code.includes('labcat-p5-sound-preamble')) return null;
+      return {
+        code: [
+          "import __labcatP5 from 'p5';",
+          'const p5 = globalThis.p5 ?? __labcatP5;',
+          'globalThis.p5 = p5;',
+          '/* labcat-p5-sound-preamble */',
+          code,
+        ].join('\n'),
+        moduleSideEffects: true,
+      };
+    },
+  };
+}
+
+/** Vite/Astro SCSS hook for series repos consuming @labcat2020/animation-lab. */
+export function astroAnimationsScssPrepend() {
+  const breakpoints = path.join(packageRoot, 'styles/mixins/breakpoints.scss');
+  return `@import "${breakpoints.replace(/\\/g, '/')}";`;
+}
+
+/** Shared Vite config — keeps p5.sound + p5.audioreactive prototype patches in production builds. */
+export function astroAnimationsViteConfig() {
+  return {
+    plugins: [p5SoundPreamblePlugin()],
+    build: {
+      rollupOptions: {
+        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
+            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')
+            )
+              return true;
+            return undefined;
+          },
+        },
+      },
+    },
+  };
+}
+
+/** Vite aliases — `@lib/*` resolves to `@labcat2020/p5.audioreactive/*` (legacy series import paths). */
+export function astroAnimationsViteAliases() {
+  return {
+    '@lib': '@labcat2020/p5.audioreactive',
+  };
+}

package/templates/pnpm-workspace.yaml

@@ -0,0 +1,10 @@
+packages:
+  - .
+  - ../animations.labcat.nz/packages/*
+
+linkWorkspacePackages: true
+
+allowBuilds:
+  '@parcel/watcher': true
+  esbuild: true
+  sharp: true