Bending Marquee

A marquee that bends along a curve as it scrolls

bending-marquee-tw

✳︎designed in the open✳︎shipped every week✳︎built for the web

Customize

Bend

Depth

-200

Perspective

800

Speed

16.0

Panel Width

420

Panel Height

520

Rows

Row Gap

Item Gap

Band Padding

Font Size

Font Weight

600

Letter Spacing

1.0

Pause Damping

0.70

Mark Sway

Max Scale

1.00

Separator

Text Color

Band Color

Pause On HoverFit

Props

Name	Type	Default	Description
`items`	string[]	`3 phrases`	Phrases repeated along the strip.
`separator`	string	`"✳"`	Glyph printed between phrases.
`panelWidth`	number	`420`	Width of the flat centre panel in pixels. The folded panels size themselves to reach the container edges.
`panelHeight`	number	`520`	Height of every panel in pixels.
`bend`	number	`50`	Angle the outer wings fold back by, in degrees.
`depth`	number	`-200`	How far the whole triptych sits behind the screen.
`perspective`	number	`800`	Perspective depth of the scene, in pixels.
`speed`	number	`16`	Seconds the strip takes to travel one full repeat.
`direction`	"left" \| "right"	`"left"`	Travel direction of the strip.
`rows`	number	`1`	Number of stacked bands per panel. Extra bands alternate direction.
`rowGap`	number	`22`	Vertical space between bands in pixels.
`itemGap`	number	`26`	Horizontal space between phrases in pixels.
`bandPadding`	number	`18`	Vertical padding inside a band in pixels.
`fontSize`	number	`34`	Font size of the phrases in pixels.
`fontWeight`	number	`600`	Font weight of the phrases.
`letterSpacing`	number	`1`	Letter spacing of the phrases in pixels.
`color`	string	`"#fafafa"`	Text colour.
`bandColor`	string	`"#111111"`	Solid fill behind each band.
`markSway`	number	`14`	Degrees the separator rocks back and forth.
`pauseOnHover`	boolean	`true`	Ease the strip to a halt while the pointer is over the scene.
`pauseDamping`	number	`0.7`	Seconds the strip takes to settle when hover starts or ends.
`fit`	boolean	`true`	Scale the triptych so the panels fill the container height.
`maxScale`	number	`1`	Upper bound applied to the fit scale.
`className`	string	`-`	Optional className applied to the root.
`style`	CSSProperties	`-`	Optional inline style applied to the root.

itemsstring[]

Phrases repeated along the strip.

Default3 phrases

separatorstring

Glyph printed between phrases.

Default"✳"

panelWidthnumber

Width of the flat centre panel in pixels. The folded panels size themselves to reach the container edges.

Default420

panelHeightnumber

Height of every panel in pixels.

Default520

bendnumber

Angle the outer wings fold back by, in degrees.

Default50

depthnumber

How far the whole triptych sits behind the screen.

Default-200

perspectivenumber

Perspective depth of the scene, in pixels.

Default800

speednumber

Seconds the strip takes to travel one full repeat.

Default16

direction"left" | "right"

Travel direction of the strip.

Default"left"

rowsnumber

Number of stacked bands per panel. Extra bands alternate direction.

Default1

rowGapnumber

Vertical space between bands in pixels.

Default22

itemGapnumber

Horizontal space between phrases in pixels.

Default26

bandPaddingnumber

Vertical padding inside a band in pixels.

Default18

fontSizenumber

Font size of the phrases in pixels.

Default34

fontWeightnumber

Font weight of the phrases.

Default600

letterSpacingnumber

Letter spacing of the phrases in pixels.

Default1

colorstring

Text colour.

Default"#fafafa"

bandColorstring

Solid fill behind each band.

Default"#111111"

markSwaynumber

Degrees the separator rocks back and forth.

Default14

pauseOnHoverboolean

Ease the strip to a halt while the pointer is over the scene.

Defaulttrue

pauseDampingnumber

Seconds the strip takes to settle when hover starts or ends.

Default0.7

fitboolean

Scale the triptych so the panels fill the container height.

Defaulttrue

maxScalenumber

Upper bound applied to the fit scale.

Default1

classNamestring

Optional className applied to the root.

Default-

styleCSSProperties

Optional inline style applied to the root.

Default-

Name

Type

Default

Description

items

string[]

3 phrases

Phrases repeated along the strip.

separator

string

"✳"

Glyph printed between phrases.

panelWidth

number

420

Width of the flat centre panel in pixels. The folded panels size themselves to reach the container edges.

panelHeight

number

520

Height of every panel in pixels.

bend

number

50

Angle the outer wings fold back by, in degrees.

depth

number

-200

How far the whole triptych sits behind the screen.

perspective

number

800

Perspective depth of the scene, in pixels.

speed

number

16

Seconds the strip takes to travel one full repeat.

direction

"left" | "right"

"left"

Travel direction of the strip.

rows

number

1

Number of stacked bands per panel. Extra bands alternate direction.

rowGap

number

22

Vertical space between bands in pixels.

itemGap

number

26

Horizontal space between phrases in pixels.

bandPadding

number

18

Vertical padding inside a band in pixels.

fontSize

number

34

Font size of the phrases in pixels.

fontWeight

number

600

Font weight of the phrases.

letterSpacing

number

1

Letter spacing of the phrases in pixels.

color

string

"#fafafa"

Text colour.

bandColor

string

"#111111"

Solid fill behind each band.

markSway

number

14

Degrees the separator rocks back and forth.

pauseOnHover

boolean

true

Ease the strip to a halt while the pointer is over the scene.

pauseDamping

number

0.7

Seconds the strip takes to settle when hover starts or ends.

fit

boolean

true

Scale the triptych so the panels fill the container height.

maxScale

number

1

Upper bound applied to the fit scale.

className

string

-

Optional className applied to the root.

style

CSSProperties

-

Optional inline style applied to the root.