Marquee — Playground

hover to pause

Motion

Speed

Custom speed (px/s) 0

0 = use preset

Gap (px) 40

Text orientation

Up / Down only

Separator

Text style

Behavior

Pause on hover

Fade edges

React to scroll

Draggable

Warp & distortion

Skew horizontal 0

Skew vertical 0

Tilt (angle) 0

Bend (3D tilt) 0

Curve (arc text) 0

horizontal, text only

Wave 0

Sample option — updates as you tweak

'marquee' => [
    'type'  => 'multi-picker',
    'value' => [
        'mode' => 'left',
        'left' => [
            'speed' => 'normal',
            'custom_speed' => 0,
            'gap' => 40,
            'separator' => '',
            'text_style' => 'normal',
            'pause_on_hover' => 'yes',
            'edge_fade' => 'no',
            'scroll_reactive' => 'no',
            'draggable' => 'no',
            'skew_h' => 0,
            'skew_v' => 0,
            'tilt' => 0,
            'bend' => 0,
            'curve' => 0,
            'wave' => 0,
        ],
    ],
],

Pick a direction (on the right), then tweak the ticker. Everything here runs the real module — the same seamless cloned track, the SVG-arc curved-text mode, warp (skew / tilt / bend), wave, drag-with-momentum, scroll-reactive speed, and — for Up / Down — a Text orientation option (sideways or upright vertical letters), plus the exact .sc-marquee / .sc-mq-* classes the builder outputs. Hover to pause; turn on Draggable to grab and flick it. The Sample option updates as you tweak.

Curve makes a real arc

Set Curve (with a horizontal direction) and the text is rendered on an SVG arc path — a true curve, not a skew — and scrolled along it. Curve is text-only and overrides Bend for text. Skew, Tilt and Wave combine freely with any direction.

How the option is stored

Marquee is a multi-picker whose picker is the direction (mode); the settings live in a nested map keyed by that direction:

'marquee' => [
    'type'  => 'multi-picker',
    'value' => [
        'mode' => 'left',
        'left' => [ 'speed' => 'fast', 'gap' => 40, 'separator' => '•', 'tilt' => 12 ],
    ],
],

← Back to Marquee

How the option is stored​

How the option is stored