Skip to component
Modulo

Nilkamal

A blue lotus on a living pond. Rain, storms, snow, and ice change the scene.

View fullView source

Preview

Nilkamal

Clear

Weather

Hover over the petals, pull the lotus, or brush the water. Snow and ice build over time.

Installation

bunx shadcn@latest add @modulo/nilkamal

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 { Nilkamal } from "@/components/nilkamal/Nilkamal";

export default function Example() {
  return <Nilkamal weather="rain" intensity={0.8} volume={0.45} />;
}

React, Canvas 2D, and Web Audio. All ten source files install together. No animation package required.

Registry JSONDownload still fallbackDownload thumbnailDownload preview GIFDownload preview video

Interaction

Hover over individual petals or hold and pull the lotus. The stem stays anchored below the water. Brush the pond to make ripples. Tab to the lotus or pond and press Enter for keyboard interaction.

Snow collects on the petals and pads as the pond freezes. Hail bounces off the water. Clear weather and rain gradually melt the ice.

Sound starts after interaction. The header sound toggle mutes the scene. Pause, hidden tabs, and scrolling the scene out of view stop animation and sound. Reduced motion shows still weather states without lightning flashes.

API

PropTypeDefault
weatherTransitions without resetting the accumulated snow or ice."clear" | "rain" | "storm" | "snow" | "hail""clear"
intensityWeather strength from 0.2 to 1. Changes precipitation and ambience.number0.8
seedRepeatable particle, sky, and texture setup. Changing the seed starts a fresh scene.number731
pausedStops animation and audio. Weather can still be selected.booleanfalse
enableAudioSound unlocks after interaction. Turning this off suspends audio.booleantrue
volumeMaster volume from 0 to 1.number0.45
fallbackA still image displayed behind the canvas.stringOptional
classNameClass names for the scene container.string""
onReadyController on mount and null on cleanup. Keep callbacks stable.(controller | null) => voidOptional
onFrameAnimation, visibility, pause, and reduced-motion status.(FrameState) => voidOptional
onErrorCanvas initialization failure.(Error) => voidOptional
Controller methods

setWeather(weather), setIntensity(value), setBloom(value), lightning(), and reset() change the scene. pause() and resume() control playback.

unlockAudio() can be called from an external control's gesture. setAudio(enabled, volume) controls the sound. snapshot() reports weather accumulation, stem geometry, runtime status, and audio state.

exportPNG() exports the scene. Pass layers to export sky, landscape, water, ice, lotus, weather, or foreground separately. The component calls destroy() on unmount.

Source

Checking source access...