Tickers & Marquees
Animated scrolling text for announcements, news tickers, and brand marquees.
Basic Ticker
Simple horizontal scrolling text.
HTML
<div
class="ss-c-ticker"
style="
overflow: hidden;
background: var(--ss-color-accent);
color: var(--ss-color-on-accent);
padding: 12px 0;
"
>
<div
class="ss-c-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%);
}
}
.ss-c-ticker:hover .ss-c-ticker__content,
.ss-c-ticker:focus-within .ss-c-ticker__content {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.ss-c-ticker__content {
animation: none !important;
}
}
</style>News Ticker
News-style ticker with label.
HTML
<div
class="ss-c-ticker ss-c-ticker--news"
style="
display: flex;
background: #1a1a2e;
overflow: hidden;
border-radius: var(--ss-radius-lg);
"
>
<div
class="ss-c-ticker__label"
style="
background: var(--ss-color-error);
color: var(--ss-color-on-error);
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="ss-c-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.
HTML
<div
class="ss-c-ticker ss-c-ticker--brands"
style="
overflow: hidden;
padding: 24px 0;
background: var(--ss-color-surface-alt);
color: var(--ss-color-text);
border-radius: var(--ss-radius-lg);
"
>
<div
class="ss-c-ticker__content"
style="
display: flex;
align-items: center;
white-space: nowrap;
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.
HTML
<div
class="ss-c-ticker ss-c-ticker--stocks"
style="
overflow: hidden;
background: #0a0a0f;
padding: 12px 0;
border-radius: var(--ss-radius-lg);
"
>
<div
class="ss-c-ticker__content"
style="
display: flex;
gap: 48px;
white-space: nowrap;
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.
HTML
<div
class="ss-c-ticker ss-c-ticker--reverse"
style="
overflow: hidden;
background: linear-gradient(90deg, #4f46e5, #6d28d9);
color: white;
padding: 16px 0;
border-radius: var(--ss-radius-lg);
"
>
<div
class="ss-c-ticker__content"
style="
display: flex;
gap: 32px;
white-space: nowrap;
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.
HTML
<div
class="ss-c-ticker ss-c-ticker--pausable"
style="
overflow: hidden;
background: var(--ss-color-surface-alt);
color: var(--ss-color-text);
padding: 16px 0;
border-radius: var(--ss-radius-lg);
cursor: default;
"
>
<div
class="ss-c-ticker__content"
style="
display: flex;
gap: 48px;
white-space: nowrap;
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.
HTML
<div
class="ss-c-ticker ss-c-ticker--vertical"
style="
height: 120px;
overflow: hidden;
background: var(--ss-color-surface);
color: var(--ss-color-text);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
padding: 16px 20px;
max-width: 400px;
"
>
<div
class="ss-c-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>