An interactive spher(e) layout engine based on canvas.
demo-spher.mov
npm install spherUse createSpher when you want to provide and manage the canvas yourself.
import { createSpher } from "spher";
const instance = createSpher(canvas, {
items,
controls: { drag: true, wheel: true },
radius: 320,
size: 64,
});
instance.destroy();import { Spher } from "spher/react";
export function SpherUI() {
return (
<Spher
className="spher"
controls={{ drag: true, wheel: true, autoRotate: { speed: 0.18 } }}
items={[
{ id: "tokyo", cover: "/tokyo.jpg" },
{ id: "sf", cover: "/sf.jpg" },
]}
onItemSelect={(item) => console.log(item.id)}
radius="auto"
size={{ ratio: 0.1 }}
/>
);
}.spher {
cursor: grab;
width: 480px;
}
.spher:active {
cursor: grabbing;
}See demo/react for a styled React example.
See docs/options.md for detailed option reference.
MIT
Inspired by jess yin's post.