PulsarOS Bitten Fruit – Apple-Inspired Landing Page

The landing page for PulsarOS Bitten Fruit, a Linux distribution that replicates the macOS experience. Built to feel like an Apple product page — clean animations, deliberate typography, scroll-driven storytelling — while being a fully open-source project for the PulsarOS community.

Table of Contents

• Overview
  • The Challenge
  • Screenshots
  • Links
• My Process
  • My Role
  • Built With
  • What I Learned

Overview

The Challenge

PulsarOS needed a landing page that matched the quality of the product itself — a Linux distro designed to feel like macOS. The existing pages didn't capture the Apple-level polish the project deserved. The goal: build a page that feels like apple.com, with scroll-driven narratives, smooth GSAP animations, and a design system that communicates premium quality for an open-source product.

Key requirements:

• Apple-inspired design language — hero video, feature storytelling sections, edition comparisons, and a clean FAQ.
• Performance-first — Astro's partial hydration means zero client JS where possible, with GSAP only where animations add value.
• SEO & accessibility — semantic HTML, sitemap generation, Open Graph tags, and WCAG-compliant contrast ratios.
• AI-assisted workflow — used opencode as a dev accelerator and a design.md file to keep AI-generated code aligned with the project's visual language.

Screenshots

Links

• Live Site: bittenfruit.inled.es
• GitHub: Inled-Pulsar-OS/bittenfruit

My Process

My Role

I served as the tech lead and principal developer, owning the landing page from concept to deployment. My focus:

• Design system — established the visual language using a design.md file that served as the single source of truth for spacing, typography, color tokens, and component patterns. This kept both human and AI-generated code consistent.
• Architecture — set up the Astro project with Tailwind CSS v4, GSAP for scroll-driven animations, and TypeScript strict mode. Structured the codebase for easy iteration.
• Animation & UX — implemented the scroll-triggered feature sections, hero video integration, and micro-interactions that give the page its Apple-like feel.
• SEO & performance — integrated @astrojs/sitemap, Open Graph meta tags, semantic HTML structure, and lazy-loaded media. The page scores high on Lighthouse with minimal client-side JS.
• AI-assisted development — used opocode as a pair programmer, feeding it the design.md constraints and Reddit-sourced best practices for SEO and accessibility to accelerate implementation without sacrificing quality.

Built With

• Astro — static site generation with partial hydration
• TypeScript — strict mode for type safety
• Tailwind CSS v4 — utility-first styling with the new Vite plugin
• GSAP — scroll-triggered animations and timeline sequences
• Lucide Icons — consistent icon system
• Sitemap — automatic sitemap generation for SEO
• AI-assisted development via opencode

What I Learned

Building an Apple-quality landing page taught me that design constraints accelerate development — the design.md file became the project's backbone, making every decision (human or AI) consistent. I deepened my understanding of GSAP ScrollTrigger for scroll-driven narratives and learned how Astro's architecture naturally produces performant pages without runtime overhead. The biggest takeaway: open-source projects deserve the same design attention as commercial products, and a well-structured design.md makes that achievable even with AI-assisted workflows.