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-