import { useState, useEffect } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import {
Box,
Container,
Typography,
Button,
Grid,
Stack,
Link,
} from '@mui/material';
import { useSpring, animated } from '@react-spring/web';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import Layout from '../components/Layout';
import Section from '../components/Section';
// Floating Sticker Component with scroll parallax
function FloatingSticker({ src, size, top, left, right, bottom, rotation = 0, floatRange = 15, floatSpeed = 6000, scrollFactor = 0.05 }) {
const [floatOffset, setFloatOffset] = useState(0);
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
let startTime = Date.now();
let animationFrame;
const animate = () => {
const elapsed = Date.now() - startTime;
const offset = Math.sin((elapsed / floatSpeed) * Math.PI * 2) * floatRange;
setFloatOffset(offset);
animationFrame = requestAnimationFrame(animate);
};
animationFrame = requestAnimationFrame(animate);
return () => cancelAnimationFrame(animationFrame);
}, [floatSpeed, floatRange]);
useEffect(() => {
const handleScroll = () => setScrollY(window.scrollY);
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const springProps = useSpring({
transform: `translateY(${floatOffset + scrollY * scrollFactor}px) rotate(${rotation}deg)`,
config: { mass: 3, tension: 80, friction: 40 },
});
return (
);
}
// Hero Section
function Hero() {
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
const handleScroll = () => setScrollY(window.scrollY);
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const videoParallax = useSpring({
transform: `translate(-45%, calc(-50% + ${scrollY * 0.15}px))`,
config: { mass: 1, tension: 280, friction: 60 },
});
return (
{/* Overlay gradients + vignette */}
Open Source Robot
Powered by
Reachy Mini
An expressive companion robot designed for{' '}
human interaction
,{' '}
creative coding
, and{' '}
AI experimentation
.
);
}
// Stats/Bento Section - Sober backgrounds, illustrations for color
function StatsSection() {
return (
{/* Big stat - Open Source */}
{/* Hacker illustration - overflows top */}
Build your own
robot
Get Started
Follow our guides to assemble your Reachy Mini →
{/* 30+ Apps with Hand Tracking GIF */}
{/* GIF Background */}
{/* Overlay gradient */}
{/* Content */}
Apps
Explore ready-to-use app →
{/* Community */}
Join our Discord Community
We are already 4500+ Makers →
{/* Python SDK */}
from{' '}
reachy_mini{' '}
import{' '}
ReachyMini
{'\n\n'}
with{' '}
ReachyMini(){' '}
as{' '}
mini:
{'\n'}
{' '}mini.goto_target(head=pose)
Discover the Python SDK
Full control in 3 lines →
);
}
// Products Section - Minimal comparison
function ProductsSection() {
return (
{/* Stickers */}
Two ways to Reachy
Choose wireless for standalone use, or Lite for a budget-friendly tethered experience.
{/* Wireless */}
Most Popular
Reachy Mini
Wireless • On-board compute
$449
{['Raspberry Pi 4 on-board', 'Wi-Fi + USB', 'Camera, 4 mics, speaker', 'Accelerometer'].map((item) => (
✓ {item}
))}
{/* Lite */}
Reachy Mini Lite
USB • External compute
$299
{['Your Mac/PC as brain', 'USB only', 'Camera, 4 mics, speaker', 'Same motion capabilities'].map((item) => (
✓ {item}
))}
Both ship as DIY kits. Assembly takes ~2 hours.{' '}
Watch the guide →
);
}
// Apps Showcase - Sober design with illustrations
function AppsShowcase() {
return (
{/* Sticker */}
{/* Header */}
App Ecosystem
30+ apps, one click install
From AI conversations to hand tracking - explore what the community has built
or create your own and share it with the world.
{/* Featured App - AI Companion (large) */}
{/* Illustration */}
{/* Content */}
Featured
AI Companion
Have a conversation with Reachy! Powered by LLMs, it understands what you say
and responds with expressive movements and speech.
}
>
Try it now
{/* Other apps grid */}
{/* Hand Tracking */}
Hand Tracking
Reachy follows your hand movements in real-time using OpenCV.
{/* More apps CTA */}
+28
more apps to explore
Browse all →
{/* Build your own CTA */}
Got an idea?{' '}
Build your own app →
);
}
// Community Section
function CommunitySection() {
return (
Join 4500+ makers
Connect with other Reachy Mini owners on Discord. Share your projects,
get help, and stay updated on the latest developments.
}
>
Join Discord
);
}
// Final CTA
function FinalCTA() {
return (
Ready to meet Reachy?
Get your own expressive companion robot and join the community of makers
building the future of human-robot interaction.
{/* ✓ Free worldwide shipping✓ 30-day returns✓ 1-year warranty */}
);
}
// Main Home Page
export default function Home() {
return (
);
}