Command Palette

Search for a command to run...

Loading component...

Components free Canvas crowd

Canvas crowd

An animated crowd canvas that creates a lively scene of walking people using HTML5 Canvas and GSAP animations. Features sprite-based character animations with realistic walking movements and crowd management.

Dependencies

gsapreact

Interaction Type

Automatically adjusts to screen size
Animated crowd of walking people

with shacn cli3.0

//components.json
  "registries": {
    "@skiper-ui": "https://skiper-ui.com//registry/{name}.json"
  }
npx shadcn add @skiper-ui/skiper39

OR with old shacncli

 npx shadcn@latest add https://skiper-ui.com/registry/skiper39.json

How to use

import { CrowdCanvas, Skiper39 } from "@/components/v1/skiper39";

// Using the complete component
const DemoSkiper39 = () => {
  return <Skiper39 />;
};

// Using just the crowd canvas
const CustomCrowd = () => {
  return (
    <div className="relative h-screen w-full">
      <CrowdCanvas src="/images/peeps/all-peeps.png" rows={15} cols={7} />
    </div>
  );
};
Props
Description

src

Path to the sprite sheet image containing character frames

rows

Number of rows in the sprite sheet (default: 15)

cols

Number of columns in the sprite sheet (default: 7)

Attribution

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
PreviousNext