# Files changed · PR \#14 · screen/col [View on GitCafe](https://git.cafe/screen/col/pull/14/diffs) Repository: [screen/col](https://git.cafe/screen/col) Visibility: public [Refresh library discovery, navigation, and shader rendering](https://git.cafe/screen/col/pull/14.md) Version: 1 Head commit: 30cc5956cab64886a00b92d7df8c1b202e1d2c1a Base commit: 34fe961379acf920c254daa19f9660725b227852 Comparison base: 9eb826d3ee52535c62f9bff6a241186bc73d6a5a Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing. ## \.agents/skills/motion-catalogue/SKILL.md Status: added; +88; −0 ```diff @@ -1,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 — including core, timeline, ScrollTrigger, Flip, Draggable, SplitText | +| `framer-motion-skills` | 6 Framer Motion skills: core, Next.js, variants, scroll, gestures, layout | +| `motion-design-skill` | Official LottieFiles: timing, easing, choreography, Disney 12 principles | +| `animate-skill` | Emil-inspired Next.js/React patterns: hover, toast, text reveal, modals | +| `animate-css-skill` | Animate.css v4 + scroll triggers + RTL + prefers-reduced-motion | +| `css-animation-skill` | Scrapes live app design language → standalone animation file | +| `wiggle-claude-skill` | Animates SVG logos → Lottie JSON → GIF + MP4 | +| `emilkowalski-skill` | Animation decision framework, easing curves, interaction principles | +| `claudedesignskills` | 22-skill bundle: Three.js, GSAP, R3F, Framer, Babylon, A-Frame, PixiJS, Rive, Lottie — https://github.com/freshtechbro/claudedesignskills | +| `hyperframes` | "Write HTML → render video": GSAP/CSS/Lottie/Three.js + TTS (HeyGen) | + +## Generative Art & Creative Coding + +| Skill | Best for | +|-------|----------| +| `algorithmic-art` | Generative art with p5.js, flow fields, particle systems | +| `p5js-hermes` | p5.js creative coding: noise, particles, GLSL, audio-reactive | +| `remotion` | Programmatic video with React | + +## 3D, Shaders & Media + +| Skill | Best for | +|-------|----------| +| `shader-dev` | GLSL shaders: ray marching, fluid simulation, WebGL effects | +| `cloudai-threejs` | Three.js 3D scenes, animations, WebGL | +| `webgpu-claude-skill` | Three.js TSL, node materials, GPU compute, WGSL — r183+ | +| `threejs-ecs-ts` | Three.js + Entity Component Systems + TypeScript | +| `threejs-claude-skill-package` | 24 skills: WebGL, WebGPU, R3F, physics, IFC/BIM architecture | +| `fal-ai-skills` | fal.ai image/video and 3D model generation | +| `generative-media-skills` | 41 workflows: Midjourney v7, Flux Kontext, Kling 3.0, Veo3, Suno audio | + +## Workload → Library quick routing + +Use this when selecting the best UI/animation/3D library for the task: + +- Simple UI micro-interactions, hover, toast, reveal, modals → Framer Motion (`motion` / `framer-motion`) or CSS / Animate.css +- Scroll-driven storytelling, pinning, scrubbing, SplitText → GSAP + ScrollTrigger +- Lottie / SVG logo animation → Lottie / wiggle workflow +- Interactive 3D in React, product configurator → React Three Fiber + drei +- Vanilla / max-control WebGL, non-React → Three.js vanilla +- Games / heavy 3D physics → Babylon.js +- Lightweight background 3D / Vanta-style effects → lightweight-3d-effects / Vanta +- 2D canvas particles, charts → PixiJS / p5.js +- Custom shaders, fluid, ray-marching → GLSL ShaderMaterial / shader-dev +- Quick designer prototype, no code → Spline + +Full upstream catalogue: https://github.com/podo/design-agent-skills ``` ## app/Alexandria/page.tsx Status: added; +175; −0 ```diff @@ -1,0 +1,175 @@ +import type { Metadata } from "next"; +import Image from "next/image"; +import { Header } from "@/components/Header"; +import { LibraryLogo } from "@/components/LibraryLogo"; +import { libraries } from "@/data/libraries"; +import { BookOpen, ArrowUpRight } from "lucide-react"; + +export const metadata: Metadata = { + title: "Alexandria — A Col Concept", + description: + "Alexandria held every scroll. Col holds every UI library. A minimal hero concept preserving Col brand colors.", +}; + +const SHELF = [ + { slug: "radix-ui", name: "Radix UI" }, + { slug: "gsap", name: "GSAP" }, + { slug: "mantine", name: "Mantine" }, + { slug: "base-ui", name: "Base UI" }, + { slug: "flowbite", name: "Flowbite" }, + { slug: "motion", name: "Motion" }, + { slug: "lucide", name: "Lucide" }, + { slug: "magic-ui", name: "Magic UI" }, +] as const; + +const GLOW_BACKDROP = [ + { src: "/hero-logos/21st-dev-glow.png", name: "21st.dev" }, + { src: "/hero-logos/aceternity-glow.png", name: "Aceternity UI" }, + { src: "/hero-logos/mobbin-glow.png", name: "Mobbin" }, + { src: "/hero-logos/shadcn-glow.png", name: "shadcn/ui" }, + { src: "/hero-logos/react-bits-glow.png", name: "React Bits" }, +] as const; + +const FEATURED_SLUGS = ["shadcn-ui", "magic-ui", "gsap"] as const; + +function hostname(url: string): string { + try { + return new URL(url).hostname.replace(/^www\./, ""); + } catch { + return url; + } +} + +export default function AlexandriaPage() { + const featured = FEATURED_SLUGS.map((slug) => + libraries.find((library) => library.slug === slug), + ).filter((library) => library !== undefined); + + return ( + <> +
+
+
+
+
+ {GLOW_BACKDROP.map(({ src, name }) => ( + + + + ))} +
+ +
+

+ + Alexandria — a Col concept +

+ +

+ The ancient library, + + rebuilt for interfaces + +

+ +

+ Alexandria held every scroll. Col holds every UI library — + minimal, curated, and open. +

+ + + +
+

+ Shelved in this hall +

+
    + {SHELF.map(({ slug, name }) => ( +
  • + + {`${name} + + + {name} + +
    • + ))} +
+
+
+ +
+
    + {featured.map((library) => ( +
  • +
    + + + + + + {library.name} + + + {hostname(library.url)} + + +
    +

    + {library.description} +

    +
    + + {library.category} + + {library.stacks.slice(0, 2).map((stack) => ( + + {stack} + + ))} +
    +
    • + ))} +
+

+ Styled like the directory cards — same logos, chips, and brand base. +

+
+
+
+ + ); +} ``` ## app/contributors/page.tsx Status: modified; +2; −2 ```diff @@ -46,7 +46,7 @@ return ( <>
-
+
+ ); } ``` ## app/globals.css Status: modified; +31; −0 ```diff @@ -412,6 +412,37 @@ box-shadow: none; } +#library-search { scroll-margin-top: 80px; } +.filter-mobile-toggle, .docs-mobile-toggle { display: none; } +.library-save[aria-pressed="true"] { color: #8be5ef; } +html.light .library-save[aria-pressed="true"] { color: #0800ff; } +.contributors-page { background: #10181a; } +html.light .contributors-page { background: #f7f7f5; } +.footer-link { min-height: 44px; align-items: center; } +.site-header-menu, .site-header-search, .site-header-github { min-height: 44px; } +.coss-trigger { min-height: 44px; } +.docs-sidebar-search, .docs-sidebar-link { min-height: 44px; } + +@media (max-width: 1023px) { + .docs-mobile-toggle { display: flex; } + .docs-sidebar-content { display: none; } + .docs-sidebar-content-open { display: block; } + .filter-mobile-toggle { display: flex; } + .filter-advanced { display: none; } + .filter-advanced-open { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } + .filter-advanced-open > :last-child { grid-column: 1 / -1; } + .filter-categories { display: none; } + .filter-categories-open { display: block; } +} +@media (max-width: 760px) { + .search-key-hint, .site-header-search kbd { display: none; } + .site-header-menu { min-width: 44px; } + .site-header-mobile-menu a { min-height: 44px; display: flex; align-items: center; } + .directory-section { padding-top: 100px; } + .filter-advanced-open { grid-template-columns: 1fr; } + .filter-advanced-open > :last-child { grid-column: auto; } +} + .site-header--docs .site-header-link-highlight { border-color: rgba(136,213,223,.14); background: #141c1f; box-shadow: none; } .site-header-left, .site-header-actions, .site-header-brand, .site-header-links, .site-header-link, .site-header-search, .site-header-github, .site-header-menu { ``` ## app/libraries/page.tsx Status: modified; +2; −0 ```diff @@ -1,5 +1,6 @@ import { DirectoryExplorer } from "@/components/DirectoryExplorer"; import { Header } from "@/components/Header"; +import { SiteFooter } from "@/components/SiteFooter"; export default async function LibrariesPage({ searchParams }: { searchParams: Promise<{ q?: string }> }) { const { q = "" } = await searchParams; @@ -10,6 +11,7 @@
+ ); } ``` ## app/not-found.tsx Status: added; +18; −0 ```diff @@ -1,0 +1,18 @@ +import Link from "next/link"; +import { Header } from "@/components/Header"; +import { SiteFooter } from "@/components/SiteFooter"; + +export default function NotFound() { + return ( + <> +
+
+

404

+

Page not found

+

The page you requested does not exist.

+ Back to home +
+ + + ); +} ``` ## components/DirectoryExplorer.tsx Status: modified; +4; −4 ```diff @@ -90,7 +90,7 @@

Search and filter the complete Col library directory.

- {visibleResults.length} libraries + {visibleResults.length} {visibleResults.length === 1 ? "library" : "libraries"} setSort(value as "curated" | "name")} className="w-40" /> -
@@ -130,8 +130,8 @@ ) : (
{showSaved ? : } -

{showSaved ? "No saved libraries yet" : "Nothing matches that search"}

-

Try another keyword or clear the filters.

+

{showSaved ? (saved.size === 0 ? "No saved libraries yet" : "No saved libraries match") : "Nothing matches that search"}

+

{showSaved ? (saved.size === 0 ? "Leave Saved to browse the directory, then tap the heart on any library to save it here." : "Clear the filters to see your saved libraries.") : "Try another keyword or clear the filters."}

)} ``` ## components/DocsSidebar.tsx Status: modified; +7; −2 ```diff @@ -1,9 +1,9 @@ "use client"; -import { useCallback, useEffect, useRef } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { usePathname } from "next/navigation"; import Link from "next/link"; +import { ChevronDown, Search } from "lucide-react"; -import { Search } from "lucide-react"; const getStarted = [ ["/docs", "Overview"], @@ -18,6 +18,7 @@ export function DocsSidebar() { const pathname = usePathname(); + const [open, setOpen] = useState(false); const linksRef = useRef(null); const highlightRef = useRef(null); const pendingLinkRef = useRef(null); @@ -64,12 +65,15 @@ return ( ); } ``` ## components/FilterBar.tsx Status: modified; +14; −11 ```diff @@ -1,5 +1,6 @@ "use client"; +import { useState } from "react"; import { ChevronDown, RotateCcw, Search } from "lucide-react"; import { CATEGORIES, STACKS, USE_CASES, type Category, type Stack, type UseCase } from "@/data/libraries"; import { Button } from "@/components/ui/button"; @@ -56,18 +57,19 @@ } export function FilterBar({ activeCategory, activeStacks, activeUseCases, query, onQueryChange, onCategoryChange, onStackChange, onUseCaseChange, onClearAll }: FilterBarProps) { + const [filtersOpen, setFiltersOpen] = useState(false); const hasFilters = query.trim() !== "" || activeCategory !== null || activeStacks.length > 0 || activeUseCases.length > 0; return (
+
+
- onCategoryChange(value === "all" ? null : value as Category)}> - - All + - {CATEGORIES.map((category) => {category})} +
onCategoryChange(value === "all" ? null : value as Category)}> + + All + {CATEGORIES.map((category) => {category})} +
-
); } ``` ## components/Header.tsx Status: modified; +5; −6 ```diff @@ -12,6 +12,7 @@ const links = [ ["Libraries", "/libraries"], ["Docs", "/docs"], + ["Contributors", "/contributors"], ["Sponsors", "/#sponsors"], ] as const; @@ -38,14 +39,12 @@ useEffect(() => { const handleShortcut = (event: KeyboardEvent) => { const target = event.target; - if (target instanceof HTMLElement && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName))) return; - const slashShortcut = event.key === "/" && !event.altKey && !event.ctrlKey && !event.metaKey; const commandShortcut = (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k"; if (!slashShortcut && !commandShortcut) return; + if (slashShortcut && target instanceof HTMLElement && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName))) return; if (pathname === "/libraries") { - if (!slashShortcut) return; event.preventDefault(); document.querySelector("#library-search")?.focus(); return; @@ -138,7 +137,7 @@ }} >