# StarForge > An AI SaaS landing page template with parallax depth in the hero A one-page landing template for AI SaaS products, with a parallax hero that gives the page real depth. Made with Next.js and Tailwind CSS. - Type: Starter - Role: Frontend Developer - Tech: nextjs, react, typescript, tailwindcss, parallax, vercel - Published: 2024-01-01 - Updated: 2026-10-04 - Live: https://ai-saas-landing-starter.vercel.app - Repo: https://github.com/AayushBharti/ai-saas-landing-starter - URL: https://aayushbharti.in/projects/star-forge **TL;DR:** StarForge is a single-page AI SaaS landing page template built with Next.js, React, TypeScript and Tailwind CSS, statically generated and deployed on Vercel with no API, database or auth. Depth in the hero comes from react-just-parallax, with scroll parallax on floating cards and mouse parallax on background orbs, instead of Three.js or Spline. ## Highlights - Parallax that follows scroll and mouse - Pricing toggle with rolling-digit prices - No backend: fork, rebrand, deploy --- ## What it is StarForge is a one-page landing template for an AI SaaS product: hero, benefits, collaboration, services, pricing, roadmap and footer. It's statically generated with Next.js and deployed on Vercel, with no API, database or auth, so a founder could fork it, swap the palette and logo, and ship. The palette lives in Tailwind's `@theme` block as variables (`--color-color-1: #ac6aff` and friends), so swapping it is a small edit. --- ![StarForge hero with the headline Explore the Possibilities of AI Chatting with StarForge, a Get Started button, a robot image, and floating Code generation and toolbar cards](/projects/star-forge/screen1.jpeg) --- ## Depth from scroll and mouse parallax I considered Three.js or Spline for the hero and decided the bundle cost wasn't worth it for a landing page. The depth comes from react-just-parallax in two forms. `ScrollParallax` wraps the two absolutely positioned cards that float over the robot image (the icon toolbar and the "Code generation" notification), so they drift at a different speed from the image as you scroll. `MouseParallax` wraps the small colored orbs on the background rings, scoped to the hero container with `strength={0.07}`, so they shift slightly as the cursor moves. Parallax is easy to overdo: every extra layer costs frames on mobile, so I profiled on real devices and cut the effects that cost too much. On phones the effect is mostly gone anyway. Both floating cards are hidden below the `xl` breakpoint, and touch screens have no cursor for the orbs to follow. --- ![StarForge services section titled Generative AI made for creators, with a helmeted figure, a Smartest AI feature list, and a Video generation card](/projects/star-forge/screen2.jpeg) --- ## Frequently asked questions ### What is StarForge? StarForge is an AI SaaS landing page template with a hero, benefits grid, collaboration, services, pricing, roadmap and footer sections. It has no backend, so a founder can fork it, change the palette and logo, and deploy it. ### How does StarForge create its parallax effect? StarForge uses react-just-parallax in two ways: ScrollParallax moves two floating hero cards at a different speed from the image behind them, and MouseParallax (strength 0.07) shifts small background orbs as the cursor moves. There is no 3D rendering; I chose parallax over Three.js or Spline to keep that bundle cost off a landing page. ### How do I rebrand the StarForge template? StarForge defines its colors and fonts as variables in Tailwind CSS v4's @theme block (for example --color-color-1: #ac6aff), so rebranding starts with editing those values and swapping the logo. ### Does StarForge need a backend? No. StarForge has no API, database or auth; the page is statically generated with Next.js and served from Vercel's CDN as static files.