Un tablero zen de notas adhesivas (post-its) que flotan suavemente por la pantalla, como hojas mecidas por la brisa. Pensado para capturar ideas sin fricción y disfrutar mirándolas.
🔗 Repo: https://github.com/aisurf3r/DriftNotes
- 🪶 Notas flotantes con física orgánica (drift continuo).
- 🌬️ Modo Viento: una ráfaga suave reagrupa todas las notas en el centro de la vista.
- 🎨 7 colores de post-it (amarillo, rosa, azul, verde, naranja, morado y marrón) asignados aleatoriamente.
- 🌗 Tema claro y oscuro, ambos diseñados para ser amables con la vista.
- 🖼️ Fondo ambiental difuminado con la imagen de fondo y los tonos de cada tema.
- 🔍 Búsqueda instantánea (Ctrl+K). La nota encontrada se fija al centro absoluto de la pantalla, on-top, mientras el resto pasa por detrás.
- ⏰ Recordatorios con popup propio para fecha y hora; al cumplirse, la nota pulsa y aparece un toast.
- ✏️ Doble click para editar: muestra todo el contenido.
- 🗑️ Confirmación antes de eliminar una nota.
- 💾 Persistencia local con IndexedDB (Dexie). Sin servidor, sin cuentas.
- 📤 Exportar / Importar todas las notas como JSON.
- 🖥️ Pantalla completa y barra de herramientas que aparece al pasar el ratón por arriba.
- ⚡ Velocidad de flotación ajustable (0×–5×).
| Atajo | Acción |
|---|---|
Ctrl + K |
Abrir búsqueda |
Doble click sobre nota |
Editar contenido |
La barra de herramientas se despliega pasando el ratón por la parte superior central de la pantalla.
- React 18 + TypeScript 5 + Vite 5
- Tailwind CSS + shadcn/ui (componentes Radix)
- Framer Motion — animaciones y física de flotación
- Dexie — almacenamiento local en IndexedDB
- Lucide React — iconografía
- Sonner — notificaciones toast
Requiere Node.js 18+ y npm (o bun/pnpm).
git clone https://github.com/aisurf3r/DriftNotes.git
cd DriftNotes
npm install
npm run devAbre http://localhost:5173 en tu navegador.
npm run build # build de producción
npm run preview # previsualizar build
npm run lint # linter
npm run test # tests con vitestsrc/
├── components/
│ ├── PostItNote.tsx # nota individual + física de flotación
│ ├── NoteInput.tsx # input para crear notas
│ ├── ZenControls.tsx # barra de herramientas superior
│ ├── SearchDialog.tsx # búsqueda (Ctrl+K)
│ ├── ReminderDialog.tsx # popup de recordatorios
│ └── ui/ # componentes shadcn
├── pages/
│ └── Index.tsx # tablero principal
├── lib/
│ └── db.ts # capa Dexie (IndexedDB)
└── index.css # design tokens y temas
Todos los colores y tokens viven en src/index.css como variables HSL. Para añadir un color de nota, edita las variables --note-* y la lógica de selección aleatoria.
MIT — úsalo, modifícalo y compártelo libremente.
Hecho con ☕ y un poco de viento.