gitmyhub

blendpixel.com

TypeScript ★ 34 updated 26d ago

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.

TypeScriptReactViteTailwind CSSMotionsetup: easycomplexity 2/5

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