CANVAS & GENERATIVE

Botanical Pixel Dispersion

An artisanal raster dynamics botanical canvas inspired by Yuni Yoshida and Raster Dynamics Wordmark. Features offscreen sub-pixel color sampling, spring-damper physics, expanding click shockwave rings, 4 tile materials, and global 3D shatter/reassemble mechanics.

#canvas#generative#physics#botanical#spring-damper#typescript

Source on GitHub

components/flourish/botanical-pixel-dispersion.tsx

LIVE PREVIEWOpen in new tab

Next.js 16 • React 19 • TypeScript•Tailwind CSS v4

Registry Slug:botanical-pixel-dispersion

QUICKSTART

Make it yours.

Install the source, then customize it in your project.

REGISTRY ITEM

PACKAGE MANAGER

pnpm dlx shadcn@latest add https://flourish-ui.vercel.app/r/botanical-pixel-dispersion.json

Adds source to components/flourish/

01Dependencies 2 packages

framer-motionlucide-react

02Usage example Next.js / React

import { BotanicalPixelDispersion } from "@/components/flourish/botanical-pixel-dispersion"

export default function Page() {
  return <BotanicalPixelDispersion />
}

First install? Run pnpm dlx shadcn@latest init once, then add this component. You get editable source code in your project.

EXPLORE MORE

More in Canvas & Generative

Browse Canvas & Generative

GitHub Contribution Skyline

A GitHub-style contribution heat map that seamlessly transforms into an isometric 3D skyline. Every day is a box on a grid, smoothly transitioning between a 2D overhead view and a 3D perspective using HTML5 Canvas.

ASCII Cyberpunk Hero

A dark, cyber-themed animated hero component featuring Unicorn Studio background rendering and typing aesthetics.

Generative 3D Ink Orbit Hero

A stunning hero section featuring a generative 3D ink sculpture that responds to drag, tilt, and click gestures. Built entirely using HTML5 Canvas and React with zero external dependencies.