repository·main·Indexed 24 days ago
https://github.com/ui-layouts/cursifyA starter repository based on UI-LAYOUT for building and documenting high-quality UI components using Next.js, Tailwind CSS, and Framer Motion. It includes a variety of interactive cursor effects, such as the Blob Cursor, FairyDustCursor, and Canvas Cursor, along with custom hooks like useMediaQuery and useFluidCursor.
blinking-ascii-dots component is an interactive React component that creates a dynamic bubble effect, visually tracking cursor movement in real time using ASCII dots.Dot Particles component is an interactive React component that creates a dynamic bubble effect. It visually tracks cursor movement in real time by animating particles across a canvas.The delicate-ascii-dots component is an interactive React component that creates a dynamic bubble effect, visually tracking cursor movement in real time using ASCII dots on a canvas.
<ComponentCodePreview name='delicate-ascii-dots' type='separate' />The repository is organized into several key directories:
app/: Contains the Next.js App Router structure, including documentation pages (docs-page) and live component previews (live-components).components/: The main component library, subdivided into:core/: Fundamental UI elements (e.g., blur-vignette.tsx).labs/: Experimental or specialized components.website/: Components specific to the documentation/website UI (e.g., header.tsx, sidebar.tsx, and ui/ for base primitives).registry/: A collection of component variations and specific UI patterns (e.g., button/, card/, footers/).content/: MDX files used for component documentation.hooks/: Custom React hooks like useMediaQuery, useClickOutside, and useZustStore.lib/: Utility functions and helper logic.configs/: Configuration files for documentation and content.Sliding Ease component is an interactive React component that creates a dynamic bubble effect, visually tracking cursor movement in real time using sliding bars and vertical lines.Flowing Dots Effect is an interactive React component that creates a dynamic bubble animation that visually tracks cursor movement in real time. It renders on a canvas and uses RGB values for line and particle colors.The Arrow Cursor Effect component requires the motion package to handle the interactive animations and cursor tracking. Install it using npm:
npm install motionTo use Cursify components, you must have tailwindcss installed. Additionally, most components rely on motion for animations. Install the required utility packages using npm:
npm install motion clsx tailwind-mergeRipple Cursor Effect is an interactive React component designed to add a dynamic ripple effect that visually tracks cursor movement in real time. It is categorized under cursor effects and can be used to enhance UI interactivity with wave-like visual feedback.Smooth Cursor Follower is an interactive React component that implements a dynamic bubble effect. It visually tracks the user's cursor movement in real time, providing a smooth, trailing animation.The NeuralGlow component is a React client component that uses WebGL to create an interactive, dynamic bubble effect that tracks cursor movement in real time. It uses custom shaders to render a blue/indigo color palette with a 'neural' noise pattern that reacts to pointer position and scroll progress.
To use it, import the component and place it within your layout. Note that the component uses pointer-events-none and absolute positioning, so it is designed to overlay existing content without interfering with clicks.
verticle-bars component is an interactive React component that creates a dynamic bubble effect by visually tracking cursor movement in real time using vertical bars.