localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ticker: redesign — news-wire aesthetic, drop the bright label box

Browse Source 
The previous version used solid neon-green / neon-cyan blocks for
the "Live Wire" / "On Calendar" labels which read as too aggressive
against the otherwise dark-navy site. Replaced with a real news-wire
look:

- Pulse-dot indicator (animated breathing dot) + small-caps mono
  label on the left, separated from the feed by a thin rule.
- Item codes (SONY / MTRX / NAB) become small bordered chips with
  subtle neon background tint instead of bare colored text.
- Timestamps are mid-gray monospace; titles are clean Inter at
  13px with slight letter-spacing.
- Top + bottom of each bar get a hairline gradient (neon→cyan
  on row 1, dimmer cyan-only between rows) instead of a hard
  border.
- Items are separated by faint vertical hairlines, padded
  consistently.
- Marquee slowed slightly (110s / 170s) so titles are legible.

Same data sources (news + events), same scroll directions, just
better visual integration with the rest of the dark-navy site.
This commit is contained in:
Ryan Salazar
2026-05-20 13:13:25 +00:00
parent 097181eb43
commit 78e08046a7
2 changed files with 123 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/DoubleTicker.tsx
View File

@@ -147,22 +147,25 @@ export default async function DoubleTicker() {
return (
<div role="region" aria-label="Live wire and upcoming events">
{/* Row 1 — Live wire (news, right-to-left, fast). */}
{/* Row 1 — Live wire (news, right-to-left). */}
{news.length > 0 && (
<div className="bb-neon-bar w-full overflow-hidden">
<div className="max-w-container mx-auto px-4 h-[32px] flex items-center gap-3 text-[12px]">
<span className="bb-neon-label">Live Wire</span>
<div className="bb-tick-bar w-full overflow-hidden">
<div className="max-w-container mx-auto px-4 h-[34px] flex items-center gap-4">
<span className="bb-tick-label" aria-label="Live wire">
<span className="bb-tick-pulse" aria-hidden="true" />
<span>Live</span>
</span>
<div className="overflow-hidden flex-1">
<div className="bb-marquee">
{[...news, ...news].map((it, i) => (
<Link
key={`n-${it.slug}-${i}`}
href={`/news/${it.slug}`}
className="inline-flex items-center gap-2 px-4 whitespace-nowrap bb-neon-text"
className="bb-tick-item"
>
<span className="bb-neon-time">[{hhmm(it.published_at)}]</span>
<span className="bb-neon-code">[{it.source_code}]</span>
<span>{it.title}</span>
<span className="bb-tick-time">{hhmm(it.published_at)}</span>
<span className="bb-tick-code">{it.source_code}</span>
<span className="bb-tick-text">{it.title}</span>
</Link>
))}
</div>
@@ -173,18 +176,24 @@ export default async function DoubleTicker() {
{/* Row 2 — Industry calendar (events, left-to-right, slower). */}
{events.length > 0 && (
<div className="bb-neon-bar w-full overflow-hidden">
<div className="max-w-container mx-auto px-4 h-[32px] flex items-center gap-3 text-[12px]">
<span className="bb-neon-label bb-neon-label--cyan">On Calendar</span>
<div className="bb-tick-bar w-full overflow-hidden">
<div className="max-w-container mx-auto px-4 h-[34px] flex items-center gap-4">
<span className="bb-tick-label bb-tick-label--cyan" aria-label="On calendar">
<span className="bb-tick-pulse bb-tick-pulse--cyan" aria-hidden="true" />
<span>Calendar</span>
</span>
<div className="overflow-hidden flex-1">
<div className="bb-marquee bb-marquee--reverse bb-marquee--slow">
{[...events, ...events].map((ev, i) => {
const where = [ev.city, ev.country].filter(Boolean).join(", ");
const inner = (
<span className="inline-flex items-center gap-2 px-4 whitespace-nowrap bb-neon-text">
<span className="bb-neon-time">[{fmtEventDate(ev.start_date)}]</span>
<span className="bb-neon-code bb-neon-code--cyan">[{ev.short_name}]</span>
<span>{ev.name}{where ? ` — ${where}` : ""}</span>
<span className="bb-tick-item">
<span className="bb-tick-time">{fmtEventDate(ev.start_date)}</span>
<span className="bb-tick-code bb-tick-code--cyan">{ev.short_name}</span>
<span className="bb-tick-text">
{ev.name}
{where ? ` — ${where}` : ""}
</span>
</span>
);
return ev.slug ? (

120
src/styles/redesign-tokens.css
View File

@@ -91,32 +91,110 @@
animation-duration: 140s;
}
/* Neon dual-ticker tokens — used ONLY inside DoubleTicker. */
.bb-neon-bar {
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(5,10,8,0.55));
border-top: 1px solid rgba(0,255,159,0.18);
border-bottom: 1px solid rgba(0,255,159,0.18);
/* ─── Dual-ticker (DoubleTicker.tsx) ──────────────────────────────────────
News-wire aesthetic: pulse dot + small-caps label on the left, the
feed scrolls in muted mid-gray with monospaced timestamps and a
single neon accent on the source code. No bright label boxes —
the neon shows up only as the pulse and on the code chip. */
.bb-tick-bar {
position: relative;
background:
linear-gradient(180deg, rgba(8,12,10,0.92), rgba(10,14,12,0.92));
border-top: 1px solid rgba(255,255,255,0.04);
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.bb-neon-bar + .bb-neon-bar {
border-top: 1px solid rgba(0,212,255,0.10); /* faint divider between the two */
.bb-tick-bar::before {
/* thin neon hairline at the top of the FIRST bar only */
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,255,159,0.45), rgba(0,212,255,0.45), transparent);
opacity: 0.65;
}
.bb-neon-label {
background: #00ff9f;
color: #050a08;
font-weight: 700;
.bb-tick-bar + .bb-tick-bar::before {
/* divider between row 1 and row 2: dimmer + cyan-leaning */
background: linear-gradient(90deg, transparent, rgba(0,212,255,0.25), transparent);
opacity: 0.5;
}
.bb-tick-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.15em;
padding: 2px 8px;
border-radius: 3px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #00ff9f;
flex-shrink: 0;
text-shadow: none;
padding-right: 12px;
border-right: 1px solid rgba(255,255,255,0.07);
}
.bb-neon-label--cyan {
.bb-tick-label--cyan { color: #00d4ff; }
.bb-tick-pulse {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #00ff9f;
box-shadow: 0 0 8px rgba(0,255,159,0.7);
animation: bb-tick-blink 2.2s ease-in-out infinite;
}
.bb-tick-pulse--cyan {
background: #00d4ff;
box-shadow: 0 0 8px rgba(0,212,255,0.7);
}
.bb-neon-time { color: #707070; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.bb-neon-code { color: #00ff9f; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.bb-neon-code--cyan { color: #00d4ff; }
.bb-neon-text { color: #d4d4d4; }
.bb-neon-text:hover { color: #00ff9f; text-shadow: 0 0 8px rgba(0,255,159,0.4); }
@keyframes bb-tick-blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
}
.bb-tick-time {
color: #5a6470;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 11px;
margin-right: 6px;
}
.bb-tick-code {
color: #00ff9f;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
padding: 1px 5px;
margin-right: 8px;
border: 1px solid rgba(0,255,159,0.25);
border-radius: 2px;
background: rgba(0,255,159,0.06);
}
.bb-tick-code--cyan {
color: #00d4ff;
border-color: rgba(0,212,255,0.25);
background: rgba(0,212,255,0.06);
}
.bb-tick-text {
color: #c8ccd1;
font-size: 13px;
letter-spacing: 0.01em;
font-weight: 400;
}
.bb-tick-text:hover {
color: #ffffff;
}
.bb-tick-item {
display: inline-flex;
align-items: center;
padding: 0 24px 0 0;
white-space: nowrap;
}
.bb-tick-item + .bb-tick-item {
border-left: 1px solid rgba(255,255,255,0.05);
padding-left: 24px;
}
/* Smoother marquee easing — keep the linear feel (real tickers are linear)
but slightly slower so text is legible. */
.bb-tick-bar .bb-marquee { animation-duration: 110s; }
.bb-tick-bar .bb-marquee--slow { animation-duration: 170s; }