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 😊.

Billboard image

The fastest way to detect downtimes

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitoring.

Get started now

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

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

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay