ARBORIA

Arboria is a modern, interactive eco-brutalist web application designed to accelerate global reforestation and community-driven tree planting.

Comment

Inspiration 🌿

Environmental initiatives often suffer from dull, outdated web experiences. Inspired by high-craft portfolio websites like Run Rob Run, Arboria was built to merge dark eco-brutalist design, kinetic typography, and immersive ambient micro-interactions with real-world climate action. We wanted to prove that tree plantation platforms can feel like cutting-edge digital experiences.

What it does 🌍

Arboria is an interactive tree plantation network and climate ecosystem engine that empowers individuals and organizations to adopt saplings, explore indigenous tree species, and participate in community reforestation drives:

  • Canopy Species Carousel: A 3D interactive showcase displaying native tree species (English Oak, Sacred Banyan, Coast Redwood, Indian Neem, Wild Cherry, African Baobab) complete with annual CO₂ absorption ratings, lifespan, survival rates, and soil compatibility.
  • RunRobRun-Style Motion & Visuals: Features a pixel grid curtain transition on load/navigation, a custom glowing orb cursor with dynamic scale inertia, and an ambient nature sound player (Rainfall, Woodland Birds, River Flow) with animated frequency equalizer bars.
  • Impact Metrics & Activity Stream: Real-time counter cards tracking saplings planted, estimated carbon offset, hectares reforested, and a live community activity feed.
  • Reforestation Events: Filterable plantation drives (Live Now, Upcoming, Completed) with target progress bars and quick event registration.

- Formspree Integration: Contact inquiries and tree adoption requests submit directly to Formspree (https://formspree.io/f/xeajbqdd) with zero backend overhead.

Mathematical Carbon Sequestration Model 🧮

To estimate total carbon dioxide sequestration across diverse tree species, Arboria models long-term biomass accumulation using the formula: [ C_{\text{total}} = \sum_{i=1}^{n} \Big( N_i \cdot \alpha_i \cdot t \cdot \beta_{\text{survival}} \Big) ] Where:

  • (N_i) is the number of saplings planted for species (i)
  • (\alpha_i) is the annual CO₂ sequestration rate per tree in (\text{kg/year})
  • (t) is the growth time horizon in years ((t = 25))
  • (\beta_{\text{survival}}) is the verified biome survival probability factor ((\beta_{\text{survival}} \approx 0.92)) For instance, adopting 10 Coast Redwoods ((\alpha = 45\,\text{kg/yr})) yields an estimated sequestration of: [ C = 10 \times 45\,\text{kg/yr} \times 25\,\text{yr} \times 0.92 = 10,350\,\text{kg CO}_2 \approx 10.35\,\text{Metric Tons} ] --- ## How we built it ⚡
  • Frontend Architecture: Pure Semantic HTML5, CSS3, and Vanilla JavaScript (ES6+) with zero build tools or framework overhead.
  • Styling & Motion: Custom CSS grid keyframe animations, glassmorphism backdrop filters, custom cursor tracking, and SVG fractal noise overlays.
  • Iconography & Audio: Lucide Icons CDN and Google Actions Nature Audio datasets.
  • Forms & Submissions: Formspree API endpoint integration.

- Deployment: Instant static hosting via GitHub Pages.

Challenges we faced 🛠️

  • Frameworkless Animations: Implementing complex UI physics—such as lagging cursor orb inertia and pixelated grid curtain transitions—using pure CSS and Vanilla JS without heavy external animation libraries.
  • Responsive 3D Layouts: Designing a 3D spotlight card carousel that looks stunning across mobile, tablet, and ultra-wide screens while retaining 60 FPS performance.

- Cross-Browser Audio Handling: Ensuring ambient nature audio toggles smoothly despite browser auto-play policies.

What we learned 💡

  • How to achieve high-craft eco-brutalist aesthetics using pure CSS custom properties and SVG noise filters.
  • The power of zero-dependency Vanilla JavaScript for building fast, responsive, and maintainable web applications.

- Mathematical carbon modeling for urban and forest reforestation tracking.

What's next for Arboria 🚀

  • Satellite Geo-Tagging: Live integration with satellite APIs to provide tree adopters with real-time drone and satellite imagery of their growing saplings.
  • Corporate CSR Leaderboards: Dedicated dashboards for enterprise teams to compete in seasonal planting drives.
  • Web3 Tree Certification: Minting verifiable proof-of-planting certificates on eco-friendly blockchain networks.

Built With

Share this project:

Updates

Submission history