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 Cije-Sanchez / how-to-change "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. Clone the repository to your local machine. Open the project folder in Visual Studio Code. Launch the terminal and run: npm install. Start the app by executing: npx parcel ./src/index.html. Ctrl + click the server link (e.g., "http://localhost:1234") to view the app in your browser. Enjoy exploring and experimenting! View on GitHub 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 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
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.
- Clone the repository to your local machine.
- Open the project folder in Visual Studio Code.
- Launch the terminal and run:
npm install. - Start the app by executing:
npx parcel ./src/index.html. - Ctrl + click the server link (e.g., "http://localhost:1234") to view the app in your browser.
- 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
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
