Aircraft Effect | Zeenat.js

Installation and imports

Install Zeenat once, then use the aggregate effects entry or the smallest explicit subpath. Both paths are exported by package version 0.3.0.

npm install zeenat

import { aircraft } from "zeenat/effects";
// or
import { aircraft } from "zeenat/effects/aircraft";

Basic usage

import { ZeenatScene } from "zeenat";
import { aircraft } from "zeenat/effects/aircraft";

const effects = [aircraft()];

export function Decoration() {
  return <ZeenatScene effects={effects} />;
}

aircraft() options

Properties marked required have no factory default. Every other value below is taken from the current TypeScript source.

Property	Type	Required	Default	Description
`colors`	`readonly string[]`	No	`["#315c4a", "#edf4ef"]`	CSS colors used for aircraft bodies and accents.
`count`	`number`	No	`2`	Base aircraft count before responsive intensity scaling.
`direction`	`"ltr" \| "rtl"`	No	`"ltr"`	Direction of travel across the viewport.
`altitude`	`readonly [number, number]`	No	`[0.16, 0.48]`	Minimum and maximum vertical position as viewport fractions.
`layer`	`"background" \| "ambient" \| "foreground" \| "top"`	No	`"foreground"`	Semantic layer used to order the effect inside the Zeenat scene.
`order`	`number`	No	`—`	Optional ordering value among effects in the same semantic layer.

Examples

Subtle

aircraft({ count: 1, altitude: [0.2, 0.32] })

Intense

aircraft({ count: 4, direction: "rtl", colors: ["#334155", "#e2e8f0"] })

Combined

definePreset({ id: "flyover", name: "Flyover", effects: [
  aircraft({ count: 2 }),
  bunting({ colors: ["#166534", "#ffffff"] }),
] })

Reduced motion

The effect mounts no aircraft when effective motion is reduced.

Read the complete reduced-motion contract

Performance notes

Each aircraft is a small inline SVG animated with transforms and opacity through the Web Animations API.

Zeenat performance architecture