Skip to content

Commit 9d92e3d

Browse files
kevinjosethomaskevinjosethomas
committed
feat: clean up training section of landing page
1 parent 52f0c3b commit 9d92e3d

File tree

4 files changed

+899
-172
lines changed

4 files changed

+899
-172
lines changed

‎src/components/Home/AboutMaia.tsx

Lines changed: 249 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import Image from 'next/image'
22
import Link from 'next/link'
3+
import { motion } from 'framer-motion'
4+
import { useInView } from 'react-intersection-observer'
35

46
import personJon from './people/jon.jpg'
57
import personSid from './people/sid.jpeg'
@@ -80,101 +82,303 @@ const teamMembers = [
8082
]
8183

8284
export const AboutMaia = () => {
85+
const [projectRef, projectInView] = useInView({
86+
triggerOnce: false,
87+
threshold: 0.2,
88+
})
89+
90+
const [teamRef, teamInView] = useInView({
91+
triggerOnce: false,
92+
threshold: 0.2,
93+
})
94+
95+
const [acknowledgementsRef, acknowledgementsInView] = useInView({
96+
triggerOnce: false,
97+
threshold: 0.2,
98+
})
99+
83100
return (
84101
<div className="font-helvetica [&_a]:text-human-3">
85-
<div className="flex flex-row items-center justify-center gap-10 bg-background-2 py-5 text-sm uppercase tracking-wider">
86-
<a href="#main_info" className="!text-primary">
102+
<motion.div
103+
className="sticky top-0 z-20 flex flex-row items-center justify-center gap-10 bg-background-2 py-5 text-sm uppercase tracking-wider backdrop-blur-md"
104+
initial={{ opacity: 0, y: -10 }}
105+
animate={{ opacity: 1, y: 0 }}
106+
transition={{ duration: 0.3 }}
107+
>
108+
<motion.a
109+
href="#main_info"
110+
className="relative !text-primary"
111+
whileHover={{ scale: 1.05 }}
112+
whileTap={{ scale: 0.95 }}
113+
>
87114
Project
88-
</a>
89-
<a href="#team_info" className="!text-primary">
115+
<motion.div
116+
className="absolute -bottom-1 left-0 h-0.5 w-0 bg-human-3"
117+
whileHover={{ width: '100%' }}
118+
transition={{ duration: 0.2 }}
119+
/>
120+
</motion.a>
121+
<motion.a
122+
href="#team_info"
123+
className="relative !text-primary"
124+
whileHover={{ scale: 1.05 }}
125+
whileTap={{ scale: 0.95 }}
126+
>
90127
Team
91-
</a>
92-
</div>
128+
<motion.div
129+
className="absolute -bottom-1 left-0 h-0.5 w-0 bg-human-3"
130+
whileHover={{ width: '100%' }}
131+
transition={{ duration: 0.2 }}
132+
/>
133+
</motion.a>
134+
</motion.div>
135+
93136
<section
94137
id="main_info"
95-
className="flex items-center justify-center bg-background-1 py-20 text-center"
138+
className="relative flex items-center justify-center overflow-hidden bg-background-1 py-20 text-center"
139+
ref={projectRef}
96140
>
97-
<div className="mx-auto my-0 max-w-[1170px]">
141+
{/* Background decorative elements */}
142+
<motion.div
143+
className="absolute -top-40 right-0 h-80 w-80 rounded-full bg-human-4/5"
144+
animate={{
145+
y: projectInView ? [0, 30, 0] : 0,
146+
scale: projectInView ? [1, 1.05, 1] : 1,
147+
}}
148+
transition={{
149+
repeat: Infinity,
150+
duration: 6,
151+
times: [0, 0.5, 1],
152+
}}
153+
/>
154+
<motion.div
155+
className="absolute -left-20 bottom-0 h-60 w-60 rounded-full bg-engine-4/5"
156+
animate={{
157+
y: projectInView ? [0, -20, 0] : 0,
158+
scale: projectInView ? [1, 1.03, 1] : 1,
159+
}}
160+
transition={{
161+
repeat: Infinity,
162+
duration: 5,
163+
times: [0, 0.5, 1],
164+
delay: 0.5,
165+
}}
166+
/>
167+
168+
<div className="z-10 mx-auto my-0 max-w-[1170px]">
98169
<div className="m-auto box-border w-auto px-4 md:w-2/3">
99-
<h3 className="text-xl font-bold uppercase">
170+
<motion.h3
171+
className="text-xl font-bold uppercase"
172+
initial={{ opacity: 0, y: 20 }}
173+
animate={
174+
projectInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
175+
}
176+
transition={{ duration: 0.3 }}
177+
>
100178
Human-AI Collaboration for Chess
101-
</h3>
102-
<h2 className="mx-auto my-8 text-center text-4xl font-bold">
179+
</motion.h3>
180+
<motion.h2
181+
className="mx-auto my-8 text-center text-4xl font-bold"
182+
initial={{ opacity: 0, y: 20 }}
183+
animate={
184+
projectInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
185+
}
186+
transition={{ duration: 0.3, delay: 0.1 }}
187+
>
103188
What is Maia Chess?
104-
</h2>
105-
<p className="text-primary/90">
189+
</motion.h2>
190+
<motion.p
191+
className="text-primary/90"
192+
initial={{ opacity: 0, y: 20 }}
193+
animate={
194+
projectInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
195+
}
196+
transition={{ duration: 0.3, delay: 0.2 }}
197+
>
106198
Maia is a human-like chess engine, designed to play like a human
107199
instead of playing the strongest moves. Maia uses the same deep
108200
learning techniques that power superhuman chess engines, but with
109201
a novel approach: Maia is trained to play like a human rather than
110202
to win.
111-
</p>
203+
</motion.p>
112204
<br />
113205
<br />
114-
<p className="text-primary/90">
206+
<motion.p
207+
className="text-primary/90"
208+
initial={{ opacity: 0, y: 20 }}
209+
animate={
210+
projectInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
211+
}
212+
transition={{ duration: 0.3, delay: 0.3 }}
213+
>
115214
Maia is trained to predict human moves rather than to find the
116215
optimal move in a position. As a result, Maia exhibits common
117216
human biases and makes many of the same mistakes that humans make.
118217
We have trained a set of nine neural network engines, each
119218
targeting a specific rating level on the Lichess.org rating scale,
120219
from 1100 to 1900.
121-
</p>
220+
</motion.p>
122221
<br />
123222
<br />
124-
<p className="text-primary/90">
223+
<motion.p
224+
className="text-primary/90"
225+
initial={{ opacity: 0, y: 20 }}
226+
animate={
227+
projectInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
228+
}
229+
transition={{ duration: 0.3, delay: 0.4 }}
230+
>
125231
We introduced Maia in our paper that appeared at NeurIPS 2020.
126-
</p>
232+
</motion.p>
127233
<br />
128-
<div className="mx-auto flex items-center justify-center gap-4">
129-
<Link
130-
href="/"
131-
className="rounded bg-human-3 p-4 !text-white transition-opacity hover:opacity-90"
234+
<motion.div
235+
className="mx-auto flex items-center justify-center gap-4"
236+
initial={{ opacity: 0, y: 20 }}
237+
animate={
238+
projectInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
239+
}
240+
transition={{ duration: 0.3, delay: 0.5 }}
241+
>
242+
<motion.div
243+
whileHover={{ scale: 1.05 }}
244+
whileTap={{ scale: 0.95 }}
132245
>
133-
Play Maia Chess
134-
</Link>
135-
<a
136-
target="_blank"
137-
rel="noreferrer"
138-
href="https://maiachess.com/maia-paper.pdf"
139-
className="rounded bg-engine-3 p-4 !text-white transition-opacity hover:opacity-90"
246+
<Link
247+
href="/"
248+
className="rounded bg-human-3 p-4 !text-white transition-opacity hover:opacity-90"
249+
>
250+
Play Maia Chess
251+
</Link>
252+
</motion.div>
253+
<motion.div
254+
whileHover={{ scale: 1.05 }}
255+
whileTap={{ scale: 0.95 }}
140256
>
141-
Read Paper
142-
</a>
143-
</div>
257+
<a
258+
target="_blank"
259+
rel="noreferrer"
260+
href="https://maiachess.com/maia-paper.pdf"
261+
className="rounded bg-engine-3 p-4 !text-white transition-opacity hover:opacity-90"
262+
>
263+
Read Paper
264+
</a>
265+
</motion.div>
266+
</motion.div>
144267
</div>
145268
</div>
146269
</section>
147-
<section id="team_info" className="bg-background-2 py-20">
148-
<div className="mx-auto my-0 max-w-[1170px]">
270+
271+
<section
272+
id="team_info"
273+
className="relative overflow-hidden bg-background-2 py-20"
274+
ref={teamRef}
275+
>
276+
{/* Background decorative elements */}
277+
<motion.div
278+
className="absolute right-20 top-20 h-40 w-40 rounded-full bg-human-4/5"
279+
animate={{
280+
y: teamInView ? [0, 20, 0] : 0,
281+
}}
282+
transition={{
283+
repeat: Infinity,
284+
duration: 4,
285+
times: [0, 0.5, 1],
286+
}}
287+
/>
288+
<motion.div
289+
className="absolute bottom-20 left-20 h-60 w-60 rounded-full bg-engine-4/5"
290+
animate={{
291+
y: teamInView ? [0, -20, 0] : 0,
292+
}}
293+
transition={{
294+
repeat: Infinity,
295+
duration: 5,
296+
times: [0, 0.5, 1],
297+
delay: 0.5,
298+
}}
299+
/>
300+
301+
<div className="relative z-10 mx-auto my-0 max-w-[1170px]">
149302
<div className="m-auto box-border w-auto px-4 md:w-2/3">
150-
<h3 className="text-center text-xl font-bold uppercase">Team</h3>
151-
<p className="mb-10 mt-2 text-center text-primary/90">
303+
<motion.h3
304+
className="text-center text-xl font-bold uppercase"
305+
initial={{ opacity: 0, y: 20 }}
306+
animate={
307+
teamInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
308+
}
309+
transition={{ duration: 0.3 }}
310+
>
311+
Team
312+
</motion.h3>
313+
<motion.p
314+
className="mb-10 mt-2 text-center text-primary/90"
315+
initial={{ opacity: 0, y: 20 }}
316+
animate={
317+
teamInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
318+
}
319+
transition={{ duration: 0.3, delay: 0.1 }}
320+
>
152321
The Maia team consists of students, postdocs, and faculty spanning
153322
Cornell University and the University of Toronto.
154-
</p>
323+
</motion.p>
155324
</div>
156325
<div className="mx-auto grid max-w-[900px] grid-cols-1 gap-10 px-4 text-center md:grid-cols-2 lg:grid-cols-3">
157-
{teamMembers.map((member) => (
158-
<TeamMember key={member.name} {...member} />
326+
{teamMembers.map((member, index) => (
327+
<TeamMember key={member.name} {...member} index={index} />
159328
))}
160329
</div>
161330
</div>
162331
</section>
163-
<section className="flex flex-col justify-evenly bg-background-1 py-20">
164-
<div className="mx-auto my-0 max-w-[1170px]">
332+
333+
<section
334+
className="relative flex flex-col justify-evenly overflow-hidden bg-background-1 py-20"
335+
ref={acknowledgementsRef}
336+
>
337+
{/* Background decorative elements */}
338+
<motion.div
339+
className="absolute -top-10 right-10 h-40 w-40 rounded-full bg-human-4/5"
340+
animate={{
341+
scale: acknowledgementsInView ? [1, 1.1, 1] : 1,
342+
}}
343+
transition={{
344+
repeat: Infinity,
345+
duration: 6,
346+
times: [0, 0.5, 1],
347+
}}
348+
/>
349+
350+
<div className="z-10 mx-auto my-0 max-w-[1170px]">
165351
<div className="m-auto box-border w-auto px-4 md:w-2/3">
166-
<h3 className="text-center text-xl font-bold uppercase">
352+
<motion.h3
353+
className="text-center text-xl font-bold uppercase"
354+
initial={{ opacity: 0, y: 20 }}
355+
animate={
356+
acknowledgementsInView
357+
? { opacity: 1, y: 0 }
358+
: { opacity: 0, y: 20 }
359+
}
360+
transition={{ duration: 0.3 }}
361+
>
167362
Acknowledgments
168-
</h3>
169-
<p className="text-center text-primary/90">
363+
</motion.h3>
364+
<motion.p
365+
className="text-center text-primary/90"
366+
initial={{ opacity: 0, y: 20 }}
367+
animate={
368+
acknowledgementsInView
369+
? { opacity: 1, y: 0 }
370+
: { opacity: 0, y: 20 }
371+
}
372+
transition={{ duration: 0.3, delay: 0.1 }}
373+
>
170374
Many thanks to Lichess.org for providing the human games that we
171375
trained on and hosting our Maia models that you can play against.
172376
Ashton Anderson was supported in part by an NSERC grant, a
173377
Microsoft Research gift, and a CFI grant. Jon Kleinberg was
174378
supported in part by a Simons Investigator Award, a Vannevar Bush
175379
Faculty Fellowship, a MURI grant, and a MacArthur Foundation
176380
grant.
177-
</p>
381+
</motion.p>
178382
</div>
179383
</div>
180384
</section>

0 commit comments

Comments
 (0)