Joshua-Ochiba/SOIL

A cinematic cultural platform celebrating Indigenous African identity — built with React, Vite, Supabase & Stripe. # SOIL — Sons & Daughters of the Indigenous Land > *A cinematic, immersive web experience celebrating Indigenous African identity, culture, and artistry.* --- ## 🌐 Live Demo **soil-jet.vercel.app** --- ## About This Project SOIL is a full-stack cultural platform and e-commerce site built for a client in the African creative industry. The platform blends cinematic storytelling with a fully functional online studio — combining scroll-driven canvas experiences, real-time 3D, immersive page transitions, and a live Supabase-powered shop with real payment processing. **This repo is my personal portfolio snapshot of the project.** The original collaborative repository lives at chibbss/SOIL-v1. --- ## Screenshots | | | |---|---| | | | | *Homepage — cinematic hero with sacred glyph title* | *Scroll experience — canvas frame sequence mid-scrub* | | | | |---|---| | | | | *Studio — cultural e-commerce store* | *Cultivate — living network ecosystem view* | **Dual theme system** — the same page in cinematic dark and archival-parchment light: | | | |---|---| | | | | *Intelligence — cinematic dark (default)* | *Intelligence — archival light mode: parchment, bronze rules, engraved watermark numerals* | | | |---| | | | *Mobile responsive layout* | --- ## Engineering Highlights The three pieces of this build I'm most proud of — each solved a problem that had no off-the-shelf answer. ### 🦅 Scroll-Driven Canvas Frame Sequence The homepage hero scrubs a **192-frame WebP sequence** through an eagle's flight and landing, driven entirely by scroll position. - Replaced a ` `-scrubbing approach (which stutters badly, since seeking forces decode from the nearest keyframe) with a **canvas image-sequence pipeline** — every frame is independently addressable, so scrubbing backwards is as cheap as forwards. - **Decode pre-pass:** frames are decoded via `img.decode()` *before* the canvas ever draws them, moving decode cost off the scroll critical path — othe …