Overview
Rootline is a full-screen SaaS hero for a land-intelligence platform, built in React with Framer Motion. A large product dashboard rises into the centre of the screen between two rock formations, under a two-line headline and a floating, frosted navigation bar. Hovering a rock grows a soft circle that follows the pointer and reveals moss and grass growing on the stone underneath, driven by a spring-animated CSS mask over a pixel-aligned moss image. The intro brings the headline up from a blur, slides the rocks in from the sides and lifts the dashboard into place. The navigation has pill hovers, menu chevrons, a Log in link and a Book a demo button, and collapses into a menu panel on smaller screens. The source is React 18, Vite, TypeScript and Tailwind CSS. The palette lives in the Tailwind config and every image can be swapped: drop in your own product screenshot for the dashboard, and keep the rock pairs or bring your own. It respects reduced motion, builds with relative paths so it deploys at a domain root or in a subfolder, and ships with a ready-made build plus documentation for editing copy, colours, layout and motion.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
