Spiral Funnel

Fine threads of light spiraling up a turning vortex

spiral-funnel-tw

Customize

Base

Crown

Background

Strands

Line Width

1.00px

Sheath

0.25

Dust

1000

Dust Size

1.20

Waist

0.140

Flare

0.80

Spread

1.30

Swirl

1.00

Twist

1.00

Scale

1.00

Center X

0.50

Base Y

0.78

Tilt

3.0°

Spin

0.12

Flow Speed

1.00

Pulses

1.00

Pulse Rate

0.35

Stagger

0.50

Depth

0.60

Defocus

0.60

Glow

0.30

Intensity

1.00

Speed

1.00

Swell Strength

1.00

Hover Boost

0.50

Hover SwellClick SwellInteractivePaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#8B5CF6", "#FF9FFC"]`	Colour at the base of the vortex and colour at its crown, blended in OKLab along the height.
`backgroundColor`	string	`"#0A0A0A"`	Colour behind the vortex.
`mode`	"auto" \| "glow" \| "ink"	`"auto"`	glow adds light for dark backgrounds, ink draws fine coloured strands for light ones. auto picks from the background brightness.
`strands`	number	`56`	Number of streamlines. Each one spirals in across the ground, wraps the base and rises up the funnel, from 8 to 400.
`lineWidth`	number	`1`	Width of the strands nearest the viewer, in pixels.
`sheath`	number	`0.25`	Soft glow around each strand. 0 draws bare hairlines.
`dust`	number	`1000`	Number of dust specks drifting along the flow, from 0 to 8000.
`dustSize`	number	`1.2`	Size of the dust specks.
`waist`	number	`0.14`	Radius of the funnel at its narrowest point, as a fraction of its height.
`flare`	number	`0.8`	How wide the funnel opens toward the top.
`spread`	number	`1.3`	Radius of the swirl across the ground, as a fraction of the funnel height.
`swirl`	number	`1`	How many times the flow circles on its way in across the ground.
`twist`	number	`1`	How tightly the strands wind as they rise. Higher values give a tighter lattice.
`scale`	number	`1`	Size of the vortex relative to the frame.
`centerX`	number	`0.5`	Horizontal position of the vortex, from 0 (left) to 1 (right).
`baseY`	number	`0.78`	Vertical position of the base, from 0 (top) to 1 (bottom).
`tilt`	number	`3`	Camera angle above the ground, in degrees. Higher values show more of the swirl.
`spin`	number	`0.12`	Speed at which the whole vortex turns. Negative values turn it the other way.
`flowSpeed`	number	`1`	Speed at which light and dust travel along the flow.
`pulses`	number	`1`	Strength of the pulses of light carried in from the edge of the swirl, from 0 (a steady glow) to 2.
`pulseRate`	number	`0.35`	Number of pulses released per second.
`stagger`	number	`0.5`	How far pulses are offset from strand to strand. 0 sends them in as clean rings.
`depth`	number	`0.6`	How much strands on the far side of the funnel dim and thin, from 0 (flat) to 1.
`defocus`	number	`0.6`	Depth of field: strands on the far side soften out of focus, from 0 to 2.
`glow`	number	`0.3`	Bloom around the strands and the bright rim at the base, from 0 to 3.
`intensity`	number	`1`	Overall exposure.
`speed`	number	`1`	Overall animation speed.
`interactive`	boolean	`true`	Respond to the pointer.
`hoverSwell`	boolean	`true`	The funnel swells gently at the pointer's height and follows it softly up and down, while the dust nearby drifts outward and settles back when the pointer leaves.
`clickSwell`	boolean	`true`	Clicking sends a slow swell rising up the funnel, drawing the dust out with it.
`swellStrength`	number	`1`	How far the funnel swells and the dust drifts, for both hover and click, from 0 to 3.
`hoverBoost`	number	`0.5`	How much the flow quickens and brightens while the pointer is over the component, from 0 to 2.
`paused`	boolean	`false`	Freeze the motion. Reduced-motion users always get a still frame.
`quality`	number	`1`	Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.
`ref`	{ swell }	`—`	swell() sends a swell up the funnel from code, for example when a form is submitted.
`children`	ReactNode	`—`	Content placed over the background.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

colors[string, string]

Colour at the base of the vortex and colour at its crown, blended in OKLab along the height.

Default["#8B5CF6", "#FF9FFC"]

backgroundColorstring

Colour behind the vortex.

Default"#0A0A0A"

mode"auto" | "glow" | "ink"

glow adds light for dark backgrounds, ink draws fine coloured strands for light ones. auto picks from the background brightness.

Default"auto"

strandsnumber

Number of streamlines. Each one spirals in across the ground, wraps the base and rises up the funnel, from 8 to 400.

Default56

lineWidthnumber

Width of the strands nearest the viewer, in pixels.

Default1

sheathnumber

Soft glow around each strand. 0 draws bare hairlines.

Default0.25

dustnumber

Number of dust specks drifting along the flow, from 0 to 8000.

Default1000

dustSizenumber

Size of the dust specks.

Default1.2

waistnumber

Radius of the funnel at its narrowest point, as a fraction of its height.

Default0.14

flarenumber

How wide the funnel opens toward the top.

Default0.8

spreadnumber

Radius of the swirl across the ground, as a fraction of the funnel height.

Default1.3

swirlnumber

How many times the flow circles on its way in across the ground.

Default1

twistnumber

How tightly the strands wind as they rise. Higher values give a tighter lattice.

Default1

scalenumber

Size of the vortex relative to the frame.

Default1

centerXnumber

Horizontal position of the vortex, from 0 (left) to 1 (right).

Default0.5

baseYnumber

Vertical position of the base, from 0 (top) to 1 (bottom).

Default0.78

tiltnumber

Camera angle above the ground, in degrees. Higher values show more of the swirl.

Default3

spinnumber

Speed at which the whole vortex turns. Negative values turn it the other way.

Default0.12

flowSpeednumber

Speed at which light and dust travel along the flow.

Default1

pulsesnumber

Strength of the pulses of light carried in from the edge of the swirl, from 0 (a steady glow) to 2.

Default1

pulseRatenumber

Number of pulses released per second.

Default0.35

staggernumber

How far pulses are offset from strand to strand. 0 sends them in as clean rings.

Default0.5

depthnumber

How much strands on the far side of the funnel dim and thin, from 0 (flat) to 1.

Default0.6

defocusnumber

Depth of field: strands on the far side soften out of focus, from 0 to 2.

Default0.6

glownumber

Bloom around the strands and the bright rim at the base, from 0 to 3.

Default0.3

intensitynumber

Overall exposure.

Default1

speednumber

Overall animation speed.

Default1

interactiveboolean

Respond to the pointer.

Defaulttrue

hoverSwellboolean

The funnel swells gently at the pointer's height and follows it softly up and down, while the dust nearby drifts outward and settles back when the pointer leaves.

Defaulttrue

clickSwellboolean

Clicking sends a slow swell rising up the funnel, drawing the dust out with it.

Defaulttrue

swellStrengthnumber

How far the funnel swells and the dust drifts, for both hover and click, from 0 to 3.

Default1

hoverBoostnumber

How much the flow quickens and brightens while the pointer is over the component, from 0 to 2.

Default0.5

pausedboolean

Freeze the motion. Reduced-motion users always get a still frame.

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

Default1

ref{ swell }

swell() sends a swell up the funnel from code, for example when a form is submitted.

Default—

childrenReactNode

Content placed over the background.

Default—

classNamestring

Classes for the root element. It fills its parent, with a 240px minimum height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

colors

[string, string]

["#8B5CF6", "#FF9FFC"]

Colour at the base of the vortex and colour at its crown, blended in OKLab along the height.

backgroundColor

string

"#0A0A0A"

Colour behind the vortex.

mode

"auto" | "glow" | "ink"

"auto"

glow adds light for dark backgrounds, ink draws fine coloured strands for light ones. auto picks from the background brightness.

strands

number

56

Number of streamlines. Each one spirals in across the ground, wraps the base and rises up the funnel, from 8 to 400.

lineWidth

number

1

Width of the strands nearest the viewer, in pixels.

sheath

number

0.25

Soft glow around each strand. 0 draws bare hairlines.

dust

number

1000

Number of dust specks drifting along the flow, from 0 to 8000.

dustSize

number

1.2

Size of the dust specks.

waist

number

0.14

Radius of the funnel at its narrowest point, as a fraction of its height.

flare

number

0.8

How wide the funnel opens toward the top.

spread

number

1.3

Radius of the swirl across the ground, as a fraction of the funnel height.

swirl

number

1

How many times the flow circles on its way in across the ground.

twist

number

1

How tightly the strands wind as they rise. Higher values give a tighter lattice.

scale

number

1

Size of the vortex relative to the frame.

centerX

number

0.5

Horizontal position of the vortex, from 0 (left) to 1 (right).

baseY

number

0.78

Vertical position of the base, from 0 (top) to 1 (bottom).

tilt

number

3

Camera angle above the ground, in degrees. Higher values show more of the swirl.

spin

number

0.12

Speed at which the whole vortex turns. Negative values turn it the other way.

flowSpeed

number

1

Speed at which light and dust travel along the flow.

pulses

number

1

Strength of the pulses of light carried in from the edge of the swirl, from 0 (a steady glow) to 2.

pulseRate

number

0.35

Number of pulses released per second.

stagger

number

0.5

How far pulses are offset from strand to strand. 0 sends them in as clean rings.

depth

number

0.6

How much strands on the far side of the funnel dim and thin, from 0 (flat) to 1.

defocus

number

0.6

Depth of field: strands on the far side soften out of focus, from 0 to 2.

glow

number

0.3

Bloom around the strands and the bright rim at the base, from 0 to 3.

intensity

number

1

Overall exposure.

speed

number

1

Overall animation speed.

interactive

boolean

true

Respond to the pointer.

hoverSwell

boolean

true

The funnel swells gently at the pointer's height and follows it softly up and down, while the dust nearby drifts outward and settles back when the pointer leaves.

clickSwell

boolean

true

Clicking sends a slow swell rising up the funnel, drawing the dust out with it.

swellStrength

number

1

How far the funnel swells and the dust drifts, for both hover and click, from 0 to 3.

hoverBoost

number

0.5

How much the flow quickens and brightens while the pointer is over the component, from 0 to 2.

paused

boolean

false

Freeze the motion. Reduced-motion users always get a still frame.

quality

number

1

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

ref

{ swell }

—

swell() sends a swell up the funnel from code, for example when a form is submitted.

children

ReactNode

—

Content placed over the background.

className

string

—

Classes for the root element. It fills its parent, with a 240px minimum height.

style

CSSProperties

—

Inline styles for the root element.