Interactive Infinite Surface
Spatial Canvas Playground
Drag anywhere to pan across the infinite canvas. Click or hover spatial nodes to interact.
Shader Engine
WebGL Shaders
Interactions
Spatial UI Nodes
2D Dynamics
Physics Dock
Framer Motion
Motion Motion
Installation
npx kinetic-ui-cli@latest add Props
The component accepts spatial canvas elements and gesture controls.
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { HeroInfiniteCanvas } from "@/components/creative/hero/hero-infinite-canvas";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { HeroInfiniteCanvas } from "@/components/creative/hero/hero-infinite-canvas";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<HeroInfiniteCanvas
title="example"
subtitle="example"
/>
</div>
);
}