DEV Community

Cover image for How to Build Lasting Change
Cije-Sanchez
Cije-Sanchez

Posted on

How to Build Lasting Change

This is a submission for the GitHub Copilot Challenge : Transitions and Transformations

What I Built

"How to Build Lasting Change" is an interactive Three.js visualizer inspired by the widely popular Kurzgesagt video, "Change Your Life – One Tiny Step at a Time" on YouTube. The video delves into the science behind habits, explaining how routines form and how small, consistent changes can lead to lasting personal growth. It offers practical tips for creating and sustaining new habits while addressing the challenges of change.

The visualizer complements the video’s audio by showcasing a mesmerizing morphing sphere that evolves in real-time as the narration progresses.

Why I Built It

The purpose of this visualizer is to create a more immersive experience by combining visual and auditory stimuli. Visual elements add an additional layer of engagement, helping to maintain focus and reducing the chances of the mind wandering.

I aim to mirror Kurzgesagt’s mission of empowering individuals to understand and embrace the psychology of habit formation. This project aspires to motivate users to take small, actionable steps toward sustainable self-improvement while demystifying the process of change.

Demo

Check out the How to Build Lasting Change demo here.

This current deployment plays the Kurzgesagt video, but you can easily modify it to integrate your own content by following the provided guide in the repository.

Repo

"How to Build Lasting Change" is a dynamic Three.js visualizer inspired by the highly acclaimed Kurzgesagt video, "Change Your Life – One Tiny Step at a Time" on YouTube.

  1. Clone the repository to your local machine.
  2. Open the project folder in Visual Studio Code.
  3. Launch the terminal and run: npm install.
  4. Start the app by executing: npx parcel ./src/index.html.
  5. Ctrl + click the server link (e.g., "http://localhost:1234") to view the app in your browser.
  6. Enjoy exploring and experimenting!



Copilot Experience

GitHub’s AI tools were instrumental in developing this project:

  • Autocomplete: Assisted with Three.js syntax for creating and animating the sphere.
  • Copilot Chat: Helped brainstorm creative approaches to morph the sphere in meaningful and visually appealing ways.
  • Inline Chat: Generated much of the markup, styling, and Three.js code, streamlining the development process.

Screenshots

Image description

Image description

Conclusion

By leveraging GitHub’s AI tools, I was able to fast-track development and focus on the core concept. My visualizer aims to motivate users to take actionable steps towards self-improvement 😊.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay