## Tickers & Marquees

Animated scrolling text for announcements, news tickers, and brand marquees.

### Basic Ticker

Simple horizontal scrolling text.

🎉 Welcome to Stylescape — The ultimate design system for modern web development ✨ New components added weekly 🚀 Version 2.0 now available 🎉 Welcome to Stylescape — The ultimate design system for modern web development ✨ New components added weekly 🚀 Version 2.0 now available
HTML

    <div
                class="ticker"
                style="
                    overflow: hidden;
                    background: var(--color_fill_primary);
                    color: white;
                    padding: 12px 0;
                "
            >
                <div
                    class="ticker__content"
                    style="
                        display: flex;
                        animation: ticker 20s linear infinite;
                        white-space: nowrap;
                    "
                >
                    <span style="padding: 0 48px">
                        🎉 Welcome to Stylescape — The ultimate design system for
                        modern web development
                    </span>
                    <span style="padding: 0 48px">
                        ✨ New components added weekly
                    </span>
                    <span style="padding: 0 48px">
                        🚀 Version 2.0 now available
                    </span>
                    <span style="padding: 0 48px">
                        🎉 Welcome to Stylescape — The ultimate design system for
                        modern web development
                    </span>
                    <span style="padding: 0 48px">
                        ✨ New components added weekly
                    </span>
                    <span style="padding: 0 48px">
                        🚀 Version 2.0 now available
                    </span>
                </div>
            </div>

            <style>
                @keyframes ticker {
                    0% {
                        transform: translateX(0);
                    }
                    100% {
                        transform: translateX(-50%);
                    }
                }
            </style>

### News Ticker

News-style ticker with label.

BREAKING
Tech stocks surge as AI adoption accelerates across industries • Global markets hit record highs amid economic recovery • New climate accord signed by 150 countries • Tech stocks surge as AI adoption accelerates across industries • Global markets hit record highs amid economic recovery
HTML

    <div
                class="ticker ticker--news"
                style="
                    display: flex;
                    background: #1a1a2e;
                    overflow: hidden;
                    border-radius: 8px;
                "
            >
                <div
                    class="ticker__label"
                    style="
                        background: var(--color_state_error);
                        color: white;
                        padding: 12px 20px;
                        font-weight: 700;
                        flex-shrink: 0;
                        z-index: 1;
                    "
                >
                    BREAKING
                </div>
                <div
                    style="
                        flex: 1;
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                    "
                >
                    <div
                        class="ticker__content"
                        style="
                            display: flex;
                            animation: ticker 25s linear infinite;
                            color: white;
                            white-space: nowrap;
                        "
                    >
                        <span style="padding: 0 32px">
                            Tech stocks surge as AI adoption accelerates across
                            industries
                        </span>
                        <span style="padding: 0 32px">•</span>
                        <span style="padding: 0 32px">
                            Global markets hit record highs amid economic recovery
                        </span>
                        <span style="padding: 0 32px">•</span>
                        <span style="padding: 0 32px">
                            New climate accord signed by 150 countries
                        </span>
                        <span style="padding: 0 32px">•</span>
                        <span style="padding: 0 32px">
                            Tech stocks surge as AI adoption accelerates across
                            industries
                        </span>
                        <span style="padding: 0 32px">•</span>
                        <span style="padding: 0 32px">
                            Global markets hit record highs amid economic recovery
                        </span>
                    </div>
                </div>
            </div>

### Brand Marquee

Logo carousel for showcasing partners or clients.

BRAND A
COMPANY B
STARTUP C
AGENCY D
CORP E
BRAND A
COMPANY B
STARTUP C
AGENCY D
CORP E
HTML

    <div
                class="ticker ticker--brands"
                style="
                    overflow: hidden;
                    padding: 24px 0;
                    background: var(--color_fill_secondary);
                    border-radius: 12px;
                "
            >
                <div
                    class="ticker__content"
                    style="
                        display: flex;
                        align-items: center;
                        animation: ticker 30s linear infinite;
                    "
                >
                    <div
                        style="
                            padding: 0 48px;
                            opacity: 0.6;
                            font-size: 24px;
                            font-weight: 700;
                        "
                    >
                        BRAND A
                    </div>
                    <div
                        style="
                            padding: 0 48px;
                            opacity: 0.6;
                            font-size: 24px;
                            font-weight: 700;
                        "
                    >
                        COMPANY B
                    </div>
                    <div
                        style="
                            padding: 0 48px;
                            opacity: 0.6;
                            font-size: 24px;
                            font-weight: 700;
                        "
                    >
                        STARTUP C
                    </div>
                    <div
                        style="
                            padding: 0 48px;
                            opacity: 0.6;
                            font-size: 24px;
                            font-weight: 700;
                        "
                    >
                        AGENCY D
                    </div>
                    <div
                        style="
                            padding: 0 48px;
                            opacity: 0.6;
                            font-size: 24px;
                            font-weight: 700;
                        "
                    >
                        CORP E
                    </div>
                    <div
                        style="
                            padding: 0 48px;
                            opacity: 0.6;
                            font-size: 24px;
                            font-weight: 700;
                        "
                    >
                        BRAND A
                    </div>
                    <div
                        style="
                            padding: 0 48px;
                            opacity: 0.6;
                            font-size: 24px;
                            font-weight: 700;
                        "
                    >
                        COMPANY B
                    </div>
                    <div
                        style="
                            padding: 0 48px;
                            opacity: 0.6;
                            font-size: 24px;
                            font-weight: 700;
                        "
                    >
                        STARTUP C
                    </div>
                    <div
                        style="
                            padding: 0 48px;
                            opacity: 0.6;
                            font-size: 24px;
                            font-weight: 700;
                        "
                    >
                        AGENCY D
                    </div>
                    <div
                        style="
                            padding: 0 48px;
                            opacity: 0.6;
                            font-size: 24px;
                            font-weight: 700;
                        "
                    >
                        CORP E
                    </div>
                </div>
            </div>

### Stock Ticker

Financial ticker with price changes.

AAPL $178.42 ▲ 2.34%
GOOGL $141.80 ▼ 0.87%
MSFT $378.91 ▲ 1.23%
AMZN $178.25 ▲ 0.56%
TSLA $248.50 ▼ 1.45%
AAPL $178.42 ▲ 2.34%
GOOGL $141.80 ▼ 0.87%
HTML

    <div
                class="ticker ticker--stocks"
                style="
                    overflow: hidden;
                    background: #0a0a0f;
                    padding: 12px 0;
                    border-radius: 8px;
                "
            >
                <div
                    class="ticker__content"
                    style="
                        display: flex;
                        gap: 48px;
                        animation: ticker 35s linear infinite;
                        font-family: monospace;
                    "
                >
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            color: white;
                        "
                    >
                        <span style="font-weight: 600">AAPL</span>
                        <span>$178.42</span>
                        <span style="color: #22c55e">▲ 2.34%</span>
                    </div>
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            color: white;
                        "
                    >
                        <span style="font-weight: 600">GOOGL</span>
                        <span>$141.80</span>
                        <span style="color: #ef4444">▼ 0.87%</span>
                    </div>
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            color: white;
                        "
                    >
                        <span style="font-weight: 600">MSFT</span>
                        <span>$378.91</span>
                        <span style="color: #22c55e">▲ 1.23%</span>
                    </div>
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            color: white;
                        "
                    >
                        <span style="font-weight: 600">AMZN</span>
                        <span>$178.25</span>
                        <span style="color: #22c55e">▲ 0.56%</span>
                    </div>
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            color: white;
                        "
                    >
                        <span style="font-weight: 600">TSLA</span>
                        <span>$248.50</span>
                        <span style="color: #ef4444">▼ 1.45%</span>
                    </div>
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            color: white;
                        "
                    >
                        <span style="font-weight: 600">AAPL</span>
                        <span>$178.42</span>
                        <span style="color: #22c55e">▲ 2.34%</span>
                    </div>
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            color: white;
                        "
                    >
                        <span style="font-weight: 600">GOOGL</span>
                        <span>$141.80</span>
                        <span style="color: #ef4444">▼ 0.87%</span>
                    </div>
                </div>
            </div>

### Reverse Direction

Ticker scrolling in opposite direction.

★ Special Offer ★ Free Shipping ★ 24/7 Support ★ Money Back Guarantee ★ Premium Quality ★ Special Offer ★ Free Shipping ★ 24/7 Support ★ Money Back Guarantee ★ Premium Quality
HTML

    <div
                class="ticker ticker--reverse"
                style="
                    overflow: hidden;
                    background: linear-gradient(90deg, #667eea, #764ba2);
                    color: white;
                    padding: 16px 0;
                    border-radius: 8px;
                "
            >
                <div
                    class="ticker__content"
                    style="
                        display: flex;
                        gap: 32px;
                        animation: ticker-reverse 20s linear infinite;
                        font-size: 14px;
                        text-transform: uppercase;
                        letter-spacing: 2px;
                    "
                >
                    <span>★ Special Offer</span>
                    <span>★ Free Shipping</span>
                    <span>★ 24/7 Support</span>
                    <span>★ Money Back Guarantee</span>
                    <span>★ Premium Quality</span>
                    <span>★ Special Offer</span>
                    <span>★ Free Shipping</span>
                    <span>★ 24/7 Support</span>
                    <span>★ Money Back Guarantee</span>
                    <span>★ Premium Quality</span>
                </div>
            </div>

            <style>
                @keyframes ticker-reverse {
                    0% {
                        transform: translateX(-50%);
                    }
                    100% {
                        transform: translateX(0);
                    }
                }
            </style>

### Pause on Hover

Ticker that pauses when user hovers.

Hover to pause this ticker • Read important announcements at your own pace • User-friendly interaction pattern • Hover to pause this ticker • Read important announcements at your own pace • User-friendly interaction pattern
HTML

    <div
                class="ticker ticker--pausable"
                style="
                    overflow: hidden;
                    background: var(--color_fill_secondary);
                    padding: 16px 0;
                    border-radius: 8px;
                    cursor: default;
                "
            >
                <div
                    class="ticker__content"
                    style="
                        display: flex;
                        gap: 48px;
                        animation: ticker 25s linear infinite;
                        font-weight: 500;
                    "
                >
                    <span>Hover to pause this ticker</span>
                    <span>•</span>
                    <span>Read important announcements at your own pace</span>
                    <span>•</span>
                    <span>User-friendly interaction pattern</span>
                    <span>•</span>
                    <span>Hover to pause this ticker</span>
                    <span>•</span>
                    <span>Read important announcements at your own pace</span>
                    <span>•</span>
                    <span>User-friendly interaction pattern</span>
                </div>
            </div>

            <style>
                .ticker--pausable:hover .ticker__content {
                    animation-play-state: paused;
                }
            </style>

### Vertical Ticker

Vertically scrolling announcements.

📢 New feature: Dark mode support
🎨 50+ new color themes available
⚡ Performance improvements in v2.1
🔒 Enhanced security features
📢 New feature: Dark mode support
🎨 50+ new color themes available
HTML

    <div
                class="ticker ticker--vertical"
                style="
                    height: 120px;
                    overflow: hidden;
                    background: white;
                    border: 1px solid var(--color_line_secondary);
                    border-radius: 12px;
                    padding: 16px 20px;
                    max-width: 400px;
                "
            >
                <div
                    class="ticker__content"
                    style="animation: ticker-vertical 10s linear infinite"
                >
                    <div
                        style="
                            padding: 8px 0;
                            display: flex;
                            gap: 12px;
                            align-items: center;
                        "
                    >
                        <span style="font-size: 20px">📢</span>
                        <span>New feature: Dark mode support</span>
                    </div>
                    <div
                        style="
                            padding: 8px 0;
                            display: flex;
                            gap: 12px;
                            align-items: center;
                        "
                    >
                        <span style="font-size: 20px">🎨</span>
                        <span>50+ new color themes available</span>
                    </div>
                    <div
                        style="
                            padding: 8px 0;
                            display: flex;
                            gap: 12px;
                            align-items: center;
                        "
                    >
                        <span style="font-size: 20px">⚡</span>
                        <span>Performance improvements in v2.1</span>
                    </div>
                    <div
                        style="
                            padding: 8px 0;
                            display: flex;
                            gap: 12px;
                            align-items: center;
                        "
                    >
                        <span style="font-size: 20px">🔒</span>
                        <span>Enhanced security features</span>
                    </div>
                    <div
                        style="
                            padding: 8px 0;
                            display: flex;
                            gap: 12px;
                            align-items: center;
                        "
                    >
                        <span style="font-size: 20px">📢</span>
                        <span>New feature: Dark mode support</span>
                    </div>
                    <div
                        style="
                            padding: 8px 0;
                            display: flex;
                            gap: 12px;
                            align-items: center;
                        "
                    >
                        <span style="font-size: 20px">🎨</span>
                        <span>50+ new color themes available</span>
                    </div>
                </div>
            </div>

            <style>
                @keyframes ticker-vertical {
                    0% {
                        transform: translateY(0);
                    }
                    100% {
                        transform: translateY(-50%);
                    }
                }
            </style>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!