Docs
How to use Alune in a React project.
Installation
Alune isn't on npm yet. Installation steps will go here when the package is published.
Pleat
Pleat draws draped folds from an array of numbers. It fills the box you give it, so set a height.
import { Pleat } from "alune";
export function Hero() {
return <Pleat data={[0, 0.4, 0, 1]} style={{ height: 480 }} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | Required | One number per fold. A larger number gives a wider bright edge, and 0 gives none. |
background | string | #050505 | The ground the cloth blends into. |
color | string | #ffffff | The lit side of each fold. |
highlight | string | #f5f5f5 | The bright edges. |
animate | boolean | true | Set to false for a still image. |
depth | number | 0.5 | How strongly the folds fall into shadow, from 0 to 1. |
speed | number | 1 | How fast the cloth sways. 0 stops it. |
Colors accept any CSS color except variables. Other props, such as className and style, go to the wrapping element.
Comb, Weave and Waveform take the same props. Import them the same way and swap the name.
Good to know
- Narrow screens merge neighboring folds, keeping the largest value, so each fold stays at least 6px wide.
- Visitors with reduced motion turned on see a still image.
- Pleat needs WebGL2. Without it, only the plain background shows.
Status Button
Give it an async action. It shows loading while that runs, then success, or error if it throws, and resets itself.
Toast
Place one Toaster near the root of your app, then call toast, toast.success, toast.error or toast.promise from anywhere. toast.dismiss(id) closes one, and toast.dismiss() closes them all. useToastCount() returns how many are showing.
Toasts stack with the newest in front and spread out when you hover them. Set layout="list" on the Toaster to always show them one above another.