Since 2010, an estimated 129 million trees have died in California’s national forests due to conditions caused by climate change, unprecedented drought, bark beetle infestation, and high tree densities. Realizing the high mortality rate of trees, we wanted to build a platform that allows the public to build an intimate relationship with trees and the environment.

We took the inspiration from "This Website Will Self Destruct", a fourth-wall-breaking website that was covered by The Verge. We leverage the personification of a withering tree to emphasize the urgency of climate change and dramatize it with looming, pressing, and tangible visual as well as psychological imagery.

What it does

We built a platform where users are encouraged to talk to a virtual tree. If the tree goes 12 hours without receiving a message, it will wither -- as a result of low public attention. We focused on artistic design and animation to summon a mindful experience for the users.

  • (homepage)
    • Imagery and mindfulness into practice.
      • Countdown to convey urgency
      • Gently revolving tree brings about exuberance
    • Data-driven modal with WebGL to reflect its state
      • Since we have access to its vertices, we can animate the tree per its remaining life.
      • When the countdown goes to zero, the tree withers, and the server executes scripts to stop the service and drop the database.
    • How to stop the tree from withering?
      • Visitors are encouraged to talk to the tree and express their care and respect for the tree, although they can express more personal feelings. We believe by doing so, we are nudging the users to turn their speech acts into action — that is, real-world practices to care for trees.
      • Once a visitor talks to The Tree, the server updates the database and it resets its countdown.
      • Also note, we aim to minimize any disturbance in the user tree interaction. Hence, we don’t keep the users' identities on the record.
  • (view messages)
    • After the user clicked “send”, they are pushed to a unique page where they save share and the link or proceed to browse others’ messages.
    • Note here the rendering of messages supports markdown syntax. This leaves more freedom to the users since images, links, tables, etc, are made possible.
    • In the communication study of climate change, we learned that that the best way to counter denialism has been to foster discourse communities. This is why we added features to allow users to read others peoples’ talks with the tree.
    • By clicking the “Read a Message” button, users can view other visitors’ messages to the tree, and since the contents are created by users, we think they will have a fun time exploring people's diversity of thoughts.
    • Also, we have a dedicated page for browsing the latest posts, where visitors’ messages are made more explicit. You sure can click on them to navigate around.
  • (impact features)
    • We want to maximize the impact of this project, so we have some additional features.
    • We utilized a carefully engineered server-side rendering engine, which optimizes for Search Engines like google. This will introduce our web page to more potential visitors.
    • We have social media sharing, which allows users to introduce The tree to their friends, and so more people will join.
    • We optimized for mobile, tablet, as well as desktop viewports. All of them are gorgeous in terms of design.
    • We have an Augmented Reality model export. This allows users to admire our beautiful Computer Graphics artifact (aka the tree) in reality!

How we built it

We used WebGL, Typescript, React, PostgreSQL, Prisma, tailwindcss, and more.

What's next for The Tree

  • Better 3D design for the tree.
  • Natural language understanding on the tree side.
  • Easier AR model support.

Built With

Share this project: