Falling Sand

Component

About

An interactive falling-sand cellular automaton where sand, water, oil, wood, stone, fire, smoke and steam fall, pile and react on a canvas grid that a user can paint, pour or drop material into.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Falling Sand to your project and fits it to your theme.

Code

How Falling Sand is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { FallingSand } from "@/components/ui/klyv-falling-sand";
import type { FallingSandHandle } from "@/components/ui/klyv-falling-sand";
import { useRef } from "react";
import { Button } from "@/components/ui/klyv-falling-sand-utils/button";

export default function FallingSandNotFoundDemo() {
  const sand = useRef<FallingSandHandle>(null);
  return (
    <div className="flex w-full flex-col gap-3 p-6 sm:max-w-[520px]">
      <FallingSand
        ref={sand}
        seedText="404"
        cellSize={5}
        controls={false}
        label="Not found. The number 404 in packed sand."
        className="h-[240px]"
      />
      <div className="flex flex-wrap items-center gap-2">
        <span className="mr-auto text-[14px] font-bold text-ink">
          This page has been swept away
        </span>
        <Button
          size="sm"
          variant="outline"
          onClick={() => sand.current?.drop(0.5, 0.08, "water")}
        >
          Knock it down
        </Button>
        <Button size="sm" variant="ghost" onClick={() => sand.current?.reset()}>
          Put it back
        </Button>
      </div>
    </div>
  );
}