Overview
Velto is a production-ready, single-page SaaS marketing site: floating pill navigation, a hero whose two phone mockups drift apart as you scroll, an infinite logo marquee, a three-column tabbed feature card, tinted step panels with oversized bleeding props, staggered benefit cards, three-tier pricing with a highlighted plan, testimonials, team, blog and an accordion FAQ. The motion is the point. Every animated block is bound to scroll position through GSAP ScrollTrigger with `scrub: true` and Lenis smooth scrolling, so the reveals are bidirectional — scrolling back up un-plays them instead of leaving elements stranded mid-animation. The oversized section words slide up from behind a mask, with the mask on an inner wrapper and bottom padding on the heading so glyph descenders never clip. Built on Next.js 16 (App Router + Turbopack), React 19, TypeScript and Tailwind v4 using `@theme inline` design tokens, so the whole palette changes from one block of CSS custom properties. Imagery resolves through a `Media` slug component — drop a file with the same slug into `public/img/` and the image swaps with no code change. Copy lives in plain arrays at the top of each component, not buried in JSX. Mobile-first, verified with zero horizontal overflow from 360px to 1920px, and documented with a real README covering the stack, tokens, animation model and how to edit everything.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
