Components

Turbine Loader

A mechanical turbine-style spinner with one or more concentric rings, counter-rotating blades, and full control over color, size, blade count, speed, glow, and proportions.

npx neonblade add turbine-loader

Color Variants

Cyan

Pink

Green

White

Orange

Size Variants

Ring Count

1 ring

2 rings

3 rings

Blade Count

4 blades

6 blades

8 blades

12 blades

Speed (duration)

Fast — 700ms

Default — 1800ms

Slow — 3200ms

Glow Intensity

none

low

medium

high

Direction

Clockwise

Counter-clockwise

Use-case — Boot Sequence

Spinning up turbines…

Props Configuration

Prop	Type	Default	Description
`color`	`"cyan" \| "pink" \| "green" \| "white" \| "orange" \| string`	`"cyan"`	Neon accent color for the blades, hub, and glow. Use a preset name or any valid CSS color value.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| number`	`"md"`	Overall width/height in pixels, or a size preset. xs=32, sm=48, md=72, lg=96, xl=128.
`ringCount`	`number`	`2`	Number of concentric turbine rings (clamped to 1–4). Inner rings rotate in the opposite direction.
`bladeCount`	`number`	`8`	Number of blades per ring (clamped to 3–16).
`speed`	`number`	`1800`	Full rotation duration in milliseconds. Lower = faster spin.
`direction`	`"clockwise" \| "counter-clockwise"`	`"clockwise"`	Rotation direction of the outer ring. Each inner ring automatically alternates direction for a mechanical turbine effect.
`glowIntensity`	`"none" \| "low" \| "medium" \| "high"`	`"medium"`	Neon drop-shadow glow around the whole turbine.
`hubSize`	`number`	`0.16`	Central hub radius as a fraction of the outer turbine radius (0–1).
`bladeWidth`	`number`	`0.5`	Blade base width as a fraction of the ring thickness (0–1).
`bladeTaper`	`number`	`0.35`	Blade tip width as a fraction of the blade base width (0–1).
`ringGap`	`number`	`0.06`	Gap between concentric rings as a fraction of the outer turbine radius.
`className`	`string`	`""`	Extra class names applied to the outer wrapper div.