Refresh library discovery, navigation, and shader rendering#14

@@ -0,0 +1,88 @@
+---
+name: motion-catalogue
+description: |
+  Domain navigator for motion, animation, 3D, and generative media skills.
+  Routes to the right skill for GSAP, Framer Motion, Three.js, Lottie,
+  shaders, generative art, video, and AI media generation.
+triggers:
+  - "motion skills"
+  - "animation skill"
+  - "GSAP skill"
+  - "Three.js skill"
+  - "Framer Motion skill"
+  - "Lottie skill"
+  - "shader skill"
+  - "generative art skill"
+  - "WebGL skill"
+  - "video generation skill"
+  - "creative coding skill"
+---
+
+# motion-catalogue
+
+Domain navigator for motion design, animation, 3D, shaders, and generative media.
+Activate when the user asks for a skill in one of these areas.
+
+→ For the full catalogue across all domains: use `design-catalogue`.
+
+Source: https://github.com/podo/design-agent-skills/tree/main/skills/motion-catalogue
+
+## When to use
+
+Activate when the user:
+- Asks about animation libraries (GSAP, Framer Motion, Lottie, CSS animations)
+- Wants 3D (Three.js, WebGPU, shaders, WebGL, R3F)
+- Needs generative art (p5.js, algorithmic art, creative coding)
+- Wants video/media generation (Remotion, fal.ai, generative media)
+
+## Motion & Animation
+
+| Skill | Best for |
+|-------|----------|
+| `gsap-skills` | Official GSAP: 8 skills — core, timeline, ScrollTrigger, Flip, Draggable, SplitText |

@@ -131,7 +131,7 @@ export function DirectoryExplorer({ initialQuery = "" }: { initialQuery?: string
         <div className="theme-border mt-6 flex flex-col items-center border border-dashed py-24 text-center">
           {showSaved ? <Heart className="theme-muted size-7" aria-hidden /> : <SearchX className="theme-muted size-7" aria-hidden />}
           <p className="theme-text mt-5 font-medium">{showSaved ? "No saved libraries yet" : "Nothing matches that search"}</p>
-          <p className="theme-muted mt-1.5 text-sm">Try another keyword or clear the filters.</p>
+          <p className="theme-muted mt-1.5 text-sm">{showSaved ? "Tap the heart on any library to save it here." : "Try another keyword or clear the filters."}</p>

@@ -211,13 +249,37 @@ function uniforms(gl: WebGL2RenderingContext, program: WebGLProgram, names: read
 }
 
 function createShader(canvas: HTMLCanvasElement, options: ShaderOptions = {}): ShaderHandle {
-  const gl = canvas.getContext("webgl2", { alpha: false, antialias: false, depth: false, stencil: false });
-  if (!gl) throw new Error("WebGL2 is not available in this browser.");
+  const context = canvas.getContext("webgl2", { alpha: false, antialias: false, depth: false, stencil: false });
+  if (!context) throw new Error("WebGL2 is not available in this browser.");
+  const gl = context;
   const dark = parseHex(options.background?.dark ?? "#090909");
   const light = parseHex(options.background?.light ?? "#ffffff");
 
   const field = compile(gl, FIELD_SHADER);
   const fieldUniforms = uniforms(gl, field, ["iResolution", "iTime", "uLightMode", "uDarkBackground", "uLightBackground"]);
+  const post = compile(gl, POST_SHADER);
+  const postUniforms = uniforms(gl, post, ["tScene", "iResolution", "uLightMode", "uPixelRatio", "uDarkBackground", "uLightBackground"]);
+  const scene = gl.createTexture();
+  const framebuffer = gl.createFramebuffer();
+  if (!scene || !framebuffer) throw new Error("WebGL could not create the shader scene.");