home: replace single LiveWire ticker with stacked dual ticker

Two horizontal lanes stacked on top of each other:

  Lane 1  LIVE WIRE           red gradient label, pulsing white dot,
                              latest 14 published articles, 65s loop
  Lane 2  RECENT FORUM POSTS  green gradient label, pulsing white dot,
                              latest 14 forum threads, 82s loop

The two lanes use intentionally different animation durations (65s vs
82s) so they never sync up — feels alive like a real wire room. Both
loops use CSS translateX with a duplicated content track for seamless
infinite scroll. Edges fade via mask-image so items dissolve in/out
rather than appearing on a hard line.

Both lanes pause on hover (the whole row) so users can stop motion
to read or click. Each item is a real <Link>; clicking opens the
article or thread page.

Server component — data is fetched once at request time from
bb.wp_imported_posts and bb.forum_threads, cached at the page's
revalidate boundary. No client JS needed.

Old LiveWireTicker.tsx is removed (orphaned, not referenced elsewhere).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar
2026-05-19 23:06:15 +00:00
parent b21ac70e0c
commit a52f8adb21
4 changed files with 290 additions and 122 deletions

View File

@@ -4,7 +4,7 @@ import Header from "@/components/Header";
import Footer from "@/components/Footer";
import FeaturedBentoFromDb from '@/components/FeaturedBentoFromDb';
import FeaturedCarouselServer from '@/components/FeaturedCarouselServer';
import LiveWireTicker from '@/components/LiveWireTicker';
import DoubleTicker from '@/components/DoubleTicker';
import NewsTicker from "./components/NewsTicker";
import FeaturedBento from "./components/FeaturedBento";
import SpotlightCarousel from "./components/SpotlightCarousel";
@@ -147,10 +147,10 @@ export default function HomePage() {
<h1>Broadcast Beat Broadcast Engineering News & Insights</h1>
</div>
{/* Scrolling news ticker */}
{/* Scrolling news + forum tickers */}
<div className="section-enter section-enter-1">
<Suspense fallback={<TickerSkeleton />}>
<LiveWireTicker />
<DoubleTicker />
</Suspense>
</div>