$ show ui-layouts/cursify
Cursify is a Next.js application that serves as both a documentation site and a component library for custom cursor animations and background patterns. It provides over 30 cursor effects (e.g., fluid, neon, blob, fairy dust, glitch) and 12+ pattern animations (e.g., flowing dots, vertical bars, sliding ease), each with live previews, code snippets, and installation instructions. The architecture is a static Next.js site using the App Router, MDX for content, and a registry of reusable React components. The codebase is well-organized with separate directories for hooks, UI primitives, and registry components. It relies on several animation libraries (Framer Motion, react-spring, motion) and Radix UI for interactive elements. The primary data flows are static: MDX content is rendered server-side, and client-side interactivity is handled via React hooks and canvas/WebGL. There is no backend or API; the site is purely a documentation and showcase platform.
The LLM identified 5 files worth highlighting for reuse:
A WebGL-based fluid simulation hook that creates a real-time fluid cursor effect. It is self-contained, uses raw WebGL (no external libraries), and can be extracted into any React project to add a fluid cursor. Demonstrates advanced graphics programming and encapsulation of complex WebGL state management.
A reusable React component that renders a custom canvas-based cursor. It accepts props for size, color, and behavior, and manages its own canvas lifecycle. This pattern is used across many cursor variants and can be extracted as a base for any canvas cursor effect.
A component that displays a live preview of a component alongside its source code with tab switching between TypeScript and JavaScript. It integrates with Code Hike for syntax highlighting and includes copy buttons. This is a reusable pattern for any documentation site that needs to show interactive code examples.
A utility module that reads source files from the filesystem and extracts code for display. It handles synchronous file reading and can be reused in any Next.js project that needs to display source code from a registry or content directory. Demonstrates clean separation of concerns for code extraction.
A custom React hook that listens to media query changes and returns a boolean. It is a well-implemented, generic hook that can be reused across any React project for responsive behavior. Includes cleanup and proper state management.