blendpixel.mp4

What it is

The landing site for my products: Orbit, Retina, and Listval.

Built with React 19, Tailwind, and Motion. Open source so you can study it, fork it, or build your own.

Prerequisites

You'll need version 20 or higher. Check with node --version in your terminal (Terminal on Mac, Command Prompt on Windows). If you see something like v20.x.x, you're set.

Run locally

1. Fork this repo. Click the Fork button at the top right of this page. GitHub creates a copy of the repo under your own account.

2. Clone your fork. On your fork's page, click the green Code button and copy the HTTPS URL. Then in your terminal:

   git clone <paste-the-URL-here>
   cd <repo-name>

3. Install dependencies:

   npm install

4. Start the dev server:

   npm run dev

5. Open in your browser. Any changes you make to the code show up instantly.

What's in here

• src/pages/Home.tsx: three-folder product landing
• src/pages/Retina.tsx: Retina product page with the logo-morph animation and FAQ
• src/pages/RetinaTerms.tsx: Retina terms of service
• src/components/Folder/: animated folder component used on the homepage
• src/components/RetinaDemo.tsx: interactive demo on the Retina page
• public/: assets referenced by the pages above

Licensing

Code is MIT-licensed (see ).

The names BlendPixel, Retina, Orbit, and Listval and their associated logos are not licensed under MIT. Forks must use their own name and branding.