Interactive art

A growing lotus garden with flexible stems, a day and night cycle, and PNG layer exports.

View full View source

Preview

Lotus garden

Day 0:16

Controls

Live preview

Hover over a flower, or hold and pull it. The stem returns when you let go.

Speed3x

Export artwork

Layer

Installation

bunx shadcn@latest add @modulo/interactive-art

Requires an active Modulo key and a project configured for shadcn.

Registry setup

Set MODULO_REGISTRY_KEY to your key. Add this registry entry to components.json.

{
  "registries": {
    "@modulo": {
      "url": "<registry-url>/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${MODULO_REGISTRY_KEY}"
      }
    }
  }
}

Usage

import { GardenCanvas } from "@/components/interactive-art/examples/GardenCanvas";

export default function Example() {
  return <GardenCanvas initialTime={16} timeScale={3} />;
}

React and Canvas 2D. No animation package required.

Registry JSON Download still fallback Download thumbnail Download preview GIF Download preview video

API

Pass scene options to GardenCanvas. Use the controller from onReady for live changes.

Prop	Type	Default
`initialTime`Scene age in seconds.	`number`	`16`
`timeScale`Growth and lighting speed. Physics keeps its own clock.	`number`	`1`
`seed`Repeatable scene composition.	`number`	`1486`
`cycleSeconds`Length of a complete day and night cycle.	`number`	`120`
`wind`Strength of the wind.	`number`	`1`
`plants`Positions, growth, and flower colors.	`readonly PlantDefinition[]`	`DEFAULT_PLANTS`
`paused`Initial pause state.	`boolean`	`false`
`fallback`Your own still image URL, displayed behind the canvas.	`string`	`Optional`
`className`Class names for the scene container.	`string`	`""`
`onReady`Controller on mount, null on cleanup. Keep callbacks stable.	`(garden \| null) => void`	`Optional`
`onFrame`Scene status after a rendered frame.	`(FrameState) => void`	`Optional`
`onError`Canvas initialization failure.	`(Error) => void`	`Optional`

Controller methods

pause(), resume(), seek(seconds), setTimeScale(value), and bend(id, direction) control the scene.

snapshot() and saveState() return scene state. exportPNG(options) saves the whole scene or selected layers. The React component calls destroy() on unmount.

Source

Checking source access...