blendpixel.com
The landing site for my products: Orbit, Retina, and Listval.
The open-source landing page for BlendPixel's three developer products, built with React 19, TypeScript, Vite, and Tailwind CSS, fork it as a starting point for your own product landing page.
blendpixel.com is the public landing page for a developer's three products: Orbit, Retina, and Listval. The site itself is open source so others can study how it is built, fork it, or use it as a starting point for their own product landing page.
The site is built with React 19, TypeScript, Vite (a tool for building fast web applications), and Tailwind CSS for styling. It uses a library called Motion for animations, including a logo-morph animation on the Retina product page and an animated folder layout on the homepage that presents all three products.
The repository is organized around a small set of pages and components. The homepage shows all three products using a custom animated folder component. There is a dedicated page for Retina with an interactive demo and FAQ section, and a terms of service page for Retina. The folder component is kept separate so it can be reused.
Running the site locally requires Node.js version 20 or higher. The process is: fork the repository, clone it, run npm install to download dependencies, then npm run dev to start the local server. Changes to the code appear in the browser immediately without needing to reload. The README walks through each step in plain language.
The code is released under the MIT license, which allows free use and modification. The names BlendPixel, Retina, Orbit, and Listval, along with their logos, are trademarks that are not covered by that license. Anyone who forks or redistributes the project must use their own name and branding instead of the originals.
Where it fits
- Fork the repository and replace the branding to create your own product landing page with animated folder and page components
- Study how to build product landing pages with React 19, Vite, and Tailwind CSS using the Motion animation library
- Use the animated folder component separately in another React project to showcase multiple products or features
- Adapt the Retina product page as a template for your own SaaS product's interactive demo and FAQ section