Kine UI provides high-performance, copy-pasteable spatial primitives powered by MediaPipe WebAssembly. 100% Client-Side. Zero Latency.
Important
Project Banner © Open Dev Society. This project is licensed under AGPL-3.0; if you modify, redistribute, or deploy it (including as a web service), you must release your source code under the same license and credit the original authors.
Kine UI is an open-source alternative to heavy, black-box computer vision libraries. Build spatial interfaces, track real-time gestures, and explore native spatial computing — built openly, for everyone, forever free.
Note
Kine UI is community-built and utilizes @mediapipe/tasks-vision for client-side processing. Detection quality may vary based on lighting and hardware configuration. Nothing here is intended for critical safety systems.
- ✨ Introduction
- 🌍 Open Dev Society Manifesto
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
- 🧱 Project Structure
- 📡 Data & Integrations
- 🧪 Scripts & Tooling
- 🤝 Contributing
- 🛡️ Security
- 📜 License
- 🙏 Acknowledgements
Kine UI is a modern spatial computing registry powered by Next.js 15 (App Router), shadcn/ui distribution logic, Tailwind CSS v4, and MediaPipe WebAssembly. It delivers raw, editable React source code directly into your project via a dedicated CLI.
We live in a world where knowledge is hidden behind paywalls. Where tools are locked in subscriptions. Where information is twisted by bias. Where newcomers are told they’re not “good enough” to build.
We believe there’s a better way.
Our Belief: Technology should belong to everyone. Knowledge should be open, free, and accessible. Communities should welcome newcomers with trust, not gatekeeping.
Our Mission: Build free, open-source projects that make a real difference:
- Tools that professionals and students can use without barriers.
- Knowledge platforms where learning is free, forever.
- Communities where every beginner is guided, not judged.
- Resources that run on trust, not profit.
Our Promise: We will never lock knowledge. We will never charge for access. We will never trade trust for money. We run on transparency, donations, and the strength of our community.
Our Call: If you’ve ever felt you didn’t belong, struggled to find free resources, or wanted to build something meaningful — you belong here.
Because the future belongs to those who build it openly.
- Next.js 15 (App Router) & React 19
- TypeScript
- Tailwind CSS v4 (via @tailwindcss/postcss)
- shadcn/ui architecture for registry distribution
- Lucide React for iconography
- @mediapipe/tasks-vision: Ultra-fast hand tracking via WebAssembly
- Framer Motion: Spring physics for jitter reduction and fluid UI updates
- next-themes: Dark mode as the primary visual state
- clsx & tailwind-merge: Dynamic class management
- Maps
landmarks[8](Index Finger Tip) to screen coordinates. -
Euclidean Detection:
$d = \sqrt{(x_i - x_t)^2 + (y_i - y_t)^2 + (z_i - z_t)^2}$ - Dispatches native
clickevents to DOM elements under the cursor.
- Tracks palm center velocity over a 5-frame rolling buffer.
- Triggers
onSwipeLeftandonSwipeRightevents for carousels and navigation.
- Maps hand Y-axis velocity to
window.scrollY. - Hands-free page navigation with momentum-based scrolling.
- Intuitive scaling for images, maps, and 3D scenes.
- Direct landmark distance mapping to
scaletransforms.
- Node.js 20+
- A webcam with
{ video: { facingMode: "user" } }support - A React-based project (Next.js 14+ recommended)
If you are adding Kine UI to an existing project:
npx @opendevsociety/kine-ui@latest initnpx @opendevsociety/kine-ui@latest add kine-providerChoose a gesture from the registry and inject its source code:
npx @opendevsociety/kine-ui@latest add air-cursorWrap your application in the KineProvider to initialize the tracking engine singleton.
import { KineProvider } from "@/components/kine/KineProvider";
import { AirCursor } from "@/components/kine/AirCursor";
export default function Root() {
return (
<KineProvider>
<AirCursor activeColor="#10b981" />
{/* Your App */}
</KineProvider>
)
}kine-ui/
├── packages/
│ └── cli/ # The npx kine-ui CLI source code
├── public/
│ └── r/ # Compiled registry JSON payloads
├── src/
│ ├── app/ # Documentation and Demo site
│ │ ├── docs/ # Documentation pages
│ │ └── api/ # API routes (stars, etc.)
│ ├── components/
│ │ └── ui/ # Site-specific UI components
│ ├── registry/ # Hand-gesture source code (THE REGISTRY)
│ │ ├── core/ # Wasm Engine (KineEngine)
│ │ └── gestures/ # React Gesture Components
│ └── registry.json # Registry manifest for the CLI
└── scripts/ # Build and registry compilation scripts
- The tracking engine runs in a dedicated WebWorker to prevent blocking the main UI thread.
- Utilizes the
hand_landmarker.taskmodel for 21-point tracking.
- All movements are interpolated via spring physics to handle the naturally jittery webcam data.
- Ensures a "solid" feel for the Air Cursor and UI elements.
npm run dev: Starts the documentation site and livedemo.npm run build: Compiles the Next.js site and registry.npx kine-ui: The primary distribution tool for spatial components.
You belong here. Whether you’re a student, a self-taught dev, or a seasoned engineer — contributions are welcome.
- Open an issue to discuss ideas and bugs.
- Look for “good first issue” or “help wanted”.
- Keep PRs focused; add screenshots for UI changes.
- Be kind, guide beginners, no gatekeeping — that’s the ODS way.
If you discover a vulnerability:
- Do not open a public issue.
- Email: opendevsociety@gmail.com
- We'll coordinate responsible disclosure and patch swiftly.
Kine UI is and will remain free and open for everyone. This project is licensed under the AGPL-3.0 License - see the LICENSE file for details.
- MediaPipe for the incredible WebAssembly tracking engine.
- shadcn for the innovative registry distribution model.
- Framer Motion for the buttery smooth spring physics.
- ravixalgorithm - Lead developer of the engine and core registry.
Built with ❤️ by the Open Dev Society
