Project overview
The challenge
- Bitcoin holders often find DeFi staking hard to understand, and a text-heavy page does not explain how staking yield works.
- The product needed a landing page that explains the staking flow visually and stays smooth on mobile.
A front-end landing page (December 2024 – January 2025, co-developed with a second engineer) that introduces a Bitcoin staking product: what staking is, how the yield works and how the product connects to DeFi protocols.
Built with React 18 and Vite on Material UI, with animated sections (concentric circles, staking illustrations, interactive step-by-step diagrams) using D3.js, Recharts, Framer Motion and React Spring.
Responsive from mobile to desktop, built as static assets and served by a small Express server. It is a presentation page: there is no staking back end, wallet connection or user funds behind it.
Technical architecture
Vite build: static assets served by a small Express server
Component layer: one React component per landing section (staking card, yield, interactive steps, DeFi integration)
Illustration layer: D3.js and Recharts for diagrams and charts
Animation layer: Framer Motion and React Spring
Theming: Material UI with responsive breakpoints
Key challenges & solutions
Smooth Animations on Mobile
Combined Framer Motion and React Spring animations with D3.js illustrations while keeping scrolling smooth on phones.
Responsive Diagrams
Sized D3.js and Recharts diagrams to the viewport so the staking explanations stay readable from mobile to desktop.
Impact & results
Landing page live at xstake-two.vercel.app
Staking flow explained through animated, interactive sections rather than text
Responsive layout from mobile to desktop
Key features
- Animated landing sections explaining Bitcoin staking
- Interactive step-by-step diagrams
- D3.js and Recharts illustrations
- Framer Motion and React Spring animations
- Material UI theming with a responsive layout
- Static Vite build served by Express
