An interactive WebGL canvas that lets users drag and explore product visuals, portfolio surfaces, or branded hero scenes.

Draggable Canvas makes the hero interactive without making it distracting.
Use it when exploration is the point: a project surface, product visual, or branded scene that should respond to touch and drag without turning navigation into a toy.
The production risk is discoverability. Drag can enhance exploration, but it cannot be the only path to understand content or reach controls.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
Use this as WebGL production guidance. Verify the shipped source, rendering stack, dependency list, shader assets, resource disposal, pause/offscreen behavior, DPR strategy, poster fallback, and reduced-motion state before relying on exact props, defaults, imports, or installation steps.
Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.
Cap DPR at 1.0 on touch/mobile and up to 1.5 on mid-range desktop. Pause Draggable Canvas offscreen and in hidden tabs, reduce postprocessing before shipping, and keep texture sizes controlled.
Keep meaningful content in HTML outside the canvas. On mobile, reduce shader quality and switch to a poster if the scene cannot hold frame rate.
| Prop | Type | Default | Description |
|---|---|---|---|
friction | number | 0.12 | Inertia friction after drag release. |
scaleOnDrag | number | 1.04 | Scale applied while dragging. |
backgroundColor | string | #000000 | Canvas background color. |
canvasBorderColor | string | #71717a | Border color for each draggable canvas window. |
rounded | number | 0 | Corner radius for each draggable canvas window. |
Interaction keeps the loop active during drag, so cap DPR at 1.0 on touch and 1.5 on desktop and keep the scene complexity modest enough to stay responsive under continuous input. Throttle works when the user isn't dragging. Test sustained dragging on mobile, where heat and battery show up fast.
Provide a static composition of the scene plus a clear, non-interactive way to see the same content, since the drag interaction won't exist without WebGL. Ensure nothing important was only reachable by dragging. The HTML message remains intact.
Pause rendering and input handling when the canvas is offscreen or the tab is hidden, and release pointer capture so a drag isn't left "stuck." Resume cleanly on return. Because input is ongoing, leaving listeners and the loop alive offscreen is especially wasteful.
Any real content or controls labels, descriptions, links that stay in the DOM, and the drag should enhance exploration, not gate information. Provide a non-drag path to the same material for keyboard and assistive-tech users. The canvas is the playground, not the content store.
Choose a static visual when exploration adds nothing, when the audience is mostly touch, or when the interactivity risks more frustration than delight. If users won't actually benefit from moving the scene, the cost isn't justified. Reserve drag for showcases where exploring is the point.
Need a custom effect? Tell us what to create.