Diwali/26
Lotus rangoli beneath a night sky. Launch floral bursts, DIWALI and 2026 with a click.
Preview
Diwali/26
Click the skySkyshots
Click the sky to launch. Brush the petals and powder, or Tab to a flower and press Enter.
Installation
bunx shadcn@latest add @modulo/diwali-26Requires 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 { Diwali26 } from "@/components/diwali-26/Diwali26";
export default function Example() {
return <Diwali26 pattern="surprise" volume={0.9} />;
}React, Canvas 2D, and Web Audio. All seven source files install together. No runtime artwork or audio downloads.
Registry JSONDownload still fallbackDownload thumbnailDownload preview GIFDownload preview videoInteraction
Click the open sky to launch at that point. Brush the rangoli to move individual petals, leaves and powder. Tab to the sky or a flower and press Enter for keyboard interaction.
Each skyshot has its own whistle, boom and crackle tail. Sound starts after interaction. The header sound toggle mutes the scene and haptics. Vibration depends on browser and device support.
Pause, hidden tabs and scrolling the scene out of view stop animation and sound. Reduced motion keeps the rangoli still and draws skyshots without rocket motion or flashes.
API
| Prop | Type | Default |
|---|---|---|
patternPattern for new launches. Surprise cycles through all six. | "surprise" | "chrysanthemum" | "lotus" | "rings" | "willow" | "diwali" | "2026" | "surprise" |
seedRepeatable stars, powder and burst geometry. Changing it starts a fresh scene. | number | 731 |
pausedStops animation, wind and sound. | boolean | false |
enableAudioSound unlocks after interaction. Mutes sound and haptics when false. | boolean | true |
volumeMaster festival volume from 0 to 1. | number | 0.9 |
fallbackYour still image URL, displayed behind the canvas. | string | Optional |
classNameClass names for the scene container. | string | "" |
onReadyController on mount, null on cleanup. Keep callbacks stable. | (controller | null) => void | Optional |
onFrameScene time, visibility, pause and reduced-motion state. | (FrameState) => void | Optional |
onErrorCanvas initialization failure. | (Error) => void | Optional |
Controller methods
launch(x, y) launches at normalized sky coordinates. gust({ x, y }) disturbs the rangoli. clear(), pause(), resume() and seek(seconds) control playback.
setPattern(pattern) changes new skyshots. unlockAudio() unlocks sound from an external gesture. setAudio(enabled, volume) controls sound and haptics. snapshot() reports geometry, skyshots and runtime state.
exportPNG() exports the current pose. Pass layers to export sky, fireworks, rangoli, powder or lamps separately. All layers share coordinates. The component calls destroy() on unmount.
Source
Checking source access...