Null Void is a minimalist, infinite creative canvas built for visual thinkers. It allows users to place text notes and images onto a limitless, zoomable grid. Featuring high-performance kinetic typography, smooth mouse trails, and a spatial interface, it serves as a modern mood board or brainstorming tool.
- Pan & Zoom: Navigate an endless workspace with smooth, momentum-based zooming and panning.
- Spatial Memory: Your board state (pins, position, zoom level) is automatically saved to Local Storage and restored upon return.
- Parallax Grid: A subtle, dot-matrix background that shifts with your perspective to provide depth.
- Text Pins: Double-click anywhere to create editable sticky notes.
- Image Pins: Paste images (
Ctrl+V) directly from your clipboard to the canvas. - Kinetic Typography: Hovering over pin titles triggers a "Norris-style" grapheme animation for a premium tactile feel.
- Color Coding: Pins are automatically assigned vibrant, neon-accented colors.
- Drag & Drop: smooth, rigid-body dragging for organizing content.
- Time Travel: Robust Undo (Ctrl+Z) and Redo (Ctrl+Y) system that tracks position, content, and creation history.
- Mouse Trail: A high-performance, lag-free cursor trail that adds fluid visual feedback.
- Glassmorphism: UI elements feature frosted glass effects (
backdrop-blur) for a modern aesthetic.
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS + CSS Modules
- State Management: Zustand (with Persist middleware)
- Typography: Geist Sans & Mono / Custom Kinetic CSS
- Icons: Native SVG generation
Follow these steps to get a local copy up and running.
- Node.js (v18 or higher)
- npm or yarn
Open your terminal and run:
git clone [https://github.com/aritraghosh2005/null-void.git](https://github.com/YOUR_USERNAME/null-void.git)
cd null-voidnpm install
# or
yarn installnpm run devOpen http://localhost:3000 with your browser to see the result.
| Action | Control / Interaction | Note |
|---|---|---|
| Pan Canvas | Click & Drag | Grab any empty space to move around |
| Zoom In/Out | Mouse Wheel (Scroll) | Zooms towards your cursor position |
| Create Text Note | Double-click | Creates a new card at cursor location |
| Add Image | Ctrl + V (Paste) |
Paste an image directly from clipboard |
| Move Pin | Drag Header | Grab the colored top bar of any card |
| Edit Title | Single Click | Click the header text to rename (e.g., "TODO") |
| Edit Content | Click Text Area | Type inside the card body |
| Undo | Ctrl + Z |
Reverts move, text, or delete actions |
| Redo | Ctrl + Y |
Restores the last undone action |
| Delete Pin | Click ✕ | Located in the top-right corner of the pin |
src/
├── app/
│ ├── layout.tsx # Global font and style definitions
│ └── page.tsx # Main canvas logic (Zoom/Pan/Events)
├── components/
│ ├── MouseTrail.tsx # The fluid cursor animation
│ └── PinCard.tsx # The individual card component (Logic + UI)
├── store/
│ └── useStore.ts # Global state (Zustand) + History implementation
├── types/
│ └── board.ts # TypeScript interfaces for Pins and Board
└── globals.css # Tailwind directives and Kinetic CSS animationsContributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (git checkout -b feature/AmazingFeature)
- Commit your Changes (git commit -m 'Add some AmazingFeature')
- Push to the Branch (git push origin feature/AmazingFeature)
- Open a Pull Request
Distributed under the MIT License.
Built with 🖤 by Aritra Ghosh