Skip to content

Add Verified track preview page and design doc #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sunyitong merged 3 commits into from
Jul 4, 2026
Merged

Add Verified track preview page and design doc #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cdacf3a
Add Verified track preview page and design doc
hch-wang Jul 2, 2026
c2c1dd8
Retrigger Vercel preview build
hch-wang Jul 3, 2026
6db58ff
Polish Verified track launch
sunyitong Jul 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions .claude/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"version": "0.0.1",
"configurations": [
{
"name": "dev",
"runtimeExecutable": "npm",
"runtimeArgs": ["run", "dev"],
"port": 3000
}
]
}
5 changes: 5 additions & 0 deletions .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@ YJS_COMPACTION_PENDING_THRESHOLD=500
YJS_COMPACTION_IDLE_MS=300000
YJS_COMPACTION_MAX_DOCS=20

# Feature previews
# Show the in-progress Verified track page in production. Defaults to on in local dev,
# off in production. Set to "true" on a Vercel preview deploy to view /verified there.
NEXT_PUBLIC_VERIFIED_PREVIEW=false

# Security defaults
SECURITY_RATE_LIMIT=true
SECURITY_SUSPICIOUS_DETECTION=true
Expand Down
115 changes: 26 additions & 89 deletions app/(site)/home-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { gsap } from "gsap";
import { Observer } from "gsap/Observer";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { TextPlugin } from "gsap/TextPlugin";
import { ChevronDown } from "lucide-react";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";

Expand All @@ -21,10 +20,7 @@ if (typeof window !== "undefined") {

export default function HomePage() {
const containerRef = useRef<HTMLDivElement>(null);
const heroRef = useRef<HTMLDivElement>(null);
const pinContainerRef = useRef<HTMLDivElement>(null);
const paragraphRef = useRef<HTMLParagraphElement>(null);
const scrollIndicatorRef = useRef<HTMLDivElement>(null);
const textScrollRef = useRef<HTMLParagraphElement>(null);
const videoRef = useRef<HTMLVideoElement>(null);
const [videoLoaded, setVideoLoaded] = useState(false);
Expand All @@ -45,7 +41,7 @@ export default function HomePage() {
const lines = text.split(/<br\s*\/?>/i);

// Words that should have gradient effect
const gradientWords = ["interactives", "CHI", "2026."];
const gradientWords = ["Verified", "evidence."];

element.innerHTML = lines
.map((line, lineIndex) => {
Expand Down Expand Up @@ -93,9 +89,6 @@ export default function HomePage() {
return progress;
});

// Add 0.2 snap breakpoint for first screen
snapPoints.push(0.18);

// Add end point if last section doesn't reach bottom
if (snapPoints[snapPoints.length - 1] < 0.99) {
snapPoints.push(1);
Expand Down Expand Up @@ -197,7 +190,7 @@ export default function HomePage() {

// Ensure initial position is set for all words
gsap.set(words, {
x: window.innerWidth - 25,
x: 0,
});

// Make paragraph visible after wrapping and initial position is set
Expand All @@ -208,56 +201,6 @@ export default function HomePage() {
});
}

// Scroll indicator bounce animation
if (scrollIndicatorRef.current) {
// Create bouncing animation
gsap.to(".scroll-arrow-container", {
y: 15,
duration: 1,
ease: "power1.inOut",
repeat: -1,
yoyo: true,
});

// Fade out on scroll
gsap.to(scrollIndicatorRef.current, {
opacity: 0,
scrollTrigger: {
trigger: pinContainerRef.current,
start: "top top",
end: "+=50",
scrub: true,
},
});
}

// Main text animation with snap point at the end
gsap.to(words, {
x: 0,
stagger: 0.02,
ease: "power4.inOut",
scrollTrigger: {
trigger: pinContainerRef.current,
start: "top top",
end: "bottom bottom",
scrub: true,
pin: heroRef.current,
},
});

// Add snap point for the hero section
ScrollTrigger.create({
trigger: pinContainerRef.current,
start: "top top",
end: "bottom bottom",
snap: {
snapTo: [0, 0.95, 1], // Snap at start, near end, and end
duration: { min: 0.2, max: 0.5 },
delay: 0.1,
ease: "power1.inOut",
},
});

// Scroll-triggered animations
gsap.utils.toArray(".scroll-section").forEach((section: any) => {
gsap.from(section, {
Expand Down Expand Up @@ -691,28 +634,12 @@ export default function HomePage() {
<SiteMenu theme="dark" />
</div>

{/* Text Scrolling Hero Section */}
<div
ref={pinContainerRef}
className="pin-height relative z-10 snap-section"
style={{ height: "500vh" }}
>
{/* Hero Section */}
<div className="relative z-10 h-screen snap-section" data-section="hero">
<section
ref={heroRef}
className="hero-container absolute top-0 left-0 w-full h-screen bg-black/80 text-gray-200 overflow-hidden"
className="hero-container relative h-screen w-full overflow-hidden bg-black/80 text-gray-200"
style={{ fontFamily: "var(--font-roboto-flex), sans-serif" }}
>
{/* Scroll Indicator */}
<div
ref={scrollIndicatorRef}
className="absolute left-0 right-0 top-3/4 flex justify-center pointer-events-none z-20"
>
<div className="scroll-arrow-container flex flex-col items-center">
<span className="text-white/70 text-sm font-light mb-2">Scroll</span>
<ChevronDown className="w-10 h-10 text-white/70" />
</div>
</div>

{/* Content Container */}
<div className="relative h-full flex flex-col p-8 md:p-16">
{/* Header */}
Expand Down Expand Up @@ -747,13 +674,13 @@ export default function HomePage() {
className="paragraph"
style={{
fontFamily: "var(--font-roboto-flex), sans-serif",
fontSize: "5vw",
lineHeight: 1.0,
letterSpacing: "-0.05em",
fontSize: "clamp(42px, 5vw, 74px)",
lineHeight: 0.95,
letterSpacing: "0",
fontWeight: 500,
}}
dangerouslySetInnerHTML={{
__html: `The research behind<br />interactives was published at<br />CHI 2026.`,
__html: `New track!<br />Verified papers<br />with executable evidence.`,
}}
/>
<div
Expand All @@ -765,6 +692,19 @@ export default function HomePage() {
gap: "1rem",
}}
>
<p
style={{
fontFamily: "var(--font-roboto-flex), sans-serif",
fontSize: "12px",
fontWeight: 700,
letterSpacing: "0.12em",
lineHeight: 1,
textTransform: "uppercase",
color: "var(--color-brand-500)",
}}
>
New Track announcement
</p>
<p
style={{
fontFamily: "var(--font-roboto-flex), sans-serif",
Expand All @@ -774,14 +714,11 @@ export default function HomePage() {
color: "rgba(241, 241, 241, 0.78)",
}}
>
Read the paper to learn about the technology and story behind the platform.
A new interactives publication track for papers whose core claims can be checked
by running code and tests.
</p>
<div>
<Link
href="https://doi.org/10.1145/3772363.3798309"
target="_blank"
rel="noopener noreferrer"
>
<Link href="/verified">
<Button
size="lg"
variant="outline"
Expand All @@ -800,7 +737,7 @@ export default function HomePage() {
}}
className="hover:scale-105 hover:bg-white/10 hover:border-white/40"
>
Read the CHI 2026 paper
Learn more
</Button>
</Link>
</div>
Expand Down
Loading
Loading