roundtable | profileShare

Commit

add scrolling model marquee band

rasmusjy committed Jul 10, 2026, 7:12 PM

commit 31db327

3 changed files with +51 and −0

Jump to a changed file

modified src/app/globals.css +13 −0

		@@ -113,6 +113,9 @@
113	113	.animate-drift {
114	114	animation: drift 22s ease-in-out infinite;
115	115	}
	116	+ .animate-marquee {
	117	+ animation: marquee 36s linear infinite;
	118	+ }
116	119	/* Staggered load-in reveal for the hero. */
117	120	.reveal {
118	121	animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
		@@ -140,8 +143,18 @@
140	143	}
141	144	}
142	145
	146	+@keyframes marquee {
	147	+ from {
	148	+ transform: translateX(0);
	149	+ }
	150	+ to {
	151	+ transform: translateX(-50%);
	152	+ }
	153	+}
	154	+
143	155	@media (prefers-reduced-motion: reduce) {
144	156	.animate-drift,
	157	+ .animate-marquee,
145	158	.reveal {
146	159	animation: none !important;
147	160	}

modified src/app/page.tsx +3 −0

		@@ -2,6 +2,7 @@import { Gavel, GitCompareArrows, MessagesSquare, PencilLine, Scale, Users } fro
2	2	import Link from 'next/link';
3	3	import { LandingBackground } from '@/components/landing-background';
4	4	import { LandingHero } from '@/components/landing-hero';
	5	+import { LandingMarquee } from '@/components/landing-marquee';
5	6	import { Button } from '@/components/ui/button';
6	7	import type { DebateResult } from '@/core/types';
7	8	import { listDemoDebates, loadDebateResult } from '@/db/repositories';
		@@ -30,6 +31,8 @@export default async function HomePage() {
30	31	<LandingBackground />
31	32	{demo ? <LandingHero result={demo} /> : <MinimalHero />}
32	33
	34	+ <LandingMarquee />
	35	+
33	36	{/* The five moves of a debate, as a colored pipeline (no boxes). */}
34	37	<section className="container border-t py-16 sm:py-24">
35	38	<div className="mx-auto max-w-2xl text-center">

added src/components/landing-marquee.tsx +35 −0

		@@ -0,0 +1,35 @@
	1	+import { participantColor } from '@/lib/model-visuals';
	2	+
	3	+const MODELS = [
	4	+ 'GPT-4o',
	5	+ 'Claude 3.5 Sonnet',
	6	+ 'Gemini 1.5 Pro',
	7	+ 'Llama 3.3 70B',
	8	+ 'Mistral Large',
	9	+ 'Grok 2',
	10	+ 'DeepSeek Chat',
	11	+ 'Command R+',
	12	+ 'Qwen 2.5 72B',
	13	+ 'GPT-4o mini',
	14	+ 'Claude 3.5 Haiku',
	15	+ 'Gemini Flash',
	16	+];
	17	+
	18	+/** An infinite marquee of model names - the council can be drawn from any of them. */
	19	+export function LandingMarquee() {
	20	+ const row = [...MODELS, ...MODELS];
	21	+ return (
	22	+ <section className="relative overflow-hidden border-y py-5">
	23	+ <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-24 bg-gradient-to-r from-background to-transparent" />
	24	+ <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-24 bg-gradient-to-l from-background to-transparent" />
	25	+ <div className="flex w-max animate-marquee items-center gap-9">
	26	+ {row.map((model, i) => (
	27	+ <span key={i} className="flex items-center gap-2.5 whitespace-nowrap text-sm text-muted-foreground">
	28	+ <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: participantColor(i) }} />
	29	+ {model}
	30	+ </span>
	31	+ ))}
	32	+ </div>
	33	+ </section>
	34	+ );
	35	+}