Falling Sand

Heroes

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 FallingSandDemo() {
  const sand = useRef<FallingSandHandle>(null);
  return (
    <div className="flex w-full flex-col gap-3 p-6">
      <FallingSand
        ref={sand}
        seedText={"Built grain\nby grain"}
        controls={false}
        label="Sand box with a headline made of packed sand. Drag to pour sand onto it."
        className="h-[420px]"
      />
      <div className="flex flex-wrap items-center gap-2">
        <Button size="sm" onClick={() => sand.current?.pour(4)}>
          Pour sand on it
        </Button>
        <Button
          size="sm"
          variant="outline"
          onClick={() => sand.current?.pour(4, "water")}
        >
          Pour water
        </Button>
        <Button
          size="sm"
          variant="outline"
          onClick={() => sand.current?.drop(0.5, 0.12, "sand")}
        >
          Drop a handful
        </Button>
        <Button size="sm" variant="ghost" onClick={() => sand.current?.reset()}>
          Rebuild the words
        </Button>
      </div>
    </div>
  );
}