$ show 4lejandrito/creepyface
Creepyface is a JavaScript library that makes HTML images follow the pointer (mouse/finger/touch) by switching between different angled images. It consists of a core library, React and custom element wrappers, and point provider plugins for dance, firefly, and tilt tracking. The repository also includes a Next.js website that demonstrates the library and allows users to create and share their own creepyfaces. The architecture uses a monorepo with Lerna/Yarn workspaces, featuring a clean separation between the core library logic, UI wrappers, and the demonstration site with its own backend for image processing and storage.
The LLM identified 3 files worth highlighting for reuse:
The core algorithm that detects pointer movement, calculates angles, and switches image sources accordingly. Features efficient image preloading to prevent flickering, timeout-based reversion to default image, and a clean API for registering custom point providers. Demonstrates sophisticated event handling and resource management patterns.
A registry system for point providers that supports multiple simultaneous providers (mouse, finger, custom) with throttled event consumption to prevent performance issues. Includes clean registration/deregistration mechanisms and mapper functions for coordinate transformation. This pattern could be extracted as a standalone event handling library.
Generates optimized spritemaps from user-uploaded images, automatically creating both JPEG and WebP variants with cache invalidation. Efficiently packs multiple images and angles into spritemaps for fast loading, handles different namespaces (approved/pending), and uses the Canvas API for image composition. Demonstrates advanced image processing and optimization techniques.