Petal wind

Sakura petals that tumble and flip as they fall. Move the pointer and the air moves with it, then settles.

Move the pointer through the petals.

Features

Notched sakura petals that tumble and flip; a petal lying flat to the air falls slower than one edge-on.
The pointer stirs a coarse field of air that decays over about half a second, so the petals along its path are pushed and keep drifting.
Petals are born where you say (the blossoms of a tree), and a trigger sends one gust across.
A 2D canvas with pre-drawn sprites: no GPU needed. It stops off-screen and in hidden tabs.

Use it for

A quiet, living header.
Seasonal pages, celebrations, a scene that answers the hand.

On this site

Research: the quotesPetals fall from the sakura over the quotes, and the pointer is the wind.

Installation

Get runets.

git clone https://github.com/ziyam-khan/runets

Copy these files into your project, keeping their folders.
- src/kit/petal-wind.tsx
- styles/kit.css
Install what they use.
```
pnpm add react
```
Load the styles once. Bring your own base tokens, or use runets’ default theme.
```
import 'runets/styles/theme.css'
import 'runets/styles/kit.css'
```

Usage

import { PetalWind } from 'runets'

<header style={{ position: 'relative' }}>
  <PetalWind count={36} breeze={22} source={() => canopyBox()} trigger={slide} />
</header>

API

Prop	Type	What it does
`count`	`number`	Petals in the air at once (36).
`colors`	`(number \| string)[]`	Tints as 0xRRGGBB or CSS colours; changing them repaints in place.
`breeze`	`number`	Steady wind in px/s; positive blows left (22).
`fall`	`number`	Edge-on fall speed in px/s (46).
`stir`	`number`	How hard the pointer pushes the air; 0 turns it off (1).
`source`	`() => Box \| null`	Where a petal is born, in the layer’s pixels; the top edge by default.
`trigger`	`number`	Change it to send one gust.
`paused`	`boolean`	Hold the petals where they are.

Accessibility

The canvas is aria-hidden and never takes the pointer; it listens on its parent.
Under reduced motion the petals are drawn once, at rest.

Source

The code is in src/kit/petal-wind.tsx in runets, MIT licensed.

Ziyam Khan

Search the site